平面导航详细信息 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

当 Windows 应用商店应用有少量页面并且未分层组织其信息时，将平面导航模式用于应用。 换言之，当页面、标签和模式为逻辑对时。

你的应用应让用户关注于应用中的重要内容，而不是位置或原因。如果你的应用信息密度不大、页面少或者没有需要分层和结构的方案，则考虑平面结构，这种结构允许用户在不同页面之间快速导航。然而，如果你的应用提供各种体验，以及具有应以需要的序列或顺序遍历的组织和结构的内容，则查看分层导航详细信息。

在这里，我们介绍如何使用 JavaScript 创建 Windows 应用商店应用的详细信息，该应用使用平面导航模式并满足所有基本 Windows 应用商店认证要求。这包括：

• 图像资源，用于在整个操作系统上显示应用
• 应用栏，用于支持导航和命令
• 设置，用于提供隐私、帮助和其他应用信息
• 数据漫游，用于在会话和设备上同步你的应用
• 全球化，用于获得全球各个国家和地区的客户
• 辅助功能，用于帮助用户完成任务，不管身体能力和输入设备如何

下面是 Windows 应用商店应用中平面导航模式线框旁边的基本平面结构。

 

如这些图像所示，由此模式定义的平面内容结构需要应用中的每一页都可从其他每个页面访问。用户可以随意向前和向后移动，不会有分歧。

使用导航应用栏（显示在上面的线框中）在平面导航应用中的页面之间快速切换。此栏是一个暂时元素，当用户从顶部或底部边缘轻扫（右键单击、Windows 徽标键+Z 或具有键盘的菜单键）时，可以显示在屏幕的顶部边缘。

下面是我们的“计算器”应用实现平面导航模式的方式。请注意它如何使用持续的导航栏而不是标准的暂时导航栏。这是一个 Windows 应用商店应用平台如何适应对应用唯一的特定方案的示例。

标准计算器页面	科学计算器页面	转换器计算器页面

 

使用正确的导航模式以及适当的 UI 布局（请参阅应用 UI 详细信息）有助于消除持续控件的杂乱，并使用户关注于应用中的重要内容。

平面导航示例

基本平面导航示例是帮助你获得内容和经验的起点。此示例演示了在满足所有基本 Windows 应用商店认证要求的应用中，此处讨论的原则、建议和实现详细信息。如下所示，该示例包含两个页面：介绍应用的主页；可放置控件的第二个页面。 查看我们如何将我们的指南用于实践。然后你可以节省一些时间，并使用此示例作为灵感的基础！

Windows 应用商店合规性

Windows 应用商店是向客户分发 Windows 应用商店应用和将客户连接到尽可能多的出色应用的主要方式。应用商店中的应用必须符合 Windows 和 Windows Phone 应用商店策略。

随行示例实现此处讨论的功能，以及所有 Windows 应用商店应用要通过认证的基本要求，包括：

• 初始屏幕和磁贴图像
• 对触摸、鼠标和键盘输入的完全支持
• 对各种窗口大小、设备方向和显示大小的支持
• 漫游和会话状态
• 为全球化、本地化和辅助功能而优化

在你开发应用时，请考虑 Windows 应用商店策略和 Windows Phone 应用商店策略，并努力避免常见认证失败。

实现平面导航

	打开平面导航示例或先使用 Visual Studio 中的“导航应用”项目模板。如果你愿意，你可以查看以下模板概述： 适用于 Windows 运行时应用的 JavaScript 项目模板：总结了导航模型、数据模型、视图状态处理等相关的实现细节。 适用于 Windows 应用商店应用的 JavaScript 项目模板：包括可以减少开发时间的常用代码。
	添加单页导航 深入了解 PageControl 对象如何支持单页导航。添加页面控件解释了可以实现它们的各种方法。 在示例中找到它：PageControl 在文件 \js\navigator.js 中定义，并在 \pages\home\home.js 和 \pages\page2\page2.js 中使用。

 

添加 UI 和图像

在应用程序清单的“应用程序 UI”选项卡上为应用指定图像资源（视觉资源，例如初始屏幕和磁贴图像）。要执行此操作，请从解决方案资源管理器打开 package.appxmanifest。 请参阅使用清单设计器。

