出自UXGuide.net

渐进展开控件

Progressive Disclosure Control

目录 1 它用在这里合适吗？ 2 设计理念 2.1 渐进展开控件 3 使用模式 3.1 V 形 3.2 箭头 3.3 加减号控件 3.4 旋转三角形 3.5 预览箭头 4 设计规范 4.1 常规 4.2 交互 4.3 呈现 4.4 V 形 4.5 箭头 5 推荐尺寸与间距 6 标签 7 文档编写

渐进展开控件（Progressive Disclosure Control）用于显示或隐藏附加信息，包括数据、选项及命令。渐进展开是通过关注最基本的信息，仅在需要时才显示额外细节的方式来实现简约（Simplicity）。

渐进展开控件示例

注：与布局、菜单和工具栏相关的设计规范请参考各自相应的章节。

它用在这里合适吗？

考虑下列问题以进行判断：

• 用户是否不必在所有的情况下或者不必同时看到这些信息？如果是，则应使用渐进展开来显示信息以简化基本体验，并使用户可以方便地访问详细信息。

在这个示例中，重要的安全状态会一直显示在安全中心中，而详细信息则使用渐进展开的方式在需要时显示。

• 如果这些信息默认是可见的话，用户是否往往会选择将其隐藏？用户此时是否需要更多空间？用户是否有足够强烈的意愿自定义用户界面（UI）？如果不是，则不要用渐进展开的方式显示信息。

错误：

在这个示例中，用户并不希望隐藏信息。

• 额外信息的内容是否是高级、丰富、复杂的，或是与某个独立的子任务相关？如果是，考虑将信息显示在通过命令按钮或链接弹出的窗口中，而不要使用渐进展开控件。（如果额外信息是为高级用户设计的，那么这些信息就是高级的。如果额外信息难以阅读或编排的话，那就是复杂的。）

在这个示例中，关于软件名称和发行者的信息主要对高级用户来说才有意义，因此这里使用转向其他窗口的链接。

• 额外信息是否是描述项目是什么或应当如何使用的一句话或句子片段？如果是，考虑使用工具提示或信息提示。
• 额外信息是否与当前任务有关，但与当前显示的信息无关？如果是，考虑改用选项卡。不过，可折叠的列表往往比选项卡更加合适，因为他们具有更大的灵活性和扩展性。
• 显示或隐藏额外信息是否用作数据筛选器？如果是，则应考虑改用下拉列表或复选框，以将筛选应用至整个列表。

设计理念

渐进展开的目的在于：

• 通过关注最基本的信息，仅在需要时才显示额外细节的方式来简化 UI。
• 通过减少视觉混乱感来简化 UI 的外观。

使用渐进展开控件，两个目的都可以达到，用户单击即可看到更多的细节。不过，即使不使用明确的渐进展开控件，你也仍然能够达成第二个目标：

• 仅在特定的上下文中显示上下文相关的细节内容。例如，你可以根据已选中的对象或模式自动显示相关的上下文命令或工具栏。
• 为辅助用户界面降低功能可见性。功能可见性（Affordance）是一种视觉属性，它暗示对象应当如何被使用。有一种趋势是，用户可以在原处进行交互，但是，让所有这类用户界面看起来像是在大喊“单击这里！”的做法会产生大量视觉混乱。对于辅助用户界面来说，使用很低的功能可见性，而只在鼠标悬停时给予完整的效果往往是更好的做法。

在这个示例中，分级字段是可交互的，但仅在鼠标悬停时才会显示。

• 仅在先决条件满足时才显示后续步骤。该方法对于用户较为熟悉的、能够自信地开始第一步的任务最为合适。

在这个示例中，刚开始，用户名和密码页面只显示用户名及可选的密码框。密码确认及提示框则在用户输入了密码之后才会显示。

虽然渐进展开是极好的简化用户界面的方法，它也存在下列风险：

• 缺乏可发现性。如果用户没有看到，他们就会认为它不存在。如果用户看不到他们要找的东西的话，他们也许不会用鼠标悬停或单击。总是有这样的可能性，用户不会单击类似“更多选项”的东西。
• 缺乏稳定性。渐进展开应当符合人们的预期，至少应当让人觉得自然。如果控件的出现和消失令人意外的话，产生的用户界面会令人产生不稳定感。

渐进展开控件

通常，渐进展开控件不用标签来描述其行为，因此用户必须能够仅凭控件的视觉外观做到：

• 认出该控件使用了渐进展开方式。
• 确定当前状态是展开的还是折叠的。
• 确定是否需要额外的信息、选项或命令来完成任务。
• 如果需要的话，确定如何恢复到初始状态。

如果用户需要通过尝试和失败之后才能进行上述确定，你需要试着避免这类试验行为。

渐进展开控件的功能可见性较差，其视觉属性不能很好地暗示其使用方法。下表比较了一些常用的渐进展开控件的外观：

