渐进式披露控件

注意

此设计指南是为 Windows 7 创建的，尚未针对较新版本的 Windows 进行更新。 大部分指南原则上仍然适用，但演示和示例并不反映我们 当前的设计指南。

使用渐进式披露控件，用户可以显示或隐藏其他信息，包括数据、选项或命令。 渐进式披露通过关注基本信息（但根据需要显示其他详细信息）来促进简单性。

渐进式披露控制示例。

注意

与 布局、 菜单和 工具栏 相关的指南在单独的文章中介绍。

这是正确的控件吗？

在决定之前，请考虑以下问题：

• 用户是否需要在某些（但不是所有）方案中查看信息，还是某些情况下（但不是所有时间）中查看信息？ 如果是这样，则使用渐进式披露显示信息可简化基线体验，但允许用户轻松访问信息。

  

  在此示例中，Windows 安全中心应用一直显示重要的安全状态，但使用渐进式披露按需显示详细信息。

• 如果信息默认显示，用户是否曾经选择隐藏它？ 用户是否需要更多空间的情况？ 用户是否有足够的动力来自定义用户界面 (UI) ？ 如果没有，则显示信息而不使用渐进式披露。

  不正确：

  

  在此示例中，不会促使用户隐藏信息。

• 其他信息是高级、实质性、复杂还是与独立子任务相关？ 如果是这样，请考虑使用 命令按钮 或 链接 （而不是使用渐进式披露控件）在单独的窗口中显示信息。 (如果其他信息适用于高级用户，则为高级信息。如果它使其他信息难以阅读或布局，则很复杂。)

  

  在此示例中，有关软件名称和发布者的信息主要对高级用户有意义，因此使用指向单独窗口的链接。

• 附加信息是描述项的作用或如何使用项的句子或句子片段？ 如果是这样，请考虑使用 工具提示 或信息提示。

• 其他信息是否与当前任务相关，但与当前显示的信息无关？ 如果是这样，请考虑改用 选项卡 。 但是，可折叠列表通常优于选项卡，因为它们更灵活且可缩放。

• 显示或隐藏附加信息本质上是否是数据筛选器？ 如果是这样，请考虑改用下拉列表或检查框将筛选器应用于整个列表。

设计概念

渐进式披露的目标是：

• 通过关注基本内容，根据需要显示其他详细信息来简化 UI。
• 通过减少对混乱的感知来简化 UI 的外观。

这两个目标都可以通过使用渐进式披露控件来实现，用户单击该控件可查看更多详细信息。 但是，可以通过以下方法实现第二个目标，即无需使用显式渐进式披露控件即可简化外观：

• 仅在上下文中显示上下文详细信息。 例如，当与所选对象或模式相关时，可以自动显示上下文命令或工具栏。

• 减少辅助 UI 的负担。提供 是一种视觉属性，用于建议对象的使用方式。 趋势是拥有用户可以与之交互的 UI，但让所有此类 UI 都绘制出来尖叫“点击我！” 会导致过多的视觉混乱。 对于辅助 UI，通常最好使用细微的提供，并给予鼠标悬停的完整效果。

  

  在此示例中，“评分”字段是交互式的，但在鼠标悬停之前不会显示。

• 仅在完成先决条件后显示后续步骤。 此方法最适合用于熟悉的任务，用户可以放心地执行第一步。

  

  在此示例中，“用户名和密码”页最初仅显示“用户名”和“可选密码”框。 确认框和提示框在用户输入密码后显示。

虽然渐进式披露是简化 UI 的好方法，但存在以下风险：

• 缺乏可发现性。 用户可能认为，如果看不到某些内容，则不存在。 如果用户看不到他们要查找的内容，则他们可能不会悬停或单击。 用户始终有可能不单击“更多”选项等内容。
• 缺乏稳定性。 渐进式披露应该是预期的，或者至少感觉很自然。 如果控件意外出现并消失，则生成的 UI 可能会感到不稳定。

渐进式披露控制

渐进式披露控件通常不显示描述其行为的直接标签，因此用户必须能够单独根据控件的视觉外观执行以下操作：

• 认识到控件提供渐进式披露。
• 确定当前状态是展开还是折叠。
• 确定是否需要其他信息、选项或命令来执行任务。
• 根据需要确定如何还原原始状态。

虽然用户可以通过试验和错误来确定上述情况，但你应该尝试使此类试验变得不必要。

渐进式披露控件的 提供能力相当弱，这意味着它们的视觉属性表明它们的使用方式，尽管它们很弱。 下表比较了常见的渐进式披露控件的外观：

