Difference between revisions of "Accordion"

Revision as of 19:18, 23 June 2014

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

Accordion은 tap을 통한 List view와 유사한 목적을 가지지만 GUI적 효과에서 구분된다.

한정된 화면, 즉 제한된 공간을 사용하는 환경에서 대표성을 띄는 항목들과 각각의 항목에 해당하는 내용을 효과적으로 보기 위한 pattern이 필요하다. Accordion은 각각의 항목에 해당하는 내용을 확장해 보여 줄 수 있는 기능을 제공한다.

Accordion은 메타포적 특성을 통해 항목의 세부 내용을 펼쳐 보여준다. 세부 내용을 펼처보는 과정에서 더 동적이고 매력적으로 보이게 한다.

@@ Line 1: / Line 1: @@
-{{#css:
-#mw-content-text h3 span {
-font-weight: 600;
-padding-left: 0px;
-}
-.mw-headline {
-font-weight: 600;
-}
-span.mw-editsection {
-font-weight: 200;
-position: relative;
-float:right;
-margin-right: 25px
-}
-span.mw-editsection a {
-font-weight: 200;
-}
-.art-subpage {
-background: #F7F7F7;
-}
-#mw-content-text p {
-padding-top: 0px;
-padding-bottom: 6px;
-}
-.mw-content-ltr ul {
-margin: 0.3em 0 0 42px;
-}
-hr {
-margin-top: 0px;
-margin-bottom: 0px;
-margin-left: -31px;
-width: 720px;
-border-bottom: 1px solid #E0E0DD;
-border-left: 0px;
-border-right: 0px;
-border-top: 30px solid #F7F7F7;
-}
-<!--
-#sun-col {
--webkit-column-count:2; /* Chrome, Safari, Opera */
--moz-column-count:2; /* Firefox */
-column-count:2;
-}
-#sun-col p {
-padding-left: 0px;
--->
-}
-}}
 Accordion은 세로로 쌓여진 목록에서 선택한 항목과 관련된 내용이 악기 아코디언처럼 확장되거나 늘어나는 패턴이다. 확장목록은 없을 수도 하나이거나 그 이상일 수도 있으며 리스트에서 많은 공간을 확보하기 위해 사용된다.
@@ Line 72: / Line 14: @@
 == Accordion (detail) ==
-<div id="sun-col">
 === iOS_Tidy ===
@@ Line 80: / Line 21: @@
 {{#Widget:Vimeo|id=96785531|width=300|height=533}}
-</div>
 ----
 == Accordion (menu) ==
-<div id="sun-col">
 === iOS_Yummly ===
@@ Line 107: / Line 45: @@
 [[File:Accordion_uipatterns.jpeg|300px]]
-</div>
 [[Category:Metaphoric interaction]]