Difference between revisions of "Expandable list"
Navigation menu
From Design pattern
| Line 8: | Line 8: | ||
=== Example: Android_CNN === | === Example: Android_CNN === | ||
[[File:Android CNN Expandable menu.png|310px]] | [[File:Android CNN Expandable menu.png|310px]] | ||
| − | + | ---- | |
=== Android_CNN === | === Android_CNN === | ||
* 손가락으로 화면의 항목을 선택하면 선택된 메뉴의 항목과 바로 아래항목 사이로 하위 항목을 펼쳐 보여준다. | * 손가락으로 화면의 항목을 선택하면 선택된 메뉴의 항목과 바로 아래항목 사이로 하위 항목을 펼쳐 보여준다. | ||
Revision as of 16:53, 22 July 2014
Expandable menu는 메뉴 목록에서 한가지 메뉴를 선택하면 선택된 메뉴와 그 다음 메뉴 사이가 늘어나면서 그 안에 하위메뉴가 나타나는 인터랙션 패턴이다. 다른 말로 expandable list, expandable listview라고도 부른다.
Contents
With this pattern, we can solve...
메뉴 항목을 따로 선택해도 하위 메뉴 외의 사항이 없는 경우, 굳이 처음 메뉴를 거치지 않고 한번에 이동하는 것이 더 빠르다. 또한, 모든 하위 메뉴를 다 보여주면 메뉴가 너무 길어지는데, Expandable menu는 선택한 메뉴에 대해서만 하위 메뉴를 보여주기에 공간을 효율적으로 사용할 수 있다.
- Accordian은 접혀있는 부분이 펴지는 메타포적 특성이 강조된 패턴으로, 메뉴 외에도 리스트 화면에서도 이루어진다. 특히, Expandable menu에서는 기존 메뉴를 따로 거치지 않고 바로 하위 메뉴로 이동하는 것이 가장 중요하다.
Example: Android_CNN
Android_CNN
- 손가락으로 화면의 항목을 선택하면 선택된 메뉴의 항목과 바로 아래항목 사이로 하위 항목을 펼쳐 보여준다.
Android_대한민국 구석구석
iOS_Convertible
- 메뉴를 swipe 하여 내리면 메뉴에 포함된 하위 메뉴가 확장되어 보여진다.
iOS_Picstory
iOS_Filter Frame
- tap하여 하위메뉴를 활성화하거나 다시 숨긴다.
목록
- 메뉴가 아니어서 Expandable menu로 볼 수 없음
- Expandable list로 다시 정리하는 것이 좋을지
iOS_FoxNews
iOS_ 911 Memorial Museum
iOS_ENow