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

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条法则,千万不可滥用。

【企业开源系列】收发一条Twitter推文的背后 在IE11中更快地获得您需要的内容 暴露程序员身份的8个行为 英特尔创新应用大赛大评审!创新也有中国风 苹果面临一问题:正源源不断地失去优秀工程师 初学编程者必知的五个网站 大数据基准测试专题论坛:基准测试是一把尚未完成的尺子 大数据应用(下):应用驱动技术,DaaS创造价值 大数据研究与发展专题论坛:大数据在各领域中的应用及发展策略 雅虎新目标:欲收购照片分享网站Imgur 移动开发工具访谈《近匠》第01期:七牛云存储—BaaS进化论 ShareSDK:A轮融资到位!将推社会化评论SDK 70美元,你也能用Raspberry Pi做个专属iBeacon基站 7个鲜为人知却超实用的PHP函数 从管理远程式团队和分布式团队中所获得的宝贵经验 Netflix开源数据流管理器Suro Google新创意:天花板加麦克风 人脑植芯片 苹果获弯曲屏新专利 可给手机弄个大波浪卷 真正的跨平台硬件测试:3DMark已打通PC、iOS、Android 将Chrome浏览器变成终端工具 【开源推荐】AllJoyn:打造全球物联网的通用开源框架 21张图带你走进Google数据中心 Snapchat C轮融资5000万美元 投资方是Coatue Management 又一个被谷歌寄生的平台,Chrome应用启动器现来到OS X上 雷军遇上刘德华:创业、艺术、移动互联网 为了抗衡Android,传微软开始考虑WP和WinRT免费 维护代码库的五个精华实践 微软发布安全补丁 IE11.0.2随之而来 Qt 5.2正式版发布 全面支持移动平台 如何节约手游制作成本?揭秘CocoStudio编辑器强悍功能 市场竞争白热化:三大云服务商上演双十二“三国杀” 请帮忙看看这段流操作的代码错在哪里? javabean高手请进!请赐教!!! 请各位高手指点一下,什么软件开发java比较方便,效率较高? 谁能告诉我,怎样将邮箱中的信件复制到本地硬盘.谢了 需要什么权限才能在active directory里添加用户??(实际上是想添加email帐号),谢谢各位 test 请问在winXP里该如何实现如下功能呢? 再问一次,怎么在mandrake下设显示器的刷新率!怎么想给分都送不出去! 当用c++编程时,能不能不用回收内存?100分 用VC处理XML文档时遇到的一些细微而重要的问题 大家能不能给我给我点 我有一个关于注册表的问题? delphi中要想定义一个整个工程文件中可以访问的变量怎样做才好?(说者有分) 本人泡MM精华之作,大家快看!! 25分散尽! 如何使用paradox.net? 类的定义与实现细节是否要放在不同文件 各位:我想当斑竹,位兄弟是否同意?:) 关于shell和key事件 为什么我的问题总是无人回答?给高分100!VC和VB下好用的控件在delphi下不好用!是不是dll的问题? pascal 为什么没有介绍在pIIII下汇编的书? paradox数据库的操作问题 text字段如何转换成image字段?? 东日论坛新开张 关于异常的问题,请各位大哥帮帮忙!(50分) 我有很多数字,如何以固定的间隔和行宽在打印机完整地上输出? 学过C++,想学java,难吗?多久能上手? 如何设置系统的日期,时间? 我的网卡的驱动一直装不上? 在下请问,在游戏中实现人物的移动有哪几种方法? 关于地址栏的显示问题 老大们来看看! 今天高兴,散分,先进者自有大大的好处 对不起网管我没看清楚发错了地方请您帮忙转到java区里吧谢谢你了! my oracle8.1.7 on redhat7.2进不去,请高手指教 关于打印机不能够正常打印问题 关于XP的时间问题? 哪位知道在VC下通过敲击键盘模拟钢琴键发音——通过声卡在音箱中实时发出声音 本人泡MM精华之作,大家快看!! 互联网上控件的安全性问题 SDK的疑惑? gluLookAt()函数的用法 什么是类如何来理解应用它!!!看书看了不是很理解 第一次来csdn 高兴,散分,第一个进入者得! 怎样从ACCESS数据库中读出jpeg,gif,bmp...图片? web的验证如何与数据仓库验证一致?请高手看看 我用JBUILDER作的JPUPUPMEUN show(jpane,getx,gety) 的显示位置老在鼠标下一大截,在JPANE的左上角击鼠标右键出现多余显示 请问如何作封面? 国内有自由软件开发组织吗? 如何永久的挂载非linux分区? 谁知道甲酸与乙酸(冰醋酸)的区别及怎样鉴别乙酸可以食用,甲酸可以代替乙酸食用吗? 镁粉中混进少量铝粉,将铝粉除去,可选取用的试剂是什么? 配置1000毫升 0.1mol/L盐酸溶液,12mol/L的多少毫升重新来一道配置1000毫升 0.1mol/L盐酸溶液,应取浓盐酸12mol/L的多少毫升 开水有不烫手的吗!为什么! 除去镁粉中的少量铝粉,可选用的试剂时.A盐酸B稀硫酸C水D氢氧化钠溶液为什么选D 镁能与冷水反应生成Mg(OH)2 2AL+2H2O+2NAOH=2NaAlO2+3H2↑根据除杂 不增和不减 这增了氢氧化镁沉淀,减少了镁单质为 0.05%氢氧化钠溶液的配制是取110克氢氧化钠溶于100毫升的蒸馏水中然后吸取上层清液2.7毫升溶于1000毫升水 开水烫手怎么办 0.1mol的钠,氢氧化钠,过氧化钠,氧化钠分别溶解在100ml水中,则它们的溶质质量分数大小顺序是怎样的?应该是氢氧化钠小于钠小于氧化钠等于过氧化钠 可是为啥氧化钠等于过氧化钠?应该过氧化 偏铝酸根与碳酸根为什么可以反应, 为什么开水会很烫手? 求化学高手 相同物质的量 【 0.1mol】的,钠,氧化钠,过氧化钠,氢氧化钠溶于水 比较溶质的质量分数大小求详细解释 偏铝酸根和碳酸根哪个更易与氢离子反应 在高山上"开水"不烫手的原因 瓶子里得冰融化了,为什么瓶子外会有水?瓶子外的水从什么地方来的? 偏铝酸根为什么能跟碳酸根发生双水解反应? 这是物理题:你相信不烫手的开水吗—--- 理由是----- 瓶子里的冰融化后瓶子外面和瓶子下面的水是哪来的 就像冰冻的可乐,从冰箱里拿出来后可乐瓶子上会出现一些水,这些水是哪来的! 7g反物质能否毁灭地球质能转换公式 :E=mc^2我不晓得地球毁灭需要多少能量,查资料显示,核弹的能量以吨tnt衡量1吨TNT炸药爆炸释放的能量约为4183兆焦,假设4k话说美国的核弹可以毁灭地球 把5.1g镁铝合金的粉末放入过量的NaOH的溶液反应,得到3.36L氢气 1.铝的质量分数 2.镁和铝的物质的量之比 水和冰装到一个瓶子里那它是混合物吗 如果把地球变成反物质再与其他物质湮灭产生的能量能毁灭宇宙吗 碳酸根和铝离子能否共存?为啥?他们不能双水解吗? 将铝放入烧碱溶液中,若反应过程中有1/3molAl消耗掉,则生成氢气的物质的量是a 1.5 B 3 C 0.5 D 6 尿素与硝酸反应吗?谢谢! 求亚硝酸钠和盐酸反应方程式.产生的是什么气体?为什么答案说是遇空气变为红棕色的为亚硝酸钠? 中国氢弹有多大威力 尿素会和硝酸反应吗?硝酸大概在5mol/L 醋酸洋红 成分醋酸洋红里面有些什么元素 现在的氢弹威力到底有多大?摧毁东京要几颗? 盐酸和硝酸反应生成什么?方程式怎么写? 亚硝酸钠与稀盐酸的反应方程式及其现象 玻璃杯和瓷杯能不能在微波炉里加热? 除去镁粉中的少量铝粉为什么要用氢氧化钠溶液为什么不和镁反应 白醋中的醋酸挥发后剩余的成分是什么,有什么危害,还能食用吗 中国氢弹的威力有多大 NaOH溶液除去镁粉中混有的少量铝粉怎么去除的?反应式我知道,可是NAOH不会和镁反映? 亚硝酸钠和稀盐酸的反应方程式 氢弹有多大危害 在做盐酸与氢氧化钠中和反应实验时稀盐酸用胶头滴管滴加稀盐酸目的是什么 冰醋酸挥发的气体成分是什么冰醋酸易挥发大家都知道 有刺激性气味产生 但是挥发出的气体成分是什么呢 将足量的铝粉投入到100ml 1.0mol/L的氢氧化钠溶液中,充分反应后能得到标准状况下的氢气多少升?.因为讲新课的时候我请假了..=..请不要只给答案..写出计算过程..不然我看不懂哇... 水在化冰之后为什么瓶子会扁了我的意思是说,昨天我把未喝完的冰水放入冰箱的保鲜室(温度为2摄氏度)中,在放入之前还特意扭紧了瓶盖.可是今天再拿出来喝时,发现冰已经大部分化了,同 食用醋酸是什么 除去镁粉中混有的少量铝粉,可选用什么试剂 在做盐酸和氢氧化钠中和反应的实验时,通常不需要用到如题A酚酞试液B试管C滴管D量筒麻烦说明下理由 1% 抗坏血酸溶液怎么配 兆吨级氢弹有多大威力? 做氢氧化钠与盐酸的中和反应实验为什么要用指示剂 先将对氨基苯磺酸与盐酸混合,再滴加亚硝酸钠溶液进行重氮化反应,为什么? 除去镁粉中的少量铝粉,用哪种试剂A盐酸B氢氧化钠C硝酸D食盐水 做氢氧化钠与盐酸的中和反应实验为什么要用玻璃棒不断搅拌 冰乙酸和冰醋酸是一种东西么? 千万吨级氢弹威力有多大?说中国是唯一还有千万吨级氢弹的国家为什么中国还要存这种氢弹啊?跟中子弹相比,两个谁厉害? 在实验室里用盐酸和氢氧化钠溶液作用探究中和反应看不到现象有硫酸代替盐酸用氢氧化钾代替氢氧化钠实验前想氢氧化钠中加酚酞 什么是抗坏血酸3+ 出去镁粉中的少量铝粉,可以选用的试剂是什么?如题 配置1000毫升0.1mol/L的盐酸需要盐酸多少毫升?如何计算? 尿常规检查中一项 氢弹的威力有多大?细致! 配置1000毫升 0.1mol/L盐酸溶液,应取浓盐酸12mol/L的多少毫升
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