在图形界面设计中，手风琴面板是垂直堆放的一列项目。每个项目可以”展开”显示其中的内容。根据结构的不同，同一状态下可以有零个至多个项目被展开。

这个术语来源于手风琴这种乐器，因为其风箱的每个部分可以向外拉伸。

手风琴面板同选项卡式界面相关，后者是水平排放的一列项目，其中只有一个项目的内容展开呈现在窗口中。

In a graphical user interface, an accordion is a vertically stacked list of items (e.g. labels or thumbnails). Each item can be “expanded” or “stretched” to reveal the content associated with that item. There can be zero or more items expanded at a time, depending on the configuration.

The term stems from the musical accordion in which sections of the bellows can be expanded by pulling outward.

An accordion is related to a tabbed interface, a horizontal list of items where exactly one item is expanded into a window

——–Wikipedia

手风琴面板的设计目的：

• 使互相关联的窗口统一起来
  
• 一次只呈现一个窗口，避免信息过载
  
• 未呈现的项目以标签形式/被遮盖形式显示，方便用户快速切换
  
• 所有窗口堆叠在一起，使空间得到有效利用
  

下面是几种常见的手风琴面板形式：

形式一：左侧箭头。由向右和向下的箭头组成。向右表示折叠状态，向下表示展开状态。根据结构的不同，可同时展开0至多个面板。在下面的例子中，例1可同时展开0-1个面板；例2中，可同时展开0-多个面板

形式二：左侧加减符号。加号表示收起状态，减号表示展开状态。根据结构的不同，可同时展开0至多个面板。

形式三：无箭头指示，但鼠标会有触发行为。在下面的例子中，例1是鼠标直接滑过触发展开收拢面板；例2鼠标滑过会使面板变色，点击后触发展开收拢。同时展开1个面板

形式四：右侧箭头。以上下箭头表示收起展开状态。向上箭头表示展开状态（可收起），向下箭头表示收起状态（可展开），不过也有相反的，如下图例3，上下箭头分别表示收起和展开状态

同样来自于http://www.troika.tv/，简单而有力，界面的形式挺象以前给联想做的的那套东西的，以前真的很烂，同样是简单的东西，自己却没有能表现出这样的质感和效果。图形隐喻是未来图标的设计方向，有力，简洁，亲切。学习其质感的表现。