代码改变世界

Windows Phone 7 UI设计和交互规范随笔(1)

2011-01-21 09:07 by Windie Chai, ... 阅读, ... 评论, 收藏, 编辑

当iPhone和Android在市场上所向披靡的时候,搭载Windows Phone 7的手机也终于进入了市场。我打算写个Windows Phone 7应用试一下,就随便翻了翻Windows Phone 7的SDK,SDK写的很细致,上线也很及时,要是微软其他产品的SDK也能这样就好了。

Windows Phone 7 SDK的许多章节都提示要先阅读《UI Design and Interaction Guide for Windows Phone 7 v2.0》,这份规范非常细致,内容并不只是针对用户体验的设计,开发人员也能从中了解Windows Phone 7的一些能力以及限制。 

在这几篇随笔中,我不仅会摘录一些对我而言比较重要的内容,还会适当的和Android以及iOS作比较。此外,这份规范中有许多内容其实是触摸屏用户体验的常识,我就不在随笔里赘述了。

Metro

Windows Phone 7的UI系统叫做Metro,它的设计灵感来源于公共场所的标识(譬如地铁和机场的路标),标识使用了简单易懂的图形、对比鲜明的颜色以及大号字体,所以清晰易辨,匆匆一瞥便知其意。

这就是Metro想要达到的效果,把现实世界中的大家习以为常的隐喻拿到手机界面中,我们在创建Windows Phone 7应用时应当把可用性和UI放到第一位考虑,并且要遵循Metro的设计原则:

  • 干净、轻量、开放、快速、热情、活泼
  • 关注内容,而不是装饰
  • 软硬件集成,响应物理按键事件
  • 手势操作

开始屏幕

Windows Phone 7的开始屏幕非常有特色,是由许多小方块组成的,这个小方块的名字叫做Tile,每个Tile都由背景图片、图标和标题组成。

背景图片是256dpi的jpeg或png图片,标准尺寸为172×173像素。如果图片小于标准尺寸,则会被拉伸,如果大于标准尺寸,则会从左上角开始裁减。

图标的尺寸为63×63像素,如果使用了多张图片,请注意保持风格的一致性。

如果没有指定图标和标题,则会显示系统定义的图标和项目名称,此外,还可以使用Tile Notification来更新Tile的图片、标题以及计数器,但计数器的样式是无法自定义的。

Windows Phone 7的开始屏幕上还有一种双倍宽度的Tile,比如Calendar Tile,很可惜的是,这种双倍宽度的Tile目前只对微软、手机厂商和运营商开放。

Windows Phone 7内置了Dark和Light两套背景以及10套颜色,除此之外,手机制造商和电信运营商还可能会增加主题。

系统级主题是不可定制的,但应用可以重写自己的主题。建议使用系统主题,没有特殊理由不要重写主题。如果应用定制了颜色,就请确保在该颜色各种主题下都可识别。

此外,尽量避免使用白色背景,因为它比较耗电。

通知

Windows Phone 7中的推送通知服务有3种:

  • Tile Notification
  • Toast Notification
  • Raw Notification

Tile Notification属于系统级通知,由可选的计数器、可选的标题和开发人员指定的背景图组成。通知会在开始屏幕的Tile上体现出来,但要小心使用,频繁的通知会耗电。

Toast Notification:同样属于系统级通知,当通知到达时,会在屏幕上方显示10秒钟,轻触就会打开发送通知的应用。通知的左侧显示应用程序图标,右侧则是标题和子标题,其中标题的字体会加粗显示。过长的文本会被阶段。Toast Notification应当主要用于点对点通讯。也应当小心使用,过多的Toast通知不仅会耗电,还会使用户恼怒。支持Toast Notification的应用必须默认将这一功能关闭,将开启权交给用户。

Raw Notification,属于应用级通知,只能出现在应用内部,由应用自己控制。

Application Bar

Application Bar是最常用任务的操作入口,有点像Windows程序的工具栏。它的高度为72像素,最多只能显示4个图形按钮。

