UI设计动效需掌握的要素
发布时间：2019-06-10 11:47:10 已帮助：776人 来源：北京AAA教育
UI动效越来越火，备受大家的青睐，那么什么样的动效设计才算是优秀的，才更符合用户体验呢？该怎样进行UI动效设计呢？本文为大家找来了UI设计动效需掌握的要素介绍，一起来学习下吧。
Saffer(2013)提出使用动效存在下列6个目的：
1、吸引用户注意力在指定区域
2、表现对象和用户操作间的关系
3、维持多窗口或多状态的上下文关系
4、提供持续性事件的认知感
5、创造虚拟空间引导用户在状态和功能间转化
6、创造沉浸感和趣味性
场景UI四项作用：
1、支持微交互
2、显示运动过程
3、解释
4、装饰
Google的Material Design(2017),提出在MD中、动效用来描述空间关系、功能、富有美感和流动性的目标。
动效显示APP是如何组织的以及它能够做什么、具体如下：
1、引导窗口切换
2、提示用户接下来发生的事
3、对象间的层级感和空间感
4、减缓用户对等待事件的认知
5、美感和个性化
综上、笔者总结了交互动效的使用目的,SAFRI、游猎法则
1.State
告诉用户对象和窗口的状态是如何变化的
当界面中对象状态需要发生变化时、可以用动效展示变化的过程、让用户更清楚的感知到该变化。相应的、当窗口发生变化时、可以用动效更清楚展示窗口是如何从一个状态转变到另一个状态的。
2.Attention
吸引用户注意力、告诉用户做什么
当你想让用户关注某一个区域、或执行某一个操作时、可以通过动效吸引他们的注意力。当用户需要执行操作时、注意UI和动效的结合要能告知用户需要进行的操作。
3.Feedback
告诉用户操作和对象间的关系
当用户执行了某一操作后、动效是一个非常好用的反馈机制。通过动效的适当运用、用户可以清晰感知到自己操作的反馈、让用户知道自己做了什么。
4.Relief
缓解用户对应用处理速度的感知
当应用执行一个长时间操作时、可以用动效缓解用户对时间的感知、甚至创建一个假的动效效果（其实应用并不用处理这么长时间）。当下许多APP下拉时的加载动效运用的便是该原理。对于用户、他们关注的是感受到的速度、而不是应用实际消耗的速度。
5.Individuation
让产品更有趣和个性
为了让产品更有趣味性、可以在某些场合适当运用动效创造一些让人愉悦的动画效果。两点是笔者觉得需要注意的、一是动效时间要足够短、二是动效要足够流畅。
需要说明的是、这些目的不是独立存在的。设计师可以运用其中任意几条去设计一个动效。比如、两个窗口间的切换动效不仅吸引了用户的注意力、告诉用户面板在切换了。而且还告诉用户两个面板的位置和空间关系、上下、左右还是前后。
新媒体运营培训
原画设计培训
产品经理培训
大数据分析培训
UI交互设计培训