From Design pattern
Jump to: navigation, search
(→‎With this pattern, we can solve...)
 
(4 intermediate revisions by one user not shown)
Line 1: Line 1:
−
Prev and next level은 특수한 동작을 통해 한 단계 아래의 메뉴로 들어가거나 한 단계 위의 메뉴로 나올 수 있는 인터랙션 패턴이다.
+
Move prev and next level은 한 단계 아래의 메뉴로 들어가거나 한 단계 위의 메뉴로 나올 수 있는 인터랙션 패턴이다. 주로 컨텐츠 목록이 나열된 리스트 화면에서 하나의 개체를 선택해 들어가고 다시 나오는 과정에서 반복적으로 사용된다.
  
−
=== With this pattern, we can solve... ===
+
선택된 항목으로 들어가고 나오는 과정에서의 화면이 변화하는 양상에 따라 나눌 수 있다. 메뉴로 들어가고 나오면서 화면이 확대,축소되는 방식(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 ===
 +
[[File:IOS Pinterest 상위레벨 이동.png|395px]]
 +
----
 +
==Zoom in/out==
 
=== iOS_Pinterest ===
 
=== iOS_Pinterest ===
 
* 한 페이지에서 화면의 상단 끝을 (핀으로 꼽힌 페이지를 빼내듯이) 아래로 내리는 drag 동작을 하면, 현재 화면이 줄어들어 여러 페이지가 나열된 상위레벨의 화면으로 이동한다.
 
* 한 페이지에서 화면의 상단 끝을 (핀으로 꼽힌 페이지를 빼내듯이) 아래로 내리는 drag 동작을 하면, 현재 화면이 줄어들어 여러 페이지가 나열된 상위레벨의 화면으로 이동한다.
Line 11: Line 17:
  
 
=== iOS ===
 
=== iOS ===
−
* app 그룹으로 들어가고 나오는 상황에서 zoom in zoom out 의 형태로 화면이 보여진다.
+
* app 그룹으로 들어가고 나오는 상황에서 zoom in/out 의 형태로 화면이 보여진다.
−
{{#Widget:Vimeo|id=93550677|width=300|height=533}}
+
{{#Widget:Vimeo|id=93550677|width=300|height=533}}]
  
 +
----
 +
==Transition==
 
=== Samsung Smart TV ===
 
=== Samsung Smart TV ===
 
* 손바닥을 반시계 방향으로 돌리는 제스처를 통해 이전메뉴의 화면으로 돌아간다.
 
* 손바닥을 반시계 방향으로 돌리는 제스처를 통해 이전메뉴의 화면으로 돌아간다.
Line 22: Line 30:
 
{{#Widget:Vimeo|id=36790650|width=665|height=374}}
 
{{#Widget:Vimeo|id=36790650|width=665|height=374}}
  
−
 
+
=== IOS_IFTTT ===
 +
* 하나의 항목을 tap하면 해당 창이 아래에서 위로 올라오듯 나타나 열린다.
 +
* 좌측상단의 x버튼을 tap하여 다시 상위메뉴로 나갈 수 있다.
 +
{{#Widget:Vimeo|id=93045293|width=395|height=533}}
  
  

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"