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

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

《近匠》环信CEO刘俊彦:移动客服的未来化场景 iOS UIView动画实践(三):Transition Animation 【CTO讲堂】无社交,不App!——为App加载强大的通讯社交引擎 【探秘ES6】系列专栏(七):箭头函数 【前端框架】Backbone.js在大型单页面应用中的应用实践 【探秘ES6】系列专栏(六):解构赋值 《近匠》TestBird,专注的手游自动化云测试平台 【探秘ES6】系列专栏(八):JS的第七种基本类型Symbols 专访李林锋:我与Netty那些不得不说的事 手把手教学:巧用Core Data和RubyMotion开发iOS应用 《近匠》琥珀天气,精细化打磨征服Google Play 【CTO讲堂】人工智能到底能为我们带来什么? Linksys再度回归中国市场,主推智能路由 Windows 10:全平台战舰与移动化破冰——微软(中国)操作系统工程院院长谢育涛专访 专访友盟CEO叶谦:深挖海量终端用户数据的价值 七牛资深前端工程师马逸清:前端测试探索实践 实战iOS 9:开发者必须掌握的三种搜索API 腾讯Bugly干货分享:浅谈Swift在实际项目中的应用 【前端人生】ThoughtWorks黄峰达:利用横向扩展方式,快速学习前端新框架 这是前端最好的时代——论前端的“三化”建设 游戏引擎网络开发者的64做与不做(一):客户端方面 六问七牛CDN:打造融合CDN管理服务平台 《近匠》Wilddog野狗,跨平台的实时通信云服务 【CTO讲堂】招人不易留人更难——创业团队要闯哪些关? iOS UIView动画实践(四):过渡与伪3D动画 日程全公布|年度人工智能技术精英聚会 7月26-27相约北京 TypeScript 1.5发布,支持大量ES6新特性 快快快!27个提升效率的iOS开源库推荐 《近匠》Maxense,“云+传感”推动产业变革 【探秘ES6】系列专栏(九):使用Babel和Broccoli 2015年Postgres全球开发者大会参会总结 请教CDateTimeCtrl控件问题! 高分求救!哪位哥哥能否帮我解决一下几道C编程的题目,我讲感激不尽!!!谢谢 我找到一个DELPHI的技术站点,还可以,请大家来LOOK 动态显示图片!!!!!! 本人是beginner for vc++,希望以后多交流。现请求一个vc++作的画图程序 大侠执教:投稿程序员杂志要多少时间才有回音? 有办法在控制台程序启动时,隐藏它的DOS窗口吗? 关于MFC中的Project Settings问题 两个编程的初级问题 谁能给我一个关于二叉树的完整的程序。 认识的进来聊天 , 我是东宝 (yeti_lee) 我是一名学生,学计算机(一个普通大学)。请教大家几个问题 大连成绩如何查??有人查到了吗?请聊聊 分是个累赘,我放完它~!来的就有,讲些凄惨的事情和遭遇,大家比谁惨,越惨的给分越多,兄弟我此举是为了找平衡。 怎样得到当前系统打印机的各项信息?????特别是打印纸张方向!!! 高分求救——我有几道C程序的编程题目,望各位高手帮忙解决!谢谢 哪位告诉我select语法,我忘了group by 的使用方法,谢谢! 请问哪儿有电子版的《COM编程精彩实例》,谢谢! 请问:要想学习vb和数据库的知识,哪些书比较好?请各位朋友帮忙推荐几本好书?谢了~! 请问有谁知道PB8编译后打包,PARADOX数据库驱动程序需那些啊????急!!!!!! 在oracle存储过程中怎么使用cursor作为返回值? [TIPS]Win9x和WinNT/2000下面都可以去掉OICQ广告的方法! 触发器问题 关于bdgrid的问题,高手请来,一定高分相送!!!!急 怎么建立WIN2000的域信任关系 用data控件连接DBf数据库时为什么出现“找不到可插入的ISAM”错误? 大家等会儿再吃饭!先看一看这里的送分大餐...... 他们怎么想的?居然没有bcb? 高手指教:如何在vc中控制刻录机和磁带机进行数据备份和恢复? 请问各位高手,怎样才能学好c语言。有没有什么好一点的网站和源码提供,多谢。 如何解决在向量位图背景下的窗口移动是的刷新置后问题?? 问一个问题!爱好or 程序员? 用VB如何设计好的报表,欢迎讨论! messagedlg能不能显示中文?例如显示“确定”,而不是“ok” 各位高手!!请教一个有关在oracle8i中建立表与表之间的关系? 请问哪里有无时间期限的Setup Factory 下载? 笨呆呆,拿分。 请问到那里可以下载uml工具,如果再有推荐的话是一定可以得分的 再次有请: playyuer 吴文智、袁飞、Jneu、Amoon、ttyp、icevi、progame、Jinesc 等各路高手 偶是初学者,问一个问题 SOS,很严重windows的问题,高手快进 复制Access数据库时出现的问题 如何动态添加TQuery的字段??? 编译一问 SOS,很严重windows的问题,高手快进 !!! 有人开发过基于winpcap的网络抓包程序么? SOS,很严重windows的问题,高手快进 ! 通过双网卡上网怎么设置? 一名初学者的问题? 各位老大,如何控制windows的资源管理器显示/不显示后缀名 问一下现在4000元可以买到大概什么配置的笔记本电脑 浓硫酸与二氧化锰、氯化钠制氯气,为什么生成硫酸氢钠,而不是硫酸钠. 成语对对子:流芳百世()精雕细刻()守株待兔()望梅止渴()旗开得胜()瓜熟蒂落() 高中历史必修一的复习提纲全部 如何用氯化钠二氧化锰浓硫酸制氯气我将氯化钠二氧化锰和浓硫酸倒在一起时没有想这个视频一样的效果,这是为何?好像都没反应.而且这个视频人家一倒浓硫酸进去就反应了.视频地址:http:/ 成语对对子:流芳百世 19.某中学学生在课余探讨明清时期的“闭关锁国”政策时,得出了以下结论,其中正确的是( ).A.清朝时开放广州一处同外国通商,说明并不是真正“闭关锁国”B.“闭关锁国”这一政策产生的根 二氧化锰,浓硫酸,氯化钠制取氯气哪个是还原剂,哪个是氧化剂. 科代表怎样安排高中历史复习我们高二了,我是历史课代表,我们要复习必修1(人教版),每周早上有20分钟复习,怎么安排全班复习计划, 1.有人说洋务运动“无心插柳柳成荫”这里“柳”指的是什么?引进近代科学技术和出现新的经济因素和阶级力量为什么选后者?2.洋务运动有没有为资本主义发展开辟道路?为什么?3.中国近代资 用氯化钠和浓硫酸与二氧化锰共热制取氯气的方程式用什么方法配平 成语对对子(反义词) 例如:粗茶淡饭(山珍海味)守株待兔( ) 狗仗人势( )望梅止渴( )水落石出( ) 高中历史必修二复习提纲 刻舟求剑,守株待兔,指鹿为马,凿壁偷光,纸上谈兵,囊萤映雪,的主角是谁? 成语反义词对对子固若金汤( )指鹿为马( )伶牙俐齿( ) (1)NaCl晶体融化时需要克服的作用力是_____… (2)NaCl晶体中,离子键的键长为____,Na+的半径与Clˉ的半径之比为______ (3)NaCl晶体的每个晶胞中有____个Na+,____个Clˉ.(4)As的价电子排布式为___ 跟寓言故事中的任务对话、 刻舟求剑——() 郑人买履——()守株待兔——()拔苗助长——()填跟寓言故事中的人物对话、不好意思啊、打错字了、列、讳疾忌医——蔡桓公大王、您有 融化和熔化的区别? 由于预习阶段,有些概念还不懂,还请前辈们多多指教呢. 守株待兔和刻舟求剑这两则寓言都讽刺了那种人 融化和熔化有什么区别? 高中历史必修一复习提纲 人教版 刻舟求剑和守株待兔的意思要把故事简要概括(最好三四句话)在说蕴意! 融化、溶化、熔化的区别,并各造一句话 融雪剂NaCl使冰雪融化是什么变化? 已知实验室制氯气的化学方程式为:MnO2+4Hcl(浓)=MnCl2+Cl2+2H2O.现用足量浓盐酸在加热条件下跟17.4克二氧化锰反应制氯气.(1)产生的氯气在标况下的体积.(2)把反应后的溶液稀释到100ml,从中 融化,熔化的区别是什么 融化氯化钠的颜色如果将氯化钠加热融化后是什么颜色的?氯化钠熔点800多度呢2l不可以吧 ﹝﹞凿壁偷光 ﹝﹞闻鸡起舞 ﹝﹞指鹿为马 ﹝﹞纸上谈兵 高中历史总复习提纲 化学有机选择题一题,麻烦详细讲解下,有图 纸上谈兵,四面楚歌,指鹿为马,口蜜腹剑,闻鸡起舞,江郎才尽,乐不思蜀,凿壁偷光这些成语的主人公是谁? 熔化状态和熔融状态有什么区别?(化学方面)RT,看到一本书上写离子反应在溶液或熔融状态下反应,另一本说溶液或熔化…… NaCl熔化算不算化学键被破坏?为什么? 凿壁偷光,精忠报国,指鹿为马,纸上谈兵,闻鸡起舞,破釜沉舟,程门立雪,写出 熔化 溶化 融化 都有什么不同?熔化是一样的吗?溶化是一样的吗?融化 融解是一样的吗? 为什么熔融NaCl会破坏化学键?不太,不太明白, 凿壁偷光 指鹿为马 纸上谈兵 精忠报国 闻鸡起舞 入木三分 鞠躬尽瘁 破釜沉舟 高山流水 黄袍加身 的主人公 材料一 天下多男人,尽是兄弟之辈;天下多女子,尽是姐妹之群,何得存此僵彼界之私,何可起尔吞我并之念.——洪秀全《原道醒世训》,1843年材料二 逆贼洪秀全杨秀清称乱以来,於今五年矣.荼 关于熔化时破坏化学键的一道题现有 1.氯化钡 2.金刚石 3.氯化铵 4.硫酸钠 5.干冰 6.碘片 一 熔化时不需要破坏化学键的是熔化时需要破坏共价键的是熔点最高的是 最低的是 二 属于离子化合 指出在中国实现民族独立后,共产党为实现民主政治所做的努力 谁有下面这个高中历史第一轮复习的文件? 融化时破坏的化学键 氯化氢 蔗糖 为什么融化不会破坏化学键?怎么判断融化会不会破坏化学键?还有怎么判断溶解破不破坏化学键?氯化氢不是共价键吗?完全搞不清楚. 绳锯木断下一句是什么 各位!溶化,融化,熔化这三个词怎么区别? 熔融 熔化 溶解区别是什么? 绳锯木断,下一句 “融化”,“溶化”,“熔化”,三词的区别如题 溶解和熔化有什么区别嬷?从化学角度咯,最好举例子嘞~ 绳锯木断的下一句是什么要完整的,我急. "溶化"和"熔化"这两个词有什么区别? 水落石出现一五十是什么生肖 "绳锯木断"下一句是什么? 溶化,熔化,融化的区别是什么? 熔化和溶解有什么区别? 【黄冈中考题一道】某科技开发公司研制出一种新型的产品,每件产品的成本为2400元,销售单价定为3000元,在该产品的试销期间,为了促销,鼓励商家购买该新型产品,公司决定商家一次购买这种 流芳百世,良药苦口,水落石出,雪中送炭,精雕细琢,守株待兔,卸磨杀驴,伶牙俐齿的反义词. 高中历史必修一的复习 用氯化钠和浓硫酸和二氧化锰制取氯气,如果是因为硫酸先与氯化钠反应生成了氯化氢,再与二氧化锰反应生成氯气 那么产物就应有氯化锰啊,可为什么是硫酸锰呢?如果是氯化锰和硫酸反应生 成语对对子 流芳百世( ) 井然有序( ) 精雕细刻( ) 固若金汤( )(注意对仗要工整,意思要相对) 高中历史必修一复习提纲简洁,易懂
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn