转载地址: http://msdn.microsoft.com/zh-cn/library/windows/apps/hh761500.aspx
| 了解如何组织 Metro 风格应用中的内容，以便用户可以轻松而直观地进行导航。使用正确的导航模式可帮助你限制永久位于屏幕上的控件，如选项卡。这样用户就可以将精力集中在当前内容上。 |
|
分层系统
 | Windows 8 中的大多数 Metro 风格应用都将使用导航的分层系统。此模式比较常见并且为人们所熟悉，但是使用 Metro 风格中心导航模式效果会更好。这种模式使得 Metro 应用更快速流畅，同时易于使用。 此模式最适合具有大量内容或许多不同的内容部分供用户浏览的应用。 |
层次结构中的各层
中心设计的实质是将内容分为不同的部分和不同级别的详细信息。
| 中心页 中心页是用户到应用的入口点。此处的内容以水平方式显示在一个丰富的平移视图中，这样用户一眼就能看见新增内容和可用功能。 中心由各个内容类别组成，每个类别映射到应用的部分页中。每个部分都应该显示内容或功能。中心应该提供许多可以看到的变化，吸引用户，并将他们吸引到应用的各个部分。
部分页 部分页是应用的第二个层级。此处的内容可以采用任何形式显示，这些形式必须能够最好地表示该方案及该部分所包含的内容。 部分页由各个项目组成，每个项目都有它自己的详细信息页。部分页还可以利用分组和全景风格布局。
详细信息页 详细信息页是应用的第三个层级。此处显示了各个项目的详细信息，各项目的格式可能会根据内容的特殊类型不同而有很大的不同。 详细信息页由项目详细信息或功能组成。详细信息页可能包含许多信息，也可能包含一个单一对象，例如图片或视频。 |  |
平面系统
 | Windows 8 中的许多 Metro 风格应用都使用平面导航系统。此模式在游戏、浏览器或文档创建应用中较为常见，用户可以在所有驻留在同一分层级别的页面、选项卡或模式之间移动。 这种模式最适合核心方案涉及少量页面或选项卡之间的快速切换时。 |
内容页
平面系统在本质上会将内容分解为不同的页。
| 导航栏 导航栏非常适用于在多个上下文之间执行切换操作。示例包括选项卡、文档以及消息或游戏会话。 导航栏是一个暂时元素，驻留在屏幕的顶部，并且当用户从屏幕的上边缘或下边缘轻扫时，导航栏可见。虽然导航栏中各项目的格式可能会不同，但是一个典型的处理方法是使用一个简单的缩略图。
切换 与分层系统不同，在平面系统中通常没有永久性的后退按钮或导航堆栈，因此在页面之间进行移动通常通过内容或导航栏中的直接链接来完成。 你可以选择在导航栏中包括其他功能，例如添加一个“+”按钮以创建一个新的选项卡、页面或会话。 |  |
导航剖析
下面显示了一个应用中的各部分之间、层次结构中的不同层之间和一个应用页面内的导航剖析。
-
页眉和“后退”按钮
页眉可对当前页面进行标记，有助于查找页面。使用“后退”按钮可以快速返回你所在的位置。
-
中心页
中心页将应用程序不同区域中的信息显示在一个屏幕上。这样用户就可以鸟瞰该应用中可用的所有内容。
-
内容部分，即类别
可以设置内容部分的格式以便最佳地显示其推销的功能或项目。
-
语义缩放：在层次结构中的各层之间导航
语义缩放可以快速顺畅地扫描和四处移动视图，尤其是当视图为很长的平移列表时。
-
导航栏
使用导航栏可以暂时访问导航控件或应用的其他区域。
-
页眉菜单
页眉菜单可从应用中的任意位置获取，使用页眉菜单用户可以快速从应用的一个部分跳转到另一个部分
-
主页链接
主页链接位于页眉菜单的底部，通过它可以快速返回应用的根目录。
-
应用栏
使用应用栏可以暂时访问与特殊视图相关的命令。
-
查看/排序/筛选
这些命令用于更改在特定视图中内容显示的方式。驻留这些命令的最佳场所是应用栏。
-
边缘
从屏幕边缘轻扫可显示应用栏、导航栏和超级按钮。
通过轻扫边缘进行导航
 | 用户可通过从一边轻扫一个手指或拇指，在应用内和系统中进行导航。为了有效地使用 Metro 风格应用，用户需要了解以下每个边缘轻扫执行什么操作。
