From Design pattern
Jump to: navigation, search
 
(30 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
{{#css:
+
Carousel by gesture는 마치 회전목마처럼 원형구조로 연결된 컨텐츠를 swipe touch가 아닌 gesture로 조작하는 인터랙션 패턴이다. 컨텐츠의 양쪽끝이 일렬로 연결된 원형구조인 점, 중앙의 컨텐츠가 주변 항목모다 크게 강조되는 점, 그리고 컨텐츠리스트가 썸네일 이미지로 구성되는 것이 특징은 Carousel과 동일하며, touch를 하지 않기 때문에 화면을 가리지 않는다는 점에서 차이가 있다.
−
#mw-content-text h3 span {
+
−
font-weight: 600;
+
−
padding-left: 0px;
+
−
}
+
  
−
.mw-headline {
+
===With this pattern, we can solve...===
−
font-weight: 600;
+
Touch를 하는 경우 기기의 일부가 사용자의 손으로 가려지게 되는데 이러한 단점을 보완한다. 또한 가정이나 공공장소에 다른 사람과 함께 보는 화면을 위한 새로운 인터랙션 패턴이 필요하다. Carousel by gesture는 변화하는 인터랙션 환경에서 효과적으로 사용할 수 있다.
−
}
+
  
−
span.mw-editsection {
+
* Carousel by gesture는 gesture를 이용하여 기기와 일정 거리가 떨어져 있어서 직관적으로 컨텐츠 리스트를 둘러 볼 수 있도록 한다.
−
font-weight: 200;
+
* Carousel by gesture는 조작을 하면서 전후 컨텐츠가 썸네일을 더 빨리 볼 수 있어, 전체 컨텐츠를 파악하는데 더욱 효과적이며, 여러 사람이 같이 보는 상황에서 다른 사람의 시선을 방해하지 않는다.
−
position: relative;
+
* 유사한 패턴으로는 원형의 대관람차 모양의 [[Ferris wheel]]과 슬라이드 영상기를 상영하는 듯한 느낌의 [[Slide project tray]]가 있다. Ferris wheel은 같은 원형구조이나 원형의 방향과 중앙 컨텐츠의 개념이 상대적으로 약하며, Slide project tray는 컨텐츠의 시작과 끝이 존재하는 점에서 [[Carousel]]방식과는 구분된다.
−
float:right;
+
−
margin-right: 25px
+
−
}
+
  
−
span.mw-editsection a {
+
=== Example : Strafwerk Head Tracking Promo ===
−
font-weight: 200;
+
[[File:Strafwerk Head Tracking Promo Gesture carousel.PNG]]
−
}
+
−
 
+
−
.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 by gesture는 여러 개의 콘텐츠가 일렬로 나열되어 있으면서 한쪽 끝(첫번째 콘텐츠)가 다른쪽 끝(마지막)과 맞닿아있는 원형 구조로 되어진 리스트 pattern이다. gesture를 통해서 리스트가 움직이는 양방향 중 어느 쪽이든 상관없이 swipe하여 목록을 넘겨볼 수 있으며, 끊임없이 회전이 가능하다. 항목이 회전목마처럼 돌아가듯 보여져 Carousel이라고 부른다.
+
−
 
+
−
Carousel by gesture의 리스트는 주로 썸네일 이미지로 이루어져 있으며, 중심에 위치한 콘텐츠 항목을 주변 항목보다 큰 사이즈로 구성하여 강조할 수도 있다.
+
−
 
+
−
=== What Problem Does This Solve? ===
+
−
touch를 이용한 기기에서 touch를 하는 부분은 컨텐츠가 가려지게 되고, 사용자가 touch를 할 수 없는 경우가 발생할 때 사용할 수 없는 단점을 해결하기 위하여 gesture를 이용하였다.
+
−
 
+
−
사용자가 콘텐츠를 선택하는 과정에서 대표 이미지를 목록에서 함께 보여주어야 하는 경우에 주로 사용한다. 한 번에 모든 항목을 수용하기에 화면 공간이 부족할 수 있기 때문에, 공간을 효율적으로 사용하면서 어려움 없이 직관적으로 넘겨볼 수 있도록 한다.
+
−
 
+
−
* 목록을 넘기는 과정에서 더 동적이고 매력적으로 보이게 한다.
+
−
 
+
−
* 리스트 중심에 있는 콘텐츠가 강조되어 보이더라도, 리스트에 끝이 존재하여 첫번째와 마지막 콘텐츠가 구분될 경우는 Rail로, Carousel에는 해당하지 않는다.
+
−
 
+
−
=== Example : iOS_App store ===
+
−
{{#Widget:Vimeo|id=93933788|width=533|height=395}}
+
  
 
----
 
----
−
 
+
=== Strafwerk Head Tracking Promo ===
−
== Horizontal ==
+
* #00:00-00:15
−
<div id="sun-col">
+
{{#Widget:Youtube|id=PHUVGRi8-M8|width=665|height=374}}
  
 
=== Gesture recognition with Leap Motion using IntuiFace ===
 
=== Gesture recognition with Leap Motion using IntuiFace ===
−
* 단, 아래 영상의 0초-10초에 해당한다.
+
* #00:00-00:10
−
<videoflash>TuBcLbklH5I|665|499</videoflash>
+
{{#Widget:Youtube|id=TuBcLbklH5I|width=665|height=374}}
  
−
=== Strafwerk Head Tracking Promo ===
+
=== Ultrasound Gesture Controls by Qualcomm at UpLinq China 2011 ===
−
* 단, 아래 영상의 0초-15초에 해당한다.
+
* #00:33-00:52
−
<videoflash>PHUVGRi8-M8|665|499</videoflash>
+
{{#Widget:Youtube|id=CW-CF7Z68PA|width=665|height=374}}
  
−
</div>
+
=== ETRONIKA Kinect Banking App Video ===
−
----
+
* #00:17-00:24
−
== Ferris wheel ==
+
{{#Widget:Youtube|id=TEnFhyOIlVA|width=665|height=374}}
−
<div id="sun-col">
+
  
−
</div>
+
=== SoundWave: Using the Doppler Effect to Sense Gestures ===
 +
* 손의 상/하 좌/우 움직임을 소리의 움직임으로 인식하여 스피커로 인지된 소리를 통해 이동한다.
 +
* #01:45-01:52
 +
{{#Widget:Youtube|id=rFM59B3tYI4|width=665|height=374}}
  
−
[[Category:Move in same level]]
+
[[Category:Move through contents]]

Latest revision as of 21:37, 17 September 2014

Carousel by gesture는 마치 회전목마처럼 원형구조로 연결된 컨텐츠를 swipe touch가 아닌 gesture로 조작하는 인터랙션 패턴이다. 컨텐츠의 양쪽끝이 일렬로 연결된 원형구조인 점, 중앙의 컨텐츠가 주변 항목모다 크게 강조되는 점, 그리고 컨텐츠리스트가 썸네일 이미지로 구성되는 것이 특징은 Carousel과 동일하며, touch를 하지 않기 때문에 화면을 가리지 않는다는 점에서 차이가 있다.

With this pattern, we can solve...

Touch를 하는 경우 기기의 일부가 사용자의 손으로 가려지게 되는데 이러한 단점을 보완한다. 또한 가정이나 공공장소에 다른 사람과 함께 보는 화면을 위한 새로운 인터랙션 패턴이 필요하다. Carousel by gesture는 변화하는 인터랙션 환경에서 효과적으로 사용할 수 있다.

  • Carousel by gesture는 gesture를 이용하여 기기와 일정 거리가 떨어져 있어서 직관적으로 컨텐츠 리스트를 둘러 볼 수 있도록 한다.
  • Carousel by gesture는 조작을 하면서 전후 컨텐츠가 썸네일을 더 빨리 볼 수 있어, 전체 컨텐츠를 파악하는데 더욱 효과적이며, 여러 사람이 같이 보는 상황에서 다른 사람의 시선을 방해하지 않는다.
  • 유사한 패턴으로는 원형의 대관람차 모양의 Ferris wheel과 슬라이드 영상기를 상영하는 듯한 느낌의 Slide project tray가 있다. Ferris wheel은 같은 원형구조이나 원형의 방향과 중앙 컨텐츠의 개념이 상대적으로 약하며, Slide project tray는 컨텐츠의 시작과 끝이 존재하는 점에서 Carousel방식과는 구분된다.

Example : Strafwerk Head Tracking Promo

Strafwerk Head Tracking Promo Gesture carousel.PNG

Strafwerk Head Tracking Promo

  • #00:00-00:15

""

Gesture recognition with Leap Motion using IntuiFace

  • #00:00-00:10

""

Ultrasound Gesture Controls by Qualcomm at UpLinq China 2011

  • #00:33-00:52

""

ETRONIKA Kinect Banking App Video

  • #00:17-00:24

""

SoundWave: Using the Doppler Effect to Sense Gestures

  • 손의 상/하 좌/우 움직임을 소리의 움직임으로 인식하여 스피커로 인지된 소리를 통해 이동한다.
  • #01:45-01:52

""

Retrieved from "http://www.ixpatterns.com/index.php?title=Carousel_by_gesture&oldid=109660"