移动产品的UI设计思考

智能移动设备应用程序的UI设计思考北京32℃18℃2012年5月18日主要内容UI设计体现产品价值UI设计关注用户使用糟糕的UI设计就像注定要失败的恋爱！怎么做？UI设计体现产品价值•UI即UserInterface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。下一节：关注用户的使用UI设计关注用户使用•可视性：及时响应用户操作反馈•环境贴切：使用用户语言而不是开发者语言，尊重用户使用习惯•撤销重做：用户决定操作行为，操作可以恢复•一致性：操作用语、使用方式要各处保持一致•防错：关键操作有确认提示，及早消除误操作•易取：识别胜于回忆，减少记忆负担•灵活高效：为新手和专家设计定制化的操作方式•易扫：减少无关信息，体现简洁美感•容错：协助用户方便的从错误中恢复工作•人性化的帮助：必要的时候出现必要的提示——摘自尼尔森十大可用性原则UI设计关注用户使用–可视性这里明确标示状态加载图片加载数据UI设计关注用户使用–环境贴切UI设计关注用户使用–一致性微博发布器上的文字是即时保存的，即便用户关闭了网页，也不会丢失内容。类似的情况在注册或登录时，经常应用到。当提交form失败后，通常数据都会进行保存，这样减少用户的输入。UI设计关注用户使用–防错UI设计关注用户使用–易取UI设计关注用户使用–灵活高效UI设计关注用户使用–易扫UI设计关注用户使用–容错错误地址，5秒钟以后…..UI设计关注用户使用–人性化帮助Pinterest不同于传统的即时表单验证信息，当用户输入合法的邮箱和密码时，网站会给出“Looksgood！”的提示信息。虽然这只是一个很小的触动，但足以使注册流程显得人性化，并让产品与正在注册的用户产生共情反应。MailChimp的404页面很有才：准确的告诉用户目前发生了什么，并积极号召用户采取下一步行动，继续先前的流程体验。这招很聪明、有效，并且化解了404的尴尬。下一节：糟糕的设计糟糕的UI就像注定失败的恋爱•千人一面UI设计没有个性，体现不出自己的特点，体现不出应用的主题，无法吸引用户•总是不理我UI设计中存在用户理解错误或无法操作的情况（设计的像个按钮，却不能点击）•总是让我猜完全不相关的内容呈现在一起，用户不能理解。或者最主要的功能却最不易操作•总是说我错不断地弹出冰冷的警告或错误提示，但是却不提供准确的信息。（如：要求密码不能只用数字，且长度限制不能低于6位，用户输入123，只提示用户长度限制为6位，却不提示其他内容）看看这些设计吧！看看这些设计吧！看看这些设计吧！看看这些设计吧！看看这些设计吧！下一节：应该怎么做应该怎么做？•设计策略考虑•引导性的应用界面设计模式•为触屏移动设备而设计设计策略考虑问题：上班路上，你会选择哪条路？设计策略考虑原因：人体执行某操作时的效率及准确性，很大程度上取决于是否接近该人熟悉的操作路径。如果操作被重复多次，肌肉就会形成条件反射，生成记忆效应。大脑皮层还没有做出决定，脑干和脊髓神经已经领先一步进行指挥了。如果操作处于新接触阶段，不确定性较多，此时做出决策的是大脑皮层。大脑皮层做出决策所花费的时间要比脑干和脊髓神经做出反应的时间长。启示：——操作系统的一致性大于产品自身的一致性。——应用程序要和“邻居”们和谐相处——应用程序小环境内，控件需要有延续性和可预见性设计策略考虑问题：你是否记得购买的第一部手机的型号？问题：你是否记得苯酚的分子式？C6H6ONokia3310设计策略考虑原因：长期记忆可以帮助人们随时提取关键信息，比如你会轻而易举地说出你的现在的手机号码、身份证号码。长期记忆，需要经过大量重复的演练而形成，可以保持几天或者几年。如果长期记忆得不到巩固，会随着时间的流逝而渐渐淡忘启示：——减少用户的记忆负担（如：自动登录）——注重一致性（操作系统亦是如此）——符合生活习惯设计策略考虑问题：1分钟内记下下面的3个手机号码138902312361339212066213759823212设计策略考虑原因：短期记忆高度不稳定，短期记忆关注注意的焦点，当焦点消失后，记忆很快就会消失。启示：——帮助用户记录核心信息（搜索词与结果同时显示）——不能高估用户的记忆，适当给与提醒和反馈（足迹）——必要的地方，适当的引导用户的焦点——多用识别，少用回忆（图片取代文字）下一节：引导性设计模式引导性的应用界面设计模式对话提示游历半透标注嵌入持续探索带有介绍文案的简单对话框是移动应用中最普遍的引导方式引导性的应用界面设计模式对话提示游历半透标注嵌入持续探索通常的原则，是在当前需要突出的相关功能旁边放置提示气泡，保持介绍文案的简短，并且在用户开始执行对应的操作时移除提示引导性的应用界面设计模式提示游历半透标注嵌入持续探索对话游历可以带来终极的引导体验——通过对关键屏和重要功能的连续展示，在最短的时间内引领用户对应用进行全面的探索引导性的应用界面设计模式提示游历半透标注嵌入持续探索对话与其他具有引导性的设计模式相比，半透明标注的方式对于触屏设备来说有些独特。它通常会在应用的首屏出现，以一个覆盖在真实界面上方的半透明层为背景。引导性的应用界面设计模式提示游历半透标注嵌入持续探索对话与其他模式不同，“嵌入”不会在目标界面加载之前呈现。在这种模式中，相关的引导内容会融入到界面设计当中，直到被真正的内容覆盖移除掉。引导性的应用界面设计模式提示游历半透标注嵌入持续探索对话这种方式同样会融入到界面当中，并始终存在。如：用来引导用户添加自定义内容的“+”符号会始终存在，并不断被正式内容替代。引导性的应用界面设计模式提示游历半透标注嵌入持续探索对话所谓的“探索”式引导，是一种鼓励用户进行某种特定交互操作的有效方式，同时不会影响到应用界面本身的设计下一节：为触屏而设计为触屏移动设备而设计拇指热区和底部原则：对于常规的触屏手机来说，我们可以使用拇指扫过屏幕当中的大部分区域，但其中大约只有三分之一属于真正有效的触控区域。所以在设计当中，要尽量将最重要的界面交互元素放置在这个范围当中。在右手持机的状况下，有效触控区域位于屏幕的左下方。最常用的功能按键应该被放在拇指最容易触摸到的热点区域当中，而其它相对次要或是比较敏感的控制元素则应该尽量避开这个区域注意看右侧的编辑功能为触屏移动设备而设计Android：在Android设备中，底部原则被机身下方的实体硬按键搞的复杂，这些硬件级的控制按键占据着底部区域，在某种程度上会与应用内的底部交互元素形成视觉上的竞争。避免控制元素之间产生冲突的最直接的办法就是让虚拟与实体的工具栏在视觉上彼此分离，而这就意味着需要将Android应用中的相关控制元素和导航结构放置在用户界面的顶部。看看foursqure的解决方法为触屏移动设备而设计为触屏移动设备而设计平板电脑（PAD）：用来持机的那只手通常会握住机身的上半部分，因为这样最符合杠杆原理；相应的，拇指热区基本会位于屏幕的前三分之一部分，偏向左上角或右上角。与手机界面不同，在iPad及同类平板设备的应用当中，主要的交互控制对象应该被放置在界面的左上角或右上角，以便拇指可以很容易的触摸到。看看Twitter的做法为触屏移动设备而设计注意：•需要注意的是，应该尽量避免将交互元素放在屏幕顶端正中间的位置，否则用户在进行操作的时候，手掌会将很大一部分内容遮住。实际上，任何会对下方内容产生直接控制作用的交互元素都不应该被放在这个位置。看看错误的做法•建议对于那些起到界面导航作用的交互元素(例如“菜单”、“返回”、“关闭”等)，以及用来完成分享、收藏、编辑、删除等功能的按钮，通常可以将它们放置在界面顶部。•建议对于那些用于浏览或预览内容的控制元素来说，界面底部是最佳位置。为触屏移动设备而设计元素的尺寸和布局：如果我们必须在设计方案当中将交互元素排布的非常紧密，那么至少要把它们各自的尺寸尽量做大。想想iPhone原生的拨号键盘界面，或是Skype等应用。界面当中的拨号按键之间的间隔通常都很小，甚至没有间距；而每个按键的尺寸几乎可以用巨大来形容，因为这样可以有效的降低误操作的几率看看skype的做法巨大的播放键避免了一些按键冲突的问题。谢谢您的参与！