火星网校
实用干货！UI界面中常见的动效类型解析
当我们在完成一个Demo动效的时候，通常我们就对照着参考样式做出来就好，但互联网产品的动效和一般意义上的动效会有很大区别。
我们需要动态的合理表达，让我们的设计作品在“时间”和“空间”中让用户产生视觉上的真实感，当用户意识到这个动作是合理的，才能更清晰愉悦的使用我们的产品。才能为我们的产品在设计和体验中创造更多的价值。所以不同的使用场景决定了我们需要用不同的方式来表现对应的内容。
总结出来，大致可以分为这样的一些类别：
1.品牌演绎
针对不同品牌的风格和特点，有针对性的结合产品、场景、服务和空间转换等元素，唤醒用户的情绪，更好的呈现品牌故事。而品牌形象或者拟人化等角度出发，对品牌进行有效的宣传和表现，可以提高公司的专业性。从而提高品牌的识别度，给人留下令人愉悦的第一印象。这些内容可以普遍应用于社交网络、企业网站、演示和发布促销视频等方面。
2.产品界面内的交互动效
层级展示
当界面中的元素存在不同层级时，合理的动效可以帮助用户理解清楚页面中元素的前后关系位置，提升整个页面的空间感。
空间表现
当一个产品在某个页面中，需要去承载大量的信息内容时，就可以通过这种折叠翻转或者是缩放的形式，渐进展示其中的内容，来降低用户的学习成本。其中也包括页面内的刷新和加载，从优先级的角度对同类的内容进行折叠，当用户对某一部分感兴趣时，只需要滑动屏幕，就可以得到同类的更新的更多内容。
聚焦关注
部分页面中，我们可以通过元素的动作变化，提醒用户需要去特别注意的一些信息内容，这种提醒方式可以降低视觉元素的干扰，很轻松的就能让用户的注意力集中在我们想让他关注的元素中。而这里大部分都是针对某一个功能而言。
比如当前页面中通过元素的缩放位移等，我们成功的注意到了它们。
内容展示
我们在做内容展示的时候，通常会按照优先级对相关元素或功能进行逐级展示，引导用户视觉焦点，帮助用户更好的认知页面中的布局，层级和展示重点，同时也能够让页面变得生动活泼。
当我们使用动态的数值变化时，用户会觉得自己与这些数值是有关联的。让用户感知到自己可能有能力影响到数据，提升了参与活动的意愿。反之，如果这些值是静态的，就感觉与现实的联系会减少。
控件动画
不同于我们额外安装的第三方软件，在系统中，为了更好的突出强调系统的流畅，针对系统中的部分操作，我们会在“提示条、导航切换、分享或选择”等这类控件转场时的流畅度进行优化，从而保证用户能清晰的知道操作的流程。简单有规则的“出现-消失，出现-操作-消失”即可。
细节展示
当我们在阅读或查看视频或文章时，会用点赞的方式进行内容的鼓励，其中，包括持续点赞和单次点赞。
3.产品界面间的交互动效
页面间的层级跳转或场景切换，能够帮助用户更好地去理解界面间的变化和功能层级之间的关系，可以避免因瞬间切换导致用户产生突兀或阻断信息的感觉。
能够让用户在页面切换中有一个心理的预期，看到内容的变化（新增或删减）的同时还保证了舒适和流畅，而经常使用的方式有缩放不透明度旋转等。
总结：
在了解了上述分类后，我们会发现表现形式和方法并不唯一，但从以上的分类中，可见动效的表现形式可以依据场景的变化做出不同的个性化的表现，但不变的是最终的输出都依托于需求，所以我们需要站在更长远的角度去了解一个动效需求，合理的解读才能更好的展示。
来源：视觉半径公众号
作者：张瑞岩
上一篇 设计师必备配色小技巧
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
每位初学者开始学画画时都会经历很枯燥的阶段，无论是选择那些行业方向都是需要很强的训练量来积累。绘画行业前景还是十分不错的，选择......
-
学习web前端技术，最主要是与时俱进，掌握的技术点能够满足时下企业的用人需求。而想要了解一家培训机构所提供的课程是否新颖，也可......
-
不同学校的价格不同，相同学校不同的课程也是不同的。根据2022年11月的市场价格，在金华学习摄影培训的价格一般在5000元—8......
-
现在金华市婺城区市面上的素描培训机构还是有很多，如果想要学素描，可以去正规的机构进行学习，比如火星时代教育就很不错，具体优势如下。
-
游戏制作是分为三大板块，游戏策划，游戏美术，游戏程序，其中，游戏美术和程序是属于技术方向，是可以通过培训掌握的。不过，市面上的......
-
建筑设计是房地产和城市发展中的一个非常重要的版块，而且随着国内的经济增长，城市化建设需求的提升，近几年，对建筑设计的人才需求叶......