动效也能讲“故事”

首先来说MG动效和传统动画的区别：
虽然他们都是动态化表现，但是在传统动画领域，通常是需要有一个主线故事的。通过塑造不同角色，从而来讲述好这段故事。而MG动效则是通过图形和文字的动态化表现，去传递一段信息或者是一种情感。在MG动画中故事是被弱化的，动画角色也不会是重点。因为他们都是需要为信息或者情感服务的。所以传递的信息和情感才是重点。

1 设计的本质是解决问题，动效设计也不例外

我们都知道，动画效果通常被大家认为是可以改善用户体验提高业务目标的一种方式和手段。
但我们应该怎么更近一步，在解决问题的同时用动画的方式再创造出一种情感和氛围的表达。
尝试用动画去讲一个故事。

2 业务 用户

我们在开始动效的“叙事” 之前，应该先清楚动效设计的价值所在，不只是出于对「吸睛」去盲目的追求一些效果。而是要先满足 “业务诉求” 和“用户诉求” 。

前期我们要分别从商业目标和体验目标两个角度去构思动效该如何设计。
其实两者很多时候都是相辅相成的嘛，很多因素也都是互为因果的关系。

比如明确层级关系 就会减少用户的理解成本；引导操作就会增加点击和易用性//操纵感等等。
还有就不一一列举了。

3 提升故事性

在前期动效构思制作好分镜解决了基础的问题后，就可以开始思考 尝试一些创意来增加产品的故事性了。
以简单的方式去表达一个故事，将一个 ‘复杂的概念，用简单的叙事逻辑，将事件在整个体验路径中都联系在一起。
在不同的环节 / 转场 / 状态的变化，都起到承上启下的作用。
让整个事件理解起来都是线性的，更好的’帮助用户/ 清晰的明白 / 当前处在一个什么样的状态。

3. 叙事通常有几个要点

文字叙事通常有这几个要点。
我们在动效设计的时候也可以利用这几点去反推在哪些环节上需要在动效上丰富一些表达。
这里我用一个平常工作中的项目来举例。

1 描述情境和背景

第一个就是情景，这里可以审视下我们是否交代清楚了当前概念的背景和环境。
让用户可以带入到情境中，为下一步的操作反馈提供一定的预期。

比如在「神秘心愿」的界面里，因为前期设计是星系的概念，所以在这里就会增加一些元素先营造出一种氛围。
像在轨道上增加了些发光，背景的星空，气泡的悬浮等等的效果。
都可以让用户更好的代入到这个场景中，为承接下一步的动画做好铺垫。

2 细节

细节顾名思义就是想办法增加一点点细节。来配合动画更加贴近主题。来解释这个概念
这里的操作按钮是许愿，所以在许愿这个点上可以和星系结合起来，让两个概念可以更好的联系起来。
从而让点击后的反馈能与许愿预期的效果更加一致。那大家听到 “许愿” 这个词都会联想到什么画面或者意向嘛？

嗯 我第一时间想到的是“阿拉丁神灯”从壶嘴里飘散出来的烟雾。

而星系中又恰好有一种由稀薄气体或尘埃构成的天体-叫星云。可以和两者结合起来。让点亮星系这个概念更加生动。
所以在动效的设计上采用烟雾和星星的元素，以环绕的形式从许愿按钮出发，包围整个星系。
将两个状态串联起来。

3 悬念 - 最终点亮的的蓄力过程。

故事里的悬念可能会保留，通常在故事结尾揭晓。不过在动效设计上要兼顾效率，同时又希望保留一点悬念。
所以这里的时间其实和点亮的动画‘’‘’几乎同时。点亮星系后就立刻触发蓄力的动作。让两者衔接上有一定的节奏感。

4 画面感
这里的画面感通常是要整体的看，在二维空间中模拟三维空间中的运动，通过大小对比强化透视等增加画面的深度。
比如前面看到的星轨透视呀 星系的明暗 气泡的大小等等。

5 情感

在获得后通过动效增加许愿后点亮的概念，让整个流程在许愿结束后会有一个获得感的正向反馈。
所以最后通过这些节点来帮助完善动画的细节，将步骤和步骤，场景与场景之间连接起来的，借助动画，帮助用户将故事串联起来，顺畅地完成整个流程。

6. 通过完善这些节点的动画细节，将步骤和步骤，场景与场景之间连接起来的，借助动画，帮助用户将故事的流程串联起来，顺畅地完成整个历程。

• 一些思考

结尾呢 我想再分享一些工作中的思考。在工作中刚接触一个业务时，对业务发展不是很熟悉，对需求的背景和业务方希望达到的目标并没有什么深刻的理解。很多时候不太清楚做的强弱到底在哪一个度，什么度比较适合。那现在做了一些UI 方面的工作和交互上有了一些接触，随着逐渐了解了产品，也对产品整体上的设计有了一点点的思考。慢慢的也更好的了解了在一个项目中不同角色的诉求，动效作为项目上线前的最后一个环节，不管是在前期的设计还是后期的落地还原，都需要在这一环节做一个最后的把关。将不同角色的 诉求连接 整合起来考虑，最后通过动效和视觉设计更好助力产品体验和满足业务方诉求。
但是动效也不是万能的，除去特殊情况，往往很多场景下动效在产品设计中只起到锦上添花的辅助作用，对产品的好坏其实没有决定性的影响。如果过度的动态设计，很容易造成审美疲劳和用户等待的消耗，就像游戏中酷炫的大招，随着频繁的升级，游戏时长的不断增加，到后面你都会发现 更希望这个动画可以快一点结束。更希望快一点拿到奖励或者礼品。所以动效设计前要分清操作的场景，出现是否高频，动画耗时等问题，合理使用动效，就会使效果事半功倍。

最后就想说 动效设计首先是要符合人们的心理预期，比如现实世界中打开窗户会更亮，拉起窗帘会更暗。羽毛是软的，气球是轻的等等等等。符合人们自然的感受就是一个合格的动态设计。

如果对你有帮助请点赞吧～