Difference between revisions of "Carousel"

Latest revision as of 21:36, 17 September 2014

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

음악앨범이나 이미지를 보는 전체 화면 Carousel과 앱스토어나 온라인 쇼핑몰등에서 대표상품을 진열하는 방식으로 화면 상단에 위치하는 Carousel로 구분할 수 있다. 변형된 방식으로는 전후의 이미지가 보여지 않는 page 보기 중심의 Carousel이 있다.

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

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

Example : iOS_ Swallet

전체화면

Target Video Game Catalog

#00:00-00:18

상단화면

iOS_ Swallet

iOS_App store

Silverlight 4 Halo App store

""

Touch kiosk EE

#00:12-00:15

Citi Performing Arts Center, Wang Theatre Touch Screen Information Kiosk

#00:15-00:18

Page 보기

iOS_ Nigellissima

iOS_Podcasts App

""

@@ Line 1: / Line 1: @@
-{{#css:
-#mw-content-text h3 span {
-font-weight: 600;
-padding-left: 0px;
-}
-.mw-headline {
-font-weight: 600;
-}
-span.mw-editsection {
-font-weight: 200;
-position: relative;
-float:right;
-margin-right: 25px
-}
-span.mw-editsection a {
-font-weight: 200;
-}
-.art-subpage {
-background: #F7F7F7;
-}
-#mw-content-text p {
-padding-top: 0px;
-padding-bottom: 6px;
-}
-.mw-content-ltr ul {
-margin: 0.3em 0 0 42px;
-}
-hr {
-margin-top: 0px;
-margin-bottom: 0px;
-margin-left: -31px;
-width: 720px;
-border-bottom: 1px solid #E0E0DD;
-border-left: 0px;
-border-right: 0px;
-border-top: 30px solid #F7F7F7;
-}
-<!--
-#sun-col {
--webkit-column-count:2; /* Chrome, Safari, Opera */
--moz-column-count:2; /* Firefox */
-column-count:2;
-}
-#sun-col p {
-padding-left: 0px;
--->
-}
-}}
 Carousel은 마치 회전목마처럼 원형구조로 연결된 컨텐츠를 swipe를 통해 찾아볼 수 있는 인터랙션 패턴이다. 컨텐츠의 양쪽끝이 일렬로 연결된 원형구조인 점, 중앙의 컨텐츠가 주변 항목모다 크게 강조되는 점, 그리고 컨텐츠리스트가 썸네일 이미지로 구성되는 것이 특징이다. 주로 유사한 성격의 컨텐츠, 앱 간을 이동할 때 사용된다.
-음악앨범이나 이미지를 보는 전체 화면 Carousel과 앱스토어나 온라인 쇼핑몰등에서 대표상품을 진열하는 방식으로 화면 상단에 위치하는 Carousel로 구분할 수 있다. 활용 빈도가 높아 다양한 변형 패턴들이 존재하는데, 전후의 이미지가 보여지 않는 page 보기 중심의 Carousel, 원형으로 연결되지 않는 Carousel과 같은 변형된 패턴도 존재한다.
+음악앨범이나 이미지를 보는 전체 화면 Carousel과 앱스토어나 온라인 쇼핑몰등에서 대표상품을 진열하는 방식으로 화면 상단에 위치하는 Carousel로 구분할 수 있다. 변형된 방식으로는 전후의 이미지가 보여지 않는 page 보기 중심의 Carousel이 있다.
-===With this pattern, we can solve....===
+===With this pattern, we can solve...===
-사용자가 많은 컨텐츠를 선택하는 과정에서 대표 이미지를 목록을 함께 보여주어야 하는 경우에 주로 사용한다. 컨텐츠가 많은 경우 좁은 화면 공간을 효율적으로 사용하면서, 전후 컨텐츠가 어떤 것인지 썸네일을 통해 쉽게 유추할 수 있고, 조작방법이 직관적인 특징이 있다.
+사용자가 많은 컨텐츠를 선택하는 과정에서 대표 이미지를 목록을 함께 보여주어야 하는 경우에 주로 사용한다. 컨텐츠가 많은 경우 좁은 화면 공간을 효율적으로 사용하면서 전후 컨텐츠가 어떤 것인지 썸네일을 통해 쉽게 유추할 수 있고, 조작방법이 직관적인 특징이 있다.
 * 리스트을 넘기는 과정에서 더 동적이고 매력적으로 보이게 한다.
 * Carousel은 전후의 컨텐츠로 이동할 때, 전후의 컨텐츠를 동시에 표시해 연속적인 느낌을 준다.
