Windows桌面应用程序设计指南（控件篇11-渐进式展示控件）

使用渐进式展示控件，用户可以控制显示或隐藏包括数据、选项或命令等附加信息。通过聚焦于基本信息，只在需要时展示附加的细节，渐进式展示控件提升了界面的简明性。

一些渐进式展示控件

何时使用该控件

思考以下问题：

• 用户是不是不需要在所有场景、所有时间都能看到全部信息？如果是这样，使用渐进式控件展示信息可以简化基础体验，同时允许用户轻松访问完整信息。
  
  在此示例中，安全中心始终显示重要的安全状态，渐进展示控件可以按需展示细节。
• 如果信息是默认展示的，用户是否会有选择隐藏它们的倾向？在一些情况下用户是否需要更多空间？用户是否有足够的动力来个性化设置自己的界面？如果这些都不是，请不要使用渐进式展示控件。

错误示例：在该例中，用户不会想要隐藏界面上的这些信息。

• 附加的信息是否是高级信息、对程序有实质影响、很复杂或者与其他独立的子任务相关？如果是这些情况，考虑在独立的窗口中使用命令按钮或者链接、而不是渐进式展示控件来显示信息。（如果附加信息是针对高级用户的，那么就是高级信息；如果附加信息会令其他的信息难以阅读或者排版，那么就是复杂信息。）
  

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

• 附加信息是描述项目的功能或者使用方法的句子或者短语吗？如果是这样，考虑使用工具提示或者信息提示。

• 附加信息是否与当前任务有关，但是独立于当前已经展示的信息？如果是这样，考虑使用tabs选项卡代替。但是，可折叠列表通常比选项卡更可取，因为它们更灵活，可伸缩。

• 显示或隐藏附加信息本质上是为了过滤数据吗？ 如果是，请考虑使用下拉列表或复选框，而不是将筛选器应用于整个列表。

设计思路

渐进式展示的目的在于：

• 通过聚焦于基本信息和只在需要的情况下展示附加信息来简化界面。
• 通过减少杂乱来简化界面的的外观。
  这两个目标都可以通过使用渐进式展示控件实现，点击该控件可以展示更多细节。但是也可以在不使用渐进式控件的情况下实现第二个目的，具体的做法是：

1. 只在上下文中显示相关的细节。例如，选定对象或模式时，可以自动显示相关的上下文命令或工具栏。
2. 减少次级UI的示能。示能是暗示对象应该如何被使用的视觉特性。现行的做法是将用户可能会与之交互的控件都放在易于触及的地方，但如果界面上所用的控件都是这样，整个界面就像在都在尖叫“快点击我吧！”，视觉会很杂乱，干扰很多。对于次级UI控件，最好使用示能较弱的表现形式，在鼠标hover过上方之后再展示完全的形态。
   
   在该例中，评星部分是可以交互的，但只在鼠标hover之后才能明显地看出来

• 在先决步骤完成之后再显示接下来的步骤。这个设计模式最好用在用户比较熟悉的任务中，用户能自己很容易地填写开始的几个步骤。
  
  在该例中，用户姓名和密码页面最开始只显示了用户姓名和可选的密码框。当用户输入了密码之后，验证信息和提示框才会出现

尽管渐进式展示控件可以简化UI界面，但它们也有以下风险：

• 比较难以发现。用户可能会认为他们看不到的东西就不存在。如果用户没有找到他们需要的东西，他们也许不会hover或者点击该控件。用户总是有可能不会去点击类似“更多”这样的选项。

• 缺少稳定性。我们总是希望渐进式展示控件自然、起码是感觉起来是自然的。如果控件总是出人意料地出现又消失，最终UI界面就会给人以不稳定的感觉。

渐进式展示控件

渐进式展示控件一般没有直接描述它们行为的标签，所以要保证用户在仅仅观察渐进式控件的外观情况下就能做到以下几点：

• 识别出控件具有渐进式展示的功能。
• 了解当前的状态是需要扩展展示还是需要缩略展示。
• 了解要完成当前任务，是否需要更多地信息、选项或者指令。
• 了解在有需要的情况下，如何回到初始状态。

尽量避免用户需要尝试和试错才能确定以上几点。
渐进式展示控件的示能比较弱，也就是说他们的视觉属性尽管可以暗示他们的功能用法，但是这种能力相对较弱。下表比较了几种常见渐进式控件的示能：

控件	功能	外观	图标所表示的是
V形箭头	展示全部：在完全或部分隐藏的内容中显示或隐藏剩余的项目。项目在适当的位置显示(使用单V箭头)或者在弹出式菜单中显示(使用双V箭头)。	V型指向操作将会出现的方向	将来的状态
三角箭头	展示选项：使用弹出式命令菜单显示	箭头指向操作将会出现的方向	将来的状态
加号和减号控件	扩展容器：在层级结构中导航时，就地展开或折叠容器内容。	加号和减号本身没有指向性，但是操作总是出现在该符号的右方	将来的状态
旋转三角符号	展示细节：就地显示或隐藏独立项目的细节信息。它们也被用来对容器进行扩展	旋转的三角形有点像旋转的杠杆，所以它们指向动作发生的方向。	现在的状态

