导航栏指南(Windows 应用商店应用)

请在处理 Windows 应用商店应用的导航栏时遵循这些指南。 导航栏是一个应用栏,显示在应用的顶部并包含一些导航控件。导航栏非常适用于在多个上下文之间执行切换操作,其中包括选项卡、文档以及消息或游戏会话。

何时使用导航栏

你可以在应用的主画布或导航栏中放置导航控件,在正确的时间选择合适的曲面可能就是轻松使用的应用和很难使用的应用之间的差别。 如果希望按需提供对应用的所有区域的全局访问,导航栏是最佳选择。如果导航是完成任务的核心,则画布是最佳选择。例如,在照片浏览应用(全部是查找和查看照片文件)中,所有导航都应在画布上通过点击、平移或选择内容来完成,而且搜索框应放在画布上,以便用户轻松地查找文件。

导航栏剖析

当用户从顶部或底部边缘轻扫时,显示导航栏。使用的动画与应用栏动画相同,因为导航栏位于顶部应用栏内部。尽管你可以设置导航栏中的项的样式,但默认外观是一个简单的按钮。不过,另一种典型的视觉处理方式是使用按钮和缩略图。

带有按钮和缩略图的导航栏图像

你还可以选择在顶部应用栏中包括其他功能,例如添加一个“+”按钮以创建一个新选项卡或会话或者集成一个搜索框。将此额外功能放在导航栏右侧。

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

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

应做事项和禁止事项

应做事项
  • 保持导航和命令分开。理想情况下,将导航放在顶部导航栏中,将命令放在底部应用栏中。
  • 设置导航按钮的样式,以针对其内容进行优化。例如:使用较大的矩形按钮表示缩略图。
  • 将导航栏上的命令和控件组合为有意义的不同部分。例如:在应用商店应用中,顶部用于全局导航,底部用于应用类别。
  • 使用导航拆分按钮拆分第一级和第二级导航命令。
  • 对于较小的窗口大小更改为垂直布局。
禁止事项
  • 不要在导航栏中隐藏对你的核心方案至关重要的 UI。 相反,应将其放在应用画布上。例如,如果搜索对你的核心方案至关重要,请将搜索框放在画布上,而不是放在导航栏或应用栏上。
  • 不要在导航栏上添加后退按钮。

 

相关主题

对于设计人员
命令设计
导航设计
对于开发人员(使用 JavaScript 的 Windows 应用商店应用)
快速入门:添加导航栏 (NavBar)
使应用栏成为辅助应用栏
对于开发人员(使用 C++、C# 或 Visual Basic 的 Windows 应用商店应用)
快速入门:在页面之间导航
对于开发人员(使用 DirectX 和 C++ 的 Windows 应用商店应用)
创建应用栏或设置

 

 

显示:
© 2015 Microsoft