WP8.1学习系列(第十八章)——Windows Phone 交互和可用性

本主题讨论了布局会对应用的可用性产生怎样的影响。在应用的可用性上下文中还讨论了其他常用 UI，例如搜索和设置。

在继续使用控件和交互之前，请执行以下操作：

• 有关概念化应用的策略，请参阅尽你所能，设计最佳 Windows Phone 应用。
• 阅读控件设计指南中关于标准系统控件的内容。

触摸目标和文本

你的应用应该向用户呈现具有足够大小的触摸目标。用户在点击控件时应得到反馈，说明其点击已对控件产生作用，并允许其在应用内继续执行操作。为此，Windows Phone 对触摸目标和文本的使用有一些特定要求。

大小要求

触摸设计需在大小、间距和可视之间取得多元平衡。达到这一平衡会降低所谓的“目标获取困难指数”—换言之，它可使控件更容易按下。

广泛的用户测试已表明 9 毫米的方块是所有 Microsoft 触摸平台的理想触摸目标大小。

9 毫米或更大的方块是触摸 UI 资产的理想触摸目标

允许更小的命中目标高度，最低目标大小为 7 毫米。在这些情况下，最好是具有更宽的可视资产。例如，列表项目或菜单项目应该较宽。

7 毫米是最低目标大小

关于 9 毫米要求

建议触摸目标大小是不小于 9 毫米的方块。将它用于支持绝大部分任务的控件。

如果空间受到严格限制，则可以在宽度很大的情况下使用 7 毫米的最低触摸目标大小。

九毫米这一数字是由数百小时的用户测试确定的，并且可以表示非连续任务和连续任务的最低平均错误率（或错误点击与总点击次数的比率）。9 毫米的最低触摸目标大小可将错误率限制到低达 1.6%。

最低触摸目标大小为 7 毫米。将它用于较少使用的控件或足够宽的控件（不小于 15 毫米），并且只在设计受到太多高度限制时使用。

最低可视大小

可触摸项的最低可视大小不应小于 4.2 毫米。如果小于此大小，则用户根本不会认为该项是可触摸的。当需要较小的可视资产时使用此大小。目标应当为 10-15 毫米或更大。

提示:  在大部分情况下，须使可视大小等于触摸目标大小。使用间距可使控件外观更容易被命中。

评估错误点击的后果

在为控件分配目标大小时，始终牢记任务上下文并评估错误率。存在主要错误后果的控件应该具有较大的目标。在运动中使用的控件也应具有较大的目标。

例如，系统电话拨号程序应具有非常大的触摸目标，因为错误点击会产生高昂的代价：用户可能拨打错误的号码。在容错性较高的操作中，可以选择使用较小的目标。

下图显示触摸目标的非连续部分。

触摸目标部分

在上一个磁贴示图中，请注意以下内容：

• 可视间距：控件和按钮之间适当的间距能够增加触摸的舒适感。
• 可视资产：这是用户将看到的图标/控件/文本的实际大小。
• 触摸目标：这是围绕上图显示的可视资产的绿色边框。触摸目标可以等于或大于可视资产大小，但绝不能小于可视资产大小。在常见控件样式指南中，它们由绿色线表示。
• 死空间：两个可触摸项之间的间距是指不执行任何操作的区域。

要了解有关制作外观出色的磁贴的详细信息，请参阅磁贴和锁屏提醒指南。

使用较小的目标

如果空间和任务妨碍你使用合适的触摸目标，请考虑如何变换触摸目标的以下属性以改善体验：

• 形状
• 位置
• 使用频率
• 任务上下文
• 可视设计（填充/间距）
• 错误后果

	使目标大小大于可视资产。如果资产的可视大小小于目标，则可视资产的大小不得小于 4.5 毫米。
	在相邻的可视资产之间引入间距。在这些情况下，通过在相邻的资产之间加入间距（最低 2 毫米）来调整命中目标大小，可得到更合适的命中目标。
	在资产周围创建可视填充。通过引入可视填充创建安全边界的方式，可降低命中较小目标的难度。这将降低命中目标的感知难度。

在定义 UI 元素的合适大小时，请考虑该元素及其附带任务的重要性。普通任务（如检查电子邮件）不应获得用户太多的关注；特殊任务才应吸引更多的关注。

调整小控件间距

如果你具有小元素，则可以通过使用间距调整到目标大小。使用间距调整间隔紧密的小控件。请记住将间距用于间隔紧密的小控件。

