From Design pattern
Jump to: navigation, search
(→‎ios_airbnb_slide to scroll)
 
(160 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 +
Hidden menu는 별도의 버튼이나 화살표 등의 단서가 없는 상태에서, 화면에 숨겨져있던 메뉴를 불러오는 인터랙션 패턴이다. 일부 [[Drawer menu]]도 포함되지만, Drawer menu의 경우 메타포적인 특징이 더 강해 따로 패턴으로 분리하였다.
  
−
== Navi ==
+
=== With this pattern, we can solve... ===
 +
앱의 기능이 점점 복잡해지면서 navigation 항목의 양이 많아지고 중요한 컨텐츠를 좁은 화면에 효과적으로 보여주기 위해서는 컨텐츠 외의 화면 요소들을 숨기기 위한 패턴이 필요하다. Hidden menu는 기존 화면에 메뉴와 관련된 구성 요소를 넣을 필요가 없어, 화면 공간을 효율적으로 사용할 수 있다.
  
−
=== 542번 사례 ===
+
* 메뉴가 표시되어도 그 주변 공간에 현재 페이지 화면을 남겨두어, 일시적인 호출이며 마지막 위치로 돌아 갈 수 있다는 힌트를 제공한다.
−
* 가로로 스크롤을 이동해 동일레벨에 있는 기사들을 훑어본다.
+
−
{{#Widget:Vimeo|id=93207968|width=300|height=528}}
+
  
−
=== 543번 사례 ===
+
=== Example : Samsung Galaxy Note(Android)_Internet ===
−
* 가로로 스크롤을 이동해 동일레벨에 있는 영화들을 훝어본다.
+
[[File:Hidden menu.png|310px]]
−
{{#Widget:Vimeo|id=93208068|width=300|height=528}}
+
----
 +
=== Samsung Galaxy Note(Android)_Internet ===
 +
* 인터넷 사용 중 화면 가장자리를 tap & hold 하여 보이지 않는 퀵 메뉴를 오버레이하여 불러온다.
 +
* 화면 가장자리를 tap & hold 하여 불러온 퀵메뉴에서 hold & drag를 통하여 하위메뉴를 연다.
 +
{{#Widget:Vimeo|id=93362819|width=300|height=490}}
 +
{{#Widget:Vimeo|id=93363072|width=300|height=490}}
  
−
=== 544번 사례 ===
+
[[Category:Call hidden menus]]
−
* 가로로 스크롤을 이동해 동일레벨에 있는 운동의 종류를 훑어본다.
+
−
{{#Widget:Vimeo|id=93207970|width=300|height=528}}
+
−
 
+
−
=== NY time_Spinner(554) ===
+
−
* 화살표 버튼을 클릭해 숨겨져있던 다양한 기능의 버튼을 확인한다.
+
−
{{#Widget:Vimeo|id=93208741|width=300|height=528}}
+
−
 
+
−
=== 대한민국 구석구석_Spinner(555) ===
+
−
* 화살표 버튼을 클릭해 숨겨져있던 여행지 필터링 기능을 불러온다.
+
−
{{#Widget:Vimeo|id=93208742|width=300|height=528}}
+
−
 
+
−
=== ios_Paper_Slide to page===
+
−
* 동일 레벨상의 축소된 각 페이지의 정보들을 좌우로 넘겨본다.
+
−
{{#Widget:Vimeo|id=94905291|width=300|height=533}}
+
−
 
+
−
=== ios_Paper_Slide to page===
+
−
* 동일 레벨상의 확대된 각 페이지의 정보들을 좌우로 넘겨본다.
+
−
<videoflash type="vimeo">94905012|300|533</videoflash>
+
−
 
+
−
=== ios_Paper_drag to activate===
+
−
* 동일 레벨상의 축소된 정보들을 아래서 위로 드래그 하여 크게 본다.(수정 예정)
+
−
<videoflash type="vimeo">94903446|300|533</videoflash>
+
−
 
+
−
=== ios_Paper_slide to move===
+
−
* 화면을 아래로 드래그 하여 자신의 정보에 관련된 페이지를 볼 수 있다.
+
−
<videoflash type="vimeo">94902939|300|533</videoflash>
+
−
 
+
−
=== ios_airbnb_drag to activate===
+
−
* 다른 메뉴 활성화를 위해 작아졌던 화면을 드래그 하여 활성화 시킨다.
+
−
<videoflash type="vimeo">94905862|300|533</videoflash>
+
−
 
+
−
=== ios_airbnb_slide to scroll===
+
−
* 카테고리별로 나누어진 메뉴를 위 아래로 스크롤 하여 본다.
+
−
{{#Widget:Vimeo|id=94906088|width=300|height=533}}
+
−
 
+
−
== ios_airbnb_slide to page==
+
−
* 다양한 객실에 대한 정보를 좌우 스크롤로 넘겨 본다.
+
−
<videoflash type="vimeo">94906265|300|533</videoflash>
+
−
 
+
−
=== ios_News digest_slide to move ===
+
−
* 하단부분 가로 스크롤을 좌우로 움직여 이전 날짜의 정보를 본다.
+
−
<videoflash type="vimeo">94907507|300|533</videoflash>
+
−
 
+
−
[[Category:Ambiguous]]
+

Latest revision as of 22:03, 17 September 2014

Hidden menu는 별도의 버튼이나 화살표 등의 단서가 없는 상태에서, 화면에 숨겨져있던 메뉴를 불러오는 인터랙션 패턴이다. 일부 Drawer menu도 포함되지만, Drawer menu의 경우 메타포적인 특징이 더 강해 따로 패턴으로 분리하였다.

With this pattern, we can solve...

앱의 기능이 점점 복잡해지면서 navigation 항목의 양이 많아지고 중요한 컨텐츠를 좁은 화면에 효과적으로 보여주기 위해서는 컨텐츠 외의 화면 요소들을 숨기기 위한 패턴이 필요하다. Hidden menu는 기존 화면에 메뉴와 관련된 구성 요소를 넣을 필요가 없어, 화면 공간을 효율적으로 사용할 수 있다.

  • 메뉴가 표시되어도 그 주변 공간에 현재 페이지 화면을 남겨두어, 일시적인 호출이며 마지막 위치로 돌아 갈 수 있다는 힌트를 제공한다.

Example : Samsung Galaxy Note(Android)_Internet

Hidden menu.png

Samsung Galaxy Note(Android)_Internet

  • 인터넷 사용 중 화면 가장자리를 tap & hold 하여 보이지 않는 퀵 메뉴를 오버레이하여 불러온다.
  • 화면 가장자리를 tap & hold 하여 불러온 퀵메뉴에서 hold & drag를 통하여 하위메뉴를 연다.

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