Windows phone 应用开发[3]-UI 设计

本篇来谈谈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英文原版下载地址见附件。

回到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认知 用户也须要时间.

谈到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。在其客户端有所体现:

有×××同窗能够体验这个客户端 Metro风格很温馨 FaceBook发送消息:

Metro UI该技术已于2010年初（美国）得到Metro UI专利批准（USPTO）。metro UI最新的应用是windows phone 7智能手机系统，并将应用于将来的windows 八、office 和xbox 360产品中.可见未来可以在Windows 平台看到更多Metro UI产品逐步出现.将做为MS下一个主流设计但当重要角色.

以下想重点来谈谈在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设计中须要注意的地方：

 

[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实用一种弥补措施.

 如上比较零碎记载我的对Windows phone UI设计一些体会.以下给出WindowS phone Metro设计一些设计师资源.:

Metro ToolKit Codeplex

Jeff Wilcox's "Metro" Desgn GuideLine For Developers ,V1.00 [针对开发Windows phone 一些UI指导]

Metro Twitter Client

Getting Started With Metro UI In DotNetBar for WPF

Metro design language Of Windows phone  [官方给出Lession]

还有一些必成成型设计资源和方案. 和在国外APP设计采用设计评估方案和设计草图. 文件太大没法上传放到微博上.尽请关注.

Windows phone 应用开发: Windows phone应用开发[1]-Text To speech Windows phone应用开发[2]-数据缓存 Windows phone应用开发[3]-UI设计

[1]标题:

标题应该是左对齐，不该有背景，边框，下划线或任何其余种类的装饰，惟一例外的是可能使用到企业的LOGO：