Windows phone 应用开发[3]-UI 设计
2011-11-10 21:30 chenkai 阅读(6531) 评论(13) 编辑 收藏 举报本篇来谈谈Windows phone UI设计.这个有点让我痛苦的话题.
其实谈到移动平台的设计.原来没有实际接触Windows phone 产品开发工作时对UI设计这个概念不是特别强烈. 并没有感到PC端Application和移动终端上在UI设计之间的差异.但当意识这是一个块独立区域 和Pc端UI即存在关联而又具有自己独立的特点时.当一个产品从需求孵化阶段到用户群体定向设计的成型.才感到这个方向作为开发人员的欠缺. 在6月份时
中间读了<<User InterFace Design For Programmers>> :
这本书应该是我度过三本UI设计书中感觉最好的一本了.内容写的很轻松.语言风趣.特别是里面举得开发人考虑UI的方式 真的和我亲身感受如出一辙.有好几个地方给我印象深刻.特别如果你站在一个DEv角度去看的里面有些观点甚至让你有些无比纠结.但又不得不承认自己确实存在这些情况.比如在这本书序言就对UI设计一个比较有意思的观点:
我们表面上认为自己在为用户设计，但是无论我们如何努力，我们都只是在为我们自己认为的用户设计，或者更可悲地说是，为我们自己设计。然后我们再证明这软件也对其他人有效.
程序员们善于逻辑思考，在编程时容易沉浸在自己的世界中，还有自以为是等等，这些特点让UI设计对他们来说变成了一个头痛的问题。但是在进度紧张的项目中，产品经理没法对每个软件细节进行把控，或者他们没有这方面的能力。UI设计的任务只能让程序员一块做了.
接下来面对问题……
读起来非常有意思.受益匪浅.虽然出版时间有点早2001年.但依然推荐各位做开发的同学好好读读这本书.
PDF英文原版下载地址:
<<User Interface Design For Programmers >> PDF Document Download Link:
/Files/chenkai/UserInterfaceDesignforProgrammers.rar
回到Windows phone Metro设计.这因该很多用户能够直观辨别Windows phone主要因素之一. IPhone水晶风格和Android白底黑字不同.WP最大区别在于.IPhone和Android 都是以应用为主要呈现对象.类似那个通用的八宫格. 而MEtro 界面强调的是信息的本身.而不是冗余的界面元素.Metro设计理念来源微软HQ位于西雅图地区的King County Metro Transit里的标示取得设计灵感的.如下是中文[TW台版] WP:
虽然是个新东西.很多人也很喜欢.但依然对用户使用来说存在挑战.特别是体现用户对这种认同感上.记得第一次和我们设计师交流时.总是不断有人问为何采用这种大块图标等等各种各样的我看来很“奇怪”问题.其实在面对这些问题时我们也往往忽略问题本身还是来源用户认同感.用户本身也是个受体.相对IPhone和Android在07年发力至今.用户已经接受或是从这两个平台获得对智能手机Smart Phone启蒙和认知的. 相对Windows phone Metro在10年第一个版本的介入. 时间上已经慢了一拍.这个时间差导致了IPhone和Android对用户Smart Phone 观念中存在先入为主的情况. 这点上是我在不断和设计团队交流中感受比较深的一点.
如果你的身边还存在很多不认同Windows phone 或对Metro诟病的人. ——这也正常.请记住.对于Windows phone认知 用户也需要时间.
<1>Metro的现状
谈到Metro这种设计.一直很想谈谈Metro设计前景和现状.
metro UI是由微软公司开发的内部名称为“ typography-based design language”[基于排版的设计语言].最早出现在微软电子百科全书95，后来的产品如：windows媒体中心、Zune播放器 都有用到这项技术
在MS Build大会展示Windows 下一个OS-Windows 8.相信看过人应该Win8 Metro设计感到耳目一新.:
其实MS规划Windows 8可以追溯到09年.能够在MS重要阵地操作系统得到更多的应用.Metro前景不仅体现在Win8上,同样可以看到Metro这种设计理念逐渐渗透到其他产品线上类似Metro 风格的Skype 3.0：
Metro版本的 Windows Live/MSN:
Metro版本的IE 9 能接受吗?：
当然从MS出去的设计师同样也影响到了FaceBook。在其客户端有所体现:
有VPN同学可以体验这个客户端 Metro风格很舒适 FaceBook发送消息:
Metro UI该技术已于2010年初（美国）获得Metro UI专利批准（USPTO）。metro UI最新的应用是windows phone 7智能手机系统，并将应用于未来的windows 8、office 和xbox 360产品中.可见将来能够在Windows 平台看到更多Metro UI产品逐步出现.将作为MS下一个主流设计但当重要角色.
<2>Windows phone UI设计
如下想重点来谈谈在Windows phone UI设计.
我们设计团队都具有成型IPhone和Android设计经验.也具有完善设计流程.但对Windows phone刚开始完全就是一个小白. 中间通过真机.或是内部培训方式逐渐介入Windows phone产品设计中来.但是后来在不断沟通依然问题频出. 说到底在设计团队虽然对WP有了初步的认识但依然没有一个人真正在日常生活使用Windows phone来解决自己实际问题.后来对所有参与Windows phone UI设计师采取强制使用两周. 效果明显.
因为在讨论UI原型设计 时设计师不在问那么多”Why” WP为何要这样设计?. 而是说 “How” 如何在WP做这个产品设计.
在微博上有人曾问过我.如何慢慢切入WP UI设计,其实官方给出Windows phone 用户UI交付规范2.0 就是最好教材. 至于这个2.0文档中提到很多明文规定就不多做赘述/. 那么在Windows phone UI设计具有哪些潜藏”军规”需要设计师去遵守. 针对Windows phone UI用户体验问题可以分为三个等级:
Windows phone 用户体验三个等级:
[1]：必须修改-必须立即处理问题.以确保原设计能够体现APP自身特点和价值
[2]：应该修改-这步在发布前要处理的问题, 可能在功能成型后需要UI微调
[3]：建议处理-遵照Metro GuideLines 可以继续改善用户体验的地方
如下针对这三个等级 做出具体截图实例来说明UI设计中需要注意的地方：
[1]标题:
标题应该是左对齐，不应有背景，边框，下划线或任何其他种类的装饰，唯一例外的是可能使用到企业的LOGO：
[2]文字和布局对齐:
应用中可以适度使用自定义或品牌固有字体. 自定义字体可以用在页面标题或概论章节标题中.布局向左对齐.左侧页边距24PX大小. 这个标准同样适用于 适用于枢轴视图和全景试图. 注意枢轴视图内容按屏幕优化并纵向对齐.
[3]APP应用的图标
图标注意如下两点:
A:符合Metro设计原则的品牌设计理念
B:避免在图标适用3D 字体- • 渐变色• 囿角• 没有含义的图标,标志只在“亮”或“暗”主题下醒目.
或白色背景上的黑色标志 .原则上避免使用.
左边为正确使用,右边为误用:
[4]元素间隔:
所有元素的水平或垂直间隔应一致，建议间隔为12像素或12像素的倍数.这个在文字或图片在页面上布局时需要额外注意:
[5]控件使用:
在全景视图和枢轴视图中 避免使用开关控件SwitchTaggleButton.避免使用游标控件Silder. 在操作左右滑动时页面级动作容易被控件的操作所拦截.特别是在设置界面.
尽量避免使用内嵌Web控件WebBrowser.当应用必须内嵌Web内容时需要满足如下两个情况:
[1] 关闭设备平移和缩放等触碰功能.
[2] 确保WEbBrowser内容完全可读,可预览
另外在页面UI输入比较多时.类似用户注册页面.存在多个TextBox在用户输入.设计师总是反馈键盘会挡住输入框TextBox. 特别是这点QQ客户端也有体现. 这种方式一般惨通过控制页面ScrollView滚动的方式动态控制.避免用户操作弹出的键盘会遮挡主下面操作元素:
[6]导航:
在页面导航中.Windows Phone不需要关闭按钮，关闭行为由硬件设备自带Backup控制键完成,通过使用退回键建立导航机制.
[7]全景视图:
全景视图和枢轴控件时Windows phone 中所独有的.正确的使用方式:
•背景480×800像素到1024×800像素之间
•每一个Section比例16:9
•Section中缩略图如果不加文字描述的话，可以一行放置两个，并且建议一行最多只放置两个
避免如下情况误用:
•内容布局超出页面
•使用导航条
•背景颜色艳丽
•纵向滚动条
其实如上只是能够谈到Windows phone一些可以统一UI设计细节。可能不同产品APP定位不同.2.0UI也常见的设计被打破.其实这个不仅使我们在做这样的工作.官方在没有退出Mango2.0 UI规范明令写着全景视图空间禁止使用ApplicationBar空间.主要保证输入和展示空间.但在Mango版本中依然能够发现ApplicationBar退出一种mini模式而且在Marketplace全景视图中出现了APPlicationBAr.其实为了改善用户体验也在不断打破自己顶下UI规范.
另我们参考设计时Product ower 常会综合运营的考虑.往往这种情况下.官方给出的UI规范都要服从实际市场需要而发生颠覆行修改也是存在这种情况.类似在列表展示和Ui显示层级的用户体验中.
Windows phone 这种类似网页的展现形式和采用固体按钮Backup键执行的导航方式. 相对IPhone中明确上下级关系明显不同.这主要体现在如果业务中流程. 而恰好这个流程比较复杂.注意这种方式导致Windows phone 页面层级比较深情况下. 另外中间操作不同的提示和跳转页面都会照成用户在UI界面之间的迷失.复杂的UI流程如何避免?
A:首先减少页面的数量.从设计层面减少层级关联.主要目的是降低流程带来比较深层级关系
B: 只做最关键的事.如果是一个常用的客户端尽量把更多事情放到服务器端来做. 这是处理问题的捷径
C: 减少用户在页面间操作的路径. 也就是说流程中涉及到一件事设计中要考虑采用最短路径去实现. 此时应注意用户交互体验
关于流程其实更像强调.对于常用客户端尽量把更多工作交给能力更大的服务器端来说. 客户端发展方向应该是”偏瘦”的。针对Windows phone 采用导航方式.复杂的UI流程和多层级关联会彻底毁掉一个APP 最基本的用户体验. 用户要在这个流程中短时间要接受更多的新概念.这样的设计对用户在UI交互操作来说就是一场噩梦开始.层级关系最多应该保持4级之内. 复杂流程是用户UI交互体验的”杀手”
其实在很多应用场景中.UI设计师在定位原型后.注意在确认效果图前. 一定有必要去了解Windows phone Toolkit 要知道在具体数据呈现采用什么样控件UI元素.这同时也是BI的工作之一.目的是保证UI设计效果图与最终开发版本之间不存在冲突. 类似如果UI设计师不知道Windows phone 存在某些元素 他通常会采用比较通用控件去实现 这样会导致布局混乱 完全无Windows phone 任何特点 类似如下:
如果这个UI设计师知道在性别3确定选项中在Windows phone有一个ListPicker控件去呈现. 这样的混乱的布局方式也就不会存在.对于这些低级失误同时开发团队也具有职责对于不懂编程的UI设计团队进行一定控件使用培训是必要的.
在设计过程中.针对某些比较类似Windows phone 系统界面UI操作. 尽量不要尝试去打破这种统一设计规则.多参考WP系统的设计做法.类似发短信 信息 这种操作.其实在用户行为就是保持用户使用习惯.记住用户对陌生新鲜的概念往往都是抵触的. 采用用户熟悉WP系统UI处理方式将是规避这些问题：
在设计过程初期Product Ower有UI设计过程中有一个很重要的职责 -保持UI设计方案多样可选. 其实一个好的设计方案完全 在刚开始雏形的时是不断通过争论达到最后大家都能接受UI. 而在刚开始时Product Ower不要太多干预. 应该尽量吧设计人员对产品的设想和想法尽量呈现出来. 这样会在设计方案的初期形成3-4 设计方案.在讨论过程比对效果往往也是最直观的.也利于判断UI设计在展现APP价值的优劣. 而一个好的UI设计方案诞生.需要是不断修改贴近APP最真实的目的.
其实在UI设计中完全没有好与坏的概念.记住UI设计目的其实只做一件事—最接近呈现APP自身的价值.
在这里我只说了最接近.在文章头部引述<<User Interface For Programmers>>观点恰恰也是我所认同的.好的UI设计方案在一个小的人群和短时间内是无法一触而就的. 所以在产品规划s是应该考虑划出成型用户UI交互体验改善计划,这些改善计划是APP已经投入市场. 当你能看到最终直接用户反馈的需求你就会发现做出好的UI设计不再是难事/.因为你已经知道用户想要什么了….而用户UI交互改善计划也是对APP实用一种弥补措施.
<3>Widows phone Metro设计资源
如上比较零碎记载个人对Windows phone UI设计一些体会.如下给出WindowS phone Metro设计一些设计师资源.:
Jeff Wilcox's "Metro" Desgn GuideLine For Developers ,V1.00 [针对开发Windows phone 一些UI指导]
Getting Started With Metro UI In DotNetBar for WPF
Metro design language Of Windows phone [官方给出Lession]
还有一些必成成型设计资源和方案. 和在国外APP设计采用设计评估方案和设计草图. 文件太大无法上传Cnlogs放到微博上.尽请关注.
Windows phone 应用开发:
