WP8.1学习系列(第十七章)——Windows Phone重要图形、视觉指示器和通知

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

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

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

磁贴

对于用户可在手机“开始”屏幕中设置的应用或其内容而言,磁贴是一种可轻松识别的可视快捷方式。通过将应用的磁贴固定到视图可自定义要在“开始”屏幕上显示哪些磁贴。动态磁贴比图标更有价值,因为它可以显示关于应用或与其相关的信息。例如,天气应用的磁贴可以动态显示温度。我们强烈建议你使用此功能,因为它可使你的应用更有用。

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

Microsoft 及其移动运营商和硬件制造商合作伙伴已安装了带有某些磁贴的 Windows Phone 设备。这些磁贴一致反映独特的 Windows Phone 体验。

有关详细信息,请参阅磁贴和锁屏提醒指南

磁贴艺术图像非常重要

如果你使用多个磁贴图像,则它们应该在视觉上与其他每个图像一致,并具有可识别的主题或风格。无法更改颜色、字体、字体颜色或计数器显示的大小。

不包含磁贴图像或标题的应用将显示一个系统定义的通用图标和项目名称。如果开发应用的设计预算不高,可以去很多费用合理的网站购买图标。无论你是不是自行设计该磁贴,都请支付或购买该磁贴,使其保持简单。图标应该具有简单的几何图形并限制精美图案的数量。如果可以,它们应该使用人们已熟悉的隐喻。

注意  谨慎使用磁贴通知。过度使用会缩短电池寿命。

要避免的样式

  • 3D 版式
  • 带有渐变、斜面或投射阴影的图标或背景
  • 圆角
  • 黑色或白色背景;磁贴背景将在深色或浅色主题中消失
  • 使用不明确的非描述性图标
  • 带有彩色图像的透明背景

正确和错误的磁贴用法

磁贴背景颜色

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

选择一个可代表你的品牌并使前景图标易于查看或读取的背景颜色。下图显示了遵循指南的三个示例。

Phone Company、Adatum、Margie‘s Travel

你应该避免使用黑色或白色背景,因为磁贴背景将在深色或浅色主题中消失。

黑色磁贴背景颜色的错误用法

如果你希望你的磁贴背景与手机 UI 使用相同主题颜色,则可以将磁贴背景设置为透明。如果执行了此操作,则需了解以下重要注意事项:

  • 仅将你的磁贴设置为透明。与你的应用一起提交的其他磁贴不应该具有透明背景。
  • 将你的前景图标设置为白色。如果前景图标是彩色的,则该图标将不可见,或者看起来与某些手机主题颜色不和谐,如下图所示。

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

初始屏幕

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

正确和错误的初始屏幕

计划你的应用的打开视图时,请牢记以下几点:

  • 如果你的应用使用加载或介绍页面,则这些页面不应该包含在 Back 堆栈中。换言之,当用户按下后退按钮时,应该跳过这些页面。
  • 存在几个与后退按钮和应用的第一个截图相关的认证要求。有关详细信息,请参阅 Windows Phone 的技术认证要求

视觉指示器

Windows Phone 使用三个不同类型的指示器显示任务进度、滚动视图、信号强度、电池寿命以及其他重要信息。

进度指示器

进度指示器显示与某个活动或一系列事件相关的应用内活动。它是一个可集成到状态栏中并可显示在多个应用页面上的系统控件。有关状态栏的详细信息,请参阅本主题后面的“状态栏”部分。

注意  与标准进度栏一样,状态栏进度指示器可以是确定的,也可以是不确定的。确定的进度指示器具有起点和终点。除非任务完成,否则不确定的进度指示器将继续运行。

对下载内容等任务使用确定的进度指示器,而对远程连接等任务使用不确定的进度指示器。

有关如何向用户显示任务进度的详细信息,请参阅进度控件

滚动指示器

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

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

使用称为滚动查看器的可平移和可缩放控件,你可以在应用中实现滚动。滚动查看器通常填充屏幕,并包含比自身大的内容。这样,用户就可以围绕扩展到屏幕边界外部的内容区域进行导航。

状态栏

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

有关详细信息,请参阅 Windows Phone 第一印象中的“状态栏”部分。

应用栏

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

应用栏

