前言

动效设计在互联网产品的设计中经常可见，通过元素的动态效果，起到吸引用户注意、引导用户操作，减少用户焦虑等作用。本文主要阐述动效设计的作用、分类及原则。

1动效设计的作用

对「用户而言」动效的作用有以下几点：

便于用户理解，减少认知成本；

提升用户体验，增强用户操纵感、带入感；

操作及时反馈，减少用户等待的焦虑感、失落感

形成用户与界面的互动；

对「产品而言」动效作用有以下几点：

清晰的表达产品层级关系，使界面间衔接更自然；

营造视觉焦点，引导用户操作；

提升产品易用性，增加用户黏性；

为产品注入活力，提升品质和竞争力。

举例如下

吸引用户注意力

通过界面元素的动效设计，聚焦用户视线，降低其他视觉元素的干扰，吸引用户眼球。

比如：淘宝首页的图片轮播效果、虎课网的动态logo设计、密码输入错误的动态提醒、以及动态表情包等等

引导作用

动效指导用户对产品功能、位置、方向、操作、路径等进行暗示和指导用户操作。

比如：手机滑动解锁、游戏中的动态引导、初次登录APP指导等

提高反馈减少用户焦虑

了解当前所处状态、对用户平移、放大、缩小、删除等作出反馈。

比如：拖动文件移动、网页放大、微信聊天记录删除、网页刷新进度条提醒，视频播放与暂停按钮的变化等。

层级展示

通过焦点缩放、覆盖、滑动等动效帮助用户构建空间感，结构感。

比如：文件夹、苹果手机的页面删除、QQ设置弹窗等

增强页面流程度及用户操作

通过界面及其袁术的出现消失，以及大小、位置、透明度的变化对现实世界的模拟，增强用户对产品的流畅感、操纵感和带入感。

比如：微信读书滑动翻页、微信的摇一摇，APP删除等

2动效的分类

动效设计是交互设计的一种，从不同的维度划分有不同的分类，从元素移动的角度可以分为缩放类、移动类、覆盖类、缓冲类、视差类等；从产品动效形式的角度可以分为界面动效、提示动效、图标动效、加载动效；从动效属性上可以分为被动触发和主动显示。

从产品的动效形式进行分类：

界面动效

当页面换转时，界面的交互通过动效的作用可以帮助用户理解产品的框架结构和层级关系，给用户缓冲的认知时间，提升界面之间的关联性。

比如：QQ设置页面的跳转、微信主菜单点击的变化等等。

提示动效

通过元素颜色、性质、透明度等变化来提醒或引导用户操作的动效。

比如：微信来消息后的提醒，下载新APP的操作提醒、游戏界面的操作提醒、点击关注后的按钮变化等。

加载动效

主要是指向用户传递产品运行的状态，如页面之间的跳转不能及时展现信息，而帮助产品传递状态，增加用户预期，降低焦虑的负面情绪。

比如：APP打开过程中的logo动效、下载进度条、页面加载条等

图标动效

产品内部图标的变化而生成的动效，主要应用在用户行为触发的状态切换，帮助用户理解操作行为产生的意义，并且引导用户继续后续的操作，使整个流程传递趣味性，增加产品的人性化。

比如：视频音乐等暂停与播放的动效，微信主菜单按钮点击的颜色变化等。

从动效属性上进行分类：

被动触发

通过用户对产品功能按钮的点击，而触发产品元素形状、颜色、透明度等变化产生的动效来反馈产品信息，提升产品的趣味性和用户的愉悦感。

主动显示

产品在加载的过程中或者是产品自身状态发生变化时，通过动效引起用户的注意，传递产品信息。

备注：不同的维度动效分类也不同，以上只是基于本人实际工作及观察的动效基础分类。

3动效设计原则

产品的设计是以用户为中心的设计，同样动效设计的目的也是为了使用户更好的使用产品、理解产品。其设计的基础原则同样也是以用户为中心。

有度的动效设计

动效设计的不是为了产品的酷炫而设计，而是基于用户更好的使用产品而设计。

不增加用户操作

不干扰用户对产品的使用

动效设计不易时间过长，引起用户焦虑。

不卡、不跳、不闪的动效设计

动效设计是为了提高用户的使用体验，产品的动效设计要考虑用户的使用设备、实现效果等。最好的动效设计如果不能给用户带来良好的使用体验，给大众用户带来负面体验，宁愿不要动效也不能牺牲用户。

自然的动效设计

符合人类对自然的认知，根据不同的产品或功能特点，动效设计要符合先慢后快、先快后慢、或者匀速等规律。例如下载进度条的设计其实与真实的后台下载速度并不相同，而是采取先慢后快的动效设计，给用户一种下载自然的感觉。

整体编排、循序渐进的动效设计

1个好的启动页，0—2个细节动效，不多于6个的指导动效是绝大多数互联网产品动效设计的基本原则（123原则）

一个启动页给用户传递产品的品牌价值与情怀

不多于两个的细节动效，给用户以惊喜，提高产品趣味

不多于六个的指导动效，用以指导产品说明。

作者：职惑产品
链接：https://www.jianshu.com/p/66dfcd315320