图形按钮由文字和图标组成,二者缺一不可。图标应该使用现实世界的隐喻来设计,清晰明确,易于理解。图标的尺寸为48×48像素(其他尺寸会被缩放到此尺寸),建议使用白色作为前景色,背景色保持透明,保存为包含alpha通道的png文件。系统会根据当前主题自动着色,并为图标加上圆环,所以设计图标时不需要考虑圆环。安装了Windows Phone 7开发工具之后,可以在C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons中找到一些图表示例。

除了图形按钮之外,Application Bar还会显示一个省略号,点击省略号之后会打开Application Bar菜单。菜单为那些很难用图标描述或者不常用的功能提供入口。菜单中最多可以包含5个菜单项,每个菜单项的文字长度为14-20个英文字符,过长的文字会被截断,设计时要谨记“少即是多”,精简文字。

Application Bar的透明度可以自由调节,建议值为0、0.5和1。当透明度小于1时,Application Bar会覆盖在页面之上,等于1时,页面尺寸会变化,为Applicaiton Bar腾出空间。

对于Application Bar,规范中的建议是能不用就不用,给用户过多的选项并不见得是一件好事情。

这里再顺便提一下,Android也有类似的机制,就是菜单,而且Android手机还都配备了一个用于显示菜单的物理菜单键,这本来是一个很好的设计,但Android却没有一种机制去提示用户当前页面中包含菜单,以至于我现在尝试一个新应用,每每跳转到一个新的页面,都要试着按一下菜单键,看看有什么选项,这个体验糟透了。

控件

使用Silverlight开发Windows Phone 7应用时,可以使用内置的许多控件进行快速开发,这里简单的介绍一下部分控件。

Progress indicator是一个系统级控件,它有两种模式:

  • Determinate:进度条从开始增长到结束。
  • Indeterminate:进度条一直循环,直到任务完成。

Checkbox支持中间状态,但不建议使用,因为中间状态会使用户感到迷惑。

Hyperlink应该仅用于导航以及显示剩余文字,不应该当作Button来用。

Image控件不支持GIF,在Silverlight里就是这样的。

可以在页面中添加多个MediaElement控件,但同时只能有一个处于活动状态。不要用MediaElement控件来播放效果音或者全屏播放,有可能会中断。

MultiScaleImage控件没有内置任何手势功能,需要开发人员自己实现。

Panorama控件的背景可以是单色或者图片,尺寸介乎480×800像素到1024×800像素之间,尺寸太大的图片会影响性能。控件中每一个Section的比例都是16:9。Panorama控件的Title可以是文字,也可以是图片,但要和应用的Tile标题保持一致。Panaorma控件的Section标题可以是文字或图片。Section中的缩略图如果不加文字描述的话,可以一行放置两个,并且建议一行最多只放置两个。

Pivot控件用来显示简单类型的数据,不要将它嵌套在Pivot控件中,也不要嵌套在Panorama控件中。此外,Pivot控件的头部高度是固定不可变的。

Slider控件用来在某一范围中选择值,有横向和纵向两种方向,但建议使用横向。

按钮的文字最好是简单明确的动词。

对话框中的按钮,表示正面意义的应该位于左侧(比如“确定”、“保存”)。

在多层嵌套控件时,Canvas的性能要优于Grid。但Grid支持伸缩和旋转,而Canvas不支持。所以开发时请综合页面内容和性能加以考虑。

创建自定义控件时也要注意遵守Metro原则。

顺便谈一下设置页面,Windows Phone 7有专门的系统设置页面,但开发人员无法在系统设置中添加应用的设置页面,应用的设置页面只能添加在应用中。

设计设置页面的目标是使其保持简短清晰,避免创建多于两页的设置选项,否则用户会怀疑自己进入了另一个应用。

应用设置页面的标题必须和系统级设置页面风格一致。

从网络中获取数据的应用必须提供禁用联网的选项。

用户对设置页面的更改应该是及时生效的,也就是说要避免使用“完成”、“确定”或其他形式的确认机制。