|
|
| (90 intermediate revisions by 4 users not shown) |
| Line 1: |
Line 1: |
| − | == navigation의 사례들 중, 현재 바로 navigation 패턴으로 들어가기 어려운 것들을 모아둔 최종 sandbox 입니다. ==
| + | Hidden menu는 별도의 버튼이나 화살표 등의 단서가 없는 상태에서, 화면에 숨겨져있던 메뉴를 불러오는 인터랙션 패턴이다. 일부 [[Drawer menu]]도 포함되지만, Drawer menu의 경우 메타포적인 특징이 더 강해 따로 패턴으로 분리하였다. |
| | | | |
| − | * 손승희 모두 점검완료
| + | === With this pattern, we can solve... === |
| | + | 앱의 기능이 점점 복잡해지면서 navigation 항목의 양이 많아지고 중요한 컨텐츠를 좁은 화면에 효과적으로 보여주기 위해서는 컨텐츠 외의 화면 요소들을 숨기기 위한 패턴이 필요하다. Hidden menu는 기존 화면에 메뉴와 관련된 구성 요소를 넣을 필요가 없어, 화면 공간을 효율적으로 사용할 수 있다. |
| | | | |
| − | === iOS_Applauze ===
| + | * 메뉴가 표시되어도 그 주변 공간에 현재 페이지 화면을 남겨두어, 일시적인 호출이며 마지막 위치로 돌아 갈 수 있다는 힌트를 제공한다. |
| − | * dial 형태의 메뉴로, 한바퀴 돌지 않고 끝이 있다. | + | |
| − | {{#Widget:Vimeo|id=96709357|width=300|height=533}}
| + | |
| − | | + | |
| − | === WFF Together App 팬더 정보 제공 기능 ===
| + | |
| − | * 화면속 상자를 drag하여 늘려서 숨겨진 정보를 본다.
| + | |
| − | {{#Widget:Vimeo|id=93373544|width=533|height=395}}
| + | |
| − | | + | |
| − | === WFF Together App 팬더 정보 제공 기능 ===
| + | |
| − | * 화면의 일부분을 drag하여, 접촉된 위치를 잘라내어 화면 뒤에 있는 숨겨진 정보를 본다.
| + | |
| − | {{#Widget:Vimeo|id=93373548|width=533|height=395}}
| + | |
| − | | + | |
| − | === Android_Sportypal ===
| + | |
| − | * 가로로 스크롤을 이동해 동일레벨에 있는 운동의 종류를 훑어본다.
| + | |
| − | {{#Widget:Vimeo|id=93207970|width=300|height=528}}
| + | |
| − | | + | |
| − | ===iSense Music-3D Music player ===
| + | |
| − | * #00:06-#00:27
| + | |
| − | {{#Widget:Youtube|id=NW_ilRHpK0A|width=665|height=374}}
| + | |
| | | | |
| | + | === Example : Samsung Galaxy Note(Android)_Internet === |
| | + | [[File:Hidden menu.png|310px]] |
| | ---- | | ---- |
| − | === 58번 사례 navigation - Controls? ===
| |
| − | * 현재 기기의 일반정보를 터치나 버튼의 조작 없이 확인한다.
| |
| − | * 슬리핑 모드에서 근접 센서 위에 손을 가져가면 터치 없이도 시간, 날짜, 부재중 전화, 문자 메시지, 잔여 베터리 용량 등을 한눈에 확인할 수 있다.
| |
| − | {{#Widget:Youtube|id=zmZGPpVrlS4|width=665|height=374}}
| |
| − | {{#Widget:Youtube|id=eWbsbdIxjOY|width=665|height=374}}
| |
| − | ----
| |
| − | == Windows8 App bar ==
| |
| − | === Windows8 _ Touch Screen ===
| |
| − | * 숨겨진 'Charms'라고 불리우는 app bar(ms에서 사용되는 용어, 모든 app에서 공통적으로 사용할 수 있음. 검색, 공유, 장치, 설정 및 시작의 기능)을 불러옴
| |
| − | {{#Widget:Vimeo|id=95088623|width=665|height=374}}
| |
| − |
| |
| − | === Windows8 _ Touch Screen ===
| |
| − | *상단에 멀티태스킹 목록과 하단에 app bar로 추정되는 뭔가를 위아래로 불러옴
| |
| − | {{#Widget:Vimeo|id=95088809|width=665|height=374}}
| |
| − | ----
| |
| − | == Call hidden page? ==
| |
| − | === iOS_weathercube===
| |
| − | * 손가락을 통해 좌우로 벌려 알고자 하는 날씨의 지역정보를 입력한다.
| |
| − | {{#Widget:Vimeo|id=94907107|width=300|height=533}}
| |
| − |
| |
| − | === iOS_weathercube ===
| |
| − | * 손가락을 통해 상하로 벌려 숨어있는 정보를 살펴본다.
| |
| − | {{#Widget:Vimeo|id=94906931|width=300|height=533}}
| |
| − | ----
| |
| − |
| |
| − | == 옵션 ==
| |
| − | === iOS_Hangout===
| |
| − | {{#Widget:Vimeo|id=95773089|width=300|height=533}}
| |
| − |
| |
| − | === iOS_USAToday ===
| |
| − | {{#Widget:Vimeo|id=95773708|width=300|height=533}}
| |
| − | ----
| |
| − | === ios_Paper_drag to activate===
| |
| − | * 동일 레벨상의 축소된 정보들을 아래서 위로 드래그 하여 크게 본다.(수정 예정)
| |
| − | {{#Widget:Vimeo|id=94903446|width=300|height=533}}
| |
| − |
| |
| − | === ios_Paper_slide to move===
| |
| − | * 화면을 아래로 드래그 하여 자신의 정보에 관련된 페이지를 볼 수 있다.
| |
| − | {{#Widget:Vimeo|id=94902939|width=300|height=533}}
| |
| − |
| |
| − | === ios_airbnb_drag to activate===
| |
| − | * 다른 메뉴 활성화를 위해 작아졌던 화면을 드래그 하여 활성화 시킨다.
| |
| − | {{#Widget:Vimeo|id=94905862|width=300|height=500}}
| |
| − |
| |
| − | === ios_airbnb_slide to scroll===
| |
| − | * 카테고리별로 나누어진 메뉴를 위 아래로 스크롤 하여 본다.
| |
| − | {{#Widget:Vimeo|id=94906088|width=300|height=500}}
| |
| − |
| |
| − | === ios_News digest_slide to move ===
| |
| − | * 하단부분 가로 스크롤을 좌우로 움직여 이전 날짜의 정보를 본다.
| |
| − | * Slide project tray로 보이는데 이 부분 영상이 너무 짧음
| |
| − | {{#Widget:Vimeo|id=94907507|width=300|height=533}}
| |
| − |
| |
| − | ----
| |
| − |
| |
| − | == Call hidden menus 관련==
| |
| | === Samsung Galaxy Note(Android)_Internet === | | === Samsung Galaxy Note(Android)_Internet === |
| | * 인터넷 사용 중 화면 가장자리를 tap & hold 하여 보이지 않는 퀵 메뉴를 오버레이하여 불러온다. | | * 인터넷 사용 중 화면 가장자리를 tap & hold 하여 보이지 않는 퀵 메뉴를 오버레이하여 불러온다. |
| − | {{#Widget:Vimeo|id=93362819|width=300|height=455}}
| |
| − |
| |
| | * 화면 가장자리를 tap & hold 하여 불러온 퀵메뉴에서 hold & drag를 통하여 하위메뉴를 연다. | | * 화면 가장자리를 tap & hold 하여 불러온 퀵메뉴에서 hold & drag를 통하여 하위메뉴를 연다. |
| | + | {{#Widget:Vimeo|id=93362819|width=300|height=490}} |
| | {{#Widget:Vimeo|id=93363072|width=300|height=490}} | | {{#Widget:Vimeo|id=93363072|width=300|height=490}} |
| | | | |
| − | === GUI gallery ===
| + | [[Category:Call hidden menus]] |
| − | * tap 을 통해 메뉴를 선택하면 하위 메뉴가 문이 열리듯 보여진다.
| + | |
| − | {{#Widget:Vimeo|id=93531969|width=665|height=499}}
| + | |
| − | | + | |
| − | === Xbox_Kinect Adventures ===
| + | |
| − | * 제스처를 통해 화면에 보이지 않는 메뉴를 오버레이하여 불러온다.
| + | |
| − | * 팔을 45도 각도로 들어올려 화면 왼쪽 모서리를 향하여 화면에 보이지 않았던 메뉴를 본다.
| + | |
| − | {{#Widget:Vimeo|id=94742456|width=665|height=374}}
| + | |
| − | ----
| + | |
| − | == Previous/Next button ==
| + | |
| − | === 580번 사례 ===
| + | |
| − | * 신문에서 다음면을 보기위해 전/후버튼을 눌러 페이지를 이동한다.
| + | |
| − | {{#Widget:Vimeo|id=93939181|width=533|height=395}}
| + | |
| − | ----
| + | |
| − | == 목록 ==
| + | |
| − | * Expandable list
| + | |
| − | * 메뉴가 아니어서 Expandable menu로 볼 수 없음
| + | |
| − | * Expandable list로 다시 정리하는 것이 좋을지
| + | |
| − | === iOS_FoxNews ===
| + | |
| − | {{#Widget:Vimeo|id=95773440|width=300|height=533}}
| + | |
| − | | + | |
| − | === iOS_ 911 Memorial Museum ===
| + | |
| − | {{#Widget:Vimeo|id=95762040|width=300|height=533}}
| + | |
| − | | + | |
| − | === iOS_ENow===
| + | |
| − | {{#Widget:Vimeo|id=95771374|width=300|height=533}}
| + | |
| − | ----
| + | |
| − | == Menu 더 보기 ==
| + | |
| − | * Action bar, Tab bar에서의 더 보기 ...버튼
| + | |
| − | === Android_Evernote ===
| + | |
| − | * Navigation의 Drop menu에도 있는 사례
| + | |
| − | * 메뉴 더보기 버튼을 패턴으로 만들지
| + | |
| − | {{#Widget:Vimeo|id=96420807|width=300|height=541}}
| + | |
| − | | + | |
| − | ----
| + | |
| − | == page turn/page flip?==
| + | |
| − | ===iOS_Jelly ===
| + | |
| − | {{#Widget:Vimeo|id=95779093|width=300|height=533}}
| + | |
| − | {{#Widget:Vimeo|id=95779122|width=300|height=533}}
| + | |
| − | | + | |
| − | === iOS_oflow ===
| + | |
| − | {{#Widget:Vimeo|id=95776888|width=300|height=533}}
| + | |
| − | ----
| + | |
| − | | + | |
| − | == 리스트 이동(필름?) ==
| + | |
| − | * Slide project tray와의 차이점은 아래 사례들은 쭉 이어지는 것이 아니라 끊어서 이동함
| + | |
| − | | + | |
| − | ===iOS_Duolingo===
| + | |
| − | {{#Widget:Vimeo|id= 96455675|width=258|height=385}}
| + | |
| − | | + | |
| − | === iOS_Learnist ===
| + | |
| − | {{#Widget:Vimeo|id=95779233|width=300|height=533}}
| + | |
| − | | + | |
| − | === iOS_Amazon ===
| + | |
| − | {{#Widget:Vimeo|id=95762049|width=300|height=533}}
| + | |
| − | | + | |
| − | * 아래 세 사례는 화면 일부만 swipe paging으로도 볼 수 있음
| + | |
| − | | + | |
| − | === iOS_Cameo ===
| + | |
| − | {{#Widget:Vimeo|id=95777659|width=300|height=533}}
| + | |
| − | | + | |
| − | === iOS_MyFitnessPal ===
| + | |
| − | {{#Widget:Vimeo|id=95776651|width=300|height=533}}
| + | |
| − | | + | |
| − | === ios_airbnb_slide to page ===
| + | |
| − | * 다양한 객실에 대한 정보를 좌우 스크롤로 넘겨 본다.
| + | |
| − | {{#Widget:Vimeo|id=94906265|width=300|height=500}}
| + | |
| − | | + | |
| − | ----
| + | |
| − | | + | |
| − | == 화면 일부분 swipe paging ==
| + | |
| − | * 화면 전체가 아닌 한 부분만 swipe paging 방식.
| + | |
| − | * [[Swipe paging]]의 소분류로 갈지 별도의 패턴으로 볼것인지
| + | |
| − | | + | |
| − | === iOS_JetSetter ===
| + | |
| − | {{#Widget:Vimeo|id=95771735|width=300|height=533}}
| + | |
| − | | + | |
| − | === iOS_MadeSquare ===
| + | |
| − | {{#Widget:Vimeo|id=95771218|width=300|height=533}}
| + | |
| − | | + | |
| − | === iOS Amazon ===
| + | |
| − | {{#Widget:Vimeo|id=95762137|width=300|height=533}}
| + | |
| − | | + | |
| − | ----
| + | |
| − | == 계층 이동(하위 컨텐츠 화면 열기) ==
| + | |
| − | * More details로 이동하기전 점검 필요
| + | |
| − | === iOS_Amazon ===
| + | |
| − | {{#Widget:Vimeo|id=95762048|width=300|height=533}}
| + | |
| − | | + | |
| − | === iOS_Learnist ===
| + | |
| − | {{#Widget:Vimeo|id=95779362|width=300|height=533}}
| + | |
| − | | + | |
| − | === iOS_Breeze ===
| + | |
| − | {{#Widget:Vimeo|id=95777502|width=300|height=533}}
| + | |
| − | | + | |
| − | === iOS_Breeze ===
| + | |
| − | {{#Widget:Vimeo|id=95777478|width=300|height=533}}
| + | |
| − | | + | |
| − | === iOS_Carousel ===
| + | |
| − | * 썸네일 확대
| + | |
| − | {{#Widget:Vimeo|id=95777330|width=300|height=533}}
| + | |
| − | | + | |
| − | === iOS_HuffPost ===
| + | |
| − | {{#Widget:Vimeo|id=95773877|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_Jetsetter ===
| + | |
| − | * 3개 아래 사례와 동일. 합쳐서 나란히 둘것
| + | |
| − | {{#Widget:Vimeo|id=95772042|width=300|height=533}}
| + | |
| − | | + | |
| − | === iOS_Jetsetter ===
| + | |
| − | * 썸네일 확대
| + | |
| − | {{#Widget:Vimeo|id=95771950|width=300|height=533}}
| + | |
| − | | + | |
| − | === iOS_Jetsetter ===
| + | |
| − | * 여기 아님 페이지 이동으로
| + | |
| − | {{#Widget:Vimeo|id=95771872|width=300|height=533}}
| + | |
| − | | + | |
| − | === iOS_Jetsetter ===
| + | |
| − | {{#Widget:Vimeo|id=95771676|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}}
| + | |
| − | | + | |
| − | ----
| + | |
| − | | + | |
| − | | + | |
| − | [[Category:Ambiguous]] | + | |
앱의 기능이 점점 복잡해지면서 navigation 항목의 양이 많아지고 중요한 컨텐츠를 좁은 화면에 효과적으로 보여주기 위해서는 컨텐츠 외의 화면 요소들을 숨기기 위한 패턴이 필요하다. Hidden menu는 기존 화면에 메뉴와 관련된 구성 요소를 넣을 필요가 없어, 화면 공간을 효율적으로 사용할 수 있다.