控件	用途	外观	图元含义
V 形箭头	显示全部：显示或隐藏位于完全或部分隐藏内容中的剩余条目。这些条目可能在原地显示（使用单 V 形），也可能显示在弹出式菜单中（使用双 V 形，或称双箭头形）。	V 形箭头指向操作发生的方向。	未来状态
三角箭头	显示选项：显示弹出式命令菜单。	箭头指向操作发生的方向	未来状态
加减号控件	展开容器：在层次结构中导航时，在原处展开或折叠容器的内容。	加减号没有指向，但操作总是发生在其右侧。	未来状态
旋转三角形	显示细节：在原处显示或隐藏单独条目的附加信息。也用于容器的展开与折叠。	旋转三角形有点像旋转的杠杆，指向操作发生的方向。	当前状态

最重要的一件事：

用户应当能够仅通过观察来正确预知渐进展开控件的行为。要实现这一点，应选择合适的使用模式，并统一地应用其外观、位置及行为。

使用模式

渐进展开控件具有多种使用模式。其中一些已内置于常用控件中。

V 形

V 形控件用于显示或隐藏位于完全或部分隐藏内容中的剩余条目。通常条目是在原位显示，但也可以显示在弹出菜单内。当显示在原位时，条目会一直保持展开，直到用户将其折叠为止。

V 形控件有以下几种用法：

原位展开用户界面 由相关联的对象接受输入焦点，单 V 形控件可用空格键激活。	在这组示例中，用于原位展开的单 V 形控件位于相关联控件的右侧。
带有外部标签的命令按钮 由命令按钮接受输入焦点，单 V 形控件可用空格键激活。	在这个示例中，单 V 形按钮的右侧带有标签。这种模式下，如果没有标签，按钮的意思理解起来会有些困难。
带有内部标签的命令按钮 由命令按钮接受输入焦点，并可由空格键激活。	在这组示例中，常规命令按钮通过双 V 形来暗示其含义。

箭头

箭头控件用于显示弹出式命令菜单。条目会保持展开直至用户进行选项或在某处单击。

如果箭头按钮是独立控件，那么由它接受输入焦点并可由空格键激活。如果箭头按钮具有父控件，则由父控件接受输入焦点，而箭头控件则需要用“Alt+向下键”及“Alt+向上键”激活，就像使用下拉列表控件一样。

箭头控件有以下几种用法：

独立按钮 箭头位于独立的按钮控件中。	在这些示例中，位于右侧的独立的箭头按钮指示了命令菜单的存在。
命令按钮 箭头是命令按钮的一部分。	在这些示例中，菜单按钮和分割按钮均在文本右侧带有箭头。

加减号控件

加减号控件用于在层次结构中导航时，在原处展开或折叠容器的内容。条目会一直保持展开，直到用户将其折叠为止。虽然看起来像是按钮，但其行为是在原位进行的。

由相关联的对象接受焦点，加号由向右键激活，减号由向左键激活。

加减号控件有以下几种用法：

可折叠树 用于显示容器内容的多级层次结构。	在这个示例中，加减号控件位于与其相关联的容器左侧。
可折叠列表 用于显示容器内容的两级层次结构。	在这个示例中，加减号控件位于与其相关联的列表标题左侧。

旋转三角形

旋转三角形用于在原处显示或隐藏单独条目的附加信息，也用于容器的展开与折叠。条目会一直保持展开，直到用户将其折叠为止。

由相关联的对象接收输入焦点。已折叠的（指向右方的）三角形可用向右键激活，已展开的（指向下方的）三角形可用向左键激活。

旋转三角形有以下几种用法：

可折叠树 用于显示容器内容的多级层次结构。	在这个示例中，旋转三角形位于与其相关联的容器左侧。
可折叠列表 用于显示容器内容的两级层次结构。	在这个示例中，旋转三角形位于与其相关联的列表项左侧。

预览箭头

和 V 形控件类似，额外信息将在原位显示或隐藏。条目会一直保持展开，直到用户将其折叠为止。与 V 形控件不同的是，其图元是对操作的图形化展示，通常用箭头来表达会发生的事情。

这些示例来自 Windows Media® Player，带有箭头的图形暗示了将会发生的行为。

当普通 V 形控件无法恰当表达出控件的行为时，预览箭头是最好的选择。例如展开行为较为复杂，或者存在多种展开类型等。

设计规范

常规

• 根据其用途选择渐进展开模式。关于每种模式的说明，参见上表。
• 不要将链接用于渐进展开控件。仅使用在使用模式一节中给出的渐进展开控件。不过，应当使用链接来导航至帮助主题。

正确：

错误：

在错误的示例中，链接用于就地显示更多选项。在当链接用于导航至其他页面或对话框，或用于显示帮助主题时，这种用途是正确的。

交互

• 对于那些没有用标签直接标注的 V 形及箭头，应当使用工具提示来描述其用途。

在这个示例中，工具提示用于指示未经标注的 V 形控件的效果。

