From Design pattern
Jump to: navigation, search
 
(13 intermediate revisions by 2 users not shown)
Line 1: Line 1:
== navigation의 사례들 중, 현재 바로 navigation 패턴으로 들어가기 어려운 것들을 모아둔 최종 sandbox 입니다. ==
+
Hidden menu는 별도의 버튼이나 화살표 등의 단서가 없는 상태에서, 화면에 숨겨져있던 메뉴를 불러오는 인터랙션 패턴이다. 일부 [[Drawer menu]]도 포함되지만, Drawer menu의 경우 메타포적인 특징이 더 강해 따로 패턴으로 분리하였다.
  
* 손승희 모두 점검완료
+
=== With this pattern, we can solve... ===
* 민경보 검토완료/ wff는 WWF입니다. 수정했습니다.
+
앱의 기능이 점점 복잡해지면서 navigation 항목의 양이 많아지고 중요한 컨텐츠를 좁은 화면에 효과적으로 보여주기 위해서는 컨텐츠 외의 화면 요소들을 숨기기 위한 패턴이 필요하다. Hidden menu는 기존 화면에 메뉴와 관련된 구성 요소를 넣을 필요가 없어, 화면 공간을 효율적으로 사용할 수 있다.
* 김영태 모두 점검완료
+
  
=== iOS_Applauze ===
+
* 메뉴가 표시되어도 그 주변 공간에 현재 페이지 화면을 남겨두어, 일시적인 호출이며 마지막 위치로 돌아 갈 수 있다는 힌트를 제공한다.
* dial 형태의 메뉴로, 한바퀴 돌지 않고 끝이 있다.
+
{{#Widget:Vimeo|id=96709357|width=300|height=533}}
+
  
 +
=== Example : Samsung Galaxy Note(Android)_Internet ===
 +
[[File:Hidden menu.png|310px]]
 
----
 
----
== Controls? ==
 
 
== Call hidden menus 관련==
 
 
=== Samsung Galaxy Note(Android)_Internet ===
 
=== Samsung Galaxy Note(Android)_Internet ===
 
* 인터넷 사용 중 화면 가장자리를 tap & hold 하여 보이지 않는 퀵 메뉴를 오버레이하여 불러온다.
 
* 인터넷 사용 중 화면 가장자리를 tap & hold 하여 보이지 않는 퀵 메뉴를 오버레이하여 불러온다.
Line 19: Line 15:
 
{{#Widget:Vimeo|id=93363072|width=300|height=490}}
 
{{#Widget:Vimeo|id=93363072|width=300|height=490}}
  
 
+
[[Category:Call hidden menus]]
----
+
== page turn/page flip?==
+
===iOS_Jelly 민경보가 메타폴릭etc로 이동 ===
+
{{#Widget:Vimeo|id=95779093|width=300|height=533}}
+
{{#Widget:Vimeo|id=95779122|width=300|height=533}}
+
 
+
----
+
== 계층 이동(하위 컨텐츠 화면 열기) ==
+
* More details와 성격이 다른데, 여기 사례는 하위 컨텐츠를 열어보는 거라 세부정보보기는 아닙니다.
+
== 아래 세개는 썸네일이 확대되는 방식 ==
+
* 화면에서 원하는 컨텐츠를 선택하면, 선택된 부분이 화면 전체로 확장되어 그 컨텐츠 페이지로 들어가게 되는 인터랙션 패턴이다. 
+
=== iOS_Carousel ===
+
{{#Widget:Vimeo|id=95777330|width=300|height=533}}
+
 
+
=== iOS_Jetsetter ===
+
{{#Widget:Vimeo|id=95771950|width=300|height=533}}
+
 
+
=== iOS_Paper ===
+
{{#Widget:Vimeo|id=94903446|width=300|height=533}}
+
 
+
==여기부터는 sliding 방식의 하위 컨텐츠 열기 ==
+
* [[Sliding layer]]로 옮긴 사례 생략(숨김)상태
+
=== iOS_Amazon ===
+
{{#Widget:Vimeo|id=95762048|width=300|height=533}}
+
 
+
=== iOS_HuffPost ===
+
{{#Widget:Vimeo|id=95773877|width=300|height=533}}
+
 
+
=== iOS_Jetsetter ===
+
<!-- 중복사례 {{#Widget:Vimeo|id=95772042|width=300|height=533}}-->
+
{{#Widget:Vimeo|id=95771676|width=300|height=533}}
+
 
+
<!--
+
=== iOS_Learnist 민경보가 슬라이딩레이어로 옮김요 ===
+
{{#Widget:Vimeo|id=95779362|width=300|height=533}}
+
 
+
=== iOS_FoxNews 민경보가 슬아이딩레이어로 옮김 ===
+
{{#Widget:Vimeo|id=95773475|width=300|height=533}}
+
 
+
=== iOS_NPRNews 민경보가 슬라이딩레이어로 옮김 ===
+
{{#Widget:Vimeo|id=95773391|width=300|height=533}}
+
 
+
=== iOS_Yahoo 민경보가 슬라이딩레이어로 옮김 ===
+
{{#Widget:Vimeo|id=95772697|width=300|height=533}}
+
 
+
=== iOS_Gmail 민경보가 슬라이딩레이어로 옮김 ===
+
{{#Widget:Vimeo|id=95772388|width=300|height=533}}
+
 
+
=== iOS_Madesquare 민경보가 슬라이딩레이어로 옮김 ===
+
{{#Widget:Vimeo|id=95771188|width=300|height=533}}
+
 
+
=== iOS_Gogobot 민경보가 슬라이딩레이어로 옮김 ===
+
{{#Widget:Vimeo|id=95770948|width=300|height=533}}
+
 
+
=== iOS Calendars5 민경보가 슬라이딩레이어로 옮김 ===
+
{{#Widget:Vimeo|id=95762433|width=300|height=533}}
+
 
+
=== iOS Ask for task 민경보가 슬라이딩레이어로 옮김 ===
+
{{#Widget:Vimeo|id=95762139|width=300|height=533}}
+
 
+
=== iOS_Yummly 민경보가 슬라이딩레이어로 옮김 ===
+
{{#Widget:Vimeo|id=95774503|width=300|height=533}}
+
 
+
=== iOS_Sleep genius 민경보가 슬라이딩레이어로 옮김 ===
+
{{#Widget:Vimeo|id=95771088|width=300|height=533}}
+
 
+
=== iOS_Breeze 민경보가 슬라이딩레이어로 옮김 ===
+
{{#Widget:Vimeo|id=95777502|width=300|height=533}}
+
{{#Widget:Vimeo|id=95777478|width=300|height=533}}
+
-->
+
----
+
 
+
 
+
[[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를 통하여 하위메뉴를 연다.