动画,简单明了才最关键

今天的干货文章选取了一篇来自Sophie Paxton的译文,关于UI设计中的动画效果这个问题,来听听大神是如何看待的!


要知道使用者界面里的动画不全都是坏事,坏的是那些过度滥用动画以至于影响使用者体验的设计师。一个好的设计师应该要知道该如何取舍使用的时机,以下几点将会告诉各位,在什么样的情况适合使用动画,让你在未来不会再不必要的时机乱用动画。

太过刻意

以下的例子指的是现在迪斯尼化的UI动态设计,看起来是有点夸张没错,但还真的这样设计的UI其实不在少数。

这样的设计看起来就好像我们用隐形的橡皮筋把这些符号Icon垂吊在半空中让它一直晃,一点都不好看。

过度使用


动画就像杀虫剂一样,你用太多就会失去它的效果。

动画原则

很多UI设计师常常会建议大家多去看看迪斯尼的动画制作原则,但其实这种东西只会让使用者的界面使用起来更缓慢而已。

很多UI设计师常常把界面当成动画展示区,但除非你真的是想进到皮克斯当动画家,最好还是少用那些太过卡通化的动画效果。

到底什么才是界面

界面存在的目的就是将不断流通的信息传达出去,对于设计师来说,他们的工作就是决定何时是他们介入流通信息中的最好时机。

动画在UI设计中扮演的角色

以下是几个使用动画的基本原则:

你是否能确定使用动画能帮助到使用者。「看起来很好看」不是一个正当的理由

尽量让动画出现的时间少于300毫秒

避免使用线性移动的动画,因为这会让整个界面看起来迟缓无趣

99%的动画都应该使用简单的缓入缓出效果

只有在极少数的情况下才会使用弹簧(Spring),弹跳(Bounce)等效果

通知动画

简单的通知动画最常不要超过300毫秒,这样的设计才能真正帮助使用者,因为它能吸引到使用者的目光。

吸引你的使用者

动图

从以上的例子我们可以看到,通知的强度在第二次点击的时候大大的增强。

第一次点击时,通知缓慢地出现。

第二次点击时,通知列的信息激烈的震动。

当使用者不断的点击按钮时,界面会出现另外的信息通知使用者。

设计师也可以改变安钮的颜色来吸引使用者的注意。

动图

这个设计非常的简单且有效,常常在行动装置上能看到它的踪迹。它特别的点是,使用者即使在扩张列表之后,原先的画面还是维持在原本的状态。

在上方的案例中,我刻意将关闭键的出现时间稍微延长,我也使用转折的动画让使用者把目光聚集在较重要的信息上。

信息重要的优先级

身为一位设计师与软件开发者最重要的就是决定UI上哪个设计元素才是优先选择,以下方法可以用来强调:

1使用标题

2画底线或是加上粗黑字体

3使用颜色

4使用形状与图片

5动画

没有人会把文件里每一段文字都改成标题大小,同样的,也没有人会把界面里的每一个符号元素都改成动画。请把动画当成一只荧光笔,只在重点的部分运用。过多的使用会让人很难抓到重点,造成你想传达的信息流失掉。

功能性vs美观

如果你开始听到团队里有人提到他的UI动画能让使用者「赏心悦目」,那你就该当心了,因为单纯为了美观而设计的动画几乎都不是什么好设计。

记住,简洁就是美,功能性的设计永远胜过纯粹为了美观的动画。

不要让你的动画影响使用者的体验,想想看为什么飞机的导航界面为什么从不使用动画。你也许会觉得300毫秒的动画又无伤大雅,但对于使用者来说,你多余的动画只会烦死大家,不会让任何人「赏心悦目」!

但是我们不可否认的是好的动画设计也是吸引用户停留的精髓所在,具体可以看看这篇推文☞别拿LOADING不当回事

结语

另外,似乎我们刚抛弃了拟物化的视觉设计,又陷入了行为上的拟物化。我们把虚拟物表现得像是果冻,或像是挂在隐形的橡皮绳上。

动画就像某种咒法。如果过度使用,就会效力尽失。我听闻一些UI设计师推崇卡通化的动画设计,将它作为UI设计师的必读准则。不幸的是,这增强了UI的娱乐功效,总会使得界面变成用户的阻碍。

许多UI动效设计师似乎把界面设计当成了他们的动画作品集。除非你想被收录进Pixar,否则请避免使用“弹跳”、“加速后减速”这样的缓动效果。

所以,你可以尽情的运用动画吧,把动画当成一个能更快传达信息的工具,但记得,功能性远比美观更重要,多为使用者着想,不要让他们在你的界面上多浪费那几毫秒。

想学习的话可以关注公众号U爱设计菇凉 即可获得相关学习资料,也可以加QQ交流学习哦!1289916063.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,695评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,569评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,130评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,648评论 1 297
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,655评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,268评论 1 309
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,835评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,740评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,286评论 1 318
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,375评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,505评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,185评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,873评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,357评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,466评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,921评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,515评论 2 359

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,288评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,120评论 4 61
  • 如果一个数组是无序的,那么可以通过简单遍历查找的方式查找到某个元素所在的角标。但是如果一个数组 是有序的,那么就可...
    Mayo酱阅读 463评论 0 0
  • 前言 netty源码分析之pipeline(一)中,我们已经了解了pipeline在netty中所处的角色,像是一...
    简书闪电侠阅读 16,172评论 15 35
  • 1 都说,君子之交淡如水。细数和我关系要好的几位朋友,平时都不怎么联系。 现在是网络沟通时代。感觉平时大伙儿,无论...
    晓熹盼兮阅读 366评论 0 3