• 如果用户展开或折叠某项，应当在该窗口下次显示时维持此状态，除非用户通常愿意从默认状态开始，基于特定的窗口及用户。
• 确保所有展开的内容可以被折叠，反之亦然，且其反向操作显而易见。这么做将鼓励对软件的探索，减少挫败感。让反向操作明显可见的最好方式就是将控件的位置固定不变。如果你需要移动控件，应当将其保持在与一个有视觉特征的区域的相对不变的位置上。

错误：

在这个示例中，单击带有 V 形的“Replace（替换）”按钮会出现“Replace with（替换为）”文本框。一旦如此，替换展开按钮变成了“替换”按钮，没有办法再回到原来的状态。

• 仅将合适的访问键用于渐进展开模式，就像在使用模式部分中列出的那样。不要使用 Enter 键来激活渐进展开控件。

呈现

• 不要将三角形箭头用作渐进展开之外的用途。

错误：

该示例并不是渐进展开的模式，在此处使用箭头暗示着命令会在弹出窗口中显示。

正确：

在这个示例中，正确地改用了小圆点。

• 移除（不要禁用）那些在当前上下文中不适用的渐进展开控件。

错误：

在这个示例中，不适用的渐进展开控件被错误地禁用了。

V 形

• 用单 V 形表示就地显示或隐藏。使用双 V 形表示通过弹出菜单来显示或隐藏。不过，你在命令按钮的内部标签中应当始终使用双 V 形。

正确：

错误：

在这个错误的示例中，双 V 形用于就地渐进展开。

正确：

在这个示例中，双 V 形用于就地渐进展开，因为这是一个使用内部标签的命令按钮。

• 为 V 形及相伴的控件之间提供视觉关联。因为就地 V 形位于相关 UI 的右侧并右对齐，在 V 形与相关控件之前可能存在一定的距离。

正确：

在这个示例中，就地 V 形与其相关的 UI 之间有着明确的关系。

错误：

在这个示例中，就地 V 形与其相关的 UI 之间并不存在明确的视觉关联，看起来像是浮在空间中的。

箭头

• 不要使用那些可能与后退、前进、转到或播放相混淆的箭头图形。应使用位于中性背景上的简单三角形箭头（不带箭杆）

正确：

这些箭头明确地是渐进展开控件。

错误（对于渐进展开来说）：

这些箭头看起来不像渐进展开控件。

错误（对于后退、前进来说）：

这些箭头看起来像是渐进展开控件，但事实上却不是。

推荐尺寸与间距

用于渐进展开控件的推荐尺寸与间距。

标签

• 用于带有外部标签的命令按钮上的 V 形：
  • 分配唯一的访问键。相关设计规范，参见键盘。
  • 使用句子大写样式。
  • 标签应写为不带句末标点的短语。
  • 标签应描述单击按钮的效果，并在状态更改时更改标签。
  • 如果界面上一直显示了一些选项、命令或细节，则使用下列标签组合：
    • 更多/更少选项。用于选项或是选项、命令与细节内容的混合。
    • 更多/更少命令。仅用于命令。
    • 更多/更少细节。仅用于信息。
    • 更多/更少 <对象名称>。用于其他对象类型，如文件夹。
  • 否则：
    • 显示/隐藏选项。用于选项或是选项、命令与细节内容的混合。
    • 显示/隐藏命令。仅用于命令。
    • 显示/隐藏细节。仅用于信息。
    • 显示/隐藏 <对象名称>。用于其他对象类型，如文件夹。
• 对于在带有内部标签的命令按钮上的 V 形，应当遵循标准的命令按钮标签设计规范。

文档编写

当提及递近显示控件时：

• 如果该控件具有固定标签，则直接称呼其标签即可，不要对控件进行描述。原样引用标签文本，包括其大小写，但无须包含访问键下划线。
• 如果该控件没有标签或标签不固定，则用控件的类型来称呼它：“chevron（V 形按钮）”、“arrow（箭头）”、“triangle（三角）”或“plus/minus button（加号/减号按钮）”。如果必要的话，还要描述控件的位置。如果控件是动态出现的，比如页面空间（page space）控件，在提及它时应当先描述如何显示该控件。

示例：To display the files within a folder, move the pointer to the start of the folder name, and then click the triangle next to the folder.（要显示文件夹中的文件，将鼠标指针移到文件夹名称的前面，然后单击文件夹旁边的三角。）

• 不要将其称为“button（按钮）”，除非是为了和其他不是按钮的弟近显示控件加以区别。
• 描述用户的交互行为时，对于箭头应使用“click（单击）”，对于其他类型则使用“expand（展开）”和“collapse（折叠）”。
• 应尽可能为标签文本应用粗体样式。对于英文来说，仅当需要避免歧义时才在其两侧添加引号；对于中文来说，则应总是使用引号。

示例：

• 对于 V 形按钮：To determine the file size, expand Details.（展开“详细信息”以确定文件的大小。）
• 对于箭头：To see all the options, click the arrow next to the Search box.（单击“搜索”旁边的箭头以查看全部选项。）
• 对于加号/减号：To view your picture, expand Pictures.（展开“图片”以查看你的图片。）