动效/动画让HMI设计事半功倍【上篇】

今天我们就来分享一下一个优秀的动效应该具备哪些因素。

➤加载动画可以缓解用户等待的烦躁情绪，同时传递品牌调性和品牌理念

➤应用加载过程中，动画吸引人们视觉的跟随，可以降低用户对时间的敏感度

➤相对于静态页面，动画更容易被眼睛捕捉，利用这个特性，可从另一维度吸引用户的注意力

➤吸引注意力维度因素包括：颜色、大小、粗细、间距、材质、空间

➤通过动态效果使主体更加富有生命力，达到身临其境的目的，愉悦用户

➤提醒用户当前所处状态：当页面表达信息过多时，短时间内视觉上难以分辨主次，通过动效这种表达方式，让用户在第一时间感知重要信息

如上所述，既然动效作用如此之大，那怎样的动效设计才能被称之为优秀的设计呢？一个好的动效设计不仅仅要有酷炫的画面，更应具备现实意义。简单来讲，好的动效设计应符合以下三个方面的价值。

我们生活在一个物理世界，任何事物的运动都是符合物理世界的客观规律的。因此，人对于事物的观察和理解都是基于对物理规律的理解。而虚拟界面上的元素都是在现实世界中不存在的，会让用户产生陌生感。通过合理的动效设计，即虚拟界面对物理世界规律的模拟，如惯性、视差等等，从而实现虚拟界面与物理世界的交集。用户会把自己对物理世界的认知映射到产品的认知层面。

下面举两个例子来说说具体是怎么映射的。

物体都拥有质量，而质量带来了我们最常见的物理现象：惯性。在这个例子中、光照在汽车上一扫而过，通过界面上的加速、减速、过冲等动态来模拟所谓的重量感，让简单的界面元素有了真实感。

事实上，我们所处的世界是三维立体的，而受显示设备的影响，目前大家所能接触到的人机界面还是停留在二维平面，如何通过一个二维平面来模拟三维世界呢？在这个例子中，界面的变化是依附于场景的变化。通过视差的效果，使得整个屏幕有纵深感，而不再是一个简单的二维平面，我们很容易就能感受到场景的层叠顺序。同理可得，类似简单的动效也可以轻松表达出元素的层级。

因此，合理的动效可以满足用户的心理预期，越是符合人对物理世界认知的设计，就越容易帮助用户去预判或理解产品的交互逻辑。

如把上图中界面所有元素按照明显程度来排序，显而易见我们会得到这样一个顺序：动态 > 色彩 > 明度。所以通过合理的动效设计，可以降低抓取用户注意力的成本，并且让用户关注到设计本身想要传递的信息。

在这个例子中，两边的表盘在转动的时候，除了指针转动以外，还会有烟雾和光感的变化，使原本简约的界面增加了活性，同时又没有干扰整个页面的主功能。

情感化设计的目标是让用户接触和使用产品的过程中，激发用户正面、积极的情感，如愉快，信任，满足；避免用户产生负面情绪，如失望、挫折以及痛苦。正面的情感会使用户更乐于使用产品，当遇到使用过程的一些小问题时，也更加容易包容。

优秀的界面动效设计可以打磨产品的品质。如上图所示，动效在情感化设计中的优秀案例。车辆在行驶过程中，如有车辆靠近时，雷达显示的同时，还伴有水波纹动画效果。雷达的控制点会根据靠近车辆的位置不同，而产生变化，这些丰富的细节会让用户对产品产生一个正面的情感关联，而这种关联最终将赢得用户对产品的认同。

以上为本次HMI动效/动画设计案例分享的全部内容，更多精彩内容请继续关注我们。

以下视频为文中HMI设计效果高清版，感兴趣的读者可点击观看。