使用应用栏,而不是创建自己的菜单系统。这有助于在设备的所有应用上创建一致用户体验。该应用栏为你提供菜单动画和旋转支持。

你可以将应用栏添加到全部都是标记的应用页面中。

设计注意事项:

  • 除非有令人信服的理由来重写主题颜色,否则使用用户定义的系统主题颜色。使用自定义颜色会影响按钮图标的显示质量、造成菜单动画中的异常视觉效果,并缩短某些设备上的电池寿命。
  • 应用栏的不透明度可以进行细微调整,但是我们建议你使用值为 0、0.5 和 1 的不透明度。
  • 和操纵按钮(后退、开始和搜索)一样,应用栏始终位于相同的显示器边缘,并在纵向或横向延伸到屏幕的整个宽度。图标按钮自身将旋转以对齐手机的方向。
  • 纵向模式中的应用栏高度和横向模式的中的宽度是固定的,无法修改。它可设置为显示或隐藏。

有关如何本地化应用栏的说明和示例,请参阅如何构建 Windows Phone 的本地化应用

应用栏菜单

应用栏菜单为可选方式,供用户从应用栏访问特定任务时选择。放置应用栏菜单中较少使用的任务。

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

应用栏菜单

设计注意事项:

  • 若要防止菜单滚动,将菜单中显示的项目数量限制为 5 个。
  • 如果应用栏菜单项的文本太长,该文本将超出屏幕。对于菜单项文本,建议最大长度介于 14 和 20 个字符之间。同样,在此空间中,少即是多。
  • 如果未显示菜单项,将仅显示图标文本提示。
  • 应用栏菜单将保留在屏幕上,直到用户执行某个操作为止。

应用栏图标

应用栏图标应清晰且易于理解,并且应该使用用户熟悉的实际隐喻。最佳图标应该具有简单的几何图形,并限制精美图案的数量。

按钮应该包含一个图标和一个文本提示。文本提示应该简短,为该按钮执行的操作提供上下文,但它们不需要完整描述。例如,可水平翻转图像的按钮。无需“水平翻转”,“翻转”便已足够。

注意  按钮应该包含一个图标和一个文本提示。

应用栏按钮可显示为启用或禁用状态。已禁用按钮的一个示例是只读应用场景中的删除按钮。

应用栏图标

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

使用注意事项:

  • 某些操作难以通过一个图标清晰表达。将这些操作放置在应用栏菜单中。
  • 当用户显示应用栏菜单时,将显示应用栏图标的文本提示。
  • 请勿使用表示后退按钮(可在页面堆栈中向后导航)的“图标”按钮。所有 Windows Phone 设备都具有专用的硬件后退按钮,应始终为后退导航使用该按钮。
  • 旋转应用栏时,请选择具有明确含义的图标。应用栏将自动处理屏幕方向中的更改。当设备处于横向方向时,菜单会在屏幕的一侧垂直显示。旋转图标按钮,以便向用户竖直显示图标,但是列表中图标的顺序不会发生变化。请考虑,当发生旋转时,图标的原意是否会不清楚,尤其是类似图标或对称图标。

设计注意事项:

  • 图标图像大小应为 76 x 76 像素。
  • 图标图像应在使用 alpha 通道的透明背景上使用白色前景。按钮的白色前景图形应该适合图像中心的 41 x 41 正方形区域,以便它不会与圆重叠。
  • 不是建议大小的图像将会缩放以适应,并且可能会降低应用栏图标的整体图像质量。
  • 每个图标按钮上显示的圆都通过应用栏绘制,并且不应该包含在源图像中。

示例图标资产

采用 PNG 格式的一组应用栏图标资产(深色和浅色)将作为 Windows Phone SDK 的一部分进行安装。应用栏中仅应该使用白色图标(名为“Dark”的文件夹中的图标)。若要查找这些项目,请导航到:

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\<version>\Icons\Dark

通知

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

当云服务需要向设备发送推送通知时,它会向 Windows 通知服务发送通知请求,从而使该通知作为磁贴通知、Toast 通知或原始通知路由到应用或设备上。

有三种方法可用于显示推送通知:磁贴通知、Toast 通知和原始通知。

磁贴通知

