B 端动效解析：从价值到落地-以 TE 产品为例

前言：动效设计（Motion design）可以让界面表达明确、清晰、流畅，从而增强用户感知，为用户体验服务。作为B端设计师，我们如何系统的考虑一个产品的动效设计呢？接下来由设计上刷刷以 TE 产品为例，带大家了解从 0-1 搭建动效库的思路。

动效设计（Motion design）可以让界面表达明确、清晰、流畅，从而增强用户感知，为用户体验服务。作为B端设计师，我们如何系统的考虑一个产品的动效设计呢？接下来由刷刷（TE designer）以 TE 产品为例，带大家了解从 0-1 搭建动效库的思路。

一、动效设计的价值

1. 动效对于产品的意义

1. 建立与现实世界的联系：物体变化是有过程的，不是突然发生的

苹果的灵动岛设计，当两个 App 被收入灵动岛时，它会继续开始收起并分裂。在分裂时，灵动岛的右侧不仅「运动拉伸」，还展示了元素之间动能的相互影响。

2. 打造产品调性：产品目的不同，有高效的或者偏情感化的

Material Design ，是由 Google 推出的设计系统，代表着前沿的设计理念，使用灵动略显夸张的动效，大胆前卫。Mixpanel 在诸多数据分析平台里，用户体验常常为人称赞，动效克制冷静，节奏相对较快，主要为业务效率服务。

• Material Design

• Mixpanel

思考：那我们应该做什么样的动效？
符合 B 端产品的目标--效率至上，TE 的设计理念--理性与活力相结合。

2. 动效对于 TE 业务的意义

先听听用户的声音，在 2023 年春季发布的 4.0 视觉升级版本后，我们收集了大量的用户反馈，大部分用户对于视觉升级表达了充分的认可，但有一部分用户也指出交互、动效仍有提升空间。

动效融入产品，会给业务带来以下价值：

1. 4.0 视觉升级的后续迭代

4.0 专注静态页面的优化，但跳转简陋，不丝滑，动效缺乏体系化的设置，仍需迭代完善。

2. 引导注意力，提供明确的反馈，助力交互体验

静态的增删改反馈突兀不流畅，需要加入丝滑的衔接，让用户认知过程更为自然。

3. 增强一致性，打造产品调性

TiKit 设计体系日渐完善，基于开源组件实现的组件库，部分组件点击效果带有水波纹，部分没有。速度与变化时长也是凭开发的喜好，需要统一动效节奏来打造产品调性。

二、动效分类

常用分类：转场类、展示类、引导类、反馈类。
基于 TE 业务现状，将动效分为两大类：组件侧和业务侧。
组件侧，统一基础组件库与业务组件的动效；业务侧，改进宏观动效，使交互流畅顺滑，加入微观 icon 动效，增强趣味和活力。

通过以上方面，希望能综合达成 TE 的业务目标与用户目标。

三、动效设计

在了解完动效的价值与分类之后，到了方案设计环节，那么构思方案时遵循什么样的原则？动效在什么时候开始设计？如何保证不同设计师动效方案的一致性？接下来为大家解答。

1. 动效设计原则

基于 TE 清晰、聚焦、可靠、友好、有据的设计原则，延伸出 TE 动效的设计原则：

1. 和谐-保证视觉连贯，自然和谐

用户会将现实生活中的运动感受，带入到具体的动效过程。运动事件的速度形式，运动的节奏与方式，都会影响体验。

• 有动效

• 无动效

2. 聚焦-专注于业务
动态内容更引人注意，重点内容动态化展示。既可以自然地表现元素运动始末轨迹，又可以引导用户注意焦点。

• 简洁高效

• 冗余动效

3. 克制-在质不在量

B端产品追求效率，动效设计也应如此，最好的动效是让用户感受不到动效的存在。

克制包括简洁适度、不增加用户操作、不阻碍用户、不超过时限等。

2. 何时开始设计

在很多初级设计师看来，交互 UI 都设计好了，再加点动效进行点缀即可。如果想要通过动效更深层次的提升体验，就要将动效思考在流程中更加前置，在框架设计阶段开始考虑动效是否能为业务提效了，直到测试与走查阶段，保证动效还原度，设计方案才算完成。

