火星网校
实用干货！UI界面中常见的动效类型解析
当我们在完成一个Demo动效的时候，通常我们就对照着参考样式做出来就好，但互联网产品的动效和一般意义上的动效会有很大区别。
我们需要动态的合理表达，让我们的设计作品在“时间”和“空间”中让用户产生视觉上的真实感，当用户意识到这个动作是合理的，才能更清晰愉悦的使用我们的产品。才能为我们的产品在设计和体验中创造更多的价值。所以不同的使用场景决定了我们需要用不同的方式来表现对应的内容。
总结出来，大致可以分为这样的一些类别：
1.品牌演绎
针对不同品牌的风格和特点，有针对性的结合产品、场景、服务和空间转换等元素，唤醒用户的情绪，更好的呈现品牌故事。而品牌形象或者拟人化等角度出发，对品牌进行有效的宣传和表现，可以提高公司的专业性。从而提高品牌的识别度，给人留下令人愉悦的第一印象。这些内容可以普遍应用于社交网络、企业网站、演示和发布促销视频等方面。
2.产品界面内的交互动效
层级展示
当界面中的元素存在不同层级时，合理的动效可以帮助用户理解清楚页面中元素的前后关系位置，提升整个页面的空间感。
空间表现
当一个产品在某个页面中，需要去承载大量的信息内容时，就可以通过这种折叠翻转或者是缩放的形式，渐进展示其中的内容，来降低用户的学习成本。其中也包括页面内的刷新和加载，从优先级的角度对同类的内容进行折叠，当用户对某一部分感兴趣时，只需要滑动屏幕，就可以得到同类的更新的更多内容。
聚焦关注
部分页面中，我们可以通过元素的动作变化，提醒用户需要去特别注意的一些信息内容，这种提醒方式可以降低视觉元素的干扰，很轻松的就能让用户的注意力集中在我们想让他关注的元素中。而这里大部分都是针对某一个功能而言。
比如当前页面中通过元素的缩放位移等，我们成功的注意到了它们。
内容展示
我们在做内容展示的时候，通常会按照优先级对相关元素或功能进行逐级展示，引导用户视觉焦点，帮助用户更好的认知页面中的布局，层级和展示重点，同时也能够让页面变得生动活泼。
当我们使用动态的数值变化时，用户会觉得自己与这些数值是有关联的。让用户感知到自己可能有能力影响到数据，提升了参与活动的意愿。反之，如果这些值是静态的，就感觉与现实的联系会减少。
控件动画
不同于我们额外安装的第三方软件，在系统中，为了更好的突出强调系统的流畅，针对系统中的部分操作，我们会在“提示条、导航切换、分享或选择”等这类控件转场时的流畅度进行优化，从而保证用户能清晰的知道操作的流程。简单有规则的“出现-消失，出现-操作-消失”即可。
细节展示
当我们在阅读或查看视频或文章时，会用点赞的方式进行内容的鼓励，其中，包括持续点赞和单次点赞。
3.产品界面间的交互动效
页面间的层级跳转或场景切换，能够帮助用户更好地去理解界面间的变化和功能层级之间的关系，可以避免因瞬间切换导致用户产生突兀或阻断信息的感觉。
能够让用户在页面切换中有一个心理的预期，看到内容的变化（新增或删减）的同时还保证了舒适和流畅，而经常使用的方式有缩放不透明度旋转等。
总结：
在了解了上述分类后，我们会发现表现形式和方法并不唯一，但从以上的分类中，可见动效的表现形式可以依据场景的变化做出不同的个性化的表现，但不变的是最终的输出都依托于需求，所以我们需要站在更长远的角度去了解一个动效需求，合理的解读才能更好的展示。
来源：视觉半径公众号
作者：张瑞岩
上一篇 设计师必备配色小技巧
-
2014期学员黄雨婷作品
-
2103期学员沈继龙作品
-
2105期学员秦洋洋作品
-
2108期学员陆昶存作品
-
2107期学员赵锦威作品
-
2104期学员胡婷婷作品
-
2107期学员何亮作品
-
2103期学员张子安作品
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
作为一个企业，在互联网上建立自己的网站，最显而易见的目的就是可以向世界展示自己的企业风采，让更多人了解自己的企业，使企业能够在......
-
当下，有很多年轻人是通过网络来进行学习的，这在一定程度上，催生了很多网络教育平台。然而，随着教育平台如雨后春笋般冒了出来，在挑......
-
如今的PS，在我们的生活中可以说是无处不在了，作为专业的图像处理软件，PS不仅能让你更对已有的位图图像进行编辑加工处理以及运用......
-
学习编程是一件需要耐心和精力的事情，因为编程是一个需要在遇到问题的时候，提出猜想，进行调试，排除一些可能性的。那么，什么样的人......
-
编程是一个大热的行业，现在想学习编程的同学太多了，选择去哪里进行学习编程已经成为了很多同学所考虑的问题。目前市场上有很多学习编......
-
Premiere提供了采集、剪辑、调色、美化音频、字幕添加、输出、DVD刻录的一整套流程，今天我们来聊一聊新手经常遇到的问题，......