Difference between revisions of "Carousel"

Revision as of 22:24, 26 May 2014

여러 개의 콘텐츠가 일렬로 나열되어 있으면서 한쪽 끝(첫번째 콘텐츠)가 다른쪽 끝(마지막)과 맞닿아있는 원형 구조의 리스트이다.

리스트가 움직이는 양방향 중 어느 쪽이든 상관없이 swipe하여 목록을 넘겨볼 수 있으며, 끊임없이 회전이 가능하다. 항목이 회전목마처럼 돌아가듯 보여져 Carousel이라고 부른다.

Carousel 패턴의 리스트는 주로 썸네일 이미지로 이루어져 있으며, 중심에 위치한 콘텐츠 항목이 더 큰 사이즈로 강조되어 보이는 경우가 많다. (리스트 중심에 있는 콘텐츠가 강조되어 보이더라도, 리스트 자체가 반복 회전이 불가능한 경우는 carousel이 아닌 rail 패턴에 속한다.)

What Problem Does This Solve?

• 사용자가 콘텐츠를 선택하는 과정에서 대표 이미지를 목록에서 함께 보여주어야 하는 경우에 주로 사용한다. 한 번에 모든 항목을 수용하기에 화면 공간이 부족할 수 있기 때문에, 공간을 효율적으로 사용하면서도 어려움 없이 직관적으로 넘겨볼 수 있도록 한다.

• 목록을 넘기는 과정에서 더 동적이고 매력적으로 보이게 한다.

Example : IOS_App store

Horizontal

항목이 회전목마처럼 가로로 돌아가며 보여진다.

(389번 사례)

• 아래 영상의 15초 ~ 18초에 해당한다.

Vertical

항목이 세로로 돌아가며 보여진다.

Ferris wheel

항목이 대관람차처럼 돌아가며 보여진다.

IOS_showcase

IOS_Endless Numbers