Difference between revisions of "Expandable list"

Revision as of 22:41, 13 July 2014

Expandable menu는 메뉴 목록에서 한가지 메뉴를 선택하면 선택된 메뉴와 그 다음 메뉴 사이가 늘어나면서 그 안에 하위메뉴가 나타나는 인터랙션 패턴이다. 다른 말로 expandable list, expandable listview라고도 부른다.

With this pattern, we can solve...

메뉴 항목을 따로 선택해도 하위 메뉴 외의 사항이 없는 경우, 굳이 처음 메뉴를 거치지 않고 한번에 이동하는 것이 더 빠르다. 또한, 모든 하위 메뉴를 다 보여주면 메뉴가 너무 길어지는데, Expandable menu는 선택한 메뉴에 대해서만 하위 메뉴를 보여주기에 공간을 효율적으로 사용할 수 있다.

• Accordian은 접혀있는 부분이 펴지는 메타포적 특성이 강조된 패턴으로, 메뉴 외에도 리스트 화면에서도 이루어진다. 특히, Expandable menu에서는 기존 메뉴를 따로 거치지 않고 바로 하위 메뉴로 이동하는 것이 가장 중요하다.

Example: iOS_Convertible

• 메뉴를 swipe 하여 내리면 메뉴에 포함된 하위 메뉴가 확장되어 보여진다.

iOS_Filter Frame

• tap하여 하위메뉴를 활성화하거나 다시 숨긴다.

Android_CNN

• 손가락으로 화면의 항목을 선택하면 선택된 메뉴의 항목과 바로 아래항목 사이로 하위 항목을 펼쳐 보여준다.

iOS_Picstory

Samsung Galaxy Note(Android)_Internet

• 화면 가장자리를 tap & hold 하여 불러온 퀵메뉴에서 hold & drag를 통하여 하위메뉴를 연다.