磁贴通知通知用户可能发生的更改或事件,对用户工作流不具有破坏性。它们显示在“开始”磁贴上。使用磁贴通知,你可以在磁贴上动态设置属性,例如计数、背景图像和标题。

磁贴通知

针对仅感知通知使用磁贴通知。

Toast 通知

Web 服务可生成一种称为 Toast 通知的特殊推送通知,可从用户请求某个操作。Toast 通知会显示一个横幅(它是位于屏幕顶部的主题色中的不透明栏),从而在左侧显示应用图标的缩小版本。提供两个字段的文本:一个是粗体标题,另一个是正常副标题。长度大于显示区域的文本将被截断。

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

横幅

针对操作请求的通知使用 Toast 通知。例如,通过即时消息客户端或对等应用产生的通知。但是请慎用这些通知;所有应用均具有对 Toast 通知的访问权限,太多横幅会使用户感到厌烦。

应用必须默认关闭 Toast 通知。Toast 通知应与用户个人相关,并且对时间十分敏感。通常,它们会保留对等通信,如同在 SMS 应用程序中一样。

原始通知

需要应用内操作的通知完全由应用控制并仅反映该应用。这些通知称为原始通知。它们可以通过应用自行生成或从 Web 服务发送。没有用于显示原始通知的系统范围的方法。

原始通知

针对应用内通知使用需要用户操作的原始通知。

网络中断的情况

  • 如果没有网络连接,则应用应提供相应的警告。可以使用飞行模式测试警告。
  • 验证该应用在没有可用网络时是否仍可导航。尽管可能没有传入数据,但应用的导航功能应仍起作用。
  • 如果网络中断中断了某个功能或操作,则始终让用户知道发生了什么问题。

包括最终用户许可协议

最终用户许可协议(即 EULA)是用户在首次启动应用时允许遵循的一组使用指南。它会列出用户的权利,正如你所设想的那样。它是你和购买应用的用户之间的协议,该协议规定用户不能滥用应用。

应用的使用应基于用户是否接受 EULA。如果用户不接受 EULA 条款,则不允许该用户使用应用。

此声明应该讨论你支持的应用的行为和使用,包括有关内容、许可证、安装、激活、验证、基于 Internet 的服务或某些信息的使用的特定条款。它还是通知用户更新你的计划、提供应用升级或者使用软件格式和标准的好方法。如果你的应用与某个企业相关联,你的 EULA 还应该指示你的企业的注册位置,以及你是否提供任何形式的担保。

时间: 2024-10-08 15:21:15

WP8.1学习系列(第十七章)——Windows Phone重要图形、视觉指示器和通知的相关文章

WP8.1学习系列(第十七章)——交互UX之输入和反馈模式

如果你将 Windows 应用商店应用设计为触摸交互,则可免费获取对触摸板.鼠标.笔和键盘交互的支持.你的用户可以从一种输入法切换到另一种,而不会丧失应用体验的感觉.将键盘插入平板电脑?没问题.你的应用将对用户的选择做出一致且可预见的响应. 设计你的 Windows 应用商店应用的 UI 以支持触摸,同时考虑各种设备的设计含义: 结合了触摸和鼠标体验的触控板 鼠标 笔,专为数字墨迹而设计 键盘设备 触摸 Windows 提供一组在整个系统中使用的简单触摸交互功能.一致地应用此触摸语言可让用户对你

WP8.1学习系列(第二十七章)——ListView和GridView入门

快速入门:添加 ListView 和 GridView 控件 (XAML) 在本文中 先决条件 选择 ListView 或 GridView 将项添加到项集合 设置项目源 指定项目的外观 指定视图布局 向视图中添加标题 设置视图的交互模式 摘要和后续步骤 相关主题 重要的 API ListView GridView 你可以在 XAML 中使用 ListView 或 GridView 控件来显示数据集合,如联系信息列表.库中的图像或电子邮件收件箱中的内容. 目标: 了解如何将 ListView 和

WP8.1学习系列(第四章)——交互UX

交互模式和指南 这部分包括三部分内容,分别是导航模式.命令模式和输入模式. 导航模式 虽然 Windows 导航模式提供了框架,但它提倡创新.激发你的创造力并在已建立的模式上构建. 命令模式 使用应用栏.超级按钮.菜单和页面内容,以使用户可以控制你的应用. 输入模式 了解用户可用于与应用交互的许多方式.深入了解如何设计良好的触摸交互. 导航模式 组织 Windows 或 Windows Phone 应用中的内容,以便用户可以轻松而直观地进行导航. 适用于 Windows 的导航模式 适用于 Wi

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