-* 유사한 패턴으로는 원형의 대관람차 모양의 Ferris wheel과 슬라이드영상기를 상영하는 듯한 느낌의 Slide project tray가 있다. Ferris wheel은 같은 원형구조이나 원형의 방향과 중앙 컨텐츠의 개념이 상대적으로 약하며, Slide project tray는 컨텐츠의 시작과 끝이 존재하는 점에서 Carousel과는 구분된다.
+* 유사한 패턴으로는 원형의 대관람차 모양의 [[Ferris wheel]]과 슬라이드 영상기를 상영하는 듯한 느낌의 [[Slide project tray]]가 있다. Ferris wheel은 같은 원형구조이나 원형의 방향과 중앙 컨텐츠의 개념이 상대적으로 약하며, Slide project tray는 컨텐츠의 시작과 끝이 존재하는 점에서 Carousel과는 구분된다.
+* Gesture로 조작하는 사례는 [[Carousel by gesture]]에서 볼 수 있다.
-==== 관련 패턴  ====
+=== Example : iOS_ Swallet ===
-* [[Carousel by gesture]]
+[[File:IOS Swallet Carousel.PNG|310px]]
-<div id="sun-col">
-=== Example : iOS_App store ===
-{{#Widget:Vimeo|id=93933788|width=533|height=395}}
 ----
-==Carousel (전체화면)==
-===iOS_iCarousel ===
+== 전체화면 ==
-{{#Widget:Vimeo|id=96500504|width=665|height=374}}
 ===Target Video Game Catalog ===
-*아래 영상의 0초 ~ 18초에 해당한다.
+* #00:00-00:18
 {{#Widget:Vimeo|id=23893504|width=533|height=300}}
 ----
-==Carousel (상단화면) ==
+== 상단화면 ==
 === iOS_ Swallet ===
 {{#Widget:Vimeo|id=96494209|width=300|height=533}}
+=== iOS_App store ===
+{{#Widget:Vimeo|id=93933788|width=533|height=399}}
 === Silverlight 4 Halo App store ===
-<videoflash>UoNr_xjGvic|665|374</videoflash>
+{{#Widget:Youtube|id=UoNr_xjGvic|width=665|height=374}}
 === Touch kiosk EE ===
-* 아래 영상의 12초 ~ 15초에 해당한다.
+* #00:12-00:15
-{{#Widget:Vimeo|id=84570507|width=533|height=300}}
+{{#Widget:Vimeo|id=84570507|width=665|height=374}}
 === Citi Performing Arts Center, Wang Theatre Touch Screen Information Kiosk ===
-* 아래 영상의 15초 ~ 18초에 해당한다.
+* #00:15-00:18
-{{#Widget:Vimeo|id=36790650|width=665|height=374|start=14s}}
+{{#Widget:Vimeo|id=36790650|width=665|height=374}}
 ----
-==Carousel(Page 보기)==
+==Page 보기==
 === iOS_ Nigellissima ===
-{{#Widget:Vimeo|id=96668251|width=533|height=300}}
+{{#Widget:Vimeo|id=96668251|width=665|height=374}}
 === iOS_Podcasts App ===
-<videoflash>qPFw4GkI0Vo|665|374</videoflash>
+{{#Widget:Youtube|id=qPFw4GkI0Vo|width=665|height=374}}
-== Carousel (선형구조)==
-* carousel의 특성인 원형으로 연결되지는 않지만, 앨범보기등에서 많이 활용되는 선형구조의 carousel 느낌의 패턴
-<div id="sun-col">
-=== Android_Tumblr ===
-{{#Widget:Vimeo|id=94621789|width=300|height=541|start=4s}}
-=== iOS_조선일보 ===
-* 신문 요약기사를 가로로 된 형태로 돌려가며 본다.
-{{#Widget:Vimeo|id=93939344|width=533|height=395}}
-=== Android_Play Store===
-{{#Widget:Vimeo|id=93362824|width=300|height=455}}
-=== iOS_IMDB ===
-{{#Widget:Vimeo|id=93044157|width=300|height=400}}
-=== iOS_Picstory ===
-{{#Widget:Vimeo|id=96785532|width=300|height=533}}
-</div>
-----
-[[Category:Move in same level]]
+[[Category:Move through contents]]

Personal tools