2. 引导用户注意力

如果把一个界面上的所有元素，按照明显程度来排序，显而易见我们会得到这样一个顺序：动态 > 色彩 > 明度。

所以通过合理的动效，可以低成本的抓取人的注意力，让他们关注设计师想让他们关注的东西。

网易新闻的刷新动画，就是一个很优秀的例子：

在这个例子中，左上角有一个非常简单的白色线状 icon，并不会干扰整个页面的主功能，颜色，以及视觉。但是通过小的动画，提升了 icon 的视觉层级。让我们很容易注意到它，起到了非常好的提示效果。

3. 情感化设计

情感话设计的目标是在用户接触和使用产品的过程中，激发用户的正向情感，比如愉快，信任，满足；避免用户产生负向情感，比如失望，挫折感，痛苦。正向的情感会使用户更乐于使用产品，遇到使用过程的一些小问题也更加包容。

而优良的界面动效可以打磨产品的品质感，下面就是动效在情感化设计中的优秀例子：

twitter 点赞后，心会亮起的同时，还有一个小小的礼花效果。虽然完全没必要加上这个礼花效果，但是这种丰富的细节会让用户对产品产生一个正向的情感关联，而这种关联最终将赢得用户对产品的认同。

Facebook 点赞之后，可以表达你的态度，比如流泪，愤怒或者是赞。虽然在功能上来说，这些表情有静态的就可以了。但是正是动画中丰富的表情细节，进一步引导用户愿意去表态。不仅给人以惊喜，也显著的提升表态的使用量。

动效的价值就讲到这里，接下来，基于以上三点，我会说一说怎样去构建一个合理高效的动效体系。

二、优秀的界面动效体系

优秀的界面动效体系符合以下四点原则：

• 通过动效暗示二维界面暗含的三维层级关系，及其暗含的操作逻辑。

• 引导用户的注意力向界面重点元素。

• 通过动态设计让情感化设计变得更生动。

• 动效的视觉效果统一，控制数量，不滥用。

接下来用 iOS 系统动效来举例子，众所周知 iOS 的动效系统经过了多次的迭代，已经做的非常完美，而上述四点，在接下来的例子中都有体现。

层级暗示

切换界面的时候，所有打开的 APP 界面覆盖在刚才的主界面上面，同时主界面模糊，内容区域的缩小，共同营造出原来界面往深处后退的效果。很直观的表达了主界面和 APP 界面的层级关系。

在键盘机的时代，通过菜单进入一个新页面的时候，通常做法是整个页面刷新一下，但是这样操作久了，打开菜单太多，很容易让人有一种「迷路」的困惑。在这个动画中，通过界面的左滑、右滑来表达不同界面之间的层级关系。即使看不到主菜单，你也知道自己是从哪儿进来的。

操作暗示

在这个例子中，长按一个 图标进入编辑模式，所有图标都会开始晃动。虽然整个页面并没有任何文字提示说明「现在图标可以拖动的」，但是这种抖动的不稳定感很直观的表达了设计者的意图。

当输入密码错误的时候，密码输入栏会显示出一个摇头的效果。完全可以想象，假设用一个错误提示的弹窗，不仅会中断用户的操作流程，引起人的反感，而且很容易让人受挫。通过动效，设计者用一种更友好简单的方式达到了提示的目的。

趣味

这里是开关状态的过度，我们可以看到月亮会有盈亏，锁的状态有锁上和开启两种。这些有趣味的细节动效给用户带来惊喜，提升界面的品质。

克制

举了那么多正面例子，下面也说两个反例。这两张图都是我在 dribbble 找到的点赞量非常高的图。但是实际上，完全不推荐在产品中使用这样的效果。

动效不能滥用，控制数量。在这页面中，所有东西都在动。很难让人抓住视觉重心。当菜单栏下滑的时候，每一个菜单都会有一个抖动的效果。我们并不知道这个菜单为什么要这样颤，看起来作者只是为了炫技这么做，实际上并没有传达任何的内容，还会无形的增加了用户的操作负担。

好的动效要控制在0.3~0. 5 秒，本例中，菜单出现几乎花费了一秒。频繁打开菜单很容易引起人的疲倦，可以说是画蛇添足了。

小结

上篇就讲到这里，本篇里面我们了解了界面动效的价值：

• 满足用户心理预期

• 引导用户注意力

• 情感化设计

也接触到一下优秀的界面动效实例：

• 通过动效暗示二维界面暗含的三维层级关系，及其暗含的操作逻辑。

• 引导用户的注意力向界面重点元素。

• 通过动态设计让情感化设计变得更生动。

• 动效的视觉效果统一，控制数量，不滥用。