导出 (0) 打印
全部展开

Windows Phone 的基本图形、可视指示器和通知

2013/12/5

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

美感在手机应用中是不可或缺的,它是直观操作的代名词。在 Windows Phone 中,图块、初始屏幕、图标、控件和导航的视觉元素会引起用户对应用程序内的相关任务、优先事项或操作的注意,并且会以新颖醒目的方式显示信息。您的应用程序需要自定义设计的实时拼贴、动画图标,以及初始屏幕图像,从而在加载时可以向用户介绍您的应用程序。这些和其他可视指示器是本部分的主题。

尽量少使用图形。请记住,使用可以引起视觉吸引力的内容和版式,并且始终不要使用纯天然修饰的视觉元素。

请注意,在移动平台上,简洁性是最具有吸引力的重要资源。如果艺术作品合适,请使用高质量、原创的图形艺术作品、品牌或摄影作品。确保艺术作品满足或超过应用所需的尺寸,并且确保明确和易懂。

本主题包含以下各节。

图块是一个容易识别的应用或其内容的可视快捷方式,用户可以在手机的“开始”视图中进行设置。通过将应用的图块“固定”到视图,可以自定义在“开始”屏幕上显示哪些图块。实时拼贴比图标要好,因为它可以显示关于应用或与其相关的信息。例如,天气应用的图块可以动态地显示温度。我们强烈建议您充分使用此功能,因为它可以使您的应用变得更有用。

UX_Interactions_Tiles_01

正确和错误的图块用法

最佳“图块”会传送有关应用的信息,彰显您的个性品牌,并在屏幕上所有其他图块中显得鹤立鸡群。图块可以向用户传送信息,方法是显示使用系统字体的可选计数器,更新提供的图块背景图像,或者显示使用了固定大小和颜色的系统字体的可选图块。使用“图块通知”服务控制计数器、背景图像和图块更新。计数器的强调色始终都是用户选择的强调色。计数器显示是可选的。

Windows Phone 手机随附了一些 Microsoft 及其移动运营商和硬件制造商合作伙伴安装的“图块”。这些图块始终反映独特的 Windows Phone 体验。两倍宽度的图块仅提供给 Microsoft 及其合作伙伴。

有关更多信息,请参见 Windows Phone 的图块设计准则

图块艺术作品非常重要

如果您使用多个图块图像,它们在视觉上应该彼此一致,且拥有一个可识别的主题或风格。无法更改计数器显示屏的颜色、字体、字体颜色和大小。

不包含图块图像或标题的应用将显示常规、系统定义的图标和项目名称。如果您所开发应用程序的设计预算比较紧,可以去很多费用合理的网站购买图标。无论您是自行设计、委托设计还是购买图块,都请保持其简洁。图标应该有简单的几何图形和少量非常精美的图案。如果可能的话,它们应使用人们已经熟悉的比喻。

说明注意:

请谨慎使用“图块通知”。过度使用会降低电池寿命。

要避免的样式

  1. 3D 版式

  2. 具有渐变、斜角或投射阴影的图标或背景

  3. 圆角

  4. 黑色或白色背景;图块背景将会在 Windows Phone 手机的深色或浅色主题上消失

  5. 使用非描述性的、模糊的图标

  6. 彩色图像的透明背景

图块背景颜色

图块有两个重要元素:在前景、方块、彩色背景中显示的图标或徽标。这两个图像会相辅相成。

选择表示品牌并使前景色图标便于查看或读取的背景颜色。下图显示了三个遵循准则的示例。

UX_Interactions_Tiles_02

Phone Company、Adatum、Margie’s Travel

您应该避免使用黑色或白色背景颜色,因为图块背景在手机 UI 提供的白色或黑色主题中将不可见。

UX_Interactions_Tiles_03

黑色图块背景颜色的错误用法

如果您希望“图块”背景与手机 UI 的主题颜色相同,您可以将图块的背景设置为透明。如果您进行了此操作,则需了解以下重要注意事项:

  • 仅将图块设置为透明。您使用应用提交的其他图标不应该具有透明背景。

  • 将前景图标设置为白色。如果前景图标是彩色的,图标将不可见或者在某些手机主题颜色上看起来比较刺眼,如下图所示。

UX_Interactions_Tiles_04

未将前景图标设置为白色的问题

