Windows Phone 交互和可用性

2013/12/5

适用于: Windows Phone 8 | Windows Phone OS 7.1

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

在继续运用控件和交互之前:

本主题包含以下各节。

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

大小要求

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

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

UX_Interactions_IdealHitTarget

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

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

UX_Interactions_MinHitTarget

7 毫米是最低目标大小

关于 9 毫米要求

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

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

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

最低触控目标大小为 7 毫米。将它用于频繁使用的控件或足够宽的控件(不小于 15 毫米),并且只在设计受到太多高度限制时使用。

最低可视大小

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

提示提示:

在大部分情况下,须使可视大小等于触控目标大小。使用间距可使控件外观更容易被击中。

如果可视大小等于目标大小,则可以在控件之间添加填料以使控件看起来更容易被击中。设法让用户感觉更舒适。

评估错误点按的后果

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

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

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

UX_Interactions_TouchTargetDiagram

触控目标图

在上一个图块示图中,请注意以下内容:

  • 可视间距: 控件和按钮之间适当的间距能够增加触摸的舒适感。

  • 可视资产: 这是用户将看到的图标/控件/文本的实际大小。在常见控件样式指南中,它们由红色线表示。

  • 触控目标:这是围绕上图显示的可视资产的绿色边框。触控目标可以等于或大于可视资产大小,但绝不能小于可视资产大小。在常见控件样式指南中,它们由绿色线表示。

  • 死空间:两个可触控项之间的间距是指不执行任何操作的区域。

要了解创建出色图块的更多信息,请参见 Windows Phone 的图块设计准则

使用较小的目标

如果空间和任务妨碍您使用合适的触控目标,请考虑如何变换触控目标的以下属性以改善体验:

  • 形状

  • 位置

  • 使用频率

  • 任务上下文

  • 可视设计(填料/间距)

  • 错误后果

UX_Interactions_SmallAssets_01

使目标大小大于可视资产。 如果资产的可视大小小于目标,则可视资产的大小不得小于 4.5 毫米。

UX_Interactions_SmallAssets_02

在相邻的可视资产之间引入间距。在这类情况下,通过在相邻的资产之间加入间距(最低 2 毫米)来调整击中目标大小,可得到更合适的击中目标。

UX_Interactions_SmallAssets_03

在资产周围创造可视填料。通过引入可视填料创造安全边界的方式,可降低击中小目标的难度。这将降低击中目标的感知难度。

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

间距小控件

如果您有小元素,则可以通过使用间距来调整目标大小。使用间距调整间隔紧密的小控件。记住将间距用于间隔紧密的小控件。

重要说明重要说明:

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

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

例外

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

像键盘和超链接列表这样的异常需要使用更正机制(如击中目标大小调整算法)或缩放来得到更合适的击中目标。在大部分情况下,目标的高度比宽度更重要,但是也有一些例外(例如,软键盘键的宽度就可能影响目标获取)。确保至少在一个维度中达到理想的目标大小。

UX_Interactions_SoftKeyboard

软键盘

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

UX_Interactions_AdjacentHitTargets

相邻的击中目标过多

拼写元素的大小和位置对屏幕布局的构成至关重要。Windows Phone 可视样式的基础缺乏镶边元素,这意味着文本和拼写在 Windows Phone 上的重要性比在其他 Microsoft 平台上要大。Windows Phone 上的最小字体大小为 15 磅。

提示提示:

使字体标签和提示清晰易读,并有适当的间距。Windows Phone 上的最小字体大小为 15 磅。

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

创建自定义控件

查看 Windows Phone 的控件设计准则部分,以考虑在为页面创建自己的自定义控件之前,将如何填入或显示您的应用内容。

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

考虑将系统标准控件用作自定义控件中的操作范例。例如,考虑使用可作为按钮、复选框和其他控件的图形元素。如果您的控件将在内容查看过程中用到,请将其简化。控件应在全屏查看过程中逐渐淡出。

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

同样重要的是了解有哪些软硬件将免费向您提供。对于初用者来说,每一个 Windows Phone 都包含三个硬件按扭:“返回”、“开始”和“搜索”。了解这些按扭在整个系统中的使用方式,可以帮助防止应用的 UI 和流中存在的问题。

主页按扭和后退堆栈

在您的用户界面中放置“主页”按钮偏离了 Windows Phone 导航模型。平台上的创新虽然不一定是坏事,但是更改平台预期的交互模型可能会使用户感到迷惑。

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

UX_Interactions_BasicBack

基本后退按钮

所有应用都具有不同的交互流,其中某些应用与另外一些相比可能较为复杂。但是,请尝试使应用的体系结构尽可能地保持简略,并善加利用列表和数据透视表,这样用户无需多少后退步骤便可以导航回到登录屏幕,并从这里到达之前启动的应用程序。如有疑问,请尝试模仿平台中已有的常见元素和导航结构;用户将不太可能感到迷惑。