控制	目的	外观	字形指示
V 形	显示所有： 显示或隐藏完全或部分隐藏内容中的剩余项目。 项 (使用单个 V 形) 或弹出菜单 (使用双 V 形) 显示。	V 形指向将发生操作的方向。	未来状态
箭头	显示选项： 显示弹出命令菜单。	箭头指向将发生操作的方向。	未来状态
加号和减号控件	展开容器： 在层次结构中导航时，展开或折叠容器内容。	加号和减号不指向，但操作始终发生在其右侧。	未来状态
旋转三角形	显示详细信息： 显示或隐藏单个项的其他信息。 它们还用于扩展容器。	旋转三角形有点类似于旋转杠杆，因此它们指向发生操作的方向。	当前状态

如果你只做一件事...

用户应能够通过单独检查正确预测渐进式披露控件的行为。 为此，请选择适当的使用模式，并一致地应用其外观、位置和行为。

使用模式

渐进式披露控制有多种使用模式。 其中一些内置于常见控件中。

V 形

V 形显示或隐藏完全或部分隐藏内容中的剩余项。 通常，这些项会就地显示，但它们也可以显示在弹出菜单中。 就位后，项将保持展开状态，直到用户折叠它。

V 形按以下方式使用：

使用情况	示例
就地 UI 关联的 对象接收输入焦点，并使用空格键激活单个 V 形。	在这些示例中，就地单个 V 形位于其关联控件的右侧。
具有外部标签的命令按钮 命令按钮接收输入焦点，并使用空格键激活单个 V 形。	在此示例中，单个 V 形按钮被标记并放置在标签的左侧。 使用此模式时，如果没有其标签，按钮将很难理解。
具有内部标签的命令按钮 命令按钮接收输入焦点，并使用空格键激活。	在这些示例中，常规命令按钮具有双 V 形的位置来表示其含义。

箭头

箭头显示弹出命令菜单。 项目将保持展开状态，直到用户在任何位置进行选择或单击。

如果箭头按钮是独立控件，则它接收输入焦点，并使用空格键激活。 如果箭头按钮具有父控件，则父级将接收输入焦点，并使用 Alt+向下键和 Alt+向上键激活箭头，就像使用下拉列表控件一样。

箭头的使用方式如下：

使用情况	示例
单独的按钮 箭头位于单独的按钮控件中。	在这些示例中，位于右侧的单独箭头按钮表示命令菜单。
命令按钮 箭头是命令按钮的一部分。	在这些示例中，菜单按钮和拆分按钮的箭头位于文本右侧。

加号和减号控件

在层次结构中导航时，加号和减号控件展开或折叠以显示容器内容。 该项将保持展开状态，直到用户将其折叠。 尽管这些看起来像按钮，但它们的行为是就地的。

关联的对象接收输入焦点。 加号使用向右键激活，减号使用向左键激活。

加号和减号控件按以下方式使用：

使用情况	示例
可折叠树 用于显示容器内容的多级层次结构。	在此示例中，加号和减号控件位于关联容器的左侧。
可折叠列表 用于显示容器内容的两级层次结构。	在此示例中，加号和减号控件位于关联列表标题的左侧。

旋转三角形

旋转三角形显示或隐藏单个项的其他信息。 它们还用于扩展容器。 该项将保持展开状态，直到用户将其折叠。

关联的对象接收输入焦点。 折叠 (向右) 三角形使用向右键激活，展开 (使用向左键向下) 三角形。

旋转三角形通过以下方式使用：

使用情况	示例
可折叠树 用于显示容器内容的多级层次结构。	在此示例中，旋转三角形位于关联容器的左侧。
可折叠列表 一个两级层次结构，用于显示其他信息。	在此示例中，旋转三角形位于其关联列表项的左侧。

预览箭头

与 V 形一样，其他信息会就地显示或隐藏。 该项将保持展开状态，直到用户将其折叠。 与 V 形不同，字形具有操作的图形表示形式，通常使用箭头指示将发生的情况。

在 Microsoft Windows 媒体播放器 的这些示例中，字形具有箭头，用于建议将要执行的操作。

预览箭头最适合用于标准 V 形无法充分传达控件行为的情况，例如，当披露很复杂或存在多种类型的披露时。

准则

常规

• 根据使用情况选择渐进式披露模式。 有关每种使用模式的说明，请参阅上表。

• 请勿将链接用于渐进式披露控制。 仅使用“使用模式”部分中提供的渐进式披露控件。 但是，请使用链接导航到 “帮助”主题。

  正确：

  

  不正确：

  

  在不正确的示例中，链接用于显示更多就地选项。 如果链接导航到其他页面或对话框，或者显示帮助主题，则此用法是正确的。

交互

• 对于未直接标记的 V 形和箭头，请使用工具提示描述它们的作用。

  

  在此示例中，工具提示指示未标记 vron 控件的效果。

• 如果用户展开或折叠项，请保留状态，以便在下次显示窗口时生效，除非用户可能希望从默认状态开始。 使状态在每窗口、每用户的基础上保持。

