惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Hugging Face - Blog
Hugging Face - Blog
云风的 BLOG
云风的 BLOG
大猫的无限游戏
大猫的无限游戏
M
MIT News - Artificial intelligence
L
LangChain Blog
阮一峰的网络日志
阮一峰的网络日志
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Recent Announcements
Recent Announcements
IT之家
IT之家
Google DeepMind News
Google DeepMind News
罗磊的独立博客
爱范儿
爱范儿
Last Week in AI
Last Week in AI
人人都是产品经理
人人都是产品经理
U
Unit 42
MongoDB | Blog
MongoDB | Blog
S
SegmentFault 最新的问题
B
Blog
博客园 - 叶小钗
月光博客
月光博客
Stack Overflow Blog
Stack Overflow Blog
V
Visual Studio Blog
C
Check Point Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知

博客园 - Windie Chai

为SharePoint顶部链接开发自定义数据源 SharePoint 2010 JavaScript技巧两则 Windows Phone Background Agent杂谈 Linq to SharePoint,看上去很美 Windows Phone自定义主题 Windows Phone WebBrowser的技巧 《Visual Studio程序员箴言》笔记 HTML5学习碎片 Windows Phone 7 UI设计和交互规范随笔(2) 使用SharePoint Client OM来查询列表的注意事项(2) 使用SharePoint Client OM来查询列表的注意事项 小心Windows Live Writer插件偷走你的博客密码 [C#]增强响应性,用加载窗体(Splash)来载入主窗体 WindStyle ExifInfo for Windows Live Writer发布 WF4.0活动模型(1):工作流既活动 泛谈SharePoint 2010无代码工作流 如何在SharePoint 2010项目中引用UserProfiles.dll Windstyle SlugHelper for Windows Live Writer发布 让代码看起来更舒服(2):选择适合的字体
Windows Phone 7 UI设计和交互规范随笔(1)
Windie Chai · 2011-01-21 · via 博客园 - 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有专门的系统设置页面,但开发人员无法在系统设置中添加应用的设置页面,应用的设置页面只能添加在应用中。

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

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

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

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