by
Mar 17. 2017
#09. 카드 UI 인터랙션
인터랙션 트랜드 깊이 파고 들기
UX 컨설턴트 전민수입니다.
홀릭스에 (무료) UI/UX 아티클 백과사전 클럽을 만들었습니다.
매일 하루에 40-50개 이상 어제 업데이트된 해외/국내 따끗따끗한 아티클을 해시태그로 묶고 있습니다.
여러분이 필요할 때 해시태그로 쉽게 검색할 수 있어 언제든지 꺼내 볼 수 있습니다.
제가 운영하는 (무료) 홀릭스 클럽 방문해 주세요~
https://app.holix.com/chatroom/JdgDpRgo
카드 UI 인터랙션
카드 UI 인터랙션
카드 스크롤 방식 UI 패턴
카드 스와이프 방식 UI 패턴
스와이프과 스크롤 방식 혼합
카드 인터랙션 방식 UI 패턴
컨텍스트 기반 카드 방식
카드 목록에서 콘텐츠 연계 방식 UI 패턴
본문 페이지 카드 UI
카드 스크롤 방식 UI 패턴
1. 스크롤 탐색 방식
출처: dribbble.com2. 스크롤 시 이전 카드 목록 조금 축소
출처: dribbble.com카드 스와이프 방식 UI 패턴
1. 스와이핑 시 모션 UI
출처: dribbble.com2. 액션 버튼 선택에 따른 스와이핑 UI
출처: dribbble.com
출처: dribbble.com3. 카드 선별 UI
출처: dribbble.com4. 현재 보고 있는 카드 목록 상태 알림(넘버링)
출처: dribbble.com5. 현재 보고 있는 카드 목록 상태 알림(프로그레스바)
출처: dribbble.com
출처: dribbble.com스와이프과 스크롤 방식 혼합
출처: dribbble.com카드 인터랙션 방식 UI 패턴
1. 카드 계단식 UI
출처: dribbble.com
출처: dribbble.com
출처: dribbble.com
출처: dribbble.com2. 카드 넘기기 UI
출처: dribbble.com
출처: dribbble.com
출처: dribbble.com
출처: dribbble.com3. 카드 입체 방식 UI
출처: dribbble.com
출처: dribbble.com
출처: dribbble.com
출처: dribbble.com
출처: dribbble.com
출처: dribbble.com4. 카드 방사형 UI
출처: dribbble.com컨텍스트 기반 카드 방식
출처: dribbble.com카드 목록에서 콘텐츠 연계 방식 UI 패턴
1. 요약 정보 살짝 보여주기
출처: dribbble.com
출처: dribbble.com
출처: dribbble.com2. 요약 정보 살짝 보여주고 콘텐츠 연계
출처: dribbble.com3. 카드목록에서 바로 콘텐츠 연계
출처: dribbble.com
출처: dribbble.com
출처: dribbble.com
출처: dribbble.com본문 페이지 카드 UI 방식
출처: dribbble.com전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