重要说明:  无论实际控件的大小如何，都要使用充足的间距，以便仍可容纳 9 毫米的最小触摸目标大小。

假设你拥有一个 4 毫米的复选框控件。使触摸目标加大 3-5 毫米，以便达到 7-9 毫米大小。如果你希望进一步减少错误，请在复选框控件和下一个相邻的 9 毫米目标之间加入间距（或者一个 262-dpi 设备上大约 90 个像素）。使用游标卡尺测量设备上的图像；重要的是大小，而不是像素计数。

异常

某些控件（例如屏幕键盘和超链接控件）使用算法提高触摸精度。

像键盘和超链接列表这样的例外需要使用更正机制（如命中目标大小调整算法）或缩放来得到更合适的命中目标。在大多数情况下，目标高度比宽度更重要，但是存在一些例外（例如，软键盘上的键的宽度可能影响目标获取）。确保至少在一个维度中达到理想的目标大小。

软键盘

如果一切都失败，请设法不要在一个小的命中目标周围放置太多相邻的命中目标。

相邻的命中目标过多

最小文本大小

版式元素的大小和位置对于屏幕布局的构成至关重要。现代设计的基础缺乏镶边元素，这意味着文本和版式是非常重要的元素。

提示:  使字体标签和提示清晰可见，并有适当的间距。Windows Phone 上的最小字号是 15 磅。

核心元素通常使用边界和框架这样的额外元素来精巧地构造内容的布局。确保使用不同的字号、颜色或样式在屏幕上创建需要的层次结构，以便用户能够方便地识别主要任务和次要任务。

创建自定义控件

考虑应用内容的填充方案或显示方式时，直到查阅了控件中的标准系统控件设计指南，才能创建你自己的自定义控件。

创建自定义控件只是为了使功能、任务或操作更易于完成或理解。

考虑将系统标准控件用作自定义控件中的操作范例。如果在查看内容过程中使用控件，请谨慎使用这些控件。控件应在全屏查看过程中逐渐淡出。

按钮

若要提供贯穿 Windows Phone 平台的一致体验，请在放置按钮时遵循常见结构，这一点很重要。这样做将为用户的导航提供简单一致的结构。

了解将免费向你提供哪些硬件和软件也很重要。对于入门者，每个 Windows Phone 都包含了三个操纵按钮：—后退、开始和搜索。了解这三个按钮在整个系统上的使用方式可帮助防止 UI 和应用流中发生问题。

主页按钮和 Back 堆栈

在你的用户界面中放置一个“主页”按钮对于典型的导航模型来说是一个例外。平台上的创新虽然不一定是坏事，但是更改平台预期的交互模型可能会使用户感到迷惑。此标准不包括当用户已从深层链接启动应用且没有 Back 堆栈时的情况；在此情况下，需要一些方法来返回到首页。

在应用中实现“首页”按钮还可能导致另一个问题，这个问题对你的应用具有更为严重的影响：它可能意外地造成用户在使用“主页”按扭和硬件“后退”按扭进行导航时陷入无限循环（或接近无限循环）的情况。如果他们使用“后退”按扭从一个应用移回到你的应用以到达另一个应用，这一循环会变得更糟。确保这些问题不会影响你的应用。

所有应用都具有不同的交互流，其中某些应用与另外一些相比可能更为复杂。但是，尝试使应用的体系结构尽可能地保持简略，并充分使用列表和透视，这样用户无需多少步骤便可以导航回到登录屏幕，并从这里到达之前启动的应用。如有疑问，尝试模拟平台中已存在的常见元素和导航结构；这可以减小用户感到困惑的可能性。

“后退”和“关闭”按钮

你的应用 UI 中绝不能具有“后退”或“关闭”按钮。Windows Phone 在每台设备上都提供了一个物理“后退”按钮，以便你可以使应用的导航保持简洁。

不正确：应用中包含“后退”和/或“关闭”按钮

浮动按钮

浮动按钮会产生不一致且令人困惑的导航。使用应用栏是向页面添加命令的最佳方法。有关应用栏的详细信息，请参阅基本图形、可视指示器和通知（Windows Phone 应用商店应用）。

浮动按钮

如果无法将所有命令放置在应用程序栏上，则确保将其一致地放置在你的 UI 中。可变的位置可能会干扰内容浏览，随意放置的图标甚至可能看起来不像可以与用户交互的元素。

