说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

11大黄金法则:顶级移动UX设计心髓

HTML文档下载 WORD文档下载 PDF文档下载
与动画设计一样,UX设计也追求画面与动作的真实存在感,如果做得不够逼真,带给用户的体验就非常糟糕,怎样才能把UX设计做到好?请看下面移动UX设计的11大黄金法则。

移动时代的到来,触摸无处不在,用户体验是设计师不断的追求,怎样才能将UX设计做到最佳境界?本文将告诉大家如何利用《迪士尼动画原则》设计出最棒的移动UX。

首先让大家有个大概了解,这11大黄金法则都包括:

  1. 挤压与伸展
  2. 预备动作
  3. 构图布局
  4. 连续动作与关键动作
  5. 跟随与重叠动作
  6. 慢入慢出
  7. 动作弧线
  8. 次要动作表演
  9. 时间
  10. 夸张化
  11. 纯熟的绘画及讨喜

接下来我们一个个来看:

1.挤压与伸展

这条也是动画设计中描绘物体软硬程度的普遍适用的原则,同样适用于移动UX设计。有的东西需要表现得坚硬、锋利,而有的则要体现柔软、优雅、有韧性,这时候,合理控制挤压与伸展就非常重要。

比如在Flipboard中,翻页设计就表现出页面的坚硬厚重感,而在苹果自己的iBook中,翻页时则要表现出柔软有弧度感。在设计中,根据应用所需,合理利用这条规则。

Flipboard的翻页设计

 

iBook的翻页设计

2.预备动作

当一个设计者展示运动的物体或者人物的时候,要表述三个明显的阶段

  • 预备动作
  • 动作本身
  • 动作结果

同样,与动画设计中的预备动作类似,在设计移动UX的时候,预备动作就是为了告诉用户接下来会发生什么事情,速度以及方向会是怎样,以便给用户一个缓冲时间。这个原则可用于打开App时处理视觉效果,也可用于用户体验之间的承接。

比如上图中的黑色屏幕,一般手机中的摄像头都会用它来当做拍摄的预备动作。

Windows Phone 7里,窗口阴影部分就是展现动态砖UI的预备动作。

3.构图布局

好的布局能让用户一眼看明白你的主要意图。

在移动UX设计中,屏幕与屏幕之间,以及人机交互的间隔时段,构图布局尤为重要,好的布局是灯光,色彩等元素的结合,还要包括元素分配以及动作引导。好的移动用户体验让人觉得流畅缓和,差的体验则让人感觉脱节,如下图。

设计UI界面最大的挑战就是设计的时候缺少一个强有力的概念目标,如果布局不合理,用户进入UI的时候,会在导航页没有方向感。如果你的UI设计的够好,动画及衔接布局都很好,那么用户使用起App来就会如鱼得水。

4.连续动作与关键动作

这点与动画绘制过程有很大关系,为了捕捉到动态的快速运动,就需要使用连续动作,方法就是画出每一个动画所需的框架。而在关键动作绘制的时候,则只用画出关键框架(比如绘制出一个队列的中间及首尾框架)。

在移动UX的过渡设计中,大部分都采用关键动作,并且通常都用于不太复杂的,或者简单的过渡设计。

利用连续动作体现水果动态

5.跟随与重叠动作

什么是跟随动作?举个例子,动物耳朵,衣物,毛发等在它无意识控制的情况下自然飘动或延迟的现象就是跟随动作的一种。

重叠动作又指什么呢?比如我们背后传来一首歌,可能先动眼睛,再回头,头转了一半身子也跟着转,这就是重叠动作。

这两点能帮助你定义UI元素之间的关系,以及UI之间转换的方式。

Windows Phone中的砖块就使用了重叠动作,每个砖块都以不同的速率移动。

6.慢入慢出

自然界中,不论是汽车启动还是运动员起跑,都需要一个缓冲过程,慢入与慢出就利用间隔空间处理这个过程的。正确的处理方法就是在开始与结束的时候增加框架,中间减少框架,这种方法会让用户感觉画面更加自然。

