From Design pattern
Jump to: navigation, search
Line 64: Line 64:
 
* 한정된 화면, 즉 제한된 공간을 사용하는 경우에 대표성을 띄는 항목들을 목록으로 구성하고 각각의 항목에 해당하는 내용을 확장해 보여줌으로 화면을 효율적으로 디자인할 수 있다.
 
* 한정된 화면, 즉 제한된 공간을 사용하는 경우에 대표성을 띄는 항목들을 목록으로 구성하고 각각의 항목에 해당하는 내용을 확장해 보여줌으로 화면을 효율적으로 디자인할 수 있다.
  
=== Example : iPhone_ ===
+
=== Example : iPhone_180번 ===
 
{{#Widget:Vimeo|id=95488635|width=300|height=405|start=4s}}
 
{{#Widget:Vimeo|id=95488635|width=300|height=405|start=4s}}
  
Line 71: Line 71:
 
== Accordion ==
 
== Accordion ==
 
<div id="sun-col">
 
<div id="sun-col">
 
 
=== 180번 사례 ===
 
* 특정 항목을 선택하면 하위 항목이 접혀진 상태에서 펼쳐지듯 보여준다.
 
<videoflash type="vimeo">95488635|300|490</videoflash>
 
  
 
</div>
 
</div>
  
 
[[Category:Metaphoric interaction]]
 
[[Category:Metaphoric interaction]]

Revision as of 13:28, 28 May 2014

Accordion은 세로로 쌓여진 목록에서 선택한 항목과 관련된 내용이 악기 아코디언처럼 확장되거나 늘어나는 패턴이다. 확장목록은 없을 수도 하나이거나 그 이상일 수도 있으며 리스트에서 많은 공간을 확보하기 위해 사용된다.

Accordion은 탭을 통한 리스트뷰와 유사한 목적을 가지지만 GUI적 효과에서 구분된다.

What Problem Does This Solve?

  • 한정된 화면, 즉 제한된 공간을 사용하는 경우에 대표성을 띄는 항목들을 목록으로 구성하고 각각의 항목에 해당하는 내용을 확장해 보여줌으로 화면을 효율적으로 디자인할 수 있다.

Example : iPhone_180번


Accordion