From Design pattern
Jump to: navigation, search
(→‎Leap Motion _ Web GL Lightroom)
(→‎Rotating hands)
 
(9 intermediate revisions by 2 users not shown)
Line 27: Line 27:
 
* 실제 지구본을 돌려보듯 자연스럽게 화면속에 지구본을 돌려 원하는 곳의 날씨 정보를 확인 하는 사례이다.  
 
* 실제 지구본을 돌려보듯 자연스럽게 화면속에 지구본을 돌려 원하는 곳의 날씨 정보를 확인 하는 사례이다.  
 
{{#Widget:Vimeo|id=96625949|width=665|height=374}}
 
{{#Widget:Vimeo|id=96625949|width=665|height=374}}
−
=== Nod ===
+
 
−
* 자이로센서 기능이 탑제된 반지를 끼고 손을 좌우로 흔들어 화면속 책을 넘겨 본다.
+
−
* 책장을 넘기듯 자연스럽게 화면속에 책을 보는 사례이다.
+
−
* #00:29-#00:30
+
−
전체 영상 중에 해당되는 부분이 너무 짧습니다. 그리고 이 영상의 포인트는 자연스런 제스처보다는 반지형 기기에 있는 것 같고, 맨손으로 입력하는 이 패턴의 다른 사례들과는 달라보입니다.  Manipulation > Air Gesture  에 한 패턴을 추가하여(Air Mouse? 3D Mouse?) 마우스를 대신하여 허공에서 입력하는 반지형, 리모콘형(스마트 TV) 등의 입력장치를 이쪽으로 보내면 좋겠습니다.
+
−
   
+
−
{{#Widget:Youtube|id=dy-Ac9X9oSo|width=665|height=374}}
+
 
----
 
----
  
Line 41: Line 35:
 
* 물건을 잡아서 옮기듯 자연스럽게 화면속의 이미지를 이동시켜 보는 사례이다.
 
* 물건을 잡아서 옮기듯 자연스럽게 화면속의 이미지를 이동시켜 보는 사례이다.
 
{{#Widget:Vimeo|id=94916766|width=665|height=374}}
 
{{#Widget:Vimeo|id=94916766|width=665|height=374}}
 +
 +
=== Samsung smart tv_Zack quack app ===
 +
* 마치 스위치 줄을 당기듯 주먹을 쥐고 당겼다가 놓는 제스처를 통하여 게임을 실행 시킨다.
 +
{{#Widget:Vimeo|id=94917553|width=665|height=374}}
 
----
 
----
 +
 
== Stretching ==
 
== Stretching ==
 
=== Samsung  Smart TV ===
 
=== Samsung  Smart TV ===
Line 57: Line 56:
 
* 물건을 잡아 돌리듯 자연스럽게 화면속의 이미지를 돌려서 보는 사례이다.
 
* 물건을 잡아 돌리듯 자연스럽게 화면속의 이미지를 돌려서 보는 사례이다.
 
{{#Widget:Vimeo|id=94916615|width=665|height=374}}
 
{{#Widget:Vimeo|id=94916615|width=665|height=374}}
 +
 +
=== Leapmotion ===
 +
* 손가락을 원 모양으로 돌리면 게임 캐릭터의 머리가 같이 돌아간다.
 +
{{#Widget:Vimeo|id=93327179|width=665|height=374}}
  
 
----
 
----
Line 67: Line 70:
  
 
=== Leap Motion _ NY TIMES ===
 
=== Leap Motion _ NY TIMES ===
−
 
−
이 사례는 Natural Gesture가 아닌 것 같습니다.
 
  
 
* 손을 화면의 좌,우측 끝에 두면 화면의 페이지가 방향에 맞춰 지속적으로 이동한다.
 
* 손을 화면의 좌,우측 끝에 두면 화면의 페이지가 방향에 맞춰 지속적으로 이동한다.
Line 74: Line 75:
 
{{#Widget:Vimeo|id=93326755|width=665|height=374}}
 
{{#Widget:Vimeo|id=93326755|width=665|height=374}}
  
−
== 미분류 ==
+
----
−
=== Leap Motion _ eMotion ===
+
−
Natural gesture는 태스크와 제스처의 관계가 직관적인 것을 의미합니다. 이 사례는 제스처에 반응하는 독특한 피드백으로 보입니다. 터치 제스처로 치면 Screen Interaction이겠는데, 일단 여기서는 빼는 것이 좋겠습니다.
+
−
 
+
−
{{#Widget:Vimeo|id=71216887|width=665|height=374}}
+
−
=== Leap Motion _ Three JS - Portal Cube manipulation ===
+
−
Marionette 사례로 이동
+
−
 
+
−
* 화면상에 표시된 3D 객체를 손가락의 움직임을 통해 자연스럽게 조작한다.
+
−
* 손가락을 위아래, 좌우로 이동하면 3D 객체가 손가락이 움직인 방향으로 회전한다.
+
−
* 손가락을 앞뒤로 움직이면 3D 객체가 확대, 축소된다.
+
−
{{#Widget:Youtube|id=50Nw9rSv8X8|width=665|height=374}}
+
  
 +
== Others ==
 
=== Leap Motion _ Web GL Lightroom ===
 
=== Leap Motion _ Web GL Lightroom ===
−
Natural 제스처 부분만 시간 표시
 
 
* 이미지나 영상등의 컨텐츠 항목을 둘러보는 상황에서 두 손을 자연스럽게 움직여 컨텐츠를 살펴본다.
 
* 이미지나 영상등의 컨텐츠 항목을 둘러보는 상황에서 두 손을 자연스럽게 움직여 컨텐츠를 살펴본다.
 
* 헤엄을 치듯 두 손을 좌우로 벌리면 화면에 표시된 컨텐츠를 바라보는 시선이 앞뒤로 이동한다.
 
* 헤엄을 치듯 두 손을 좌우로 벌리면 화면에 표시된 컨텐츠를 바라보는 시선이 앞뒤로 이동한다.
 
* 한 손을 좌우로 이동하면 화면에 표시된 컨텐츠를 바라보는 시선이 좌우로 이동한다.
 
* 한 손을 좌우로 이동하면 화면에 표시된 컨텐츠를 바라보는 시선이 좌우로 이동한다.
 +
* #00:00-#00:15
 
{{#Widget:Youtube|id=LqD6WuIOu7o|width=665|height=374}}
 
{{#Widget:Youtube|id=LqD6WuIOu7o|width=665|height=374}}
  

Latest revision as of 17:08, 15 July 2014

Natural gesture는 시스템과 인터랙션 하기 위한 사람의 제스쳐가 수행하고자 하는 테스크와 자연스럽고 긴밀한 관계를 가지고 있는 인터랙션 패턴이다. 사용자가 테스크를 수행하기 위해 제스쳐를 학습하거나 이해하여 따라한다기 보다는 직관적인 제스쳐를 취하도록 함으로써 자연스러운 시스템 조작 인터랙션을 제공하는 경우라 할 수 있다. 이는 테스크 수행을 위해 시스템에서 인위적으로 지정한 특정 제스쳐를 취하도록 하는 Symbol gesture, Symbol drawing 패턴과 차이를 가진다.

Natural gesture는 제스쳐와 테스크가 자연스럽게 연결된 다양한 사례들을 묶은 패턴 그룹으로 정의된다.

With this pattern, we can solve....

GUI로 대표되는 WIMP(Window-Icon-Menu-Pointer) 방식의 인터페이스로 시스템을 조작하는 것에 비해, 립모션, 키넥트 등과 같이 카메라나 센서를 이용해 제스처를 직접 입력하여 시스템을 조작할 때, 어떤 제스처를 취해야 원하는 태스크를 수행할 수 있는지 예측하거나 기억하는 것이 쉽지 않다. 이런 상황에서 직관적이고 자연스러운 제스쳐를 통해 시스템 조작이 이루어진다면 사용자는 조작법 이해를 위한 별도의 학습 없이 보다 쉽게 테스크를 수행할 수 있을 것이다.

  • 손을 좌우로 흔드는 동작을 통해 화면의 책장을 넘기거나 물체를 회전시키는 등의 테스크를 자연스럽게 수행할 수 있다.
  • 개체를 잡아서 움직이는 동작을 통해 객체를 이동하거나 화면을 움직이는 등의 테스크를 자연스럽게 수행할 수 있다.
  • 양손으로 잡아 늘리는 동작을 통해 객체를 변형하거나 화면을 확대하는 등의 테스크를 자연스럽게 수행할 수 있다.
  • 양손으로 잡아 회전시키는 동작을 통해 객체나 화면을 회전시키는 테스크를 자연스럽게 수행할 수 있다.

Example : LG smart tv

LG smart tv.png

Flicking Hand

Leap motion _ NY TIMES

  • 손을 좌우로 흔드는 동작을 이용하여 정렬되어져 있는 기사들을 넘겨 본다.
  • 터치기반의 제스쳐 커맨드 방식에서 손가락으로 기사를 넘겨보기 위해 좌우로 swipe하던 방식이 모션인식 기술에서 손을 좌우로 흔드는 동작으로 자연스럽게 전환된 사례이다.

LG Smart TV

  • 손을 좌우로 흔드는 동작을 이용하여 현재 비춰진 화면을 좌우로 넘겨 본다.
  • 현재 비춰진 화면에 좌우로 감춰진 화면이 있는 상황에서 큐브를 돌리듯 자연스럽게 화면을 돌려 보는 사례이다.

Leap motion _ The weather channel

  • 손을 좌우로 흔드는 동작을 이용하여 화면속 지구본을 회전시켜 본다.
  • 실제 지구본을 돌려보듯 자연스럽게 화면속에 지구본을 돌려 원하는 곳의 날씨 정보를 확인 하는 사례이다.

Grasping & Moving hand

Samsung Smart TV

  • 주먹을 쥐고 손을 움직이면 화면속 이미지의 위치를 이동시킨다.
  • 물건을 잡아서 옮기듯 자연스럽게 화면속의 이미지를 이동시켜 보는 사례이다.

Samsung smart tv_Zack quack app

  • 마치 스위치 줄을 당기듯 주먹을 쥐고 당겼다가 놓는 제스처를 통하여 게임을 실행 시킨다.

Stretching

Samsung Smart TV

  • 양손으로 주먹을 쥐고 손을 움직이면 화면속 이미지가 늘어나거나 줄어든다.
  • 물건을 잡아 늘이듯 자연스럽게 화면속의 이미지를 늘이거나 줄이는 사례이다.

Leapmotion _ The weather channel

  • 양손가락을 움직이면 화면속 지구본이 커지며 화면이 확대/축소된다.
  • 두손가락으로 고무줄을 잡아 늘이고 줄이듯 자연스럽게 화면속에 비춰진 이미지를 확대하거나 축소시키는 사례이다.

Rotating hands

Samsung Smart TV

  • 양손으로 주먹을 쥐고 손을 회전시키면 화면속 이미지가 돌아간다.
  • 물건을 잡아 돌리듯 자연스럽게 화면속의 이미지를 돌려서 보는 사례이다.

Leapmotion

  • 손가락을 원 모양으로 돌리면 게임 캐릭터의 머리가 같이 돌아간다.

Scrolling

Leap Motion _ All the cooks

  • 손을 위아래로 이동하면 화면의 페이지가 위아래로 이동한다.
  • 손바닥으로 종이를 밀고 당기듯 화면속의 페이지를 자연스럽게 이동시키는 사례이다.

Leap Motion _ NY TIMES

  • 손을 화면의 좌,우측 끝에 두면 화면의 페이지가 방향에 맞춰 지속적으로 이동한다.
  • 손이 위치한 방향과 페이지가 움직이는 방향이 자연스럽게 연결된 사례이다.

Others

Leap Motion _ Web GL Lightroom

  • 이미지나 영상등의 컨텐츠 항목을 둘러보는 상황에서 두 손을 자연스럽게 움직여 컨텐츠를 살펴본다.
  • 헤엄을 치듯 두 손을 좌우로 벌리면 화면에 표시된 컨텐츠를 바라보는 시선이 앞뒤로 이동한다.
  • 한 손을 좌우로 이동하면 화면에 표시된 컨텐츠를 바라보는 시선이 좌우로 이동한다.
  • #00:00-#00:15

""

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