这在许多移动UI清单列表中的时候就用得比较多,开始与结束框架多,中间框架少,这样的好处就是:滑动UI之后,仿佛后边的跟进滑动都是惯性使然而不是机械处理的结果。

比如你在App Store里搜索应用,会出现许多结果,你轻轻滑动屏幕,后边的应用自动跟上,非常自然。

慢入与慢出还用于主屏应用布局中,例如下图:

7.动作弧线

现实生活中,物体的运动都不是任意的,通常会受推力、空气阻力、地心引力的影响。物体的运动轨迹取决于它是机械的还是有机的,机械物体的运动通常都是直线型,而有机物体的运动通常都是曲线形,在UI设计的时候,要考虑你设计的东西是有机的还是机械的,再决定如何设计轨迹类型。

 

Android倾向于使用直线

8.次要动作表演

所谓次要动作就是在主要动作以外的有助于表现角色内心状态或者个性的动作。比如一只松鼠跑到你家草坪上,然后钻进丛林里,他的身体和腿部运动就是主要动作,尾巴运动则是次要动作。次要动作的存在是为了配合主要动作,共同让整个画面更加真实生动。

这在移动UX设计中怎么运用?当一个用户点击一个邮件中的URL的时候,就会启动手机上的浏览器,在这当中,浏览器窗口跳出来是主要动作,邮件应用自动退到后台是次要动作,我们看见两个动作同时发生,但实际上次要动作在支持主要动作。次要动作还可运用在App窗口的切换之间。

9.时间

一个动作运动得太慢或太快都会让人觉得怪异,在动画绘制中,时间用框架的数量来描述,动画播放后,这个时间就转换成速度。

时间非常重要,能帮助定义一个物体的物理特性,比如重量、大小、规模,除此以外,还能帮助传达角色的情感状态或个性特点,微妙的时间变动都能体现出角色的心情及体态。

比如Wile E. Coyote and Road Runner 中,时间的正确处理体现了Wile E. Coyote的笨拙,Road Runner的轻盈。

在移动UX设计中,在App内,屏幕转换的时间如果处理不好,带来的用户体验就很糟糕,要花时间去琢磨、试验。

关于时间处理,iPad的图片应用是个很好的例子,图片切换非常轻盈,有浮力感,感觉很真实。

10.夸张化

动画不一定非要体现真真切切的现实,有时甚至会表现现实中不可能发生的事情。尤其是肢体表演方式,细致时可以非常细致,夸张时则是飞天遁地,无所不能。

看过《猫与老鼠》和卓别林默片的人应该深有感触夸张的重要性。这点怎样运用到移动UX设计中呢?这就需要控制“度”,如果一个场景包含几个元素,那么对几个元素的夸大程度要合适,需要平衡,避免带给用户迷茫感。

比如在主屏状态下打开一个应用的时候,恰到好处的夸张就会让用户觉得,窗口是自然蹦出来的。

11.纯熟手绘与讨喜

这点在人物角色的绘画中特别重要,但在移动UX设计中的应用不是很大。

操作的时候,你只需要遵守三维立体空间设计规则,在理解三维空间构成(框架,重量,平衡感,光线,阴影)的基础上,通过体积、重量表现人物角色即可。

有了这十一大黄金法则还不够,核心问题“如何将动作整合到设计中”仍旧存在,要怎么操作?分三步:

画草图:事先勾勒好转换与变化阶段有助你弄清自己到底想要传达怎样的移动体验。勾线框:这步非常重要,是你将设计idea与开发商及股东进行沟通的桥梁。最后成型!在这三个步骤当中合理利用这11条法则,千万不可滥用。