许多应用加载时要花一些时间。使用此机会通过初始屏幕向用户介绍应用。初始屏幕仅在几秒钟内可见,因此我们建议您不要使用任何需要用户注意或花费时间来阅读的文本。相反,使用此空间将用户的注意力转换到具有图形的应用中。良好的初始屏幕是应用的图形广告,并且自始至终都是使用颜色和图形。

UX_Interactions_SplashScreens

正确和错误的初始屏幕

要向您的应用添加初始屏幕,请向项目的根文件夹添加现有的 JPG 图像文件,然后将该文件命名为 SplashScreenImage.jpg。

当您规划应用的打开视图时,请注意以下情况:

  • 如果应用使用加载或介绍页面,则后退堆栈中不应包括它们。换而言之,当用户按“返回”按钮时,将会跳过它们。

  • 对于应用的“返回”按钮和初始屏幕,存在数个认证要求。有关更多信息,请参见Technical certification requirements for Windows Phone

Windows Phone 操作系统会使用三种不同类型的指示器来显示任务进度、滚动视图、信号强度、电池寿命和其他重要信息。

进度指示器

进度指示器显示与活动或一系列事件相关的应用中的活动。这是系统保留的控件,该控件会集成到“状态栏”中,并且可以在多个应用页面中显示。有关“状态栏”的更多信息,请参见本主题后面的“状态栏”一节

说明注意:

进度指示器可以是确定的,也可以是不确定的。确定的进度指示器拥有开始和结束点。不确定的进度指示器会继续,直到任务完成为止。

如果您要模仿此控件,请对下载内容等任务使用确定的进度指示器,而对远程连接等任务使用不确定的进度指示器。

有关如何向用户显示任务进度的更多信息,请参见 Windows Phone ProgressBar 控件设计准则

滚动指示器

当屏幕上的内容超出了可见页面的边界,且用户平移或轻拂时,页面将会滚动。用户滚动时,对于垂直滚动,可见滚动指示器在右侧显示;而对于水平滚动,指示器沿底部显示。这些滚动条指示内容的长度或宽度超出页面,并表示页面上的当前位置。在页面滚动结束时,一秒钟后滚动指示器会从视图淡出。

滚动指示器不是用户的操作行为,而是对其下内容的覆盖。其主要功能是向用户提供关于页面大小的提示。

滚动查看器

通过使用滚动查看器,用户可以导航到应用框架内无法直接查看的内容,如较长的文本或图像部分。

在滚动时,滚动指示器在用户平移或轻拂时淡入,而在手势结束一秒钟后淡出,但是滚动指示器不是用户可操作的。滚动查看器支持平移和轻拂手势。

状态栏是一个指示器栏,可以在应用工作区预留部分利用简单、干净的图示显示系统级别的状态信息。它会自动更新以提供不同的通知,并让用户注意到系统级别的状态。

UX_Interactions_StatusBar

状态栏

状态栏是系统预留的,且无法修改。可以隐藏状态栏,但是许多用户将其中的系统时钟视为一项基本功能,因此请您在对其进行隐藏前仔细考虑一番。

状态栏将会显示下列信息(按从左到右的顺序):

  1. 信号强度

  2. 数据连接

  3. 呼叫转移

  4. 漫游

  5. 无线网络信号强度

  6. 蓝牙状态

  7. 响铃模式

  8. 输入状态

  9. 电池电量

  10. 系统时钟

系统时钟

默认情况下,仅系统时钟始终可见。如果用户在状态栏区域中连按,所有其他相关指示器都会滑入视图,持续时间大约为 8 秒,然后从视图中滑出。

系统时钟在纵向模式下高度为 32 像素,在横向模式下宽度为 72 像素。它始终扩展到屏幕边缘,外观上不透明。

应用栏会为开发人员提供一个位置,以便最多将四个最常用的应用任务和视图显示为图标按钮。此栏提供一个视图,可以显示具有文本提示的图标按钮,以及称为应用栏菜单的可选上下文菜单(在用户点按序列点的可视指示器或向上轻拂应用栏时激活)。

UX_Interactions_AppBar

应用栏

使用应用栏,而不是创建自己的菜单系统。这有助于在手机的所有应用中创建一致的用户体验。应用栏为您提供了菜单动画和旋转支持。

