《Windows 8 开发权威指南 HTML5 和JavaScript卷》迷你书.pdfVIP

第 6 章 基于 HTML5 JavaScript 开发 第 6 章 基于 HTML5 JavaScript 开发 Microsoft Design 导航应用程序 Microsoft Design 导航应用程序 6.1 Microsoft Design 风格应用的导航设计 了解如何组织Microsoft Design 风格应用中的内容，以便用户可以轻松而直观地进行导航。使 用正确的导航模式可帮助你限制永久位于屏幕上的控件，如选项卡。这样用户就可以将精力集中在 当前内容上。 6.1.1 分层系统 Windows 8 中的大多数Microsoft Design 风格应用都将使用导航的分层系统，如图 6-1 所示。 此模式比较常见并且为人们所熟悉，但是使用 Microsoft Design 风格中心导航模式效果会更好。这 种模式使得 Microsoft Design 应用更快速流畅，同时易于使用。此模式最适合具有大量内容或许多 不同的内容部分供用户浏览的应用。 ▲图 6-1 分层系统 中心设计的实质是将内容分为不同的部分和不同级别的详细信息。 中心页是用户到应用的入口点，此处的内容以水平方式显示在一个丰富的平移视图中，这样用 户一眼就能看见新增内容和可用功能。中心由各个内容类别组成，每个类别映射到应用的部分页中。 每个部分都应该显示内容或功能。中心应该提供许多可以看到的变化，吸引用户，并将他们吸引到 应用的各个部分。 部分页是应用的第二个层级。此处的内容可以采用任何形式显示，这些形式必须能够最好地表 第6 章 基于HTML5 JavaScript 开发Microsoft Design 导航应用程序 示该方案及该部分所包含的内容。部分页由各个项目组成，每个项目都有它自己的详细信息页。部 分页还可以利用分组和全景风格布局。 详细信息页是应用的第三个层级。此处显示了各个项目的详细信息，各项目的格式可能会根据 内容的特殊类型不同而有很大的不同。详细信息页由项目详细信息或功能组成。详细信息页可能包 含许多信息，也可能包含一个单一对象，例如图片或视频。 6.1.2 平面系统 Windows 8 中的许多Microsoft Design 风格应用都使用平面导航系统。此模式在游戏、浏览器 或文档创建应用中较为常见，用户可以在所有驻留在同一分层级别的页面、选项卡或模式之间移动。 这种模式最适合核心方案涉及少量页面或选项卡之间的快速切换时。模型如图 6-2 所示。 ▲图 6-2 平面系统 平面系统在本质上会将内容分解为不同的页。 导航栏非常适合用于在多个上下文之间执行切换操作。示例包括选项卡、文档以及消息或游戏 会话。导航栏是一个暂时元素，驻留在屏幕的顶部，并且当用户从屏幕的上边缘或下边缘轻扫时， 导航栏可见。虽然导航栏中各项目的格式可能会不同，但是一个典型的处理方法是使用一个简单的 缩略图。 与分层系统不同，在平面系统中通常没有永久性的后退按钮或导航堆栈，因此在页面之间进行 移动，通常通过内容或导航栏中的直接链接来完成。你可以选择在导航栏中包括其他功能，例如添 加一个“+ ”按钮以创建一个新的选项卡、页面或会话。 6.1.3 导航剖析 如图 6-3 所示，显示了一个应用中的各个部分之间、层次结构中的不同层之间和一个应用页面 内的导航剖析。 252 6.1 Microsoft Design 风格应用的导航设计 ▲图 6-3 导航剖析 1．页眉和“后退”按钮 页眉可对当前页面进行标记，有助于查找页面。使用“后退”按钮可以快速返回你所在的位置。 2．中心页 中心页将应用程序不同区域中的