From Design pattern
Jump to: navigation, search
(→‎387번 사례)
(→‎With this pattern, we can solve...)
 
(26 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
== Examples ==
+
Move prev and next level은 한 단계 아래의 메뉴로 들어가거나 한 단계 위의 메뉴로 나올 수 있는 인터랙션 패턴이다. 주로 컨텐츠 목록이 나열된 리스트 화면에서 하나의 개체를 선택해 들어가고 다시 나오는 과정에서 반복적으로 사용된다.
  
−
=== iOS ===
+
선택된 항목으로 들어가고 나오는 과정에서의 화면이 변화하는 양상에 따라 나눌 수 있다. 메뉴로 들어가고 나오면서 화면이 확대,축소되는 방식(zoom in/out)과 화면 전체가 전환되는 방식(transition)이 있다.
−
* app 그룹으로 들어가고 나오는 상황에서 zoom in zoom out 의 형태로 화면이 보여진다.
+
−
<videoflash type="vimeo">93550677|300|533</videoflash>
+
  
−
===Wang Theatre Touch Screen Information Kiosk ===
+
===With this pattern, we can solve...===
−
* 대형 터치스크린에서 홈버튼을 눌러 홈으로 이동한다.
+
하나의 앱이나 서비스 내, 상위 레벨과 하위 레벨로 이동하는 과정에서 이동 방향에 혼란이 오지 않도록 일관적으로 적용될 수 있는 인터랙션 패턴이 필요하다. Move prev and next level은 지금 현재 페이지와 이동하는 페이지 사이의 연관성 혹은 이동 방향을 시각적으로 보여주면서 이동한다.  
−
* 단, 아래 영상의 34초 ~ 37초에 해당한다.
+
−
<videoflash type="vimeo">36790650|665|374</videoflash>
+
  
−
=== 363번 사례 ===
+
* 관련된 패턴으로 zoom in/out 방식의 하나인 [[Move higher level by pinch]]가 있다. 여러 항목을 골고루 자세히 보고자 할 때, 하나씩 들어갔다 나오는 과정이 더 직관적이고 간단하여 따로 패턴으로 분류하였다.
−
* 손바닥을 반시계 방향으로 돌리는 제스처를 통해 이전메뉴의 화면으로 돌아간다.
+
−
<videoflash type="vimeo">94916509|665|374</videoflash>
+
  
−
=== 27번 사례 ===
+
=== Example : iOS_Pinterest ===
−
* Spread 동작을 통해 메뉴나 주요 기능 화면이 그사이로 열리면서 들어가지고, 반대로 Pinch 함으로써 그 화면을 닫고 다시 원래 화면으로 나온다.
+
[[File:IOS Pinterest 상위레벨 이동.png|395px]]
−
<videoflash type="vimeo">93044158|300|449</videoflash>
+
----
 +
==Zoom in/out==
 +
=== iOS_Pinterest ===
 +
* 한 페이지에서 화면의 상단 끝을 (핀으로 꼽힌 페이지를 빼내듯이) 아래로 내리는 drag 동작을 하면, 현재 화면이 줄어들어 여러 페이지가 나열된 상위레벨의 화면으로 이동한다.
 +
{{#Widget:Vimeo|id=93372823|width=399|height=533}}
  
−
=== iOS_Paper by FiftyThree ===
+
=== iOS ===
−
* 현재 위치한 화면을 두개의 손가락으로 동시에 모으는 pinch 동작을 취할 경우 화면이 접히면서 줄어들어 상위화면으로 이동한다.
+
* app 그룹으로 들어가고 나오는 상황에서 zoom in/out 의 형태로 화면이 보여진다.
−
{{#Widget:Vimeo|id=93372825|width=533|height=395}}
+
{{#Widget:Vimeo|id=93550677|width=300|height=533}}]
  
−
=== iOS_Pinterest ===
+
----
−
* 한 페이지에서 화면의 상단 끝을 (핀으로 꼽힌 페이지를 빼내듯이) 아래로 내리는 drag 동작을 하면, 현재 화면이줄어들어 여러 페이지가 나열된 상위레벨의 화면으로 이동한다.
+
==Transition==
−
{{#Widget:Vimeo|id=93372823|width=300|height=405}}
+
=== Samsung Smart TV ===
 +
* 손바닥을 반시계 방향으로 돌리는 제스처를 통해 이전메뉴의 화면으로 돌아간다.
 +
{{#Widget:Vimeo|id=94916509|width=665|height=374}}
 +
 
 +
===Wang Theatre Touch Screen Information Kiosk ===
 +
* #00:34-00:37
 +
{{#Widget:Vimeo|id=36790650|width=665|height=374}}
 +
 
 +
=== IOS_IFTTT ===
 +
* 하나의 항목을 tap하면 해당 창이 아래에서 위로 올라오듯 나타나 열린다.
 +
* 좌측상단의 x버튼을 tap하여 다시 상위메뉴로 나갈 수 있다.
 +
{{#Widget:Vimeo|id=93045293|width=395|height=533}}
  
−
=== Wang Theatre Touch Screen Information Kiosk ===
 
−
* 대형 터치스크린에서 화면을 tap하면 숨겨져있던 상세정보를 보여준다.
 
−
* 단, 아래 영상의 21초 ~ 22초에 해당한다.
 
−
<videoflash type="vimeo">36790650|665|374</videoflash>
 
  
−
=== iOS_Multitasking ===
 
−
{{#Widget:Vimeo|id=96631870|width=665|height=374}}
 
  
−
=== 164번 사례 ===
 
−
* 왼쪽에서 오른쪽으로 화면을 swipe 후 다시 왼쪽으로 swipe하는 행동을 통해 활성화 된 모든 앱들의 섬네일이 보인다.
 
−
<videoflash type="vimeo">95088430|665|374</videoflash>
 
  
 
[[Category:Move in hierarchy]]
 
[[Category:Move in hierarchy]]

Latest revision as of 12:14, 13 August 2014

Move prev and next level은 한 단계 아래의 메뉴로 들어가거나 한 단계 위의 메뉴로 나올 수 있는 인터랙션 패턴이다. 주로 컨텐츠 목록이 나열된 리스트 화면에서 하나의 개체를 선택해 들어가고 다시 나오는 과정에서 반복적으로 사용된다.

선택된 항목으로 들어가고 나오는 과정에서의 화면이 변화하는 양상에 따라 나눌 수 있다. 메뉴로 들어가고 나오면서 화면이 확대,축소되는 방식(zoom in/out)과 화면 전체가 전환되는 방식(transition)이 있다.

With this pattern, we can solve...

하나의 앱이나 서비스 내, 상위 레벨과 하위 레벨로 이동하는 과정에서 이동 방향에 혼란이 오지 않도록 일관적으로 적용될 수 있는 인터랙션 패턴이 필요하다. Move prev and next level은 지금 현재 페이지와 이동하는 페이지 사이의 연관성 혹은 이동 방향을 시각적으로 보여주면서 이동한다.

  • 관련된 패턴으로 zoom in/out 방식의 하나인 Move higher level by pinch가 있다. 여러 항목을 골고루 자세히 보고자 할 때, 하나씩 들어갔다 나오는 과정이 더 직관적이고 간단하여 따로 패턴으로 분류하였다.

Example : iOS_Pinterest

IOS Pinterest 상위레벨 이동.png

Zoom in/out

iOS_Pinterest

  • 한 페이지에서 화면의 상단 끝을 (핀으로 꼽힌 페이지를 빼내듯이) 아래로 내리는 drag 동작을 하면, 현재 화면이 줄어들어 여러 페이지가 나열된 상위레벨의 화면으로 이동한다.

iOS

  • app 그룹으로 들어가고 나오는 상황에서 zoom in/out 의 형태로 화면이 보여진다.

]

Transition

Samsung Smart TV

  • 손바닥을 반시계 방향으로 돌리는 제스처를 통해 이전메뉴의 화면으로 돌아간다.

Wang Theatre Touch Screen Information Kiosk

  • #00:34-00:37

IOS_IFTTT

  • 하나의 항목을 tap하면 해당 창이 아래에서 위로 올라오듯 나타나 열린다.
  • 좌측상단의 x버튼을 tap하여 다시 상위메뉴로 나갈 수 있다.

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