设置 UI 的布局 (HTML)
[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]
了解 Windows 运行时应用的布局以及它们与传统应用的不同之处。你可以在 Windows 运行时应用中使用各种界面，例如应用窗口、浮出控件、对话框和应用栏。能否根据适当的情况选择合适的界面，将决定应用是易于使用还是难以使用。
应用页面或画布
应用页面（有时称为画布）是 UI 的基础。画布容纳所有内容和控件。你应该尽可能地将 UI 元素集成到这一基础界面中。例如，你可以通过窗口内置的动画来流畅地显示、隐藏或切换错误消息，而不是使用弹出控件来显示错误。显示嵌入式 UI 可以让用户完全沉浸于应用并保持关联感。
.png "应用页面（或画布）")
你可以创建所需数量的应用页面，以便支持你的用户方案。请参阅规划 Windows 应用商店应用和导航设计，以了解关于设置应用页面的布局以支持用户方案的详细信息。
Windows：调整 UI 大小
用户可以调整你的应用的大小以便他们可以使用另一个应用，或者调整另一个应用的大小以便他们可以使用你的应用。你可以设计你的应用，以便内容动态流动，从而优化用户调整应用大小时的体验。
.png "全屏") |
全屏 应用填满整个屏幕。 |
|
已调整大小 应用的大小调整到整个屏幕的一部分。 其他应用可以填充剩余的屏幕区域。 |
.png "已调整大小的较窄应用")
.png "已调整大小的长方形应用")
有关详细信息，请参阅布局和缩放的 UX 指南。
触摸键盘和手写面板
触摸键盘（以及 Windows 中的手写面板）提供用于输入文本的一个辅助命令 UI。当用户触摸可编辑输入字段时（或者当用户在 Windows 中单击桌面任务栏中的键盘图标时）将显示此面板。当输入字段失去焦点时，此面板将消失。
触摸键盘支持平板电脑和手机（—即，没有硬件键盘或其他外围键盘设备的外形规格）的文本输入和编辑。Windows 中的手写面板支持手写外形规格的文本输入和编辑。
与前面提到的视图状态相似，你可以设计你的应用，以便在显示触摸键盘或手写面板时，内容流能够动态地优化用户体验。
有关支持这些文本输入模式的详细信息，请参阅触摸键盘和手写面板指南。
应用栏
应用栏位于应用页面之外，是应用的主命令界面。使用应用栏可以向用户显示一些导航选项、命令和工具。在 Windows Phone 上，菜单默认为隐藏，当点击省略号时，会显示菜单。在 Windows 上，整个应用栏默认为隐藏，当用户从屏幕的顶部或底部边缘向中间轻扫时，会显示应用栏。如果应用栏遮挡应用的内容，用户可使用与显示它时相同的方式或通过与应用交互取消应用栏。
.png "位于屏幕底部边缘的应用栏")
请参阅命令设计了解关于设计命令的详细信息，请参阅应用栏指南了解用户体验指南。
Windows：超级按钮
超级按钮是每个应用中的一组特定且一致的按钮：“搜索”、“共享”、“设备”、“设置”和“开始”。我们认为，这些是每个用户在他们所用的几乎每个应用中都需要执行的核心操作。
- 搜索 用户可以从系统的任何位置搜索应用内容或 Web 内容。
- 共享用户可以与他人或服务共享你的应用中的内容。
- 设备用户可以连接到设备并发送内容、流式传输媒体以及进行打印。
- 设置用户可以根据他们的偏好来配置应用并访问用户帮助。
- 开始用户可以直接进入“开始”屏幕。
.png "具有超级按钮的应用")
有关详细信息，请参阅以下指南：搜索、共享、应用设置和应用帮助。
上下文菜单
上下文菜单（有时称为弹出菜单）显示用户可以对应用中的文本或 UI 元素执行的一些操作。对于每个上下文菜单，最多可以使用五个命令，例如剪切、复制或打开方式。这一限制可以让上下文菜单简洁易读，并与命令所作用的文本或对象直接相关。
.png "上下文菜单")
不要将上下文菜单用作应用的主命令界面。应用栏才是主命令界面。有关详细信息，请参阅上下文菜单指南。
消息对话框
消息对话框是要求用户进行显式互动的对话框。它们会让应用窗口变为灰显状态，并要求用户提供响应才能继续。仅当你希望停止用户的操作并要求用户响应时才能使用消息对话框。
.png "消息对话框")
在上方的 Windows 示例中，应用窗口呈灰显状态，用户必须点击两个按钮中的一个才能取消该对话框。也就是说，对话框中的消息无法忽略。
有关详细信息，请参阅消息对话框指南。
浮出控件
浮出控件显示与用户当前操作相关的、可取消的临时 UI。例如，你可以使用浮出控件来要求用户确认某个操作、显示应用栏中某个按钮的下拉菜单，或显示有关某个项目的详细信息。浮出控件与消息对话框不同：仅当用户点击或单击后才应显示浮出控件，并且当用户点击浮出控件外部时通常会取消该窗口；仅当需要中断用户并要求他们进行某些交互时才应显示消息对话框。
.png "浮出控件")
在上方的 Windows 示例中，应用保持活动状态，用户可以点击相应按钮或点击浮出控件外部来取消浮出控件。也就是说，浮出控件中的消息可以忽略。有关详细信息，请参阅浮出控件指南。
Toast（或横幅）
Toast（也称为横幅）是当应用在后台运行时向用户显示的通知。Toast 适用于实时通知用户他们希望了解的一些最新信息，但如果用户错过这些信息也不会有影响。用户可以点击 toast 来切换到应用并了解详细信息。
请注意，人们可能会发现 toast 通知已被破坏且令人厌烦，因此当你希望向用户显示 toast 时务必深思熟虑。有关详细信息，请参阅 toast 通知指南。
磁贴
.png "“开始”屏幕上的磁贴") |
磁贴显示在“开始”屏幕上（在 Windows 中，它们替换曾经显示在桌面屏幕上和旧“开始”菜单中的应用程序快捷方式）。人们点击应用的磁贴以启动应用。有关详细信息，请参阅磁贴指南。 |
错误
可以采用三种主界面向用户传达应用中的错误。应用的开发人员根据错误的内容和严重性来选择正确的错误界面。
| 若要显示： | 使用此界面： |
|---|---|
应用中元素特定的非关键错误。你的应用无法修复问题，但用户可以。 用户交互：用户可以在不解除错误的情况下继续与应用、系统组件和其他应用交互。 示例：用户在文本输入框中输入一个无效字符串，然后重新键入。 |
画布上的嵌入式文本
|
适用于整个应用的非关键错误。你的应用无法修复问题，但用户可以。 用户交互：用户可以在不解除错误的情况下继续与应用、系统组件和其他应用交互。 示例：邮件此时无法同步。 |
页面页首的文本
|
适用于整个应用且你的应用可以推荐解决方案的重要但非关键错误。 用户交互：用户可以响应你的提示，或在不解除错误的情况下继续与应用、系统组件和其他应用交互。 |
错误和警告栏
|
适用于整个应用且会阻止用户使用应用的关键错误。 用户交互：用户无法继续与应用交互，除非解除该错误。用户仍然可以与系统组件交互及使用其他应用。 |
消息对话框
|
不要使用浮出控件、toast 或自定义 UI 设计面来显示错误。
错误：嵌入式文本
通常，嵌入式错误是界面的第一选择。嵌入式文本错误会在用户当前操作的环境中或当前的应用页面中传达错误消息。嵌入式错误不需要明确的用户操作来解除消息。当消息不再适用时，消息将自动消失。
| 应做事项 | 将消息置于和消息相关的控件或元素附近。 |
| 布置消息时使周围有足够的空间，以便增加其焦点的力量。 |
以下 Windows 示例显示了一个与特定文本输入框相关的嵌入式错误消息。
.png "与特定文本框相关的嵌入式错误消息")
| 禁止事项 | 在消息中包括操作或命令。 |
在下面的 Windows 示例中，错误或警告栏将是更好的选择。
.png "最好作为错误或警告栏的操作")
错误：错误或警告栏
使用错误或警告栏可以通知用户一些重要的错误和警告，并鼓励他们采取相应操作。错误消息通知用户出现了问题，解释出现的原因并提供解决方案，以便用户可以解决问题。警告消息提醒用户可能会导致将来出现问题的情况。
| 应做事项 | 将该栏放在屏幕页首，从而鼓励用户注意并采取相应操作。 |
| 使用应用的调色板中的颜色为该栏设置颜色。 | |
| 为所有的错误和警告栏使用相同的颜色和布局。 |
.png "错误栏")
| 禁止事项 | 基于认识的严重性，以不同的颜色或符号（例如盾牌或感叹号）显示这些栏。 |
| 使用“X”字形关闭栏；相反，使用设置标签的“关闭”按钮。 | |
| 为仅提供信息的消息使用错误和警告栏。 |
以下 Windows 示例中的消息纯粹用于提供信息，不需要采取任何操作。在这种情况下，应该使用屏幕顶部的嵌入式消息。
.png "错误或警告栏的滥用")
错误：消息对话框
仅当必须显示模式消息时才应使用消息对话框，以阻止用户与应用进行交互。
| 应做事项 | 如果用户必须采取操作才能进一步使用应用，则使用消息对话框。 |
以下 Windows 示例是恰当使用错误消息对话框的情况，因为除非用户拥有活动帐户，否则用户将无法使用应用。
.png "错误消息对话框的合理使用")
| 禁止事项 | 如果用户可以忽略消息，则使用对话框。 |
在以下示例中，错误中没有需要你在用户解决之前阻止用户操作的情况。错误或警告栏将是较好的选择。
.png "错误消息对话框的滥用")