为什么会有动效


前两天，我去找鳄鱼讨教如何0基础学开发。

一言不合，他就问了我一个很尖锐的问题：鸡叔，APP没有动效，就真的不行吗？我把功能实现了就好啊。

他的这种“开发至上”，猛然一听，有道理。
但事实真的如此吗？

我打开了支付宝，首页的广告banner在轮播。
他说，广告不算。


我打开好奇心日报，随便点击一篇文章，2G网速度，让LOGO加载动画播了好几轮。
他说，加载动画不算。


OK，我又打开陌陌，进入陌陌的新功能“点点”，各种滑动，美女乱飞，聊天气泡和橡皮筋一样被拉断。
他说，行吧，看来还是有用。
约炮神器就是有说服力！


其实“开发至上”固然重要，毕竟没有开发者们的支持，我们这些设计师们的确啥都干不成。

但好开发不等于好产品。
经过归纳和总结，我可以说，好产品都有如下三个特点：美观，易用，满足人们特定需求。

而动效这个东西，跟这三个特点都沾边。

更何况，动效还有三个挺重要的意义，来自伟大的IOS设计规范：


· 传达状态和提供反馈


· 帮助人们可视化他们的操作结果


· 增强直接操作的感觉


SO，这是动效存在的原因。

动效与用户体验

动效，Motion也好，Animation也罢，无所谓了，大家随便叫。
说起动效，我们就会很自然的联想到一些词组：空间与时间，功能/意义/美观的结合，平滑，过度等等。
所以说其实动效/动画还是个挺大的概念，而我们在UI设计方面需要使用的，只是其中的一小部分。
如果你能合理的利用这些设计元素，就可以提升用户体验。


今天我不介绍工具，不写代码教程，咱们来谈点形而上的东西：

比如，动效是如何提升用户体验的，我们要注意什么。

基于设计而动


动效就是在给用户讲故事。它需要告诉用户，我们的产品是如何构架的，有什么作用。

有了动效之后，整个UI界面就活了，可以导航，可以交互，可以让用户更好更深的去体验你的产品。

当你在点击按钮触碰屏幕的时候，精心设计过的动效就会带着你，了解关于产品设计的一切故事。cool。

为什么动效开始变得重要

当用户开始接触你的产品时，他们可能会问出一连串的问题:


·  什么是主要功能的？
·  我怎么才能进行下一步操作？
·  我如何才算是完成自己的操作？


面对这一类问题，正好给了动效施展拳脚的机会，回答用户问题的同时，提升用户体验。


·  动效可以吸引和暗示用户，从而让他们知道，那些很重要，自己的操作会带来怎样的结果。
   比如，微信右上角弹红圈，你就知道有人在呼唤你。


·  动效也可以帮你熟悉用户界面，在视图切换的过程中，提供视觉引导，提示人们操作完成。
   比如，A页面进入B页面，有了动效的帮助，你就很快的会知道，如何从B页面返回A页面


·  动效可以满足人们的视觉需求。

动效设计和用户体验，需要注意的小环节

动效的存在，使得交互变得更好用，更易懂。我们在已有设计元素的基础上，可以做出更多的设计，比如变换，人物动画，甚至一些3D效果。


动效设计的重点在于：不要做一些特别奇怪的东西，分散了用户的注意力，导致用户中断了他们想做的事情。


体验一、吸引用户的注意力

动效既可以将用户的注意力吸引到某一个区域，也可以扰乱用户关注，让用户注意其他地方。

好的动效设计，会使得用户界面变得可预测，易导航。

使用者们将会知道，那些元素会出现，哪些元素会消失，即将发生那些事情。

本图来自追波，你会发现你的注意很快被吸走了对吧？

体验二、感知，空间，逻辑

在用户界面的状态切换这个环节上，很多时候我们会使用系统默认的，瞬切的方式，直接进行页面切换。
这的确在开发上省了事，但却会造成使用者，在认知流程方面出现困难。


比如点击A按钮，A界面从左到右划出。点击B界面，A界面从又到左归位。
这样大家就很容易感知。


如果都是瞬切，就没那么容易形成认知流程。认知学上管这个叫——变化盲区，即视觉上突然出现强刺激的时候，人们是无法进行分析的。因为真实生活里几乎不存在，瞬切状态。


举例来说：一个按钮突然消失，一个按钮突然出现。这就是瞬切。


我相信大家都有过类似的经历：打开一个新界面，发现某个按钮A没了，于是开始寻找按钮A。


变化盲区了吧？


用户是需要了解，元素从哪里来，会在哪消失，瞬切就不是个好选择了，对吧。

动效可以对屏幕和元素之间的空间关系做出解释，从而填补认知上的空白。它可以帮助人们熟悉用户界面，
定义自身状态，建立视觉关系。在下面的示例中，在过渡期间，用户将被引导到下一个视图，并将表面转换为通信层次结构：

本图来自追波，登陆与转化的关系，动态协助一举完成。不过开发者很难写出来。

体验三、增强操作性和预见性

动效可以加强操作的可预见性。每一个按钮和每次触屏，都有可能用到动效。

让动态设计和视觉设计互相辉映，提升用户参与度和乐趣性。

比如，我们来看看IOS是如何做出错误提示的：




乍看，这个摇晃的错误提示动画，似乎要比显示Passward Error来的麻烦。

但实际上呢？当晃动一出现，我们 立刻就知道，密码输错了，了解到问题所在。

于是，我们会认真的输入密码，避免下次的错误。

体验四、愉悦用户

动效可以让你的用户体验真正令人愉快甚至是难忘。

作为一个设计师，你应该将自己的一些理念融入设计之中，使你的动效设计独具一格，让人过目难忘。

如果你能将你的理念，注入微妙的动效到设计中，你可以让用户觉得他们是在用一个非常有个性的产品！

本图来自Google搜索，翻页骑车很酷

结语

其实动效还是蛮有用的，当然这对开发者而言也是个挺头疼的事情。

所以啦，大家有空可以学学开发，提升自己，帮助他人。
如果我们能够做出有趣而符合逻辑的动效，产品体验固然会提升。用户就不会抱怨页面设计呆板，产品体验 过程枯燥了。
给动效一些投入，或许会有更多的惊喜。

粉红色的鸡叔