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

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

Google Glass从X labs“毕业”,更换项目负责人 不进化,则消亡——互联网时代企业管理的十项实践 RedMonk 2015年1月编程语言排行榜:进击的Swift! 微信开放JS SDK,这场web巨变意味着什么? 盘点一些iOS开发技巧:Swift和Objective-C 2014年,那些“颜值”爆表的UI动画 《近匠》爱加密:谁说iOS应用不需要保护? SwiftColorArt:开源易用的Swift图片类库 人气爆棚 干货满满 中国电信天翼开放平台开放日圆满落幕 必须Mark!43个优秀的Swift开源项目推荐 治拖延、疗懒癌!安利12款提高工作效率工具 把ES6带进Node社区 Io.js 1.0.0正式发布 Java 2014:10个最热门、最具争议性的话题 回顾:2014年最流行前端开发框架对比评测 实例讲解SQL注入攻击 调试大规模服务器集群的五大策略 .NET编译平台Rosly将迁移到Github Wasai虚拟现实头盔与体验馆发布:虚拟现实的线下经济 订票系统不再瘫痪 阿里云确认与12306合作 Apple前工程师Warren Moore:Swift中Metal使用初体验 手把手教学:详解Swift中的iOS设计模式 见微知著,那些触动人心的应用细节设计(一) 设计优秀API七大要诀 需求 细节 BI项目成功的五大要素 BI项目成功的五大要诀 最受程序员欢迎的公司榜单发布:2015 IT人才招聘趋势分析 Swift中的指针操作及使用 Android性能优化典范 专访Google涂鸦首席设计师Ryan Germick:为什么世界需要Doodle? 不炒作就会死!小米乐视生态布局的那些爱恨情仇 100个iOS开发/设计面试题汇总,你将如何作答? 如何获取DropDownlist的SelectedItem.Text? lirun(笨笨狗)请进来领分 怎么得到数据库中的id值。 有点痛,不知道是什么病,大家帮忙看看 GOOGLE被中国"冷处理" 请介绍一本好一点的Winsock函数编程的书,电子书或者纸书都可以 关于全局CDatabase; mysqldump备份数据库时总是出错? 谁有http://211.100.6.72的源代码最好有附带的数据库连接说明。200 在2000server上安装oracle的问题,求教! 怎样深层理解delphi的类变量 数据库中日期范围怎么比较? 如何将Access的数据导入SQL-server 散分了,高手请进---.net不能够bug ???怎样在Delphi中对导出到Excel文件单元格进行划线???? 在VB中如何进行程序的数据输入有效性验证? 请上次回答我NT问题的同志进来拿分,上次只给了100 如何学winzip那样,在弹出菜单中增加一个新的项目 英国有好点的软件公司吗? 高分求救水晶报表问题? 从数据库中取最新的第10~第20条纪录的sql语句如何写啊?各位大侠帮忙啊 记录集问题 sco unix下可以运行tcpdump吗? 无法启动X,出现cound not init font path element unix:7100,removing from list...could not open default font 'fixed' 请问是否可以在VC++下编写一个声音程序,如何编写?(只要能发出一个或两个音符就可以了) 程序员今年还可以报吗? 在flash里面,用什麼命令,可以把gif變成矢量圖?? 怎么用TC编写一个显示320*240的16色位图的程序? 用什么函数可以得到msflexgrid的行号(row的值)? 请朋友们帮忙推荐几本PB8的关于B/S和三层结构编程的书 网上邻居的问题! 在ASP.NET中,控件好像不能被设置成控件数组,请高手回答 Word文章被锁定了! 非常奇怪的数据连接问题 乐晕了,散分! 数据库问题 韩国公司展示防性侵袭的贞操内裤(图文) asp+oracle中关于字符串相加的问题。 各位大哥,我对sybase很陌生,有几个简单的问题想请教,很急,在线等待!!! 有msdn的请进! 杭州程序员一个月多少钱啊 网上邻居求救啊 有没有DOM方面的资料呀 VC的Maximize Speed优化到底优化了什么? 动态建表 向各位高人求救 页面转移的问题,轻松拿分 问一个困扰我很长很长时间的问题(关于类库的)!! 名词解释!!!! vb程序打包,第一次!!!问题啊!!!?????(第二次提问!!!!) java的WEB应用中是否能够调用其他本地的客户端 ? 肠炎病人身体脱水后必须采取静脉注射生理盐水为什么复习生物是的问题,谢谢··肠炎病人身体脱水后必须采取静脉注射生理盐水是因为( ) A 生理盐水有利于组织细胞利用 B 生理盐 高中政治如何理解唯物辩证法的辩证否定观?它要求我们应该怎样做如何理解唯物辩证法的辩证否定观?它要求我们应该怎样做 化学平衡题中的恒容和恒压的区别,在平衡时两者导致什么不变?变量又是什么? 患了肠胃炎的病人,医生往往要给他注射生理盐水,是为了( )A 维持体内水分的代谢平衡 B 维持体内水和无机盐的代谢平衡 C 维持体内无机盐的代谢平衡 D 调节体内血糖的浓度 可持续发展观的主要要求(政治题)可持续发展观的主要要求是什么?(政治题)不确定的请不要回答,要求权威回答,谢谢.这是一道政治题,请按照政治题的答题格式答题,按照政治课本的要求 电烙铁可以焊比较精密的电路吗!我mp4 usb 接口脱焊想DIY 不知一把电烙铁能否搞定,我怕搞短路!我坚决不找维修人员.DIY 一向是我的态度:: KMnO4氧化kI实验中H2So4的作用 世界上最大的洲是亚洲最小的洲是大洋洲亚洲的面积比大洋洲面积的4倍还多812万平方千米大洋州的面积是多少 没有烙铁怎么焊接 有什么 东方小故事 亚洲的面积比大洋洲面积的4倍还多812万平方米千米问大洋洲的面积是多少万平方千米 人体产生的代谢废物为什么必须及时排出体外急急急急急急急急急急急急急急急急急急急急急急 有关08年我国发生过的重大事件作文,如四川地震、北京奥运会、北京残奥会及神舟七号发射成功 亚洲的面积比大洋洲面积的四倍还多812万平方千米求大洋洲(简单方程) 八大行星内有水分的星球 铁离子、亚铁离子、氯离子、氢离子、硫酸根离子是否能共存?为什么?在线等… 人体中有多少必需元素,多少微量元素,失去平衡会得什么疾病? 世界上最大洲是亚洲亚洲是面积比大洋洲面积的4倍还多812万平方千米,大洋洲的面 铝有那些性质(要求设计实验证明,说清实验现象) 东方时事评论2010年8月20日 世界上最大的洲是亚洲,亚洲的面积比大洋洲的面积的4倍还多812万平方千米,大洋洲的面积是多少万平方千米要算数方法 方程我会 学完方程把算术方法忘了 汽轮机水冲击的危害有哪些如题,汽轮机水冲击的危害主要有哪些呢 墙里一共二根线,以前是单独控制一个灯的,现在想换成五孔带开关插座,开关控制灯,插座独立使用问了一下人,说不能这接,只能要么控制灯,要反就插座,不能两全其美,如果能怎么接, 为什么真空高汽机做功能力强 汽轮机发生水冲击时,有哪些象征? 羧酸A(分子式为C5H10O2)可由醇B氧化得到,A和B可以生成酯C.符合这些条件的酯只有四种.请写出结构简式 问一个字~上下结构的,上面有两个“目”下面一个“空”,大家有谁知道叫什么吗~同上~字典真的没有查到目目空 简述汽轮机发生水冲击的象征? 分子式为C5H10O2的酯共有几种如果,先拿出一个官能团酯基,剩C4H10,先碳链异构共2种,然后官能团异构,总共只有4种。这种思路对不对啊? 请问你有制作恒温烙铁的电路图吗?24伏的 CAO2+K2SO4+KI=?应该会有碘生成求具体方程式 化学式为C5H10O2羧酸A可由醇B氧化得到,A和B可生成酯C(相对分子质量为172),符合此条件的酯有几种希望写得详细点儿 为什么最近频频发地震?是不是世界末日要到来了? 我应该装多大的漏电保护器和空气开关?我家电表是2.5(10)A,电线是4平方毫米单股铜线.室内线分为两路:一路接有电磁炉(最大1900W)、电饭煲(650W)、洗衣机(450W)、冰箱(100W)、电视(120W)计3220W;另 KI溶液与H2SO4酸化的H2O2反应的方程式 八大行星中,离地球最近的行星是什么? 当正常人体感觉到冷时,通过神经和体液调节,可使:当正常人体感觉到冷时,通过神经和体液调节,可使 A.促甲状腺激素分泌减少 B.汗腺分泌量增加 C.皮肤毛细血管血流速度加快 D.有机物氧化分 化学式为C5H10O2的羧酸A可由醇B氧化剂得到,A和B可生成酯C(相对分子质量为172)化学式为C5H10O2羧酸A可由醇B氧化得到,A和B可生成酯C(相对分子质量为172),符合此条件的酯有几种?A.1种 B.2种 八大行星中离地球轨道最近的两颗行星是( )和( ). [关于物质的量浓度]V L Fe2(SO4)3 溶液中含a g 硫酸根离子V L Fe2(SO4)3 溶液中含a g 硫酸根离子,取此溶液 V/2,用水稀释成V /L ,则稀释后的溶液的 三价铁离子 的 物质的量浓度为 ( )A.a/576 mol/L B.125a/ 硫酸根离子和H离子和Cl离子和次氯酸根离子能共存吗 八大行星中体积最大的是什么星球 V 升Fe2(SO4)3溶液中汗Fe3+ m 克,则溶液中硫酸根离子的物质的量浓度为? 急!求各位高手 [例1]下图是一种分子式为C4H8O2的有机物的红外光谱谱图,则该有机物的结构简式为:红外光谱谱图 怎么看 化学平衡的移动如何理解 急性肠胃炎患者严重脱水是,为什么要注射生理盐水是为了维持身体什么的代谢平衡 在强酸溶液中亚铁离子,典离子,硝酸根离子和次氯酸根离子能不能大量共存 怎么理解化学平衡移动? 烘箱实验的原理和目地是什么 人体大量饮入生理盐水,尿量怎样变化,为什么会这样?机制是什么? 汽轮机除了用水蒸汽外还可以用其他低沸点液体吗? 得了急性肠胃炎为什么要通过静脉注射生理盐水? 快速注射生理盐水后尿量的变化 图中那个电路图我要用电路板和电烙铁把它焊出来,第一次做,请问那几个地该接哪里啊?这个我只要用几根导线把芯片和电阻电容电感连接起来就行了吧?求指导, 要做一个土壤微生物实验,如何取其土样? 大量饮用清水,大量静脉注射生理盐水,大量静滴甘露醇,尿量分别有何变化,为什么? 如图所示的四个电路中,R为电烙铁,为了使电烙铁在不焊接时烙铁头不致过热,但又 急性肠胃炎的患者严重脱水时,为什么要注射0.9%的生理盐水A维持体内蛋白质代谢平衡 B维持体内水代谢平衡C维持体内糖类代谢平衡 D维持体内盐代谢平衡 太阳系八大行星中,体积最大的行星是 关与化学平衡的恒压与恒容的区别,细致,需要非常细致的讲解,麻烦了.谢谢.
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