分层导航详细信息 (HTML)
[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]
当 Windows 应用商店应用的内容可以分为独立但又相关的部分或类别（具有不同的细节级别）时，使用分层导航模式。 它是常见和熟悉的模式，适用于关系型信息体系结构，以偏好的序列或顺序遍历。
你选择的导航模式取决于你的应用所支持的方案。如果你的应用提供各种体验以及具有组织和结构的内容，则分层模式可能最合适。然而，如果你的应用信息密度不高或者没有组织层次结构，则查看平面导航详细信息，它旨在使用户在一小组相关页面之间快速导航。
在这里，我们介绍如何使用 JavaScript 创建 Windows 应用商店应用的详细信息，该应用使用分层导航模式并满足所有基本 Windows 应用商店认证要求。这包括：
- 图像资源，用于在整个操作系统上显示应用。
- 应用栏，用于支持导航和命令。
- 设置，用于提供隐私、帮助和其他应用信息。
- 数据漫游，用于在会话和设备上同步你的应用。
- 全球化，用于获得全球各个国家和地区的客户。
- 辅助功能，用于帮助用户完成任务，不管身体能力和输入设备如何。
下面是 Windows 应用商店应用中分层导航模式线框旁边的基本分层结构。
.png "分层导航模式的基本实现") |
|
.png "Windows 应用商店应用中的中心、部分以及详细信息页面")
Windows JavaScript 库 Hub 控件专门针对此类型的应用而设计。从通用到具体，此控件使用中心、部分和项目/详细信息页面来帮助你将各种信息一起绑定到直观而一致的结构。
| 页面 | 描述 |
|---|---|
中心 |
该中心是应用的进入页面，而且是可以预览整个应用的地方。它显示内容的一个或多个部分，每一部分都有一个与该部分关联的较小项目示例。各种条件（取决于应用或用户首选项）可以应用于显示部分和项目的控件。通常，每个项目将显示其内容的预览、总结或摘要。 从此页开始，用户可以导航到部分或项目的详细信息页面。 我们建议你使用大量视觉变化设计你的中心，以便吸引用户进入应用的不同区域。 |
部分 |
“部分”页面是应用的第二级，包括与显示的部分相关项目的预览、总结或摘要。此页面上的项目可以采用任何形式显示，这些形式必须能够最好地表示该方案及该部分的内容。 通常，与中心页面相比，你可以在此页面上显示更多项目。每个项目都链接到一个详细信息页面。 |
项目/详细信息 |
“详细信息”页面是应用的第三级，包括为在中心或部分页面上选定的特定项目显示的内容或功能。如果认为内容太广泛而无法在应用内显示，则某些应用（例如源阅读器）可能链接到源文章和站点。 “详细信息”页面可能包含许多信息、单一对象（例如图片或视频）或其他应用功能。 |
通常用在平面导航应用中的导航栏也可以用于遍历分层应用的内容。此栏是一个暂时元素，当用户从顶部或底部边缘轻扫（右键单击、Windows 徽标键+Z 或具有键盘的菜单键）时，可以显示在屏幕的顶部边缘。
尝试构建这样的应用：内容结构本身可直观地引导用户使用你的应用，而不需要导航栏。在不可能做到这一点的情况下，使用导航栏来代替中心页面上的选择标题，并提供全局导航控件。它应显示在每个页面上和应用的所有级别上。
注意 确保用户可以按他们导航到其当前页面的相反方向进行导航。WinJS 为此提供了 BackButton 与 PageControl。
使用正确的导航模式以及适当的 UI 布局有助于消除持续控件的杂乱，并使用户关注于应用中的重要内容。
分层导航示例
基本分层导航示例是帮助你获得内容和经验的起点。此示例演示了在满足所有基本 Windows 应用商店认证要求的应用中，此处讨论的原则、建议和实现详细信息。如下所示，该示例包含一个具有各种选择的中心页面、一个数据驱动的选择页面（第 3 部分）以及用于该部分的项目详细信息页面。根据需要，使用附加页面扩展应用。 查看我们如何将我们的指南用于实践。然后你可以节省一些时间，并使用此示例作为灵感的基础！
.png "显示中心页面的示例应用")
.png "显示部分页面的示例应用")
.png "显示项目页面的示例应用")
Windows 应用商店合规性
Windows 应用商店是向客户分发 Windows 应用商店应用和将客户连接到尽可能多的出色应用的主要方式。应用商店中的应用必须符合 Windows 和 Windows Phone 应用商店策略。
随行示例实现此处讨论的功能，以及所有 Windows 应用商店应用要通过认证的基本要求，包括：
- 初始屏幕和磁贴图像
- 对触摸、鼠标和键盘输入的完全支持
- 对各种窗口大小、设备方向和显示大小的支持
- 漫游和会话状态
- 为全球化、本地化和辅助功能而优化
在你开发应用时，请考虑 Windows 和 Windows Phone 应用商店策略，并努力避免常见认证失败。
实现导航
.jpg "步骤图标") |
打开分层导航示例或先使用 Visual Studio 中的“中心应用”项目模板。如果你愿意，你可以查看以下模板概述：
|
.jpg "步骤图标") |
深入了解 PageControl 对象如何支持单页导航。添加页面控件解释了可以实现它们的各种方法。 在示例中找到它：PageControl 在文件 \js\navigator.js 中定义，并在 \pages\home\home.js 和 \pages\page2\page2.js 中使用。 |
添加 UI 和图像
在应用程序清单的“应用程序 UI”选项卡上为应用指定图像资源（视觉资源，例如初始屏幕和磁贴图像）。要执行此操作，请从解决方案资源管理器打开 package.appxmanifest。 请参阅使用清单设计器。
注意 随行应用包括满足 Windows 应用商店要求的占位符图像。出于演示目的，支持具有各种对比度设置的辅助功能的其他图像和法语 (fr-FR) 本地化版本都包含在 模板中。大多数图像以多种分辨率提供。
.jpg "步骤图标") |
指定提供最佳体验的图像。包括用于不同屏幕解决方案的缩放版本。 你的应用需要一组基本的图像来通过应用商店认证。 |
|
遵循这些说明来命名和组织文件夹中的文件资源。 |
|
为你的应用创建图像资源、将它们添加到你的项目，以及在应用程序清单中识别它们。 |
|
按需向用户显示导航、命令和工具。应用栏显示与用户的上下文（通常是当前页面或当前选定的内容）相关的各种命令。根据需要自定义。有关更详细的示例，请参阅 HTML AppBar 控件示例。 |
|
提供对与用户当前上下文相关的所有设置的访问。根据需要自定义。请参阅应用程序设置示例。随附应用包括隐私策略和可以从“设置”超级按钮访问的帮助内容。 |
漫游应用程序数据
|
管理应用程序数据，包括运行时状态、用户首选项和其他设置。此数据可在应用运行时创建、读取、更新和删除。 |
|
在多个设备上保持应用数据和状态的同步，并减少用户在其他设备上的设置任务和重复性工作。Windows 在数据更新时将它复制到云，并将数据同步到已安装该应用的其他设备。 |
全球化
请保持全球化的一致性，并确保你的屏幕截图表明你已对你的应用进行了本地化。请记住，语言和市场不一样。
|
设计 Windows 应用商店应用，以便可独立地维护和本地化它们的资源，也可针对不同比例因子、辅助功能选项以及其他用户和计算机上下文进行自定义。请参阅应用程序资源和本地化示例。 |
|
本地化你的应用的显示名称、描述和其他识别功能，它们在应用程序清单中进行了描述。 |
|
使你的软件适应其他语言、市场、文化和地区。 |
支持辅助功能
仅在你已经对辅助功能方案进行了专门的工程处理和测试后才可以将应用声明为辅助应用。
|
了解包含在面向 Windows 8 的 Windows 软件开发工具包 (SDK) 中的辅助功能测试工具，这些工具可帮助你验证应用的辅助功能。 |
|
如果你已测试了你应用的辅助功能，则可以通过选中“销售详细信息”页上的“辅助功能”复选框表明这一点。 |
包装
.jpg "应用商店要求图标") |
使用 Windows 应用认证工具包 验证应用。 运行 Windows 应用认证工具包来帮助确保应用满足 Windows 应用商店要求。当你将主要功能添加到应用时，请执行此操作。 |
.jpg "停止图标") |
你已完成了开发任务，并已准备好将应用提交到应用商店！
|
希望了解更多信息？
了解有关希望为用户提供何种体验的详细信息。
了解有关大量可用功能、禁用功能以及用户偏好的详细信息。
了解有关不同设备、输入方法和屏幕方向的详细信息。
浏览用户体验指南的完整列表。