From Design pattern
Jump to: navigation, search
Line 66: Line 66:
  
 
* 목록을 넘기는 과정에서 더 동적이고 매력적으로 보이게 한다.
 
* 목록을 넘기는 과정에서 더 동적이고 매력적으로 보이게 한다.
 +
=== Example : IOS_App store <!--565번 사례--> ===
 +
<!--* 화면을 드래그하여 캐로셀 형태로 그림을 돌려본다.-->
 +
<videoflash type="vimeo">93933788|533|395</videoflash>
 
----
 
----
 
== Horizontal ==
 
== Horizontal ==
 
항목이 회전목마처럼 가로로 돌아가며 보여진다.
 
항목이 회전목마처럼 가로로 돌아가며 보여진다.
  
=== Example : IOS_App store ===
+
=== (389번 사례) ===
* 화면을 드래그하여 캐로셀 형태로 그림을 돌려본다.
+
<videoflash type="vimeo">93933788|533|395</videoflash>
+
 
+
=== Example : 389번 사례 ===
+
 
* 대형 터치스크린에서 화면을 drag 하여 가로로 나열된 항목을 둘러본다.
 
* 대형 터치스크린에서 화면을 drag 하여 가로로 나열된 항목을 둘러본다.
 
* 단, 아래 영상의 15초 ~ 18초에 해당한다.
 
* 단, 아래 영상의 15초 ~ 18초에 해당한다.
Line 87: Line 86:
 
항목이 대관람차처럼 돌아가며 보여진다.
 
항목이 대관람차처럼 돌아가며 보여진다.
  
=== Example : IOS_showcase <!--415번 사례--> ===
+
=== IOS_showcase <!--415번 사례--> ===
 
* 메뉴를 swipe 하면 관람차가 돌듯이 메뉴를 회전시켜 둘러 볼 수 있다.
 
* 메뉴를 swipe 하면 관람차가 돌듯이 메뉴를 회전시켜 둘러 볼 수 있다.
 
<videoflash type="vimeo">93552806|300|533</videoflash>
 
<videoflash type="vimeo">93552806|300|533</videoflash>
  
=== 347번 사례 ===
+
=== IOS_Endless Numbers <!--347번 사례--> ===
 
* 1부터 25까지의 목록이 큰 원 모양으로 배열되어 한바퀴 돌면 다시 반복되며, 좌우로 swipe하여 가로에 비슷하게 목록을 움직인다.
 
* 1부터 25까지의 목록이 큰 원 모양으로 배열되어 한바퀴 돌면 다시 반복되며, 좌우로 swipe하여 가로에 비슷하게 목록을 움직인다.
 
<videoflash type="vimeo">93045993|533|395</videoflash>
 
<videoflash type="vimeo">93045993|533|395</videoflash>
  
 
[[Category:Move in same level]]
 
[[Category:Move in same level]]

Revision as of 22:13, 23 May 2014

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

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

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

What Problem Does This Solve?

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

Example : IOS_App store


Horizontal

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

(389번 사례)

  • 대형 터치스크린에서 화면을 drag 하여 가로로 나열된 항목을 둘러본다.
  • 단, 아래 영상의 15초 ~ 18초에 해당한다.

Vertical

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


Ferris wheel

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

IOS_showcase

  • 메뉴를 swipe 하면 관람차가 돌듯이 메뉴를 회전시켜 둘러 볼 수 있다.

IOS_Endless Numbers

  • 1부터 25까지의 목록이 큰 원 모양으로 배열되어 한바퀴 돌면 다시 반복되며, 좌우로 swipe하여 가로에 비슷하게 목록을 움직인다.