V形箭头

三角箭头

加号和减号控件

旋转三角符号

如果只记住一件事：
用户应该只通过视觉观察就能正确地预知渐进式展示控件的功能。要实现这一点，请选择适当的使用模式，并保持它们的外观、位置和行为始终一致。

应用范例

渐进式展示控件有几种使用模式，其中的几种被组合成了通用控件。

V形箭头

V形箭头在完全或部分隐藏的内容中显示或隐藏剩余的项目。通常项目是就地显示的，但是它们也可以显示在弹出菜单中。当就地显示时，该项保持展开状态，直到用户将其折叠为止。
V形箭头有以下几种使用形式：

• 就地展开相关的对象会接收输入焦点，单个V形箭头可以使用空格键激活。
  

  在这些例子中，V形单箭头位于它们的相关控件的右边

• 带有扩展标签的命令按钮 命令按钮获取输入焦点，单个V形箭头可以使用空格键激活。

  在该例中，单V箭头按钮被文字标记，并与标签左对齐。在这种模式下，没有标签的单V箭头按钮是很难理解的

• 含有内部箭头标签的命令按钮 命令按钮获取了输入焦点并可以被空格键激活。

  在常规的命令按钮中，双v箭头的方向与按钮所指含义的方向相同

三角箭头

点击三角箭头可以展示一个弹出式的命令菜单。直到用户做出选择或者点击别处之前，该菜单会一直保持展开状态。
如果箭头按钮是一个单独的控件，它会接收输入焦点并且被空格键激活。如果箭头按钮有父级控件，父级控件会接受输入焦点，三角箭头按钮可以被Alt+上箭头键或Alt+下箭头键被激活，这一行为与下拉菜单控件相同。
三角箭头有以下几种使用方式：

• 独立按钮 箭头放置于一个独立的按钮中。
  
  在上例中，置于右方的三角箭头按钮预示着可以展开命令菜单。

• 命令按钮 三角箭头是命令按钮的一部分。
  
  在上例中，分裂式按钮和菜单按钮的文字标签右方都含有三角箭头。

加号和减号控件

加号和减号控件用于在层级结构中展示或隐藏容器内容。除非用户收起，项目将一直保持展开状态。尽管这个控件看起来像按钮，但它们的行为都是就地发生的。

与之相关的对象获得输入焦点。右箭头键可以激活加号控件，左箭头键可以激活减号控件。

加号和减号控件有以下几种使用方式：

• 可折叠树状图使用多层级结构以展示容器内容。
  
  在该例中，加号和减号控件放置于相关容器对象的左边。
• 可折叠列表使用两层结构以展示容器内容。
  
  在该例中，加号和减号控件放在相关列表标题的左边

可旋转三角箭头

可旋转三角箭头可以就地显示或隐藏一个独立项目的附加信息。它们也可以用来扩展容器。如果用户没有主动收起，项目会保持展开状态。
相关对象获得输入焦点。收起箭头（向右的箭头）可使用向右箭头键激活，扩展箭头（向下的箭头）可使用左箭头键激活。

可旋转三角箭头有以下几种使用形式：

• 可折叠树状图：使用多层级结构展示容器内容。
  

  该例中，可旋转三角箭头位于相关控件的左边

• 可折叠列表视图：使用二层结构实时展示附加信息。
  

  该例中，可旋转三角箭头位于相关列表项目的左边

预览箭头

和V形箭头一样，附加信息都被实时展示或隐藏，除非用户主动收起，项目会一直保持展开状态。和V形箭头不同的是，预览箭头通常都有一个图像化的图标来表示动作含义，通常用箭头来表示将要发生的动作。

这几个例子来自于Microsoft Windows Media Player，带箭头的图标预示着将要发生的动作

预览箭头最好在标准V型箭头不能充分表达控件行为的情况下使用，比如信息展示动作很复杂，或者有多种类型的信息需要展示。

设计指南

通用原则

• 根据具体情境使用合适的渐进式展示控件。各种用法的详细说明请见上文叙述。
• 渐进式展示控件不要加上链接。只能使用在应用范例中提到的这些控件。但是，导航到“帮助主题”还是可以使用链接的。
  
  正确示例
  
  
  错误示例：该例中，链接被用来就地展示更多选项，这是错误的。但是如果该链接会导航用户至其他的页面或者对话框，或者展示“帮助主题”页面，则是可以的。

交互

• 对于没有直接标签的V形箭头和三角箭头，使用工具提示来描述它们的作用。
  

  示例