|
使用标题菜单和部分标签进行导航
我们将使用一个名为“Food with Friends”的示例应用，演示使用后退按钮、标题菜单以及内容部分导航 Metro 风格应用的模式。
 |
标题菜单包含一个指向每个部分页面的链接（第 2 级）以及一个返回中心的链接（第 1 级），从而用户能够快速在应用周围移动。该菜单显示在每个级别以及应用的每个页面上，用户可以使用该菜单可靠有效地去往所需的位置。 |
|
用户可以点击部分标签以进入该部分的对应页面。提供视觉提示，如“查看全部(x)”，以指示用户中心显示了此部分中的更多项目。使用此模式不需要使用磁贴空间或在内容中放置链接的位置。 |  |
使用此模式，这是 Food with Friends 示例的导航插图的外观。这个简化的插图仅显示了导航元素的规范示例，用于表示交互的所有内容。
使用筛选、透视、排序和查看进行导航
应用导航的另一个部分就是确定何时、何地以及如何让用户更多地控制他们体验内容的方式。筛选、透视、排序和查看切换程序都是应用设计时需要考虑的内容。
| 术语 | 定义 | 示例 |
|---|---|---|
| 筛选 | 根据某些条件，删除或隐藏数据集中的内容。 | 查找要播放的游戏时，可能选择只查看类别为“冒险”的那些游戏。 |
| 透视 | 根据某些条件，重新组织数据集中的内容。 | 查看音乐集时，可能选择按艺术家、唱片或流派对歌曲进行组织。 |
| 排序 | 更改数据集中显示内容的顺序。 | 在新闻应用中浏览要阅读的文档时，可能选择查看第一个列出的最新文档。 |
| 查看 | 更改显示内容的风格或方法。 | 在餐馆查找应用中浏览吃饭的地点时，可能选择在地图上查看餐馆，而不是以列表方式查看。 |
On-canvas
当查找项为主要任务（如在集合或搜索结果页面中）时，使用 on-canvas 控件进行筛选、透视或排序。
如果应用的重点是浏览内容（如杂志或购物应用），则控件应该进入应用栏。
页面筛选和排序
若要在集合视图中筛选和排序内容，则可以将筛选和排序命令放置在标题和内容之间的行中。在以下示例中，筛选视图以仅显示 TV节目，可按系列进行排序和分组。
在这个商店应用的示例中，下拉选择控件筛选当前视图的内容。如菜单所示，当前活动的筛选器在下拉列表中显示为已选择。
 |
 |
导航栏
导航栏主要用于导航使用平面导航模式的应用的部分或页面。也可以与分层模式结合使用，代替标题菜单，作为一种提供全局导航控件的方式。导航栏应该显示在应用的每个页面上以及所有级别上，目的是为用户提供一种便利的确定性导航方法。
在此金融应用示例中，应用的中心 (L1) 促销部分（标题、关注列表）进入中心，并且其中包含指向它们的部分标题链接。在部分级别 (L2)，当通过轻扫上边缘或下边缘来调用导航栏时，用户可以访问应用的根部分以及所有其他部分。
应用栏视图切换
应用栏主要用作命令界面，但也可以用于改变查看内容的方式。切换视图、透视、筛选以及排序全都可以使用应用栏完成。请勿使用应用栏从应用中的一个位置导航到另一个位置。所有应用栏项都应该对当前视图中的内容进行操作。
在此日历应用示例中，视图默认值为月视图，并针对该视图对此应用进行了优化。选择其他日历视图的命令位于应用栏中，可以通过从上边缘或下边缘轻扫来进行访问。其他命令，如生成新约会，也可能会出现在此栏中。
在 Food with Friends 示例的“所有餐馆”页面中，查看项的选项以列表或地图的形式提供，并且根据某些条件（如花销、位置和等级）对视图进行筛选和排序。此处，筛选选项显示为菜单弹出窗口中的控件。
扫一扫
138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