后退和关闭按扭

您的应用 UI 内应当没有任何“返回”或“关闭”按钮。Windows Phone 在每个设备上提供了一个物理“返回”按扭,这样您能使应用导航保持简洁。

浮动按钮

“浮动”按钮可在 Windows Phone 应用程序内产生不一致的、容易混淆的导航。使用应用程序栏是在特殊页面上添加操作的最佳方式。有关应用程序栏的更多信息,请参阅 Windows Phone 的基本图形、可视指示器和通知

UX_Interactions_FloatingButtons

浮动按钮

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

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

搜索内置于每一个 Windows Phone 的软硬件之中。无法修改或更改“搜索”按扭的行为;当按下该按扭后,它将始终启动 Bing 搜索体验,以供用户从设备上的任何位置查找内容。

在类似 Outlook 这样的优等系统应用中,硬件“搜索”按扭会启动应用内的搜索。

无法复制应用内的搜索,但是可以通过使用 SearchTask 类模仿应用内的“搜索”按扭。

在 Windows Phone 操作系统中,应用设置是在应用自身内部执行的。您无权将应用设置放置在系统和系统应用设置之内。

提示提示:

您应当熟悉系统设置选项,并考虑各种不同的用户设置是如何影响 UI 或应用行为的。例如,如果您正在创建连接了 Web 服务的应用,应当考虑用户将手机设为飞行模式时应用的行为。

如果应用具有若干可由用户选择的设置,应当在应用内创建一个设置页面,并按照系统和系统应用设置中的布局和行为模仿它。

UX_Interactions_SystemSettings

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

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

保持应用设置简短清晰应当作为一项设计目标。复杂的多页面、多级别应用设置会使用户不知所措,还以为他们已经完全进入另一个应用。

在没有确认对话框的情况下立即执行用户选定的应用设置,并通过提供一种反馈方法来指示更改已发生。

重要说明重要说明:

避免创建具有两个以上页面的应用设置。

此外,还要记住以下事项:

  • 需要一个以上屏幕的设置应当使用覆盖半个屏幕,以避免在显示 SIP 键盘时丢失上下文。

  • 如果任务无法撤消,则始终为用户提供取消选项。文本条目就是一个示例。

  • 为改写或删除数据的操作或不可逆的操作提供“取消”按扭。

  • 在使用带有“提交”“取消”按扭的其他屏幕时,单击这些按钮应执行关联的操作,并使用户返回到主设置屏幕。

  • 提供可禁用在应用内通过网络获取数据的数据使用方式的选项。

若要使设置控件面板的标题保持一致,设置页的标题应当如下所示:

应用程序设置

<CPL 名称/应用程序名称>

以下是关于 Windows Phone 中的广告单位最低质量要求的基本准则。查看这些准则时,请谨记您的广告也必须与 Windows Phone 设计原则保持一致。

如果没有广告要显示,则 AdControl 会隐藏其自身。将 Windows Phone 应用中的代码加入针对此种情况的帐户,并收回可用的空间。

建议广告单位大小

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

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

UX_Interactions_Ad_Centered

居中的广告控件

提示提示:

加入 300 x 50 像素的 AdControl 大小以保持向后兼容性。它可能在未来被弃用。为了避免将来需要对您的广告单位进行修订,请考虑在 480 x 80 像素的标准 AdControl 大小中创建新广告。

广告定位

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

UX_Interactions_Ad_FullSized

全尺寸 AdControl

滚动查看器

滚动查看器内包含的广告将随用户对内容的滚动在页面上显示或消失。如果您要在用户进行滚动操作时使广告保持固定,请将 AdControl 置于滚动查看器之外。将滚动查看器置于屏幕的顶部或底部。

使用带 Panorama 控件的广告

当用户水平滚动到 Panorama 控件中的下一页时,Panorama 控件中包含的广告将不会显示。若要使广告在所有页面中显示,请将 AdControl 置于 Panorama 控件之外,如下图左侧所示。若要在不同的页面上显示不同的广告,请在针对每个单独广告的每个 Panorama 页面中创建 AdControl 的新实例,如下图右侧所示。

UX_Interactions_Ad_Panorama

Panorama 控件中的广告

使用带 Pivot 控件的广告

当用户水平滚动到 Pivot 控件中的下一页时,Pivot 控件中包含的广告将不会显示。若要使广告在所有页面中显示,请将 AdControl 置于 Pivot 控件之外,如下图左侧所示。

若要在不同的 Pivot 页面上显示不同的广告,请在每个 Pivot 页面中创建 AdControl 的新实例,如下图右侧所示。

UX_Interactions_Ad_Pivot

Pivot 控件中的广告

颜色

使用系统主题颜色。如果您要更改主题颜色,请挑选合适的颜色,以便让 AdControl 的边界和文本仍旧便于易读。

显示:
© 2014 Microsoft