图标动效设计在产品设计中的原则

在企业级应用的产品设计中，使用动效和前台类产品有很大的不同，助力交互行为和增强信息认知显得尤为重要，在 Ant design 设计价值观的基础之上，我们衍生出动效设计的三原则：

（一）动效速度

1 时间

Ant Design 组件里的基本时间单位。100ms 为最小单位。最快时间: 100ms, 基本时间: 200ms, 较大时间：300ms… 100 的倍增方式。150ms 为最小单位。最快时间: 150ms, 基本时间: 300ms, 平滑时间：450ms, 较大时间: 600ms… 150 的倍增方式

2 缓动

匀速运动

非匀速运动

1.单物体可视范围内点到点之间的运动：ease-in-out

2.单物体可视范围外进场的运动 ease-out 快>慢

3.单物体可视范围内出场的运动 ease-in 慢>快

• 动效空间

现实空间里，物体存在远小近大的原则，运动则有远慢近快。在动效设计时，处理和空间相关的话题时，我们需要考虑两方面的因素：

1 视差

例如汽车在公路上行驶，离汽车越近的物体，移动速度越接近汽车的速率。以行进中的汽车为例，汽车所在的点为 X 轴的基准点，离基准点越远时，速度就越慢。动效设计中同样存在这个原则，元素的空间距离会影响动画效果，从而影响动效设计的决策。

以距离的差距来体现视差。

以时间的差距来体现视差。

Ant Motion – Ant Design 的动效规范与组件

页面里的详细说明间的走马灯切换效果。

2 大小

遵循远处的物体小，近处的物体大的原则。在下面这个案例中，包含两层抽屉式的的界面展开，遵循远小近大的原则，当近处层级出现时，底部的层级做适当的缩小，体现出空间感。

• 组合动效

组合动效是将多种动画效果组合起来运用在单个元素或者界面中的表现方式，吸引用户的注意，让用户快速了解信息的主次关系。ant design 最常用的组合动效有以下三种：

1 单元素组合动画

单元素组合动画是指将多个动画参数附加于一个元素上，通过不同的动画参数帮助用户实现自然的认知过程。

2. 多元素列队动画

队列一般指同个区块里多个元素的进场或出场，根据元素的排列顺序，有序的进入或依次的退出，实现更为自然的视觉过渡。

单向布局

由单例元素横向或纵向形成的布局，依次展示动效出场。

区块横纵布局

由多行元素组合的一个区块性布局，将界面元素以左上角为起点右下角为终点，设置一个过渡自然的出场顺序

3. 多元素聚散动画

以中心点为主向外扩散或汇聚的一个效果，强调主体以及分支之间的关系，能够快速的让用户了解信息的关联性。

• 过渡动效

人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。 在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。

1 视觉连贯性三元素

Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。

Receding: 与当前页无关的信息元素应采用适当方式移除。

Normal: 指那些从转场开始到结束都没有发生变化的信息元素。

2 视图变化时保持上下文

页面间切换

在视图变化时保持上下文; 滑入与滑出: 可以有效构建虚拟空间。

折叠窗口

在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。

3. 解释刚刚发生了什么

对象增加：在列表/表格中，新增了一个对象。

对象删除：在列表/表格中，删除了一个对象。

对象更改：在列表/表格中，更改了一个对象。

对象呼出：点击页面中元素，呼出一个新对象。

4. 改善感知性能

当无法有效提升『实际性能』时，可以考虑适当转移用户的注意力，来缩短某项操作的感知时间，改善感知性能。

青岛青设网络科技有限公司是国内领先设计团队和营销策划服务商，专注于5G技术下平面设计，UI设计，BS系统设计，网站开发，SEO，自媒体，百度百科知道、知乎等百家号，排行榜，删除负面，媒体发文等营销宣传。帮助企业解决5G时代三维动态化站点的设计改造，为客户提供网站一站式解决方案。