注意  随行应用包括满足 Windows 应用商店要求的占位符图像。出于演示目的，支持具有各种对比度设置的辅助功能的其他图像和法语 (fr-FR) 本地化版本都包含在 模板中。大多数图像以多种分辨率提供。

 

	选择用于表示你的应用的图像 指定提供最佳体验的图像。包括用于不同屏幕解决方案的缩放版本。 你的应用需要一组基本的图像来通过应用商店认证。 应用商店徽标 显示时带有搜索结果中的应用列表和列表页面上的应用描述。 徽标 显示在“开始”屏幕上应用的方形磁贴中。请参阅创建磁贴和徽章以及应用磁贴和徽章示例。 小徽标 小徽标随“开始”屏幕上返回的搜索结果中的应用显示名称一起显示。它还显示在可搜索应用的列表中以及在缩小“开始”页面时显示。 初始屏幕 当应用启动时显示，当应用准备好交互时立即消除。 初始屏幕由一幅图像和一种背景色组成，两者都可以自定义。请参阅添加初始屏幕和初始屏幕示例。
	添加文件或图像资源 遵循这些说明来命名和组织文件夹中的文件资源。
	针对不同屏幕分辨率优化图像 为你的应用创建图像资源、将它们添加到你的项目，以及在应用程序清单中识别它们。
	添加应用栏 按需向用户显示导航、命令和工具。应用栏显示与用户的上下文（通常是当前页面或当前选定的内容）相关的各种命令。根据需要自定义。有关更详细的示例，请参阅 HTML AppBar 控件示例。
	添加应用设置 提供对与用户当前上下文相关的所有设置的访问。根据需要自定义。请参阅应用程序设置示例。随行应用包括隐私策略和可以从“设置”超级按钮访问的帮助内容。

 

漫游应用数据

	管理应用数据 管理应用程序数据，包括运行时状态、用户首选项和其他设置。此数据可在应用运行时创建、读取、更新和删除。
	漫游应用程序数据 在多个设备上保持应用数据和状态的同步，并减少用户在其他设备上的设置任务和重复性工作。Windows 在数据更新时将它复制到云，并将数据同步到已安装该应用的其他设备。

 

全球化

请保持全球化的一致性，并确保你的屏幕截图表明你已对你的应用进行了本地化。请记住，语言和市场不一样。

	了解应用资源和本地化 设计 Windows 应用商店应用，以便可独立地维护和本地化它们的资源，也可针对不同比例因子、辅助功能选项以及其他用户和计算机上下文进行自定义。请参阅应用程序资源和本地化示例。
	将程序包清单本地化 本地化你的应用的显示名称、描述和其他识别功能，它们在应用程序清单中进行了描述。
	使你的应用全球化 使你的软件适应其他语言、市场、文化和地区。

 

支持辅助功能

仅在你已经对辅助功能方案进行了专门的工程处理和测试后才可以将应用声明为辅助应用。

	测试应用的辅助功能 了解包含在面向 Windows 8 的 Windows 软件开发工具包 (SDK) 中的辅助功能测试工具，这些工具可帮助你验证应用的辅助功能。
	在 Windows 应用商店中将你的应用声明为辅助应用 如果你已测试了你应用的辅助功能，则可以通过选中“销售详细信息”页上的“辅助功能”复选框表明这一点。

 

包装

	使用 Windows 应用认证工具包 验证应用。 运行 Windows 应用认证工具包来帮助确保应用满足 Windows 应用商店要求。当你将主要功能添加到应用时，请执行此操作。
	你已完成了开发任务，并已准备好将应用提交到应用商店！ 在提交之前，为应用设定正确的目标受众。 尽可能详细地写出应用提要，以便清楚地表述应用的用途。 开始发布流程。 使用在 Windows 应用商店中可用的促销工具来帮助客户发现你的应用。 使用遥测数据来分析使用数据并提高应用质量和性能。

 

希望了解更多信息？

规划 Windows 应用商店应用

了解有关希望为用户提供何种体验的详细信息。

辅助功能设计

了解有关大量可用功能、禁用功能以及用户偏好的详细信息。

不同外观规格设计

了解有关不同设备、输入方法和屏幕方向的详细信息。

UX 指南索引

浏览用户体验指南的完整列表。

示例

• HTML AppBar 控件示例
• 导航和导航历史记录示例
• 应用磁贴和锁屏提醒示例
• 初始屏幕示例
• 应用设置示例
• 应用程序资源和本地化示例