您可以将应用栏添加到全部都是 XAML 的应用页面中。但是,应用栏不是标准控件并且不支持数据绑定。这意味着用于按钮标签的字符串值必须使用 XAML 进行硬编码,并且无法本地化。如果您计划本地化应用,您应该使用 C# 创建应用程序栏,或使用 C# 以在运行时通过编程方式修改标签值。

设计注意事项

  • 除非有令人信服的理由来重写主题颜色,否则使用用户定义的系统主题颜色。使用自定义的颜色会影响按钮图标的显示质量,创建菜单动画的不同寻常视觉效果,以及缩短某些手机上电池寿命。

  • 应用栏的不透明度可以进行细微调整,但是我们仅建议仅使用不透明度的值 0、0.5 和 1。如果不透明度设置为小于 1,则显示的页面将会屏幕大小,应用栏会在其顶部覆盖。如果不透明度设置为 1,则所显示的页面将会被调整为不包括应用栏的屏幕区域大小。

  • 应用栏始终位于控制按钮(“返回”“开始”“搜索”)所在的显示屏边缘,并可以横向或纵向模式扩展为整个屏幕宽度。图标按钮会旋转以与三个手机方向一致。

  • 纵向模式下的应用栏高度和横向模式下的宽度都是固定的 72 像素,且无法修改。通过设置,可对其进行显示或隐藏。

有关如何本地化应用程序栏的说明和示例,请参见如何生成 Windows Phone 的本地化应用

应用栏菜单

应用栏菜单为可选方式,供用户从应用栏访问特定任务时选择。在应用栏菜单中放置非常用任务。

当用户点按序列点的可视指示器或向上轻拂应用栏时,将激活此菜单。通过在菜单区域以外或点上点按、使用“返回”按钮或选择菜单项或应用栏图标,可以取消该视图。

UX_Interactions_AppBarMenu

应用栏菜单

设计注意事项

  • 为了防止菜单滚动,在菜单中显示的项数限制为 5 个。

  • 如果应用栏菜单项的文本过长,则其会超出屏幕显示范围。对于菜单项文本,建议最大长度介于 14 和 20 个字符之间。再者,此空间中较少的字符更常见。

  • 如果未显示菜单项而仅显示了图标文本提示,

  • 则该应用栏菜单会保留在屏幕上,直到用户执行某项操作为止。

应用栏图标

应用栏图标应该是清楚且容易理解的,并且应该使用用户所熟悉的真实世界的比喻。最佳图标应该包括简单的几何图形并限制精美图案的数量。

按钮应该具有图标和文本提示。文本提示应该是简短的,并提供按钮用途的上下文,但它们不需要完整描述。例如,水平翻转图像的按钮。不必说明“水平翻转”,“翻转”两个字就可以了。

说明注意:

按钮应该具有图标和文本提示。它们应该是 48 x 48 像素,并且在使用 alpha 通道的透明背景上具有白色前景。

应用栏按键可以显示为启用或禁用的状态。例如,在只读情况下,“删除”按钮将是一个禁用的按钮。

UX_Interactions_AppBarIcons

应用栏图标

将图标按钮用于应用中主要、最常用的操作。请勿盲目使用更多图标。

使用注意事项

  • 某些操作用图标难以清楚地表达意义。而是将这些操作放置在应用栏菜单中。

  • 当用户显示应用栏菜单时,将显示应用栏图标的文本提示。

  • 请勿将图标按钮用于可以在页面堆栈中向后导航的“返回”按钮。所有的 Windows Phone 手机要求具有一个专用的硬件“返回”按钮,该按钮始终可用于向后导航。

  • 请选择旋转应用栏时具有明确意义的图标。应用栏会自动根据屏幕方向处理变更。当手机为横向时,菜单会在屏幕的一侧垂直显示。图标按钮会旋转,以便它们竖直呈现给用户,但列表中图标的顺序不会改变。当这种情况发生时,图标的含义可能不明确,尤其是当两个图标彼此为沿 Y 轴的镜像图像时。

设计注意事项

  • 图标图像大小应该为 48 x 48 像素。

  • 图标图像应在使用 alpha 通道的透明背景上使用白色前景。按钮的白色前景图形在图像的中心应该适合 26 x 26 正方形区域,以便它不会与圆重叠。

  • 大小不是建议大小的图像将会缩放以适应,并且可能会降低应用栏图标的整体图像质量。

  • 在每个图标按钮上显示的圆都由应用程序栏绘制,不应包含在源图像中。