• 除非用户更希望以默认状态开始程序，如果用户收起或者展示了一个项目，保持这个状态，使其在下次窗口打开时依然生效。保证该状态对每个界面、每个用户身份都生效。

• 确保所有能展开的内容都可以折叠收起，反之亦然，并且反向操作是足够明显的。这样做可以鼓励用户探索，减少挫折感。使反向操作明显的最佳方法是将控件始终保持在同一固定位置。如果需要移动控件，请将其保持其视觉上的相对位置不变。
  

  错误示例：在这个例子中，单击带V型箭头的Replace按钮，会显示Replace with 文字框。完成此操作后，Replace展开按钮变成了Replace命令按钮，因此也无法恢复原始状态了。

• 对渐进式展示控件合理分配存取键，遵守设计范例中给出的存取键设置规范。不要使用Enter键激活渐进式展示控件。

展示

• 三角状箭头标志不要用于除了渐进式展示控件之外的用途上。
  
  错误示例：虽然这个例子不是渐进展示模式，但是在这里使用箭头表明将有命令出现在一个弹出窗口中。

正确示例：在这里使用子弹标记是正确的做法

• 当渐进式控件不再适用于当前上下文的时候，移去（而不是禁用）它。渐渐进式控件控制应该始终表达它们的功能，所以当没有更多的信息可以提供时，删除它们。
  
  错误示例：不再适用的渐进式展示控件直接删除，而不是禁用

V形箭头

• 使用V形单箭头就地展示或收起内容。使用V形双箭头展开或收起一个弹出框。但是对于带有标签文字的命令按钮，还是要使用双箭头。
  

  正确示例
  
  
  错误示例。双箭头用来就地展示内容是不对的
  
  
  正确示例：这里双箭头可以用来就地展示内容，因为它位于一个带标签文字的命令按钮中

• 为V形箭头和它的相关联控件设计视觉线索。因为V形箭头位于相关控件的右侧，并且右对齐，所以在V形箭头和相关控件之间可能会有有相当长的距离。

正确示例：V形箭头和相关控件之间有明显的视觉联系

错误示例：V形箭头和相关控件之间没有明显的视觉联系，看起来像是漂浮在一边

三角箭头

• 不要使用会让用户误会有“回退”、“前进”、“开始”或者“播放”含义的箭头图标。直接使用不带主干的中性颜色三角形箭头。
  
  正确示例：这些图标很明显是渐进式展示控件
  
  
  渐进式展示控件的错误示例：这些箭头看起来不像渐进式展示控件
  
  
  前进/后退按钮错误示例：这些箭头看起来像渐进式展示控件，但它们并不是

建议尺寸和间距

渐进式展示控件的建议尺寸和间距

标签

• 对于带有双箭头控件的命令按钮：
  1.分配一个单独的存取键。
  2.使用句式大小写规则。
  3.使用短语作为标签文字，结尾不要有标点符号。
  4.如果图面总是显示一些选项、命令或细节，请使用以下标签对:
  更多 / 更少选项（More/Fewer options）。用于选项或选项、命令和详细信息的混合。
  更多 / 更少命令（More/Fewer commands）。仅用于命令。
  更多 / 更少信息（More/Fewer details）。仅用于信息。
  更多 / 更少（More/Fewer）。用于其他对象类型，如文件夹。
  其他情况:
  显示 / 隐藏选项（Show/Hide options）。用于选项或选项、命令和详细信息的混合。
  显示 / 隐藏命令（Show/Hide commands）。仅用于命令。
  显示 / 隐藏详细信息（Show/Hide details）。仅用于信息。
  显示 / 隐藏（Show/Hide）。用于其他对象类型，如文件夹。
• 对于带有内部标签的命令按钮上的V形箭头，请遵循标准命令按钮设计指南。

说明

当提到渐进式命令按钮时：

• 如果控件有固定的标签，直接用标签文字指代该控件，不要再去描述该控件的样式形态；使用包含大小写规则的确切标签文字，但是不要带有存取键的下划线标志。
• 如果控件没有标签或者标签不固定，提到该控件时就要使用类型来描述它: V形箭头、箭头、三角箭头或加号 / 减号按钮。 如果需要，还要描述该控件的位置。 如果控件是动态显示的，例如页面空间控件，则通过描述如何使控件显示来启动引用。

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

• 除非在与其他非按钮形式的渐进式展示控件做对比，不要将它单独描述为按钮。

• 使用“单击”描述用户的交互动作。如果需要更简明。使用"单击..."这样的句式来扩展或者省略。

• 尽可能使用粗体字表示标签文字。此外在为了防止混淆的情况下，可以把标签文字放在引号中。
  示例：

• (V形箭头)要确定文件大小，请单击详细信息。

• (对于箭头)要查看所有选项，请单击搜索框旁边的箭头。

• (对加号/减号)要查看图片，请单击图片。