Windows Phone 7 UI设计和交互规范随笔（1）

yxixi

　　
　　当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，它的设计灵感来源于公共场所的标识（譬如地铁和机场的路标），标识使用了简单易懂的图形、对比鲜明的颜色以及大号字体，所以清晰易辨，匆匆一瞥便知其意。
http://coding.windstyle.cn/files/2011/01/wp7_metro_thumb1.jpg
　　这就是Metro想要达到的效果，把现实世界中的大家习以为常的隐喻拿到手机界面中，我们在创建Windows Phone 7应用时应当把可用性和UI放到第一位考虑，并且要遵循Metro的设计原则：

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

开始屏幕
　　Windows Phone 7的开始屏幕非常有特色，是由许多小方块组成的，这个小方块的名字叫做Tile，每个Tile都由背景图片、图标和标题组成。
　　背景图片是256dpi的jpeg或png图片，标准尺寸为172×173像素。如果图片小于标准尺寸，则会被拉伸，如果大于标准尺寸，则会从左上角开始裁减。
　　图标的尺寸为63×63像素，如果使用了多张图片，请注意保持风格的一致性。
http://coding.windstyle.cn/files/2011/01/wp7_tile_thumb1.jpg
　　如果没有指定图标和标题，则会显示系统定义的图标和项目名称，此外，还可以使用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上体现出来，但要小心使用，频繁的通知会耗电。
http://coding.windstyle.cn/files/2011/01/wp7_tile_notification_thumb1.jpg
　　Toast Notification：同样属于系统级通知，当通知到达时，会在屏幕上方显示10秒钟，轻触就会打开发送通知的应用。通知的左侧显示应用程序图标，右侧则是标题和子标题，其中标题的字体会加粗显示。过长的文本会被阶段。Toast Notification应当主要用于点对点通讯。也应当小心使用，过多的Toast通知不仅会耗电，还会使用户恼怒。支持Toast Notification的应用必须默认将这一功能关闭，将开启权交给用户。
http://coding.windstyle.cn/files/2011/01/wp7_toast_notification_thumb1.jpg
　　Raw Notification，属于应用级通知，只能出现在应用内部，由应用自己控制。
Application Bar
　　Application Bar是最常用任务的操作入口，有点像Windows程序的工具栏。它的高度为72像素，最多只能显示4个图形按钮。
http://coding.windstyle.cn/files/2011/01/wp7_application_bar_thumb1.jpg
　　图形按钮由文字和图标组成，二者缺一不可。图标应该使用现实世界的隐喻来设计，清晰明确，易于理解。图标的尺寸为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有专门的系统设置页面，但开发人员无法在系统设置中添加应用的设置页面，应用的设置页面只能添加在应用中。
　　设计设置页面的目标是使其保持简短清晰，避免创建多于两页的设置选项，否则用户会怀疑自己进入了另一个应用。
　　应用设置页面的标题必须和系统级设置页面风格一致。
　　从网络中获取数据的应用必须提供禁用联网的选项。
　　用户对设置页面的更改应该是及时生效的，也就是说要避免使用“完成”、“确定”或其他形式的确认机制。