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