本主题讨论了布局会对应用的可用性产生怎样的影响.在应用的可用性上下文中还讨论了其他常用 UI,例如搜索和设置. 在继续使用控件和交互之前,请执行以下操作: 有关概念化应用的策略,请参阅尽你所能,设计最佳 Windows Phone 应用. 阅读控件设计指南中关于标准系统控件的内容. 触摸目标和文本 你的应用应该向用户呈现具有足够大小的触摸目标.用户在点击控件时应得到反馈,说明其点击已对控件产生作用,并允许其在应用内继续执行操作.为此,Windows Phone 对触摸目标和文本的使用有一些特定要

WP8.1学习系列(第二十三章)——到控件的数据绑定

在本文中 先决条件 将控件绑定到单个项目 将控件绑定到对象的集合 通过使用数据模板显示控件中的项目 添加详细信息视图 转换数据以在控件中显示 相关主题 本主题介绍了如何在使用 C++.C# 或 Visual Basic 的 Windows 应用商店应用中将控件绑定到单个项或将列表控件绑定到项目集合.此外,本主题向你介绍了如何自定义控件项目的显示.如何基于所选内容实现详细信息视图,以及如何转换数据以进行显示.有关更多详细信息,请参阅使用 XAML 进行数据绑定. 路线图: 本主题与其他主题有何关联

WP8.1学习系列(第二十一章)——本地应用数据

了解如何存储和检索本地应用数据存储中的设置和文件. 路线图: 本主题与其他主题有何关联?请参阅: 使用 C# 或 Visual Basic 的 Windows 运行时应用的路线图 使用 C++ 的 Windows 运行时应用的路线图 获取应用的设置和文件容器 使用 ApplicationData.LocalSettings 属性可以获取 ApplicationDataContainer 对象中的设置.使用ApplicationData.LocalFolder 属性可以获取 StorageFold

WP8.1学习系列(第七章)——应用选项卡Pivot交互UX

“应用选项卡”模式用于用户经常在中间导航的多个 UI 页面.如果你的应用基于单个主题(例如,电影.棒球等),该模式尤其有用.每页都将为用户显示与该应用呈现的整体数据相关的一些内容.“应用选项卡”模式可能构成整个应用,或者还可用于应用的子区域.例如,你可以使用中心控件作为应用主要的第一层级(如之前主题所述),然后让用户从该控件导航到应用使用“应用选项卡”模式的子部分(使用透视控件). 想象你希望拥有一个将你家里收藏的电影分类的应用.你可以使用“应用选项卡”模式提供几个不同的电影筛选视图.你可能希望

WP8.1学习系列(第十一章)——中心控件Hub开发指南

在本文中 先决条件 什么是中心控件? 添加中心控件 将分区添加到中心 添加交互式分区头用于导航 将展示磁贴添加到中心 使用窄应用中的垂直中心 借助中心使用语义式缩放视图 摘要和后续步骤 重要的 API Hub HubSection SemanticZoom 使用 Hub 控件创建一个进入应用的入口页.Hub 控件在丰富的平移视图中显示内容,这样用户一眼就能看见新鲜有趣的内容,从而吸引他们深入了解你的应用中的更多内容. 先决条件 查看并了解 Windows 导航模式. 查看并了解中心控件指南. 我

WP8.1学习系列(第六章)——交互UX:具有面板部分的Hub

本主题中呈现的模型类似于适用于 Windows Phone 的具有主页菜单(中心或透视控件)的中心应用中描述的模型.正如之前的案例所示,你要向用户呈现不同的功能区域.此处的区别在于你可以在顶层呈现所有主要 UI,而无需主页菜单. 用于足球队管理的中心应用中心 UI 如果你的应用没有要导航到的子区域,则你的所有 UI 都可位于一组水平的可访问部分中.你仍可使用 中心控件,但在此案例中,你无需具有主页部分.Windows Phone 上的 People Hub 即属于这种情况.下图显示了中心的基本布