除非有令人信服的理由来重写主题颜色,否则使用用户定义的系统主题颜色。使用自定义颜色会影响按钮图标的显示质量,将会在菜单动画中创建不同寻常的视觉效果,并缩短某些手机的电池寿命。

图标按钮

作为 Windows Phone SDK 8.0 的一部分,系统已安装一组 64 个 PNG 格式的应用栏图标(32 个深色和 32 个浅色)。应用栏中仅应使用白色图标。若要查找这些项,请导航到:

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons\Dark

对于应用开发,推送通知服务设计用于利用专用、有弹性和持久的通道提供云服务,从而为移动设备发送通知。

当云服务需要向设备发送推送通知时,它会向推送通知服务发送通知请求,推送通知服务反过来将通知路由到应用,或以 Tile、Toast 或 Raw 通知形式路由到设备。

有三种显示推送通知的方法:Tile 通知、Toast 通知和 Raw 通知。

图块通知

Tile 通知会告知用户可能已经发生的更改或事件,并且不会干扰用户的工作流。它们会显示在“开始图块”上。通过使用 Tile 通知,您可以动态地在 Tile 上设置属性,如计数、背景图像和标题。

AP_Tiles_TileComponentsFront

图块通知

正确用法

为仅有意识的通知使用 Tile 通知。

Toast 通知

Web 服务可以生成称为 Toast 通知的特殊种类推送通知,它会请求用户的操作。Toast 通知会在屏幕的顶部以强调色显示为不透明栏,并且会在左侧角上显示一个按比例缩小的应用图标版本。提供两个文本字段:一个粗体的标题和一个正常的副标题。长于显示屏区域的文本会被截断。

Toast 通知显示 10 秒,然后消失。如果点按了通知,将会启动发送通知的应用。Toast 通知是系统范围内的通知,但是它们不会干扰用户流,也不需要干预以解析。用户收到的文本消息或即时消息就是这些通知的示例。

UX_Interactions_ToastNotifications

Toast 通知

正确用法

为请求操作的通知使用 Toast 通知,但是请谨慎地使用它们。所有的应用都会访问 Toast 通知,并且过多的 Toast 通知会惹恼用户。例如,通过即时消息客户端或面向点对点的应用生成的通知。

说明注意:

回合游戏会使用 XNA Framework GamerServices 进行通知。

在默认的情况下,应用会关闭 Toast 通知。Toast 通知应与用户个人相关,并且时间有至关重要的作用。通常,它们是给点对点通信预留的,像在 SMS 应用程序中那样。

Raw 通知

需要在应用中执行操作的通知,这些通知完全由某个应用控制,并且仅对该应用有影响。这些通知称为 Raw 通知。它们可以由应用自身生成或者从 Web 服务中发出。在系统范围内,不存在任何显示 Raw 通知的方式。

UX_Interactions_RawNotifications

Raw 通知

正确用法

为需要用户操作的应用内通知使用 Raw 通知。

  • 如果没有网络连接,应用应提供一个适当的警告。您可以使用飞行模式来测试您的警告。

  • 请验证当没有提供网络时是否仍然可以导航应用程序。尽管可能没有任何数据传入,应用程序的导航应仍然起作用。

  • 如果网络故障中断了某项功能或操作,则会始终向用户表明什么出现了错误。

最终用户许可协议(简称为 EULA)是用户首次启动应用程序时用户同意遵守的使用指南集。它会列出用户的权利,正如您所设想的那样。这是您和购买应用的用户之间的协议,用于规定用户不得滥用应用。

应用的使用取决于用户是否接受 EULA。如果用户不接受 EULA 中的条款,则用户不得使用应用。

本声明应讨论您支持的应用程序的行为和使用,其中包括关于内容、许可证、安装、激活、验证、基于 Internet 的服务或某些信息使用的特定条款。同时此区域也非常适合向用户通知您的更新计划、提供应用程序的升级或软件格式和标准的使用。如果您的应用程序与企业相关联,则您的最终用户许可协议还应表明企业注册的位置,以及是否提供任何形式的担保。

显示:
© 2014 Microsoft