• 确保所有扩展内容都可以折叠，反之亦然，并且反转操作是显而易见的。 这样做可以鼓励探索并减少挫折感。 使反向操作明显的最佳方式是将控件保持在同一固定位置。 如果需要移动控件，请将其保存在视觉上不同的区域内的同一相对位置。

  不正确：

  

  

  在此示例中，单击带有 V 形的“替换”按钮会显示“ 替换为 ”文本框。 完成此操作后，Replace 扩展器将成为 Replace 命令，因此无法还原原始状态。

• 仅使用适用于渐进式披露模式的访问密钥，如使用模式部分所述。 请勿使用 Enter 激活渐进式披露。

呈现

• 请勿将三角形箭头用于渐进式披露以外的目的。

  不正确：

  

  尽管此示例不是渐进式披露模式，但在此处使用箭头表示命令将显示在弹出窗口中。

  正确：

  

  在此示例中，正确使用项目符号。

• 删除 (不会禁用) 不适用于当前上下文的渐进式披露控件。 渐进式披露控制应始终兑现其承诺，因此，如果没有更多信息要提供，请将其删除。

  不正确：

  

  在此示例中，错误地禁用了不适用的渐进式披露控件。

V 形

• 使用单个 V 形可就地显示或隐藏。 使用双 V 形显示或隐藏弹出菜单。 但是，对于具有内部标签的命令按钮，应始终使用双 V 形。

  正确：

  

  不正确：

  

  在不正确的示例中，双 V 形用于就地渐进式披露。

  正确：

  

  在此示例中，双 V 形用于就地渐进式披露，因为它是具有内部标签的命令按钮。

• 在 V 形及其关联控件之间提供视觉关系。 由于就地 V 形放置在其关联 UI 的右侧且右对齐，因此 V 形与其关联控件之间可能会有相当的距离。

  正确：

  

  在此示例中，就地 V 形与其关联的 UI 之间存在明确的关系。

  不正确：

  

  在此示例中，就地 V 形与其关联的 UI 之间没有明确的视觉关系，因此它似乎漂浮在空间中。

箭头

• 请勿使用可能与后退、前进、Go 或播放混淆的箭头图形。 在中性背景上使用简单的三角形箭头 (无词干的箭头) 。

  正确：

  

  这些箭头显然是渐进式的披露控件。

  渐进式披露) (不正确：

  

  这些箭头看起来不像渐进式披露控件。

  后退、前进) (不正确：

  

  这些箭头看起来像渐进式披露控件，但不是。

建议的大小和间距

对于渐进式披露控件，建议调整大小和间距。

标签

• 对于具有外部标签的命令按钮上的 V 形：
  • 分配唯一 的访问密钥。 有关指南，请参阅 键盘。
  • 使用 句子样式大写。
  • 将标签编写为短语，不使用结尾标点符号。
  • 编写标签，以便描述单击按钮的效果，并在状态更改时更改标签。
  • 如果图面始终显示某些选项、命令或详细信息，请使用以下标签对：
    • 更多/更少的选项。 用于选项或选项、命令和详细信息的混合使用。
    • 更多/更少的命令。 仅用于命令。
    • 详细信息更多/更少。 仅用于信息。
    • 更多/更少的 <对象名称>。 用于其他对象类型，例如文件夹。
  • 否则：
    • 显示/隐藏选项。 用于选项或选项、命令和详细信息的混合使用。
    • 显示/隐藏命令。 仅用于命令。
    • 显示/隐藏详细信息。 仅用于信息。
    • 显示/隐藏 <对象名称>。 用于其他对象类型，例如文件夹。
• 对于具有内部标签的命令按钮上的 V 形，请遵循标准 命令按钮 准则。

文档

引用渐进式披露控件时：

• 如果控件具有固定标签，则仅通过控件的标签引用控件;不要尝试描述控件。 使用确切的标签文本（包括其大写），但不要包含访问键下划线。

• 如果控件没有标签或它不是固定的，请通过控件的类型来引用控件：vron、箭头、三角形或加/减按钮。 如有必要，请描述控件的位置。 如果控件（如 页面空间 控件）动态显示，请通过描述如何使控件显示来启动引用。

  例子： 若要显示文件夹中的文件，请将指针移动到文件夹名称的开头，然后单击文件夹旁边的三角形。

• 不要将控件称为按钮，除非与其他不是按钮的渐进式披露控件形成对比。

• 若要描述用户交互，请使用单击。 如果需要清楚起见，请使用 click...展开或折叠。

• 如果可能，请使用加粗文本设置标签的格式。 否则，仅在需要时将标签置于引号中以防止混淆。

示例：

• (对于 v 形) 若要确定文件大小，请单击“ 详细信息”。
• (对于箭头) 若要查看所有选项，请单击“ 搜索 ”框旁边的箭头。
• (对于加/减) 若要查看图片，请单击“ 图片”。