UI线框图之手风琴 Accordions

2.10. 手风琴 Accordions

本文章属于《跟我学线框图》系列教程，转载请注明出处。

手风琴是带有嵌套选项的堆叠式容器，单击或点击使展开和折叠。

手风琴是一个有吸引力的控件，因为他们允许在一个紧凑的空间中显示许多链接。 但是它们可能不那么被人熟悉，甚至不那么直观，所以要小心不要过度使用它们。 它们既可以用于导航，也可以用于内容，这与垂直导航不同。

其他名称包括展开面板和展开 / 折叠控件。

何时使用手风琴

《Designing Web Interfaces》这本书说，手风琴“有利于内容模块的折叠”。 不过，它们应该尽量少用，因为它们具有很强的视觉风格。”

这种视觉风格常常包括在面板打开和关闭时对其进行动画处理，这看起来像是一种“酷”的效果，但通常会增加不必要的交互成本，而使用更简单的控件可以避免这种成本。 在这方面，它们类似于 轮播控件，由于这个原因，轮播控件已经失宠。

虽然手风琴通常不是桌面屏幕的最佳选择，但它们更适用于移动端，比如来自 UX Mastery 的移动导航菜单:

使用手风琴进行导航的一个很好的理由是，用户可能希望看到整个导航层次结构。 一种用例是，用户可能希望在提交到特定部分或链接之前浏览站点内容。 在这方面，它们类似于分层垂直导航。

对于站点的用户界面模式，手风琴仅应在以下情况下用于导航：

当有一个网站上超过两个主要部分，每个部分有两个或两个以上的子部分

少于10个主要部分

在主导航栏中只显示两个级别

至于页面内容使用手风琴，美国网页设计系统建议，如果没有很多内容，或者用户希望一次看到所有内容，不要使用手风琴控件。 一个有效的用例示例是 FAQ 帮助页面。 但是，不要仅仅因为内容太多而使用它们。 桌面用户不喜欢长页面的想法被很多人认为是一个神话。

在所有情况下，避免水平手风琴(面板是水平“堆叠”)。 他们是令人陌生，而且几乎总是劣于另一种控件。

如何使用手风琴

以下是适用于大多数情况的一般准则

当单击一个面板时，该面板将被展开，而其他面板将被折叠。 一次只能打开一个面板

不要在悬停状态下打开可折叠容器，而是使用点击或触摸行为

允许用户单击标题区域中的任何位置来展开或折叠内容; 更大的目标更容易操作

开始时打开第一个手风琴选项卡，不要默认全部关闭

突出显示当前面板，这样用户可以区分打开的面板标题和闭合面板标题

如果有动画面板，“动画应该是微妙的，这意味着它应该不超过250毫秒。”

不要把手风琴和同一级别的其他类型的导航混在一起

如果某个部分的内容不能垂直放在页面上，请在面板内滚动，而不要滚动整个控件

Basic Usage 基本用法

States 状态

对于打开的面板，手风琴应该有一个清晰的选择状态，如果适用的话，对于内部的选择项目也应该有一个清晰的选择状态。 悬停状态也应该同时应用于两者。

Variations 变化

为了与标准保持一致，应尽量减少变化。 一个常见的选择是添加图标。 + 和-图标是最易识别和熟悉的。 尖角三角形或符号也可以使用。

图标状态应该告诉用户当他们点击时会发生什么。也就是说，折叠的面板上应该显示 + 或者展开的图标，而不是指示打开的面板已经展开。

Related Controls 相关控件

Tabs 标签

Vertical Navigation 垂直导航

Further Reading 进一步阅读

“Designing Web Interfaces” by Bill Scott and Theresa Neil

Interaction Cost (Nielsen Norman Group)

Accordions Are Not Always the Answer for Complex Content on Desktops (Nielsen Norman Group)