3. 使用 Token 保持一致性

如何量化一个动效？一般从运动模式（duration）、运动时长（easing）、缓动曲线（effect）三个方面来描述。运动时长用来描述持续的时间，缓动曲线用来描述单位时间内的变化速度，运动模式用来描述具体的运动方式。

• 运动时长
  针对 PC 端 150～550ms 是合适的元素运动时长。100ms 的动画时长是基础认知的开始，低于 100ms 用户是无法感知运动实效性的，而 1000ms 则到达用户感知的极限。

• 缓动曲线
  结合自然运动的规律，那物体运动具有的不同运动速度，动画停止与启动都不是瞬间完成的，当物体突然移动或停止，会显的很不自然，因它需要一段缓冲的时间来加速或减速。

• 运动模式
  运动模式的选择由元素的空间关系或与其他元素的联系性决定。基础的运动方式包括轴运动、容器转换和淡入淡出，可根据具体场景延展使用。 轴运动：用来表现具有空间关系元素的过渡。X 轴多用于具有横向关系的 Tab 切换，Z 轴多用于具有上下层级关系的切换，如 Dialog。 容器转换：用来表现具有共用容器时的过渡，如动态 Input。

淡入淡出：用来表现元素无空间和容器关系时的过渡效果，通过渐变来提供操作后的关联性反馈，如 Alert。

• 轴运动

• 淡入淡出

基于以上内容，我们建立了符合 TE 产品设计诉求的 Token 结构：

四、开发落地

输出动图和开发对接的过程中，会遇到一列问题：导出的动图模糊、资源太大、开发不支持动图格式等。常见的落地方式有很多，接下来带大家了解代码实现、GIF、PNG 序列帧和 JSON 的优缺点。

代码实现
使用代码实现的方式，需将动效整理成规范文档，在文档中定义好元素的基本参数和运动曲线，方便开发同学查阅和使用，也方便其他设计同学使用和参考。
基本参数包括：位移、缩放、旋转、透明度、颜色、运动曲线。

GIF
GIF 支持安卓、iOS、网页，可以说也是比较常用的格式之一。界面设计中的小元素可以使用这个格式，比如运营按钮动画、点赞图标动画等，资源不会太大。

PNG序列帧
输出动图的每一帧图片，然后交付开发，按帧播放图片实现，但导出序列帧资源很大。

Lottie
Lottie 是一个用于 Android、iOS、Web、Windows 的动画库，用于解析使用 bodymovin 导出为 JSON 文件的 AE 动画。这种动效通过代码实现，资源文件小，动图清晰。

五、TE 的动效实例

“光说不干假把式。”接下来拿 TE 分析模型操作区域展开收起的动效优化举例，分享我们从价值到落地的思考历程。

基于开篇时描述的背景，我们开始构思如何优化。

现状

1. Hover 时按钮变蓝，抢占风头；
2. 点击后按钮在原地翻跟斗；
3. 折叠展开时无丝滑动效，区块割裂感明显；

思考

1. 在4.0的改版思路中，将蓝色定义为品牌色，当前流程中最重要的步骤会使用蓝色进行强调，收起和展开在正常操作流程中应视觉弱化；
2. 展开与收起某个区域时，可添加容器过渡；
3. 容器变化速度应符合现实世界的运动规律；

方案

1. Hover 时灰色箭头伸缩，既指明下一步方向，又提供相对明确的反馈；
2. 容器加入大小变化过渡，箭头从无到有加入过渡；
3. 套用缓动曲线，入画时加速，出画时减速；

交付落地
设计方案采用 Figma 原型的方式交付，研发通过代码的方式实现，打开 Figma 链接，使用 Dev Mode 视角查看图层、色值、曲线、时长等参数还原动效。

完美的动效方案不是一蹴而就的，需要不断迭代优化。一个小小的动效，不仅仅是视觉价值，对于产品的意义远非如此。从业务背景出发，找到价值的源头，打磨解决方案，探索更多动效的价值、拆解思路、呈现方式，期待和大家一起进步。