Evernote推孵化器 不占股权 基于C++和Lua的移动游戏引擎Leadwerks 3发布 苹果秘密测试iOS 7与iPhone 6 或将6月发布 酷6 CTO 陆坚:请先信任你的程序员 从电信联手i-Free,看运营商渠道的加速整合 “Animory”开发者分享HTML5游戏开发经验 Appflood SDK:连接中国与海外App流量交互平台 Apache Subversion 1.7.9正式发布! 微软IE浏览器5大动向 加速吸引开发者 开源的简繁转换库OpenCC支持Node.js 继Opera之后,Adobe表示将支持Google Blink 提高大型软件项目质量的一些实用型技术分享 谷歌推出Mirror API,开发者可为Google Glass开发应用 无需999,也不要499,99美元Linux超级计算机带回家 微软反击AWS:推出EC2并大幅降价,“价格战”正酣 Operation InVersion:拯救了LinkedIn的大修项目 五步走战略——Avocado在最初几周内迅速扩大30倍 NoSQL产品测评:Cassandra、MongoDB、Couchbase和Aerospike 谷歌眼镜开箱评测:比想象更精致 Pinterest谈实战经验:如何在两年内实现零到数百亿的月访问 初创公司Instart Logic:专为电子出版商和网站站长解决“痛点” 未来即卖芯片又卖服务!Intel收购软件厂商Mashery 继MSN之后,微软又开始整合Skype与Lync服务 阿里将推AMOS智能机 斥资10亿鼓励开发App AMPLab开发重构的Hadoop版本Tachyon:吞吐量要比HDFS高300多倍 一名理科生的创业路 十大界面原型与布局工具 Google产品经理Kenneth Norton:如何与工程师共事 如何创建自适应系统来增强用户体验 Jolla下月展示首款Sailfish手机 将重点发展中国区 海外1GB大容量游戏,国内渠道如何分发? 像MSN那种有邮件时就提示的那个小窗口要怎么做? 用什么API函数可以实现big5转换为gb 关于文件上传问题,大家都使用htmlcontrols.htminputfile控件吗? 各位大虾,关于扫描仪的错误2800:0000是指什么错误?急!!! 请问如何在载入页面前,跳出一个询问用户名和密码的窗口,然后验证用户身份? MSsqlserver 意外终止服务 www服务器过一段时间就停止服务? resin 中jsp文件无法显示图片,怎么回事? 请教思归!!asp.net中弹出对话框的问题 debug命令f怎么用呀? 笔记本电池,能外挂吗?~~~~ 工具欄的顯示應算較專業的問題 寻求共同创业的伙伴! COM+组件远程调用问题 如何才能把计算稿保存下来? 急。chr 与ord的运用! 为什么当我在dreamweaver里把表格的单元格宽度设定为像素了,可当我的字符串超过它的宽度,它不换行?而是拉长我的单元格 使用delphi第三方控件出现的问题 用什么函数把int转成nvarchar 关于上网的问题 关于图片的循环移动问题 寻求共同创业的伙伴! 关于Keil C51的编译问题 谁有《 Inside The C++ Object Model》英文版电子版 请教《深入浅出MFC》中有关“动态创建”的一个问题。 图像缩放和居中显示的问题 请教如何用DDraw实现屏幕随鼠标移动而滚动,就象星际中的地图比屏幕大,但可以滚动显示。 一点问题,劳驾各位高手啦。。谢谢!!! 一个双向链表得问提求救啊 截获、修改本地程序通过socket发出的包的问题 请教DDraw资源网? 可不可以把这两个合并成一句查询语句呀 问一下IDirect3DDevice8::SetTransform第一个参数的问题 如何把一个窗体放进动态链接库中? 集合Set 和 数组Array 的问题 论坛出现乱码怎么办?急!急!急!!! 如何使用JList添加记录项???? 谁遇到过VB printer对象在少数机器上乱码的问题,有的机器又是好的。 不能使用make menuconfig?请指教 DBGRID中要点两下才能进行编辑状态,如何只一下就能进入编辑状? 郁闷啦,5。1加班到11点,放分 急需FlashFXP的注册码(当天就给分) 小问题 谁告诉我一个exchange server 的下载地址啊? 为什么我装的 XP在桌面上没有“我的电脑”“Internet Explorer”“网上邻居”“我的文挡”,只有一个回收站??? 论坛开发策划书怎么写? 请教JBUILDER8编译时的问题 ADSL 的问题 关于合并分区的问题,急! 在编译msdn中的vc例子程序时找不到mfc42u.lib文件 想把握住一份不可能的爱情,今天才知道我失败了,极度郁闷,散分 龟和鹤共有脚170只,如果将龟数与鹤数互换,则共有脚130只问原来龟和鹤各有多少只? 已经掌握了虫洞技术,能轻易穿越数百万光年的外星人打得过美军航母么? 《出师表》中作者分析先汉兴隆后汉倾颓原因的句子 龟鹤同池,共有100个头,360只脚,龟有几只?鹤有几只? 大学里如何当好一名优秀的班长 出师表 咆哮体 万能的神啊,请你发发慈悲给我指条明路吧,阿门.怎么翻译成英文 什么是“存在即合理” 出师表中揭示后汉灭亡的句子是什么阿、峩着急 一只熊下落速度为10m/s,问这只熊是什么颜色? 存在真的即合理吗 《出师表》中作者揭示后汉灭亡原因的句子是? 一只熊以10m/s的速度向下掉落,问:这只熊是什么颜色? 重心一定在物体上吗 出师表里的“先汉”“后汉”的解释老师说是西汉东汉的意思但这样解释就成了“西汉兴隆,东汉衰败”的意思我觉得不对,哪个朝代不是有兴有衰我觉得应该翻译成“东汉前期”“东汉后期 怎样用尔虞我诈造一个错误的句子还要附上错误原因 -7被3除等于多少余几,是等于2余-1还是等于-2余1,还是其他的答案?为什么? 做自由落体运动的物体第100s内的位移与第1s内位移之比是几,还有通过第100m的时间与通过第1m时间比是几本人刚学.实在听不懂. 有一只熊,以10m/s2加速度下落,问熊的颜色?为什麽答案会是灰色 几除几等于7余8 请你用硫酸溶液加碳酸氢氨反应完后还可以继续加碳氨反应吗?如果可以能加几次啊? 这四个人分别代表着什么意思?和这个词应该怎么用? ()除去()等于12余7 物体所受重力的方向与缩手万有引力的方向相同吗? 龟鹤共有100个头,350只脚;龟;鹤各多少只? 圆 > :AD是△ABC的高,AE是△ABC的外接圆的直径,试说明弧BE=弧CF.九年级数学《圆》一章的练习题 :AD是△ABC的高,AE是△ABC的外接圆的直径,试说明弧BE=弧CF. 关于重力与万有引力的关系?判断下面几种说法的正确与否1、万有引力分解为两个分量,重力和向心力.绕地球匀速率圆周运动的人造卫星,所受的合外力只有引力,故引力完全提供向心力.此时引 龟鹤共有100个头,350只脚.龟、鹤各有多少只? 物体只有受到方向时刻变化的力的作用才作曲线运动 判断 亚硫酸氢氨和过氧化氢怎么反应 龟,鹤共有100只脚,35个头,龟鹤各有多少只?求方程 支持力是画在物体的重心上是吧 完全竞争厂商的要素使用原则是什么? 龟鹤同笼,共有51个头,172只脚,请问龟、鹤各有多少只?今晚就要用,鸡鸡鸡,请顺便把过程写下来, 平面上的一个物体,受到水平方向的一个力F而作匀速直线运动.如果根据牛顿第三定侓:(两个物体之间的作用力和反作用力,总是同时在同一条直线上,大小相等,方向相反.)压力和支持力相等 盐酸能与过氧化纳反应吗反应的化学方程式是什么? 相对论不是比牛顿力学更精确吗,后者是数学上的一种近似.场方程为何要用到牛顿的万有引力常数? 下列关于重心的说法中正确的是:A.物体所受重力的作用点叫做重心.B.物体的重心才受重力作用.C.质量分布均匀的圆柱体的重心在其轴线的中点.D..球体的重心总在球心. 过氧化纳和盐酸反应的化学方程式 外星人有可能是未来人类穿越虫洞来到地球吗? 关于重心,下列说法正确的是A.重心就是物体的中心 B.重心就是重力在物体上的作用点 C.重心一定在物体上 D.重心一定不在物体上.急T^T 铝与盐酸、氢氧化纳反应需掌握的知识点有哪些?化学计量数与反应有什么联系? 我的世界pe 苏联核弹发射井(最大) 我是因为高中语文教师,我想去做个对外汉语教师,请问我该准备什么 怎么利用EAN-128码来传递信息 外星人可能是从未来穿越虫洞来到地球的吗?如果理论成立,他们在美国的切割牛的事件会不会是未来的牛没了他们需要牛的基因来克隆牛?如果不是穿越虫洞也可能是超光速吗? 物体的重心并不一定在物体的几何中心上 ,为什么错 关于原朝、宋朝、清朝、明朝、唐朝、春秋、三国古诗各10首.注明作者,朝代 中国有多少核弹发射井 成为高中语文教师需要的准备这些表面的证书不是问题, 4、把一张正方形的纸连续对折4次,折后的每一小块占这张正方形纸的( ). 圆环与同心圆的区别请问,圆环的具体意义,到底是同心圆,还是不规则的环形?希望给予准确答案, 高中语文教师招聘面试我们该准备些什么? 为什么氨盐的检验不能直接加热,再用湿润红色的石蕊试纸在试管处检验?为什么一定是加入强碱加热,再用湿润红色试纸在试管口检验? 判断:组成圆环的两个圆一定是同心圆.() △ABC为O的内接等边三角形ABC,D为弧BC上任一点,AD与BC交于F,证明:(1)BD+DC=ADAB方=AB·BF+AF·DC GBZ/T 160.29-2004氨的纳氏试剂分光光度法,方法验证的数据 有关铁与硫酸盐酸反应的一类题.如果有相同质量的铁和相同浓度及体积的盐酸和硫酸反应,但是生成的氢气体积不同,那么如何判断究竟在两个反应中是哪一个过量?一遇到这样的题我就会想不 马航失事客机是否可能穿越了虫洞或被UFO劫持?似乎扑朔迷离 关于重力的大小和方向,下列说法正确的是 ( )A.在地球上方的物体都要受到重力作用,所受重力与他的运动状态无关,也不管是否存在其他力的作用.B.在地球各处的重力方向都是相同的C.向上 奥巴马参观学校旁听课程 揶揄国会议员冯小刚:春晚我打算娱乐大众,每天想如冯小刚否认说过由着性子办春晚:我没傻央视马年春晚时长缩减至4小时 明星没安倍称担心中国加强军备 日本应领导亚安倍称担心中国加强军备 日本应领导亚伊朗处死16名反政府组织囚犯 回应边奥巴马参观学校旁听课程 揶揄国会议员义乌26日清晨发生爆炸凶杀案 已有一安倍称担心中国加强军备 日本应领导亚墨糖果厂爆炸现场搜救结束确认两人遇难浙江首次采用新评价体系对1300余所我军少将:中国发展军力绝不针对日本伊朗东南部武装冲突致17名边防人员死国航增加三条国际航线香港影片《狂舞派》纽约放映获好评官员强奸幼女案双方民事和解 受害人获卡梅伦成英国将不改变与美国的情报合作秘鲁最高法院就藤森在家服刑举行听证会卡梅伦称英国将不改变与美国情报合作关秘鲁最高法院就藤森在家服刑举行听证会187医院口腔科第三届畸形牙以改革激活黎苗文化资源菲美在南海举行 “卡拉特”联合军演好医生候选人投票渠道国际旅游岛憧憬商业未来毕业季买个优惠套餐出游时事图说尼日利亚一电子市场爆炸琼海便民法庭断案上门奥斯卡得主:你不能靠《舌尖上的中国》南都社论:地方治理中的“毒气思维”必边民互市贸易区通过验收4毒犯被执行死刑6名华裔人士入马来西亚阁 其中3人出免费升级 优惠多多周末到惠民车展购车享实惠提前批填报要慎选第一志愿关于印发海南省企业登记制度改革十六条远离毒品 珍惜幸福关爱胃肠间质瘤患者海上乐园 7月10日开园
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