动效设计中的一些Tips

本文更偏向于针对一些动效设计中的『don'ts』来讲,因为设计本身主观性很强,需要设计师发挥自己的设计天赋,在这些don'ts的范围内去do something awesome!

知乎JJ Ying的专栏中一篇《够了,dribbble》曾经引起一些共鸣,满眼的狂转炫酷吊炸天的Landing动效,Loading动效和转场动效,曾经有一段时间亦对dribbble比较反感,特别是『Animation』这个关键词,搜索结果以各种天气App的动效设计为代表,实际上是以表现出自己AE用的多牛逼为目,并不是考虑用户能用的多爽为目的。。

说起来,本人作为一名交互设计师,一直以为动效这种事情应该是交互设计师来做的,后来发现视觉的同事们好像也对这方面很感兴趣并已经在实现的时候,便心生疑惑,在思考App的动效设计到底是应该由交互设计师来做还是视觉设计来完成的过程之余,视觉的同学们已经完成了一些简单的动效,而我刚刚总结好一些Pre-Thinking,结合以往关于动效设计的所见所闻所想,就在这分享一下。

下面罗列一下我能想到的以及在实践中总结出来的动效设计可能应该遵循的一些原则:

1.表达准确和有效性。

这应该是最基本的一条,动效为何而做,从功能上应该对用户的操作目的有明确的引导性,比如一个重要的按钮,在用户首次进入页面时会有弹跳动效以帮助用户关注到设计者想要用户关注的东西,这是非常好的一件事情,可以让设计事半功倍,但如果动效本身并没有起到引导作用甚至其本身的复杂程度和时间占用让用户产生了负面情绪,那就得不偿失了。

当我们把用户自主操作产生的视觉效果也归入动效范围,那么这些动效的有效性和合理性就变得十分重要,因为本身就是以迎合人本身的思维习惯和从日常生活中习得的一些常识性的东西为目的的,比如Safari还有新版的Android在开启多页面切换时,以一种模拟真实文件夹展开并辅以真实的翻动动效的形式来满足人们对于『翻文件』这种生活经验的认知,因为人们都熟悉那种老式的文件柜(不论是亲身经历的还是从外部获取的),按照『拉开抽屉门-纵向翻看文件-垂直抽出文件』这种认知来设计,会让用户觉得很自然,实际使用起来搭配手势也是十分高效,但如果动效没有被设计成如此,而是其他的与『switch』和『fetch』没有直接联系的行为特性,那就无法有效的给用户提供良好的认知指引。


2.考虑用户的感受。

1)动效最终的实际流畅度,注意这里是实际效果,实践证明在电脑上做好的GIF放到APP中展示不一定可以获得相似的流畅度。可以想象一个有卡顿的动效给用户带来的是什么...说到这里,让我想起了Lumia和WindowsPhone操作系统,刚从Android低性能时代解放出来的我入手一部Lumia 710,发现区区256MB的内存也可以把动效设计的如此流畅,顿时对微软的工程师们好感倍增,后来经过研究才发现,达到这种效果是需要设计师和工程师做一系列高度耦合的优化才可以达到的,代码优化就不说了,据微软自己说工程预算的30%都用在了代码优化上。另外一种Pre-load的设计理念比较有意思(好像是这个名字),大概意思是动效的执行是一个独立的环节,这个环节的表现层和执行层是有一整套机制来优化的,一来保证动效本身的质量,二来保证动效的前后内容衔接的质量(动效播放完成后让用户面对一个空荡荡的屏幕绝对是一件非常尴尬的事情)。

2)不要让用户等待太久。『设计师自己做出来的作品自己看往往是越看越好看的』,这句话非常有意思。

作为作者,作为设计师,作为一个人,我们往往会对自己的作品网开一面,更偏向于从欣赏的角度去评价,一遍又一遍的欣赏自己做出来的动效有多么的华丽,而一个优秀的设计师,应该有一种跳出职业习惯和审美的能力去客观的审视自己的作品的能力,实际情况是:设计师本人看这个动效觉得很爽,同行看了觉得很牛逼,但是用户觉得我每次操作都要看这么个动画,耽误时间,降低效率。排除一些商业行为驱动的设计,如果设计师拥有自主权,请务必站在用户的角度来审视动效,切记产品做出来是给用户用的,不是给设计师圈子拿去欣赏的。

3.考虑开发同学的感受。

需要代码实现的动效如果你不熟悉代码和性能调优这些一定要跟开发先沟通好,这是关系团队的大事,自己没白天没黑夜的设计了一个巨好看巨好用的动效,开发同学不买账,做不了,你觉得开发态度不好,水平差,开发觉得你异想天开,啥都不懂,大家都是一脸黑线的收场多不好。

4.适当关注一下产品同学的感受

产品同学的普遍状态基本不是在赶工就是在赶工的路上,所以当你有一个好的提议的时候,尽量早的跟产品经理沟通,让他为你的动效做一下评估,没有产品会拒绝一个让能用户看着爽而且用着爽的小动效,但是实际情况往往会比较尴尬,时间排的很紧,一环扣一环,很难找出额外的时间去开发或是放置这个动效(互联万公司似乎永远缺开发人员...)。


最后给一个草率的结尾。作为一个设计师,千万不能沉浸在自己的视觉感官世界,设计和艺术毕竟是有区别的,如果无原则无目的的做董小设计,则更多时候给用户带来的是麻烦而不是好的体验。

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

推荐阅读更多精彩内容