From Design pattern
Jump to: navigation, search
Line 91: Line 91:
 
===Target Video Game Catalog ===
 
===Target Video Game Catalog ===
 
*아래 영상의 0초 ~ 18초에 해당한다.
 
*아래 영상의 0초 ~ 18초에 해당한다.
{{#Widget:Vimeo|id=23893504|width=665|height=374}}
+
{{#Widget:Vimeo|id=23893504|width=533|height=300}}
  
 
=== Touch kiosk EE ===
 
=== Touch kiosk EE ===
 
* 아래 영상의 12초 ~ 15초에 해당한다.
 
* 아래 영상의 12초 ~ 15초에 해당한다.
 
{{#Widget:Vimeo|id=84570507|width=533|height=300}}
 
{{#Widget:Vimeo|id=84570507|width=533|height=300}}
</div>
+
 
 +
=== Silverlight 4 Halo App store ===
 +
<videoflash>UoNr_xjGvic|665|374</videoflash>
 +
 
 
----
 
----
 
*관련 패턴 [[Carousel by gesture]]
 
*관련 패턴 [[Carousel by gesture]]
  
 
[[Category:Move in same level]]
 
[[Category:Move in same level]]

Revision as of 22:08, 28 May 2014

Carousel은 여러 개의 컨텐츠가 일렬로 나열되어 있으면서 한쪽 끝(첫번째 컨텐츠)가 다른쪽 끝(마지막)과 맞닿아있는 원형 구조로 되어진 컨텐츠 리스트 pattern이다. 리스트가 움직이는 양방향 중 어느 쪽이든 상관없이 swipe하여 목록을 넘겨볼 수 있으며, 끊임없이 회전이 가능하다. 항목이 회전목마처럼 돌아가듯 보여져 Carousel이라고 부른다.

Carousel의 컨텐츠 리스트는 주로 썸네일 이미지로 이루어져 있으며, 중심에 위치한 컨텐츠 항목을 주변 항목보다 큰 사이즈로 구성하여 강조할 수도 있다.

With this pattern, we can solve....

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

  • 리스트을 넘기는 과정에서 더 동적이고 매력적으로 보이게 한다.
  • Carousel은 전후의 컨텐츠로 이동할 때, 전후의 컨텐츠를 동시에 표시해 연속적인 느낌을 준다.
  • 리스트 중심에 있는 컨텐츠가 강조되어 보이더라도, 리스트에 끝이 존재하여 첫번째와 마지막 컨텐츠가 구분될 경우는 Slide project tray로, Carousel에는 해당하지 않는다.

Example : iOS_App store


Horizontal

iOS_ Nigellissima

iOS_ Swallet

iOS_iCarousel

Citi Performing Arts Center, Wang Theatre Touch Screen Information Kiosk

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

Target Video Game Catalog

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

Touch kiosk EE

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

Silverlight 4 Halo App store