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

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

个人隐私是如何“泄漏”的:国内外互联网企业隐私策略对比 惠普2014年Q1财报:净利润同比增16% PC业务逆势好转 “阅后即焚”挖谷歌墙角,GAE技术大牛跳槽Snapchat 日800万访客、20万RPS网站的5个9可用性架构 程序员想找好工作?那就学好Linux吧! 一周消息树:开源专家袁萌,国产COS操作系统是“杂种”,不是中国软件梦 移动周报:对话智能硬件云服务平台Yeelink Node.app:用Node.js API开发iOS“原生”应用 Google Project Tango:能3D捕捉的智能手机 成功打造Evernote API生态系统的五大经验 研发周报:Google与Facebook的产品研发之道 AMD高级副总裁Lisa Su访华 宣布引领AMD复兴的五大战略 一周热点:IBM新技术使网速达400G/s,硬盘会“烧掉”吗 特种作战,纽约极客企图建造现实中的“潘多拉星球” 领先Google 150年的数据可视化和“不务正业”的超级计算机 苹果会成为新微软的四大理由 雨血·影之刃:参选2014年Unity游戏及应用大赛 AT&T联手IBM对抗AllSeen:“晚点和堵车”将成历史 微软WP春季更新将降低手机生产成本 意在开拓新兴市场 私人定制,十款最佳Node.js MVC框架 开发者“逆袭”,就等你一票! 基于多路云计算方案焕发新春 浪潮抢发E7 v2服务器 美国人眼中的腾讯 英特尔发布64位凌动处理器Merrifield 布局移动市场 OvershareKit:开源的iOS社交分享工具库 Ruby 2.1.1发布,改进系统加速,服务器兼容等问题 专访Ejoy2D作者云风:因Lua而生的开源图形引擎 当DDoS跨入400Gbps时代,那些来自孩子们的攻击该如何应对! Mesos渐入主流,Twitter模式有望“无限复制” 几十亿美元当头,你现实世界信息是否还会安全? 华为V3服务器挑战小型机,多路高端市场汹涌 为何我的程序在VC编辑环境下按CTRL+F5不能正确RUN,在资源管理器下能正确RUN? make文件是怎么回事? oracle中long类型是什么类型? PB简单画图?保存到库表中? 用程序代码建立表结构的问题 怎么在状态栏中加入竖线分隔,而且调整字体的大小? 请高手帮帮我!!!! jbuilder4的enterprise setup需要weblogic51,但我的是weblogic6,应该怎样才能让jbuilder支持6啊? 关于数据库的并发操作 谁知道哪里有vb下载? 哪有可下载的AUTOCAD2000 如何用VB实现存折的打印???? 请教给TImage加滚动条的问题 我和她在一起的话,会开心吗 请大家看看这条语句有什么错? 关于isdn在win2000下共享的问题 各位水友,有力的出力,没力的看看,拜托 请从位高手帮小弟解决一个棘手的问题……………………多谢!!!!!!! ALLTEC(荔枝)兄弟,兄弟我接帖太快 :( 請這邊來. ★★★ 救命啊! VC 用ODBC访问 Access 数据库的问题 guo->你在www.linuxforum.net中叫什么?有个guoemail是你吗? 软件发布:市场摊位租赁管理系统Ver1.0 软件发布:量和单位转换软件(免费版) 软件发布:五笔快打 在listview中的各个记录listitem中,有没有双击记录的事件 软件发布:伏羲服装鞋业购销存管理系统 软件发布:进销存商务管理pcft-jxc 征集各地童谣.唤醒儿时记忆! 今天我请客! 有关vb调用excel的问题! 有没有关于BDE的单独的分发程序? VB中报表预览打印能不能实现象EXCEL中一样的“按比例缩放”?如何实现? 单机版流量统计 关于Delphi6的安装问题 动态计算公式怎么实现?? 常用的英文字体是什么? 在通信过程中怎样做到防监听、防篡改? 各位大虾现欲用java开发一套网上投票表决系统 应该看什么书?用什么开发工具?(一定给分!) 关于winsock的问题,急急 怎样使用VB6中TREEVIEW控件? 我真的要疯了! 这里有很多Delphi6的控件! 如何在ASP中传递多个参数?displaymsg.asp?page=1在后面我还想加另外一个参数 有没有喜欢画漫画的? 如何得到ActiveX控件的窗口句柄 请问mif文件格式以及、读写方法?高分求解 sco unix的root口令忘了,谢谢. 在PowerBuilder中使用Microsoft Web浏览器控件 ,这个控件在ole中怎么没有啊? 急盼有人答复!!!!!! 急!急!编译exe时出现:link errors提示 具体提示:create of executable file failed? 小笨笨一问 (最好回答可以赢得财富值50)计时为10分钟内.1、图上20厘米表示实际480千米,这幅图的比例尺是().2、一个长方形的长宽高分别是9cm、4cm、5cm,它的体积是()cm³,表面积是()cm².5、 某工作如果由第一、二、三小队合干需要12天才能完成;如果由第一、三、五小队合干需要7天才能完成;如果由第二、四、五小队合干需要8天才能完成;如果由第一、三、四小队合干需要42 求2道数学题的解法1.已知非空集合A={(x,y)|(a*2-1)x+(a-1)y=15},B={(x,y)|y=(5-3a)x-2a}.若A∩B=空集,求a的值.2.已知集合A={x|x*2-4mx+2m+6=0,x∈R},B={x|x<0,x∈R},若A∩B≠空集,求实数m的取值范围.a*2表示a 17.菜场运来的萝卜比白菜多1.52吨,卖出0.2吨萝卜和0.4吨白菜后,白菜和萝卜的重量的比是7:9,原来各运来多少吨? 我想要小学一年级上学期的数学题在哪里找 面积为49平方米的长方形的周长是多少?.注意是长方形,不是正方形 给个准确的数啊,还有解法 六年级奥数题,超急!要列计算过程!19.仓库里有一批化肥,运走45吨后,又运走余下的40%,这时剩下的化肥和两次共运走的同样多,仓库原有化肥多少吨? 三个人同时吃3个西红柿,用了3分钟吃完,6个人吃6个西红柿需要几分钟吃完?(仅用加减法列个式子) 下列结论错误的是()A.长度之比为1:2:3的三角形是直角三角形B.三个边长之比为3:4:5的三角形是直角三角形C.三个边长之比为8:16:17的三角形是直角三角形D.三个角度之比为1:1:2的三 红星厂制造一批零件,计划每天制造200个,15天完成,实际每天超产50个,多少天可以完成任务? 0952873641 3的前面第三个的后面第五位是几?到底多少呀 能不能讲下 5555555 某公司托运物品,质量为a(a 1.甲、乙两箱苹果的数量的比是4:5,如果从甲箱取12个放入乙后,甲、乙两箱粉笔的数量比是7:5,两箱苹果共有多少个?打错,是甲乙两箱苹果的数量是7:不是粉笔,还有,刚开始甲、乙两箱苹果的 小学六年级奥数题,帮帮忙,最好有过程,谢谢!菜园里西红柿获得丰收,手下全部的八分之三是,装满一些筐还多24千克,收完其余部分时,又刚好装满6框,求共收西红柿多少千克? 在RT三角形ABC中,角C=90度,AD平行BC,角ABE=2角CBE,求证ED=2ABBD把角ABC分为角CBE和EBA,BE延长到D点,AD平行与三角形ABC底边BC,ADB也构成一个钝角三角形另外,不能用三角函数做,只能用几何 1.一根柱子长方体,上、下底面和天花板和地面连接,长50厘米,宽40厘米,柱高8米.上、下底不需要上砖,四面贴砖,每平方米砖50元,贴完四面需要多少元?2.小强有邮票87张,小红有48张,小强给了小红 小学六年级奥数题 要过程的在第16届广州亚运会上,中国代表团取得了金牌第一的成绩.获得的金牌数比铜牌数的2倍还多3块,如果金牌再多1块,那么铜牌就是金牌的49%,银牌是金牌数的59.5%.问 问一个初二的数学题,要解法! ! !有一个三位数,现将最左边的数字移到最右边,则比原来的数小45;又知百位数字的9倍比去掉百位数字后形成的两位数小3,试求原来的三位数是多少?要具体的解 1.一个数的9分之17倍是34.这个数是多少?2.甲数与乙数的和是16,甲数是乙数的3分之1.甲、乙两数个是多少?3.400减去它的4分之1后,正好等于一个数的5分之3,求这个数是多少? 两段圆柱的体积之差是314立方厘米.若将它们分别削成底面是最大正方形的长方体,则两个长方体体积之差是多少立方厘米? 小学三年级一题有多种解法的数学题 列式计算,红花有60朵:列式计算1.比黄花多1/5:2.是黄花的1/3:3.比黄花少1/6:4.黄花比红花多2/3:5.黄花比红花少1/6:6.黄花是红花的7/10:饲养场养鸡480只.鸡比鸭多1/8,鸭有多少只?一共有多少 实验室了有两个等高的容器,圆锥体容器的半径为9厘米,圆柱体容器的半径是6厘米,现在圆锥体容器装满水倒入圆柱体容器中,这是水深比容器的高度的6/7低3厘米,两个容器的高是多少厘米? 求助:三年级一道数学题的解法.有两个一样的信箴,如果一个信封里放1 张信纸,还剩50张信纸;如果每个信封放3张信纸,还剩50个信封.请问:有几个信封,有几张信纸?不要设未知数. 一道奥林匹克的数学题,一辆车从甲地到乙地.如果把速度提高20%,可比原定时间提前1小时到,如果以原定时间1小时到达,如果一原定速度,如果以原速度行驶120千米后,则可以提前40分钟到达,那么 :用10张同样长的纸条粘贴成一条长51厘米的纸条.如果每个粘贴处都重叠1厘米,那么每张纸条长多少厘米? 今年的8月份有5个星期日,4个星期一,那么今年的8月1日是星期几?我的方法是从31是星期日,倒推到3号是第一个星期日,那么1号就知道了.请问有没有更简便的方法? 六年级语文数学题!在线等!数学题:1:李叔叔去年按每股4元的价格买了民生银行股票2500股,到今年10月1日按每股6元的价钱卖出.在股票交易中,无论买卖都要缴纳0.3%的印花税和0.2%的其他费用. 1、一个长方体的长和宽都是5厘米,把它从长的中点截成两个相同的长方体后,得到的一个长方体表面积比原来大长方体表面积少120平方分米,原来长方体的体积是多少?2、两种商品的价格比试7:3 请帮忙解题:一个小学二年级的数学题2个小铅球比一个大铅球重1千克,8个小铅球比5个大铅球轻1千克,算一算,大小铅球各重多少千克?这是二年级的数学题,不能用方程解,但需要列出算式. 造句:鹅毛般的苇絮恶狼般的眼睛为了 ...为了...为了.哑然失笑:急中生智:名言名句大提问挫折:灵感:成功:上衣和裤子的价格各是多少元?裤子的价格是上衣的三分之一,一套衣服共320元 1.某单位食堂一月内购买了三次大米,后两次购买数量是前一次的两倍,由于数量增加,每次加个都比前一次优惠10%,共用去2536.8元.如果下月一次性购买同样多的大米,可至少节约多少元?2.一个长 小学五年级数学奥数题的答案?1.( )÷12=1:( )=3/( )=0.5=( )%2.把0.13万改写成以“一”为单位的数是( ),读作( ).3.在括号里填上合适的单位名称.(1)一个鸡蛋重50 一:忽然,像一阵风吹来的,远处的小丘上出现了一群马,马上的男女老少都穿个色的衣裳,群马疾驰,襟飘带舞,像一条彩虹朝我们飞来.“像一阵风吹来”说明________________,“彩虹”说明_____________ 丙在计算除法(有余数)是,吧除数137写作173,商多3,余数相同.求正确德商和余数 1.边长为自然数,面积为105的长方形.不同的长方形共有几种? 两人:A,B从甲地和乙地同时出发,相向而行.第一次相遇离甲地5千米,然后继续走.走到两地后立即返回,第二次相遇离乙地2千米.问:甲乙两地相距多少千米? 一辆汽车共载客50人,其中一部分人买A票,每张1.20元;另一部分人买B票,每张1.00元,售票员最后统计出所卖的A票比B票多收入16元.买A票的有多少人?绝对要有解法,带讲解的我可能会追加的!赶快, 几道小学五年级奥数题1、把一个小数的小数部分扩大4倍,这个小时就变成6.6,把这个小数部分扩大8倍,就变成例如9.2,原来这个小数是( )2、从1、2、3、4、5、6中选出四个数字组成一个四位 一辆车从甲地开往乙地,如果将车速提高20%,可以提前1小时到达,如果按原速行驶120千米后,再将车速提高25%,可以提前401分钟到达,甲、乙两地相差多少千米? 要把题目类型和解法写出来, 1、花生的出油率是30%,300千克花生可榨油多少千克?2、2.五年级2班今天有49人到校上课,出勤率为98%,全班共有学生多少人?3.风速在森林地带可比平原减低30%,如果风在森林地带速度每秒是4. 1、长72米的列车,追上长108米的货车到完全超过用了10秒,如果货车速度为原来的1.4倍,哪么列车追上到超过货车就需要15秒.货车的速度是每秒多少米?2、一座大桥长1275米,一列火车过这座大桥.从 一个羽毛球4元,一个乒乓球2元.买这些花了100元.如果把羽毛球都换成乒乓球,乒乓球都换成羽毛球,则需要花92元.原来买这些乒乓球和羽毛球各多少个? 几道小学五年级数学题1.办公桌抽屉的长是30厘米,宽50厘米,高15厘米.如果一张办公桌有2个这样的抽屉,做一张桌子需要木板( )平方米.2.“环球”牌涂料分大桶、小桶两中规格包装,大桶8升, 一列客车从甲城开往乙城,每小时行60千米,行了2小时后,从乙城往甲城开出一列货车,4小时与客车相遇,这时货车行了全程的3分之1,两城相距多少千米? 游乐中心内一个长方形游泳池,长25厘米,宽12.5厘米,深1.2厘米.如果用直径20厘米的进水管向游泳池内注水,水流速度按每分100厘米计算,注满一池水要多长时间? 一项工作,甲单独做要用10小时,乙单独做要用15小时,甲做完三分之一后,两人合作,还需要几小时完成? 请用算式答小李算长方形的体积时,误将宽多算了五分之一,高少算了四分之一,结果比正确答案少了40立方厘米,那么该长方形实际体积是多少?大家请用算式答!大家请不要回答的太深奥,我才 求助小学六年级寒假作业一道数学题解法甲、乙两人以匀速绕圆形跑道按相反方向跑步,出发点在直径的两个端点,如果他们同时出发,并在乙跑完100米时,第一次相遇,甲跑一圈还差60米时第二次 求十道五年级奥数题加答案题目短一点 小学(超难的)我国个人所得税规定;个人月收入超过800元的部分应缴纳个人所得税,超过部分中,个人所得税率为;超过部分 500元 501~1500税率 5% 10%叔叔上月的税后工资为1500元,他交纳了多少 求这2道数学题解法1:求f(x)=cosx-1/2cos2x的最大值(x属于R)2:求sin10°sin30°sin50°sin70°的值 急.写出详细的算式,不用解题思路.一、填空.(每空0.(1)800706502读作(),四舍五入到“万”位约是( ).(2)250平方千米=( )公顷 1又1/6时是( )小时( )分(3)1.2=72/( )=( )%.(4)一 甲乙二人分别从东西两村同时相向而行,第一次相遇于距东村36公里处.二人继续前行,至目的地后折返,在距东村54公里处第二次相遇.问::东西两村的距离. 求2道数学题的解法1:tan71+tan49-√3tan71·tan492:(1-tan17)/(1+tan17) + cos146/(1+sin34) 1.张大伯家有一堆小麦,堆成了圆锥形,张大伯量的其底面周长是9.42m,高是2m,这堆小麦体积是多少立方米?如果每立方米小麦的质量为700kg,这堆小麦有多少千克?2.小红去食品店买肉罐头,她看到有 《当堂练》上的六年级数学题,十分钟内1.有一个底面半径是2cm,容积是31.4毫升的圆锥形容器的高是多少厘米?(算式,2.一个圆柱体和一个圆锥体的底面积和高都相等已知圆柱底面周长是12.56分 ABCDE×ABCDE———————XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX———————XXXXXABCDE 求A+B+C+D+E=?A= B= C= D= E=ABCDE不可能是零 急求2道数学题的解法!1.一种书若定价每本10元,可盈利1/4,若想盈利2/5,则应定价为每本()元2.同一种商品,甲将原价降低10元后卖掉,用售价的10%作积累,乙将原价降低20元后,用售价的20%作积累,
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn