实用干货！UI界面中常见的动效类型解析

当我们在完成一个Demo动效的时候，通常我们就对照着参考样式做出来就好，但互联网产品的动效和一般意义上的动效会有很大区别。

我们需要动态的合理表达，让我们的设计作品在“时间”和“空间”中让用户产生视觉上的真实感，当用户意识到这个动作是合理的，才能更清晰愉悦的使用我们的产品。才能为我们的产品在设计和体验中创造更多的价值。所以不同的使用场景决定了我们需要用不同的方式来表现对应的内容。

总结出来，大致可以分为这样的一些类别：

1.品牌演绎

针对不同品牌的风格和特点，有针对性的结合产品、场景、服务和空间转换等元素，唤醒用户的情绪，更好的呈现品牌故事。而品牌形象或者拟人化等角度出发，对品牌进行有效的宣传和表现，可以提高公司的专业性。从而提高品牌的识别度，给人留下令人愉悦的第一印象。这些内容可以普遍应用于社交网络、企业网站、演示和发布促销视频等方面。

2.产品界面内的交互动效

层级展示

当界面中的元素存在不同层级时，合理的动效可以帮助用户理解清楚页面中元素的前后关系位置，提升整个页面的空间感。

空间表现

当一个产品在某个页面中，需要去承载大量的信息内容时，就可以通过这种折叠翻转或者是缩放的形式，渐进展示其中的内容，来降低用户的学习成本。其中也包括页面内的刷新和加载，从优先级的角度对同类的内容进行折叠，当用户对某一部分感兴趣时，只需要滑动屏幕，就可以得到同类的更新的更多内容。

聚焦关注

部分页面中，我们可以通过元素的动作变化，提醒用户需要去特别注意的一些信息内容，这种提醒方式可以降低视觉元素的干扰，很轻松的就能让用户的注意力集中在我们想让他关注的元素中。而这里大部分都是针对某一个功能而言。

比如当前页面中通过元素的缩放位移等，我们成功的注意到了它们。

内容展示

我们在做内容展示的时候，通常会按照优先级对相关元素或功能进行逐级展示，引导用户视觉焦点，帮助用户更好的认知页面中的布局，层级和展示重点，同时也能够让页面变得生动活泼。

当我们使用动态的数值变化时，用户会觉得自己与这些数值是有关联的。让用户感知到自己可能有能力影响到数据，提升了参与活动的意愿。反之，如果这些值是静态的，就感觉与现实的联系会减少。

控件动画

不同于我们额外安装的第三方软件，在系统中，为了更好的突出强调系统的流畅，针对系统中的部分操作，我们会在“提示条、导航切换、分享或选择”等这类控件转场时的流畅度进行优化，从而保证用户能清晰的知道操作的流程。简单有规则的“出现-消失，出现-操作-消失”即可。

细节展示

当我们在阅读或查看视频或文章时，会用点赞的方式进行内容的鼓励，其中，包括持续点赞和单次点赞。

3.产品界面间的交互动效

页面间的层级跳转或场景切换，能够帮助用户更好地去理解界面间的变化和功能层级之间的关系，可以避免因瞬间切换导致用户产生突兀或阻断信息的感觉。

能够让用户在页面切换中有一个心理的预期，看到内容的变化（新增或删减）的同时还保证了舒适和流畅，而经常使用的方式有缩放不透明度旋转等。

总结：

在了解了上述分类后，我们会发现表现形式和方法并不唯一，但从以上的分类中，可见动效的表现形式可以依据场景的变化做出不同的个性化的表现，但不变的是最终的输出都依托于需求，所以我们需要站在更长远的角度去了解一个动效需求，合理的解读才能更好的展示。

来源：视觉半径公众号

作者：张瑞岩