常用控件的 Windows Phone 库提供了一种一致的方法，可用于实现 UI 内的命令 UI。遵循 Windows Phone 的设计资源建议的布局理念，可获得整个平台通用的交互性。

使用搜索

搜索内置于每个 Windows Phone 的硬件和软件中。你无法修改或更改硬件搜索按钮的行为。有关详细信息，请参阅 Windows Phone 第一印象中的“搜索按钮”部分。

采用标准方式显示设置

在 Windows Phone 中，应用设置是在应用自身内部执行的。你无权将应用设置放置在系统和应用程序系统应用设置之内。

提示:  你需要熟悉系统设置选项并考虑各种用户设置如何影响 UI 或应用行为。例如，如果你创建的是已连接 Web 服务的应用，应当考虑用户将手机设为飞行模式时应用的行为。

对于具有几个可供用户选择的设置的应用，你应该在应用中创建设置页面，并按照系统和应用程序系统应用设置中的布局和行为模仿它。

按照系统设置页面模仿应用设置页面。

对应用设置进行的更改应当立即实现。这意味着无需“完成”、“确定”或其他确认对话框。在某些情况下，即使更改立即发生，用户也可能得不到更改已发生更改的反馈，直到有正在进行的事件完成或未来事件发生为止。有关提供反馈的详细信息，请参阅 Windows Phone 的动画、动作和输出。

保持应用设置简短清晰应当作为一项设计目标。复杂的多页面、多级别应用设置会使用户感到沮丧或困惑，还以为他们已经完全进入另一个应用。

重要说明:  避免创建具有两个以上页面的应用设置。

此外，还要记住以下事项：

• 需要多个屏幕的设置应该使用覆盖半个屏幕，以避免在显示软键盘时丢失上下文。
• 如果无法撤销某个任务，则始终向用户提供取消选项。例如，文本输入。
• 针对覆盖或删除数据的操作，或者不可恢复的操作，提供取消按钮。
• 如果你使用的是带有应用和取消按钮的其他屏幕，单击这些按钮应执行关联操作并使用户返回到主设置屏幕。
• 提供可禁用在应用内通过网络获取数据的数据使用方式的选项。

若要使设置控制面板的标题保持一致，设置页面的标题应如下所示：

应用程序设置

<控制面板名称/应用程序名称>

应用内广告

下面是 Windows Phone 中广告单位最低质量的基本准则。查看这些准则时，请记住你的广告也必须与 Windows Phone 设计原则保持一致。

没有要显示的广告时，AdControl 将自行隐藏。在你的应用中包括代码来应对此情况并回收可用空间。

建议广告单位大小

AdControl 的默认大小和建议大小为 480 x 80 像素。这是 Windows Phone 中的广告的建议大小。

即使在 pubCenter 中使用 300 x 50 像素的格式大小创建了广告单位，为了获得更好的用户体验，还需要将 AdControl 大小设置为 480 x 80。较小的广告单位格式将在此空间内居中，并通过 pubCenter 中的广告单位大小设置在 AdControl 里面呈现。例如，300 x 50 像素的广告将以 300 x 50 像素显示，其广告单位的中部位于 AdControl 中间。下图中显示了此配置。

居中的广告控件

提示:  包括 300 x 50 像素的 AdControl 大小以保持向后兼容性。它可能在未来被弃用。若要避免在以后修订你的广告单位，请考虑在 480 x 80 像素的标准 AdControl 大小中创建新广告。

广告定位

将 AdControl 放置在屏幕的顶部或底部。建议的位置是给定视图的顶部或底部。

全尺寸 AdControl

滚动查看器

滚动查看器内包含的广告将随用户对内容的滚动在页面上显示或消失。如果你希望广告在用户滚动时保持固定，请将 AdControl 放置在滚动查看器之外。将滚动查看器放置在屏幕的顶部或底部。

通过中心或透视控件使用广告

当用户平移到邻近的部分或项目时，将不会看到包含在中心控件内的某个部分中（或透视控件内的某个项目中）的广告。若要将广告保留在所有部分或项目上，请将 AdControl 放置在该控件之外，如下图左侧所示。若要在各种部分或项目上显示不同的广告，请在针对每个单独广告的每个部分或项目中创建 AdControl 的新实例，如下图右侧所示。

中心控件中的广告

透视控件中的广告

颜色

使用系统主题颜色。如果你要更改主题颜色，请选取合适的颜色，以便 AdControl 边界和文本仍便于阅读。