From Design pattern
Jump to: navigation, search
(drop-up menu)
Line 1: Line 1:
 
Drop menu는 서브 메뉴를 팝업 형식으로 제공하는 인터랙션 패턴이다. 화면에 있는 메뉴를 tap하여 열며, 화면 이동 없이 서브 메뉴를 보여준다.
 
Drop menu는 서브 메뉴를 팝업 형식으로 제공하는 인터랙션 패턴이다. 화면에 있는 메뉴를 tap하여 열며, 화면 이동 없이 서브 메뉴를 보여준다.
  
하단의 메뉴에서 위로 서브 메뉴가 팝업되는 drop-up menu와 상단의 메뉴에서 아래로 서브 메뉴가 팝업되는 drop-down menu로 나누어 진다.
+
Drop menu에는 메뉴 위로 서브 메뉴가 팝업되는 drop-up menu와 아래로 서브 메뉴가 팝업되는 drop-down menu가 있다. 그 중 drop-down menu에서, 선택된 메뉴 항목 바로 옆에 하위 메뉴를 띄워주는 horizontal drop-down menu는 따로 분류하고 있다.
  
 
=== With this pattern, we can solve... ===
 
=== With this pattern, we can solve... ===
  
* Drop menu는 수직으로, [[Flyout menu]]는 수평으로 하위메뉴가 팝업된다는 점에서 차이가 있다.
+
*
 +
 
  
 
=== Examples : Android_Evernote ===
 
=== Examples : Android_Evernote ===
Line 12: Line 13:
  
 
----
 
----
== Drop-down menu ==
+
== drop-down menu ==
 
=== Android_Evernote ===
 
=== Android_Evernote ===
 
{{#Widget:Vimeo|id=94621852|width=300|height=541}}
 
{{#Widget:Vimeo|id=94621852|width=300|height=541}}
Line 26: Line 27:
  
 
----
 
----
 
+
== horizontal drop-down menu ==
== Drop-up menu ==
+
=== iOS_Tayasui Sketches ===
 +
{{#Widget:Vimeo|id=93373782|width=533|height=395}}
 +
----
 +
== drop-up menu ==
 
=== iOS_Rookie ===
 
=== iOS_Rookie ===
 
<!--* 배경음악이 삽입되어 있어 추가가 불가합니다-->
 
<!--* 배경음악이 삽입되어 있어 추가가 불가합니다-->
 
{{#Widget:Vimeo|id=95777093|width=300|height=533}}
 
{{#Widget:Vimeo|id=95777093|width=300|height=533}}
 +
 +
<!--
 +
flyout menu에 대한 개념이 기존의 것과 다른 것 같아 자료 첨부 드립니다.
 +
플라이아웃은 사용자가 현재 수행하고 있는 작업과 관련된 UI를 일시적으로 표시하는 데 사용되는 경량 팝업입니다.
 +
드롭다운이 플라이아웃의 하위개념으로 볼 수 있습니다.
 +
플라이아웃을 잘 설명하는 페이지
 +
[한글] http://msdn.microsoft.com/ko-kr/library/windows/apps/xaml/hh465341.aspx
 +
[영문] http://msdn.microsoft.com/en-us/library/windows/apps/hh465341.aspx
 +
http://saedu.naver.com/edu/txt/read.nhn?seq=175
 +
 +
다른 메뉴와의 차이를 설명하는 페이지
 +
(app bar(현재 이런 개념은 없을 듯), context menu, message dialog box, flyout을 같이 설명해주기 때문에
 +
해당 부분의 설명을 보충하거나, 이해하는데 도움이 될 듯)
 +
http://msdn.microsoft.com/ko-kr/library/windows/apps/hh465304.aspx
 +
 +
옵션의 관점에서 flyout을 보여주는 이미지
 +
http://www3.turbocadcommunity.com/show_image.php?name=V11UI_02dToolbars.gif&galleryId=11
  
  
 +
horizontal dropdown menu 형식이 아니면서 flyout을 표현해줄 수 있는 다른 사례
 +
http://blog.templatemonster.com/2013/09/18/tutorial-how-to-code-flyout-navigation-wheel-menu/
 +
http://magnumvint.blog.me/110183332587
 +
-->
 
[[Category:Menus]]
 
[[Category:Menus]]

Revision as of 12:51, 17 July 2014

Drop menu는 서브 메뉴를 팝업 형식으로 제공하는 인터랙션 패턴이다. 화면에 있는 메뉴를 tap하여 열며, 화면 이동 없이 서브 메뉴를 보여준다.

Drop menu에는 메뉴 위로 서브 메뉴가 팝업되는 drop-up menu와 아래로 서브 메뉴가 팝업되는 drop-down menu가 있다. 그 중 drop-down menu에서, 선택된 메뉴 항목 바로 옆에 하위 메뉴를 띄워주는 horizontal drop-down menu는 따로 분류하고 있다.

With this pattern, we can solve...


Examples : Android_Evernote



drop-down menu

Android_Evernote

Android_NY times

Android

iOS_Google Scholar


horizontal drop-down menu

iOS_Tayasui Sketches


drop-up menu

iOS_Rookie