From Design pattern
Jump to: navigation, search
Line 57: Line 57:
  
 
}}
 
}}
Carousel은 여러 개의 컨텐츠가 일렬로 나열되어 있으면서 한쪽 끝(첫번째 컨텐츠)가 다른쪽 끝(마지막)과 맞닿아있는 원형 구조로 되어진 컨텐츠 리스트 pattern이다. 리스트가 움직이는 양방향 중 어느 쪽이든 상관없이 swipe하여 목록을 넘겨볼 있으며, 끊임없이 회전이 가능하다. 항목이 회전목마처럼 돌아가듯 보여져 Carousel이라고 부른다.
+
Carousel은 마치 회전목마처럼 원형구조로 연결된 컨텐츠를 swipe를 통해 찾아볼 있는 인터랙션 패턴이다. 컨텐츠의 양쪽끝이 일렬로 연결된 원형구조인 점, 중앙의 컨텐츠가 주변 항목모다 크게 강조되는 점, 그리고 컨텐츠리스트가 썸네일 이미지로 구성되는 것이 특징이다. 주로 유사한 성격의 컨텐츠, 앱 간을 이동할 때 사용된다.
  
Carousel의 컨텐츠 리스트는 주로 썸네일 이미지로 이루어져 있으며, 중심에 위치한 컨텐츠 항목을 주변 항목보다 큰 사이즈로 구성하여 강조할 수도 있다.  
+
음악앨범이나 이미지를 보는 전체 화면 Carousel과 부분을 보여주는 Carousel로 구분할 수 있다.
  
 
===With this pattern, we can solve....===
 
===With this pattern, we can solve....===
사용자가 컨텐츠를 선택하는 과정에서 대표 이미지를 목록에서 함께 보여주어야 하는 경우에 주로 사용한다. 한 번에 모든 리스트을 수용하기에 화면 공간이 부족할 수 있기 때문에, 공간을 효율적으로 사용하면서 어려움 없이 직관적으로 넘겨볼 있도록 한다.  
+
사용자가 많은 컨텐츠를 선택하는 과정에서 대표 이미지를 목록을 함께 보여주어야 하는 경우에 주로 사용한다. 컨텐츠가 많은 경우 좁은 화면 공간을 효율적으로 사용하면서, 전후 컨텐츠가 어떤 것인지 썸네일을 통해 쉽게 유추할 있고, 조작방법이 직관적인 특징이 있다.  
  
 
* 리스트을 넘기는 과정에서 더 동적이고 매력적으로 보이게 한다.
 
* 리스트을 넘기는 과정에서 더 동적이고 매력적으로 보이게 한다.
 
* Carousel은 전후의 컨텐츠로 이동할 때, 전후의 컨텐츠를 동시에 표시해 연속적인 느낌을 준다.
 
* Carousel은 전후의 컨텐츠로 이동할 때, 전후의 컨텐츠를 동시에 표시해 연속적인 느낌을 준다.
* 리스트 중심에 있는 컨텐츠가 강조되어 보이더라도, 리스트에 끝이 존재하여 첫번째와 마지막 컨텐츠가 구분될 경우는 Slide project tray로, Carousel에는 해당하지 않는다.
+
* 유사한 패턴으로는 원형의 대관람차 모양의 Ferris wheel과 슬라이드영상기를 상영하는 듯한 느낌의 Slide project tray가 있다. Ferris wheel은 같은 원형구조이나 원형의 방향과 중앙 컨텐츠의 개념이 상대적으로 약하며, Slide project tray는 컨텐츠의 시작과 끝이 존재하는 점에서 Carousel과는 구분된다.
  
 
=== Example : iOS_App store ===
 
=== Example : iOS_App store ===

Revision as of 07:55, 29 May 2014

Carousel은 마치 회전목마처럼 원형구조로 연결된 컨텐츠를 swipe를 통해 찾아볼 수 있는 인터랙션 패턴이다. 컨텐츠의 양쪽끝이 일렬로 연결된 원형구조인 점, 중앙의 컨텐츠가 주변 항목모다 크게 강조되는 점, 그리고 컨텐츠리스트가 썸네일 이미지로 구성되는 것이 특징이다. 주로 유사한 성격의 컨텐츠, 앱 간을 이동할 때 사용된다.

음악앨범이나 이미지를 보는 전체 화면 Carousel과 부분을 보여주는 Carousel로 구분할 수 있다.

With this pattern, we can solve....

사용자가 많은 컨텐츠를 선택하는 과정에서 대표 이미지를 목록을 함께 보여주어야 하는 경우에 주로 사용한다. 컨텐츠가 많은 경우 좁은 화면 공간을 효율적으로 사용하면서, 전후 컨텐츠가 어떤 것인지 썸네일을 통해 쉽게 유추할 수 있고, 조작방법이 직관적인 특징이 있다.

  • 리스트을 넘기는 과정에서 더 동적이고 매력적으로 보이게 한다.
  • Carousel은 전후의 컨텐츠로 이동할 때, 전후의 컨텐츠를 동시에 표시해 연속적인 느낌을 준다.
  • 유사한 패턴으로는 원형의 대관람차 모양의 Ferris wheel과 슬라이드영상기를 상영하는 듯한 느낌의 Slide project tray가 있다. Ferris wheel은 같은 원형구조이나 원형의 방향과 중앙 컨텐츠의 개념이 상대적으로 약하며, Slide project tray는 컨텐츠의 시작과 끝이 존재하는 점에서 Carousel과는 구분된다.

Example : iOS_App store


Image carousel

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


Page carousel

iOS_Podcasts App