前言

动效即动态效果（Motion），指用户界面上所有元素运动、变化的效果，动效设计即为用户界面的运动变化而进行设计。

优秀的动效设计，对用户体验有诸多正向作用：①增加界面活力，提升体验舒适度，②吸引注意力，突出重点，③描述层级关系与空间关系，④提供反馈，强化感知。

1.动效原则

在设计动效过程中，清楚地理解动效在系统中承载的作用，提出明确的动效设计原则是十分必要的。动效能体现页面的流畅过渡、对象的明确提示、元素的层级关系、产品的品牌印象等。我们基于轻盈流畅的用户体验目标，将动效设计原则定义为自然、高效、克制。

帧率

动效帧率是指每秒钟显示的图像数量，通常以fps（frames per second）为单位。越高的帧率画质越流畅，但过高的帧率可能带来文件过大的负担，UI中动效设计常以60FPS为基础，但gif支持帧率为50fps、25fps。

时长

即运动效果的时间长度，时长是动效基本属性之一，直接关系到动效设计是否合适的关键。
动效设计的时长单位一般使用毫秒（ms）表示，1秒=1000毫秒。在帧率（FPS）60帧的环境下，1帧=16.67毫秒。

以下是建议值：
短持续时间50ms，100ms，150ms，200ms；中持续时间250ms，300ms，350ms，400ms；长持续时间450ms，500ms，550ms，600ms；超长持续时间700ms，800ms，900ms，1000ms。

贝塞尔曲线
贝塞尔曲线(Bézier curve)是一种数学曲线，在动效设计中广泛使用。先快后慢的运动曲线cubic-bezier（0.26, 1.00, 0.48, 1.00）可以使运动的物体获得快速的起飞和柔软的着陆。

2.多种加载动效

加载动效通常指的是在用户等待某个进程或任务完成时展示的动画效果，告诉用户程序正在运行，帮助用户缓解加载等待过程中的焦虑。

在动效设计中，结合使用场景，设计多种加载loading动效，来应对不同的用户场景。

3.微动效加持

图标微动效一般指系统的小图标动效，主要增强用户操作趣味性，强化操作提示，在办公产品中，我们保持克制，避免过度使用微动效，以免分散用户的注意力或减慢页面加载速度。

动效时长控制在200ms，不拖慢用户操作速度，又可清晰感知，速度曲线先快后慢，打造迅速响应质感！

趣味性的「点赞」微动效，让用户不吝点赞~

4.Tab切换动效

动态的Tab切换更具活力，增添产品趣味性，提高可感知性。动态的视觉元素比静态元素更容易吸引用户的注意力，从而提高用户对界面状态的认知。

5.转场动效

整齐一致的转场动效，助力打造有秩序、可信赖的产品气质形象，通过一镜到底的高级转场设计手法，在提升视觉流畅性的同时也增强了动效的品质感。
①横向滑动--父子层级
对于明确父子层级关系的页面切换，使用左右横滑的页面动效，有助于层级结构的引导，让用户感知当下跳转到不同页面，并根据导航栏上的返回指示，退回到最初的页面。

②纵向滑动 --支线任务
依附于主任务路径的分支任务（例：创建群聊、发送文件），则采用上下滑动的页面动效，目的是强调分支任务行为的即时性，并且在完成分支任务之后，才能进行其它动作。

③全屏展开 --强调内容的来源

6.多种演出方式

弹窗、抽屉、底部

弹性与延时出场

一镜到底丨容器改造

6.有生机的手势动效

手势动效是指手触控设备上进行跟手操作的动效，大致分为点击、滑动、拖拽等手势，典型的实例场景有手势导航左右滑、上滑、长按等操作。

普通删除，有弹性，直接退场；强调删除，缓出，二次确认。

7.功能导引

功能引导设计的主要特点是其关注于向用户提供清晰的指导和反馈，以便用户能够更快地熟悉产品的使用方式。

实践证明动态功能引导设计是一种有效的设计策略，它可以减少用户的学习曲线，提高用户体验，并最终提高产品的可用性和满意度。