Windows 应用商店应用 UI 详细信息 (HTML)

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

如何制作出色的用户界面？应用的最佳布局是什么？是什么使应用的导航简单而直观？

带着这些问题来开始应用开发的设计阶段。然后，了解如何实现你的设计。

使用指南、最佳实践和示例，我们将帮助你充分利用 Windows 8.1 的 UI 功能。你可以定义应用的 UI，使其直观、美观并与其他 Windows 应用商店应用一致。

以下各部分是任务纲要，可帮助你设计应用的 UI。它们遵循在 UX 指南中描述的最佳实践。

如果你不熟悉 Windows 应用商店应用开发，或者不熟悉应用布局、导航、控件和命令，则可能会发现查看每个步骤将很有帮助。否则，请随意浏览。我们已对应用 UI 开发的相关方面进行了分组。此处提供的指南、任务和样本代码特定于使用 JavaScript 和 HTML 开发 Windows 应用商店应用。对于 C#/VB/C++ 和 XAML 版本，请参阅 Windows 应用商店应用 UI 详细信息 (XAML)。

示例

控件和布局库示例包括我们在此处讨论的所有 UI 元素。我们将经常引用此随行示例，并将你引导至实现特定功能的地方。

示例应用是 Windows 应用商店应用控件的库。通过该示例，你可以浏览控件和用于实现每个控件的代码。你还可以在以下各节中查看如何实现每个步骤。

步骤 1：完成准备工作并了解如何布局

在开始设计和开发应用之前，确保先进行规划。花点时间来思考你的应用的出色之处是什么、你的受众是谁、要实现什么方案以及将支持哪些功能。有关如何规划应用的详细信息，请参阅定义构想。

	通过决定希望应用使用哪个导航策略来开始。在本教程中，我们从中心模板开始。要设计和开发应用的 UI，你可以下载模板并在遵循纲要时进行试用。 有关详细信息，请参阅导航模式和分层导航 (HTML)。 或者，如果希望直接开始并查看代码，可以直接跳到控件和布局库示例。
	设置 UI 的布局 如何在 Windows 应用商店应用布局？了解布局 UI 的指南。 在本示例中，我们将介绍如何使用指南来设计应用。 在主页上，我们在画布中放置以下元素： 控件组的列表。它们通过功能进行分组，以便于快速浏览控件类型。 全部控件列表。它们按名称的字母顺序排序，可轻松搜索特定控件。 在每个页面上，我们向顶部应用栏添加了导航元素，这样你可以快速跳回主页。 每部分页面遵循标准分层导航模式。它包含控件项目列表，并链接到每个项目的详细信息页面。 每个部分页面和每个详细信息页面都包含一个后退按钮，可使你回到之前浏览的页面。 在每个详细信息页面上，我们将主要内容放在应用的主屏幕上： 控件的描述 控件的示例（如果它可以显示在画布上） 用于实现控件的代码段

 

步骤 2：选择要添加的控件

添加控件并且同时设置应用的布局在选择控件之前，你需要了解要添加哪些控件，并且需要设计你的布局。了解控件工作如何帮助你做出良好的布局决定。

在本教程中，我们将首先查看个别控件。在步骤 3 中，你将学习如何在布局中安排它们。如果你希望首先了解设计布局，可以跳到下一节，以后再回来了解控件。

查看示例代码以了解如何添加库中的每个控件。

	按功能列出控件 控件列表 熟悉可用控件的完整列表以及每个控件的用途，然后选择需要用于应用的控件。
	快速入门：添加 HTML 控件和处理事件 使用 HTML 控件，例如按钮、 复选框和下拉列表。
	快速入门：显示文本 使用 HTML 控件，例如标签、div、段落和要显示文本的文本区域。
	快速入门：文本输入和编辑 使用 HTML 控件，例如文本框、文本区域、密码输入框和富编辑框/富文本框来输入和编辑文本。
	快速入门：添加 WinJS 控件和样式 使用 Windows JavaScript 库中的控件，例如 ListView 控件、分级控件和浮出控件。

 

步骤 3：构建布局

	设置应用页面的布局 了解网格系统、标题、边距和间距，以及它们如何为用户创建一致的体验。
	布局和缩放的 UX 指南 用户不仅可以调整应用的大小（从最小宽度到全屏），还可以使其在不同大小、不同分辨率和不同方向的屏幕上显示。你可以设计应用，使其在任意大小下都表现出色。 在本示例中，我们使用了 500 像素的默认最小宽度。
	快速入门：定义应用布局 创建流畅的 UI，在任何大小下都外观良好而且功能正常。
	快速入门：设计适用于不同窗口大小的应用 了解如何将应用的最小宽度从 500 像素更改为 320 像素，以及更改你的设计，使其在较窄的宽度下外观良好且功能正常。了解如何将水平平移应用设计为当应用高度大于宽度时更改为垂直布局。
	布局和缩放的 UX 指南 当显示设备的像素密度增加时，屏幕上对象的物理尺寸会缩小。当 UI 太小而无法操作以及当文本太小而无法阅读时，Windows 会将系统和应用 UI 缩放到一个缩放百分比。了解如何确保你的应用在缩放时外观良好。

 

步骤 4：选择放置命令的位置以及如何使用超级按钮

	命令模式 了解放置命令的位置（在屏幕上、在弹出菜单中、在对话框中或在应用栏中），并决定应用的命令应导向的位置。
	应用栏指南和清单 快速入门：添加带有命令的应用栏 导航栏指南 快速入门：添加导航栏 了解分组命令、一致的位置、样式和图标以及命令应用栏和导航应用栏的其他重要指南。 在本示例中，我们在顶部应用栏中实现主页按钮以帮助导航。I
	添加上下文菜单的指南和清单 将上下文菜单用于对操作（比如剪切和粘贴）的即时访问。保持上下文菜单简短且与选择相关。
	搜索指南和清单 快速入门：向应用添加搜索 了解何时使用应用内搜索框控件，以及何时使用“搜索”合约。
	共享内容指南 快速入门：共享内容 如果你的应用有要共享的内容，它便是一个共享源。如果你的应用可以从其他应用接收内容，则它是一个共享目标。
	应用设置指南 快速入门：添加应用设置 了解如何使用“设置”超级按钮。保持设置简单化和尽可能少的设置了解用于“设置”窗格的正确设置。
	应用帮助指南 说明性 UI 指南 快速入门：添加应用帮助 了解何时以及如何在“设置”窗格中实现应用帮助，并了解何时使用其他方法来提供帮助，比如提示、演示或重新设计 UI。

 

步骤 5：包装

	运行 Windows 应用认证工具包。 建议。运行认证工具包有助于确保你的应用满足 Microsoft 应用商店的要求，为此，在你向应用中添加了主要的功能后，你应当执行此操作。
	完成了！ 现在，你已考虑了 UX 指南并设计了 UI，你的应用应反映最佳实践，以便为用户提供出色的体验。

 

后续步骤

现在，你了解了基础知识、查看了应用功能详细信息系列中的其他示例。

希望了解更多信息？

UX 指南索引

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

用户交互操作：触摸屏输入等

遵循详细信息文章来设计应用的用户交互体验。

你的第一个 Windows 应用商店应用

如果你对 Windows 应用商店应用开发不熟悉，而且希望开始第一个应用，则遵循此教程系列。