[UCD]Accordion手风琴面板设计

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

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

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

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,上下箭头分别表示收起和展开状态



Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: