不为动而动！聊聊动态效果在体验设计中的应用

编者按：当我们如火如荼地向图片添加各种动态效果时，我们应该问问自己，这是真的吗？一切都应该有一定程度，动态效果也不例外。现在让我们从“为什么要移动？”“你在哪里移动？”“如何移动？”从这三个方面谈谈我们的想法：

第一，为什么动？

首先，你为什么要搬家？你可能会想到以下原因：

这让我的作品看起来很酷，碉堡！

动态效果会带来流量，帮助我完成KPI！

其他人都这样做了，我必须这样做！

编辑让我这么做！

呵呵，你这么想就结束了。

那么如何衡量一个动态效果是否应该出现呢？我们认为有几个评估标准：

1.这种动效会影响性能吗？

首先，这种动态效果会影响性能吗？这是最重要的。在添加任何动态效果之前，我们应该考虑它是否会影响产品的性能。如果一个非常酷的动态效果会拖累性能，使体验不流畅，我们必须毫不犹豫地切断或简化它。

例子：化身间谍

比如这个例子，这是一个穿越场景的过场动画。随着年份的逆转，各种历史事件出现在背景中，给人一种历历在目的的感觉。考虑到多张图片卡住的可能性，设计师特意降低了每张图片的清晰度，因为内容本身就是老照片的风格，所以这种降低画质的方法增强了画面的真实性。

2.这种动态效果会提高产品的可用性吗？

任何动态效果的出现都必须有明确的目的，可以解决用户在使用过程中的困惑，而不是炫耀技能。简单的炫耀技能只会分散用户的注意力，削弱内容，适得其反。

例子：翻页提示

比如这个滑动提示。不用解释，用户一眼就知道该怎么办。动态效果增加了产品的可用性，所以这种动态效果很有意义！

3.这种动态效果会给你的产品带来独特的气质吗？

这里提到的气质是，动态效果本身将有助于增强用户对产品的认知和情感介绍。相辅相成的动态效果将为您的产品锦上添花，深化您的主题和功能。请注意，它必须与主题相关。牵强的搭配只会让人感到莫名其妙和毫无意义。

例子：人生四时

4. 心理需要

这里提到的心理需求是指创造气氛和场景，如节日、游戏活动和其他产品，需要一些动态效果来满足用户的心理需求。我们都知道，在微信上输入“生日快乐”会导致生日蛋糕掉下来，这比干文本要有趣得多。

例子：一封家书

一封家书，注意看，背景有飘落的雪花，漫天大雪勾起思乡情，对吧，合理，有情有义！

三、怎么动？

好了，说完哪里动，我们现在就来看看怎么动。

1. 模拟基于真实形态

基于真实的动画会让人看起来自然流畅，符合规律，比如物体运动时的加速现象。

例子：Look

注意这个笔画的动作，有快有慢，模拟了写作时开始收笔的节奏感，所以看起来自然真实。

2. 夸张的人物动作

在H5的设计中，经常会出现各种各样的人物形象，夸张的人物动作会生动你的形象，增加兴趣，给用户惊喜。

例子：今年的巴菲特

巴菲特爷爷，动作很亲切。

3. 给元素弹性

弹性物体会让用户感受到生命感和真实性，弹性的程度取决于你对元素软硬度的设定。

例子：拍个大头鬼

三个小鬼一跳一跳，弹性赋予他们顽强的生命力。

4. 蒙太奇

这是一种类似蒙太奇的技术，通过快速切换图片形成一种奇妙的后现代感觉。

例子：传奇硬箱

酷炫，节奏快，提气！

好吧，以上只是一些基本的动态效果技术。事实上，在实际应用中有很多方法。在这里，我建议你可以去看迪士尼和皮克斯的动画，因为动画本身就是一种高度总结动作行为的手段。虽然这些都是电影，但他们使用的手段和理念值得学习和借鉴。注意观察这些牛的作品，你会发现他们的作品充满了分心的细节。

四、结语：

简单地说，当用户打开界面时，注意力首先会被动态物体所吸引，然后将注意力转向颜色对比度强的部分，最后是形状。这个过程是人类在进化过程中形成的本能反应，基本上适用于所有用户。同时，一个非常重要和容易被忽视的原则：用户的注意力有限，而且越来越少。很可能在用户注意到一个动态效果后，注意力和耐心已经耗尽，不能看到下一个界面的其他内容。

因此，对于动态效果这样一个非常强大的工具，必须用于希望用户注意的部分，并仔细抛光。真正做到“不动”。