命令栏指南

[在商业发行之前会发生实质性修改的、与预发布产品相关的一些信息。Microsoft 不对此处提供的信息作任何明示或默示的担保。]

[此文章包含特定于通用 Windows 平台 (UWP) 应用和 Windows 10 的信息。有关 Windows 8.1 指南,请下载 Windows 8.1 指南 PDF 。]

命令栏使用户能够轻松访问操作,还可用于显示特定于用户上下文的命令或选项,例如照片选择或绘图模式。它们还可用于在应用页面或应用的各个部分之间导航。命令栏可以与任何导航模式一起使用。

带有图标的命令栏示例

命令栏由两个组件组成:用于放置你希望保持可见的命令或导航项目的操作空间,以及在命令栏上表示为省略号 [•••] 的“更多”区域。“更多”区域为较少访问的命令和导航项目打开一个下拉列表视图菜单。通过选择 [•••] 按钮,可打开该菜单并显示操作空间中的每个项目的文本标签。如果“更多”区域内不存在项目,则不会打开该下拉菜单,尽管仍然会显示操作空间中的每个项目的文本标签。

命令栏的放置

命令栏可以放置在屏幕顶部、屏幕底部,同时放置在屏幕的顶部和底部,也可以内联放置。

应用栏放置示例 1

  • 对于移动设备,如果你打算在应用中只放置一个命令栏,则将其放在屏幕底部以方便操作。如果你的应用底部具有选项卡,请考虑将命令栏放在顶部,以使 UI 不会在底部过于臃肿。
  • 对于较大的屏幕,如果你打算只放置一个命令栏,我们建议将其放置在屏幕顶部。
  • 你也可以内联放置命令栏,以便用户可以使用它们进行上下文操作。

命令栏可以放置在单视图屏幕(左边的示例)和多视图屏幕(右边的示例)上的以下屏幕区域中。内联命令栏可以放置在操作空间中的任意位置。

应用栏放置示例 2

操作的放置

根据其可见性设置命令栏中的操作的优先级。

  • 将最重要的命令、你希望在栏中保持可见的命令放置在操作空间中的前几个插槽中。在最小的屏幕上(320 epx 宽度),命令栏的操作空间中将放入 2 到 4个项目,具体取决于其他屏幕 UI。
  • 稍后将不太重要的命令放置在应用的操作栏中或“更多”区域中的前几个插槽内。这些命令将在应用具有足够的屏幕空间时可见,但是将在空间不足时进入“更多”区域的下拉菜单中。
  • 将最不重要的命令放在“更多”区域内。这些命令将始终显示在下拉菜单中。

可以使用图标或按钮可视化操作空间中的项目。如果仅使用图标,请包含文本标签。当 [•••] 处于选中状态时,文本标签显示在图标下。

如果有一个命令要一直显示在各个页面上,则最好使该命令位于一致的位置中。我们建议将“接受”、“是”和“确定”命令放置在“拒绝”、“否”和“取消”的左侧。一致性可以增加用户浏览系统的信心,并帮助他们在应用之间传递应用导航知识。

尽管你可以将所有操作都放置在“更多”下拉菜单内以使命令栏上只有 [•••] 可见,但是请记住,隐藏所有操作可能会使用户产生困惑。

命令栏浮出控件和工具提示

考虑对这些命令进行逻辑分组,例如将“答复”、“全部答复”和“转发”置于“响应”菜单中。

命令栏浮出控件示例

由于命令栏的文本标签在未选中 [•••] 时处于隐藏状态,请考虑为操作图标使用工具提示。

“更多”区域

“更多”区域命令栏的示例

  • “更多”提示 [•••] 是菜单的可见入口点,位于与主要操作相邻的工具栏最右侧。
  • 主要操作空间中的每个操作都由一个图标来表示。选择溢出菜单将显示主要操作空间中每个操作的文本标签。
  • 溢出菜单空间用于放置不太常用的操作。
  • 在断点处,操作可以在主要操作空间和溢出菜单之间往返。你还可以指定操作始终保留在主要操作空间中,而不必考虑屏幕或应用窗口大小。
  • 即使应用栏在较大屏幕上展开,不常用操作也可以保留在溢出菜单中。

响应指南

  • 在纵向和横向方向中,应用栏中应该显示相同数量的操作,这可以降低用户的认知负荷。所提供的操作数目应由处于纵向方向的设备宽度确定。
  • 通过定位断点,你可以随着屏幕大小或应用窗口大小的更改将操作移入和移出菜单。

相关主题

命令设计基础知识

 

 

显示:
© 2015 Microsoft