应用栏指南

Applies to Windows and Windows Phone

标准导航栏控件的外观示例

标准应用栏控件的外观示例

描述

通过应用栏,用户可以在需要时轻松访问相应的命令。用户可以轻扫屏幕的顶部或底部边缘以显示应用栏,然后可以与其中的内容交互以使应用栏消失。应用栏还可用于显示特定于用户上下文的命令或选项,例如照片选择或绘图模式。它们还可用于在页面或应用的各个部分之间导航。

更深入地了解导航功能,它是应用功能大全系列的一部分:  平面导航详细信息(HTMLXAML)以及分层导航详细信息(HTMLXAML

如果你有用户完成工作流所必需的命令(如购买产品),请将这些命令放在画布上(而不是应用栏上)。

顶部应用栏

导航栏或顶部应用栏是放置用户用于访问应用其他区域的导航控件的推荐位置。通过使用顶部应用栏进行导航,可以为导航 Windows 应用商店应用提供一致和可预知的用户体验。一致性可以增加用户浏览系统的信心,并帮助他们在应用之间传递应用导航知识。

用户应该能够仅使用画布就完成核心方案。导航栏是导航控件的辅助位置。导航栏有助于将用户定位到应用的所有部分,可以提供对主页的快速访问,还可以通过跳转到应用的不同部分鼓励用户进行探索。

你还可以选择在顶部应用栏中包括其他功能,例如添加一个“+”按钮以创建一个新项目或集成一个搜索框。在添加其他功能时,我们建议将它们放在应用栏的右侧。

尽管你可以设置导航栏中的项的样式,但默认外观是一个简单的按钮。不过,另一种典型的视觉处理方式是使用按钮和缩略图,如上图所示。

还可以像应用商店应用那样,将导航栏分为多个区域。这里你可以看到顶部用于全局导航,底部用于应用类别。

应用商店应用的导航栏图像

底部应用栏

底部应用栏是放置命令的建议位置。通过将命令从应用画布移到应用栏,你可以为用户提供最逼真的沉浸式体验。

标准应用栏控件适用于有兴趣实现极少或者无需自定义工作的应用栏的开发人员。尽管创建应用栏很容易,但确保其行为与 Windows 指导和模式相符并非易事。CommandBar classWinJS.UI.AppBar object 与预定的设计和行为完全符合,因此开发人员无需考虑各个微小细节,也不太可能偏离常见的命令操作模式。

如果你想抛弃标准体验,希望自定义你的应用栏,请使用 AppBar 控件代替 XAML 中的 CommandBar 控件。

你可以使用内置命令图标,或创建自己的图标。要获得可用的图标列表,请参阅:

示例

顶部应用栏

说明标准导航栏控件的屏幕截图

 

底部应用栏

说明标准应用栏控件的屏幕截图

应做事项和禁止事项

  • 分开的导航和命令。理想情况下,将命令放在底部应用栏中,将导航放在顶部应用栏中。考虑在应用首次运行时提供帮助,使用户了解重要命令位于应用栏中。

  • 如果你有两个互异的命令集(例如,一个用于创建新内容,另一个用于筛选视图), 则可将一个命令集置于应用栏右侧,而将另一个命令集置于左侧。如果有多个命令集,则可使用分隔符将其分隔开 。

  • 请将整个应用中的命令终始放置在统一位置。每个页面仅应包含与该页面相关的命令,如有任何命令在页面之间共享,则应尽可能将这些命令放置在同一位置附近,以便用户可预估命令所处的位置。

  • 请遵循位置约定:

    • 将“新建”/“添加”/“创建”按钮(+ 图标)放置在最右边。
    • 将视图切换按钮分为一组,并将它们放置在最左边。
    • 将“接受”、“是”、“确定”命令放置在“拒绝”、“否”、“取消”命令左侧。
  • 请在选择某项时使命令根据上下文显示在应用栏上,并自动显示应用栏。大多数用户都惯用右手,因此当用户在应用页面中选择某项时,与该项相关的所有命令都应显示在应用栏的左侧。这样,他们的手臂或手就不会妨碍他们查看命令。

  • 如果在应用栏上有上下文命令,则在该上下文存在时将模式设置为粘滞,这样,当用户与应用交互时,应用栏就不会自动隐藏。当上下文不再存在时,关闭粘滞模式。例如,你可能想要在用户选择图像时显示照片操作的上下文命令,同时你又希望让用户能够继续处理图像,例如旋转或裁剪图像。在这种情况下,应用栏将保持可见状态,直至用户取消选择图像或使用边缘轻扫解除应用栏。

  • 如果你无法以单独按钮的形式将所有命令放在一个应用栏中,则需要将相似的命令分组到一起,并将它们放在可从应用栏按钮打开的菜单中。对于“响应”菜单中的命令(如“答复”、“全部答复”和“转发”)使用逻辑分组。

    弹出窗口和菜单的图像

  • 将应用栏设计为调整大小后的视图和纵向视图。如果命令数量不超过十个,则当用户调整你的应用大小或旋转至纵向视图时,Windows 将自动隐藏标签并调整填充,因此请为你的所有命令提供相关工具提示。如果你需要一个更具自定义风格的视图,则可将命令分组到菜单中,或者提供调整大小后的视图或纵向视图中仅包括少数命令的更为集中的体验。

    在 JavaScript 应用中,最好在 DOM 中将全局命令放置在上下文命令之前,以便用户在调整你的应用大小时可以获得最佳布局。关于详细信息,请参阅添加带有命令的应用栏设置应用栏样式

    在 C#/C++/VB 应用中,如果你使用 CommandBar 控件,将为你处理大小的调整。有关详细信息,请参阅如何使用不同大小的应用栏

  • 如果你的应用在应用页面底部有一个水平滚动区域,则在应用栏处于粘滞模式时,减少滚动区域的高度。否则,应用栏可能会盖住滚动条,而用户可能需要设法解除应用栏以保持滚动。因此,应尽量使滚动条底部边缘紧靠应用栏的顶部边缘。

  • 不要将关键命令放在应用栏上。例如,在相机应用中,应将“照相”命令放在应用页面中,而不要放在应用栏上。你可以在应用页面中添加一个照相按钮,或者让用户只需点击预览即可照相。

  • 不要在应用栏中放置登录、注销或其他帐户管理命令。所有的帐户管理命令(如登录、注销、帐户设置或创建帐户)都应当放在“设置”弹出窗口中。如果用户必须登录特定页面,则在应用页面中提供登录按钮。有关详细信息,请参阅登录指南

  • 请勿将应用设置放在应用栏上。所有应用设置命令(如默认值和首选项)应放在“设置”弹出窗口中。“设置”弹出窗口也是放置不常使用的管理命令(如用于清除历史记录的命令)的最佳位置。

其他使用指南

对不同的窗口尺寸进行缩放

当用户使用应用栏调整窗口的大小时,系统会调整命令的大小并可能会放弃标签。当缩小尺寸的命令不再适合屏幕中的单行时,系统会将它们换行以占据第二行。

  • 至少设计两个应用栏视图,一个是全尺寸,另一个是缩小尺寸(最低 500 像素或 320 像素)。大多数用户仅使用常用窗口尺寸,要么是全屏要么与另一应用各占一半。
  • 在设计较小视图时应将命令组合在一起。如果不能有意义地组合命令,请使用椭圆图标将它们放在“更多”组中。
常见窗口分辨率(以像素为单位)单行中缩小尺寸无标签按钮的数量单行中全尺寸带标签按钮的数量
13662213
10241610
768127
50085
32053

 

处理鼠标右键

若要使你的应用 UI 与其他 Windows 应用商店应用保持一致,则用户必须单击鼠标右键以触发你提供的应用栏。如果有必须使用鼠标右键进行其他操作的应用,如游戏中的辅助开火或 3-D 查看器的虚拟轨迹球,则应用可忽略引发应用栏的事件。但是你仍必须考虑应用栏或类似上下文菜单在你的游戏控制模型中的角色,因为这是 Windows 应用商店应用体验的重要部分。

设计应用控件时应遵循这些指南:

  • 如果你的应用必须使用鼠标右键操作重要功能,则直接使用操作该功能。如果对工作流不重要,不要激活任何上下文 UI 或应用栏。
  • 在用户右键单击应用中的区域,而该区域不需要上下文右键单击操作时,显示应用栏。
  • 如果所有区域都需要鼠标右键支持,当用户右键单击最顶部水平像素行、最底部水平像素行,或者两个时,则显示该应用栏。
  • 如果以上解决方案都行不通,使用自定义用户交互控件以通过鼠标打开应用栏。
  • 使用 MouseDevice 类事件,如 MouseMoved,以执行你自己的上下文菜单行为。
  • 请记住,长按触摸手势的功能与右键单击相同。以类似的方式处理两个事件。要处理该事件并定义其自定义行为,则注册 Holding 事件。要启用长按,请设置 GestureSettings 属性中的 Hold(用于触摸和笔输入)和 HoldWithMouse
  • 不要更改 Win+Z 组合键的行为。你的应用应该显示应用栏或上下文菜单。注册 KeyDownAcceleratorKeyActivated 事件以确定何时按两个键。

相关主题

对于设计人员
命令模式
导航模式
使应用栏成为辅助应用栏
对于开发人员 (HTML)
WinJS.UI.AppBar object
WinJS.UI.NavBar object
HTML AppBar 控件示例
HTML NavBar 控件示例
导航和导航历史记录示例
你的第一个应用 - 第 3 部分:PageControl 对象和导航
添加应用栏
添加导航栏
在页面之间导航 (HTML)
对于开发人员 (XAML)
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
XAML 应用栏控件示例
XAML 导航示例
你的第一个应用 - 第 3 部分:导航、布局和视图
你的第一个应用 - 在 C++ Windows 应用商店应用中添加导航和视图(第 3 个教程,共 4 个教程)
添加应用栏 (XAML)
在页面之间导航 (XAML)
对于开发人员(使用 DirectX 和 C++ 的 Windows 运行时应用)
创建应用栏或“设置”

 

 

显示:
© 2014 Microsoft