UI界面动效最常见的6种类型展示，深入了解动效设计

2018-10-09 本文已影响3人 UI设计师王晓庆

众所周知，UI设计师若只追求静态像素的完美呈现，而忽略动态过程的合理表达，会导致用户不能在视觉上觉察元素的连续变化，进而很难对新旧状态的更替有清晰的感知。动效是UI设计项目的最后一个步骤，所以也是最关键的能给一套设计作品，注入灵魂。

所以，UI设计师必须通过「时间点」和「空间幅度」的设计为用户建立运动的可信度，即视觉上的真实感，当用户意识到这个动作是合理的，才能更加清晰愉悦地使用产品。

很多人其实不太了解动效设计是什么，其实呢简单理解就是，从一个界面点击跳转到另外一个界面出现的动画变化的效果就是所谓的动效设计，这是在视觉界面之上给用户提供的一种另外的视觉观感。（如上图的效果）

UI设计中，动效设计其实可以是一个单独的职业，具体看用人单位，以及用人单位的需求，比如说互联网公司的设计团队，一般UI层面的动效都不会太难，UI 不需要太炫的动效，所以可能会让UI/视觉给兼顾了。

还有一些是专门的UI设计公司或者工作室，先说专门的设计公司：虽然UI上动效不会太炫，但是项目多，需求比较杂，必须要一专人来负责动效；

而工作室，或者小型公司，更多的是UI/视觉/动效都是兼顾了的，所以每一个优秀的UI设计师，都应该要学习懂得UI项目中的所以流程。

下面就是我想要跟大家分享的6种最常见的UI界面动效展示效果。同时附上每一种界面动效设计的案例给大家欣赏，以便于更加清晰的对这一种界面动效的认识。

1、转场过渡

人脑灰质会对动态事物（如：移动、形变、色变等）保持敏感。在界面中加入一些平滑舒适的过渡效果，不仅能让界面显得生动，更能帮助用户理解界面前后变化的逻辑关系。

2、层级展示

现实空间里，物体存在近大远小原则，运动则会近快远慢。当界面中的元素存在不同层级时，恰当的动效可以帮助用户理清前后位置关系，以动效来体现整个系统的空间感。

3、空间扩展

在移动端界面设计中，由于有限的屏幕空间难以承载大量的信息内容，可以通过折叠、翻转、缩放等形式拓展附加内容的存储空间，以渐进展示的方式来减轻用户的认知负担。

4、聚焦关注

聚焦关注是通过元素的动作变化，提醒用户关注特点的内容信息。这种提醒方式不仅可以降低视觉元素的干扰，使界面更清爽简洁，还能在用户使用过程中，轻盈自然地吸引用户注意力。

5、内容呈现

界面内容元素按照一定的秩序规律逐级呈现，引导用户视觉焦点走向，帮助用户更好地感知页面布局、层级结构和重点内容，同时也能让整个流程更加丰富流畅，增添了界面的活力。

6、操作反馈

无论是点击、长按、拖拽、滑动等交互行为，都应该得到系统的即时反馈，将其以视觉或动效的方式展现，帮助用户了解当前系统对交互过程的响应情况，为用户带来安全感。

最后，培养UI设计师的界面动效设计能力，可以大大提高UI产品的友好度、也是提升UI设计师自身技能和设计修养的表现。

通过友好的UI动效设计案例可以降低沟通成本和打造核心竞争力，这方面我们VIP课程也会重点讲解界面动效，帮助大家成为更优秀的UI设计师，如果你是零基础也能帮助你迅速成为UI设计师。