|
|
| Line 1: |
Line 1: |
| | + | |
| | {{#css: | | {{#css: |
| | #mw-content-text h3 span { | | #mw-content-text h3 span { |
| Line 53: |
Line 54: |
| | #sun-col p { | | #sun-col p { |
| | padding-left: 0px; | | padding-left: 0px; |
| − |
| |
| − | }
| |
| | --> | | --> |
| − |
| |
| − | .thumb {
| |
| − | margin: 0px 25px 5px 25px;
| |
| | } | | } |
| | | | |
| | }} | | }} |
| | | | |
| − | Drawer Menu는 좁은 화면에서 효과적으로 자주 사용하는 기능 및 정보를 표시하는 pattern이다. 주로 현재 화면을 어느 정도 유지한 채 숨겨진 페이지를 띄워 보여준다.
| + | Spinner은 app에서 숫자 입력 컨트롤로 쓰이는 pattern이다. 주로 편집 필드와 우측 또는 좌측 옆의 작고 납작한 두 개의 화살표로 구성되어 있다. |
| | | | |
| − | 숨겨진 페이지를 표시하는 방식에 따라 구분이 가능한데, 주로 Slide방식이 사용되며, Overlay와 Insert (일명 Accordion) 방식으로 분류할 수 있다. Drawer Menu를 호출하는 버튼은 주로 일명로 불리는 아이콘의 버튼이 사용된다.
| + | 현재 필드에 입력된 숫자값을 기준으로 위아래 화살표 버튼을 눌러 조절하거나, 편집 필드에 직접 원하는 숫자값을 입력한다. |
| | | | |
| | === With this pattern, we can solve... === | | === With this pattern, we can solve... === |
| − | app의 기능이 점점 복잡해지면서 navigation 항목의 양이 많아지고 중요한 컨텐츠를 좁은 화면에 효과적으로 보여주기 위해서는 컨텐츠 외의 화면 요소들을 숨기기 위한 pattern이 필요하다. Drawer Menu는 화면 상의 많은 요소들을 효과적으로 숨기고 꺼내 볼 수 있는 기능을 제공한다.
| + | app에서 사용자가 원하는 값를 입력하기 위한 pattern이 필요하다. Diald은 연속된 값 중 원하는 값을 선택하여 입력 할 수 있는 기능을 제공한다. 입력 가능한 범위를 모르는 상태에서 입력하는 상황을 막을 수 있어 사용자가 부적절한 값을 입력할 가능성이 없다. |
| | | | |
| − | * Drawer Menu는 트랜지션 효과를 통해 그 존재를 드러내며, 화면 밖의 가상 공간에 항상 대기중이라는 느낌을 준다. | + | * Dial은 간단한 동작을 통해 원하는 연속된 값을 부드럽게 입력할 수 있다. |
| − | * 숨겨진 페이지, 항목이 표시되어도 현재 페이지를 살짝 유지하여, 일시적인 호출이며 마지막 위치로 돌아 갈 수 있다는 힌트를 제공한다. | + | * Dial은 특정 범위안의 현재값을 상대적으로 파악할 수 있다. |
| − | * Drawer Menu 이전에는 Tab이나 이와 유사한 방식을 사용하여, 화면 상에 네비게이션 메뉴를 표시하여 사용하였다. | + | * Dial은 현실에서 사용자가 손으로 직접 Dial을 잡고 좌우측으로 돌려 값을 조절하는 실제 기계의 메타포를 적용시킨 pattern이다. |
| | + | |
| | + | === Example : === |
| | + | {{#Widget:Vimeo|id=|width=300|height=533|start=4s}} |
| | | | |
| | ---- | | ---- |
| | | | |
| − | == Drawer(Slide Hidden Menu) == | + | == Spinner == |
| | <div id="sun-col"> | | <div id="sun-col"> |
| | | | |
| − | === iPhone_Yahoo === | + | === === |
| − | {{#Widget:Vimeo|id=95772659|width=259|height=455|start=4s}}
| + | |
| | | | |
| − | === iPhone_Gmail ===
| |
| − | <!-- {{#Widget:Vimeo|id=95772492|width=259|height=455|start=4s}} -->
| |
| − | {{#Widget:Vimeo|id=95772492|width=259|height=455}}
| |
| − |
| |
| − | === iPhone_BuzzFeed ===
| |
| − | {{#Widget:Vimeo|id=95773016|width=259|height=455}}
| |
| − |
| |
| − | === iPhone_MyFitnessPal ===
| |
| − | {{#Widget:Vimeo|id=95776698|width=259|height=455}}
| |
| − |
| |
| − | === iPhone_Google-Docs ===
| |
| − | {{#Widget:Vimeo|id=95772952|width=259|height=455}}
| |
| − |
| |
| − | <!--
| |
| − | === iPhone_Tinder_3 ===
| |
| − | {{#Widget:Vimeo|id=95772230|width=259|height=455}}
| |
| − |
| |
| − | === iPhone_ENow_5 ===
| |
| − | {{#Widget:Vimeo|id=95771492|width=259|height=455}}
| |
| − |
| |
| − | === iPhone_ENow_1 ===
| |
| − | {{#Widget:Vimeo|id=95771288|width=259|height=455}}
| |
| − |
| |
| − | === iPhone_FOX-NOW_1 ===
| |
| − | {{#Widget:Vimeo|id=95771003|width=259|height=455}}
| |
| − |
| |
| − | === iPhone AskForTask 3 ===
| |
| − | {{#Widget:Vimeo|id=95762142|width=259|height=455}}
| |
| − | -->
| |
| − | </div>
| |
| − | ----
| |
| − | == Drawer(Overay Hidden Menu) ==
| |
| − | <div id="sun-col">
| |
| − | === iPhone 911MemorialMuseum ===
| |
| − | {{#Widget:Vimeo|id=95762045|width=259|height=455}}
| |
| − |
| |
| − | === iPhone_Seene ===
| |
| − | {{#Widget:Vimeo|id=95777540|width=259|height=455}}
| |
| − |
| |
| − | === iPhone_HuffPost ===
| |
| − | {{#Widget:Vimeo|id=95773784|width=259|height=455}}
| |
| − |
| |
| − | === iPhone_FoxNews ===
| |
| − | {{#Widget:Vimeo|id=95773501|width=259|height=455}}
| |
| − |
| |
| − | === iPhone_Groupon ===
| |
| − | {{#Widget:Vimeo|id=95772877|width=259|height=455}}
| |
| − |
| |
| − | === iPhone_Gogobot ===
| |
| − | {{#Widget:Vimeo|id=95770896|width=259|height=455}}
| |
| − | </div>
| |
| − | <!--
| |
| − | === iPhone_USAToday_2 ===
| |
| − | {{#Widget:Vimeo|id=95773661|width=259|height=455}}
| |
| − |
| |
| − | === iPhone_Bloomberg_2 ===
| |
| − | {{#Widget:Vimeo|id=95774030|width=259|height=455}}
| |
| − | -->
| |
| − |
| |
| − | == Insert Hidden Menu ==
| |
| − | <div id="sun-col">
| |
| − | === iPhone_Yummly ===
| |
| − | {{#Widget:Vimeo|id=95774182|width=259|height=455}}
| |
| | | | |
| − | === iPhone Calendars5 ===
| |
| − | {{#Widget:Vimeo|id=95762262|width=259|height=455}}
| |
| | </div> | | </div> |
| | | | |
| | [[Category:Enter a continuous value]] | | [[Category:Enter a continuous value]] |
Spinner은 app에서 숫자 입력 컨트롤로 쓰이는 pattern이다. 주로 편집 필드와 우측 또는 좌측 옆의 작고 납작한 두 개의 화살표로 구성되어 있다.
app에서 사용자가 원하는 값를 입력하기 위한 pattern이 필요하다. Diald은 연속된 값 중 원하는 값을 선택하여 입력 할 수 있는 기능을 제공한다. 입력 가능한 범위를 모르는 상태에서 입력하는 상황을 막을 수 있어 사용자가 부적절한 값을 입력할 가능성이 없다.