国际站产品的体系是复杂庞大的。不仅量级巨大，而且功能复杂，频繁发生各种设计的变动。而B类贸易的特色，决定了页面有着极其的逻辑和严谨性，同时也存在着一定的枯燥度。随着商业和设计的变化，越来越多的产品对用户体验有了更高的要求。国际站需要一套全新的视觉体验升级来作为新变革的指导，动效设计也需要作出相应的规范。基于“国际化、信任感和创新性”的品牌设计内核，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

重要性

动效，是一个高质量的互联网产品不可缺少的组成部分之一。它在原本静态的页面和用户的使用之间架起了一道桥梁，与用户产生了互动。

1. 消除陌生感：

用户对于产品的不熟悉，建立互动的纽带。让用户就能很快地把自己融入产品中，增强用户操作感。通过合理的动效，让虚拟的界面去模拟现实世界，比如运动、投影、高光、质感等。用户会把对现实世界的认知映射到产品上，从而消除距离感。动效可以让产品更加自然，更能被用户理解和接受。辅助用户信任该产品。

2. 丰富画面-情感化：

随着设计的发展，不同产品间的体验越变的同质化，因此需要通过更细化的设计和创新为产品增加亮点。动效则可以带来更惊喜的体验。情感化的目的，是帮助用户体验产品过程中，引导用户的积极情绪。适当运用动效，丰富的细节，进一步引导用户。惊喜的同时，也能帮助用户依赖于产品本身。

3. 吸引注意力：

同一个画面，动态相比静态，动的元素永远能在第一时间引起用户的关注。通过合理的动效，可以低成本的抓取用户注意力，让他们关注产品最关键的东西。通过动效能让用户优先对重要功能进行关注，方便用户快捷的得到重要信息，从而跟随着产品一步步的进行互动。

动效内核

动效内核是动效识别的核心。动效内核能够帮助品牌建立区别于竞争对手的“符号化、个性化”标志。根据“符号、个性化”对目标用户进行宣导教育，进而让用户对品牌形成独特的认知。动效内核是品牌推广的一种，以品牌作为核心的动效识别传播给用户，通过动效内核所表现出来的独特气质来辅助品牌的传播。

达成目标

在设计产品中，要用最简单快捷的方式解决问题，尽量不要再去增加用户使用过程中的复杂度。动效要做的就是为了让用户体验更进一步的传达到位。让国际B类贸易变的轻松。

衡量标准

做有意义的动效。设计动效并不是为了炫技，而是要在页面中将动效巧妙运用，解决问题，达到目的才是关键。

动效架构

需要有清晰的架构，这样才能让动效在整个产品中能够统一语言，让动效和产品设计更完美的结合。

时间

1. 合适的持续时间

动画的持续时间的长短，就决定了用户对用动效感知的时长。过短或过长的动效都会导致用户对产品产生不适感。而不同地方、不同元素的动画时间也是各有不同，需要针对实际情况进行设计。

同样的位移长度、同样的运动缓动速率，在不同时间条件下，就产生了不同的感觉。1秒的时长干净利落，2秒的时长已经有些拖沓。

2. 自然的运动

在对象元素的运动过程中，可以进行添加缓动函数。使动画的运动更加符合物理的规律。而使用的情况也是因场景而定。

同样的位移长度、时间，不同的缓动条件。除了Linear是一种直来直去的不带任何变化速率以外，其他的缓动都适合于元素的运动使用。更多缓动函数：easings.net/zh-cn#

3. 有规律的延时

当多个对象元素需要出现的时候，可以采用延时的方式来呈现。元素与元素之间靠动画做出了一个无形的区分，另外这样的呈现方式可以让用户感知到一定的积极情绪，不会显得死板。

每个元素对象出现的时间都是0.5秒，有延时的动画总长是1.5秒，每个元素的时间间隔是1帧（每秒30帧）。由于是依次出现，给人的感觉并不会觉得慢。

变化

1. 透明

元素对象的基本属性之一，和时间一样，是可以用具体的数值来量化确定的。通常使用百分比来量化使用。

通常情况下，建议透明度的变化持续的时间不短于0.2秒，不超过0.5秒。

2. 位置

元素对象的基本属性之一，和时间一样，是可以用具体的数值来量化确定的。有X、Y、Z轴向的分别，通常使用百分比（相对值）或像素（绝对值）来量化使用。

通常情况下，位置的变化持续的时间和位移的变化成正比，但不超过1秒，位置的变化也不宜过大。

3. 缩放

元素对象的基本属性之一，和时间一样，是可以用具体的数值来量化确定的。有X、Y轴向的分别，无特殊说明下都是指等比缩放，通常使用百分比来量化使用。

通常情况下，缩放的变化持续的时间和缩放的变化成正比，但不超过1秒，缩放的变化也不宜过大。

4. 旋转

元素对象的基本属性之一，和时间一样，是可以用具体的数值来量化确定的。有X、Y、Z轴向的分别。无特殊说明下都是指Z轴方向的旋转，通常使用角度值来量化使用。

通常情况下，旋转的变化持续的时间和旋转的变化成正比，但不超过1秒，旋转的变化也不宜过大。

关联

1. 协同关系

元素与元素之间，组与组之间，关系是紧密联系的。触发一个组的时候，另外一个组也会产生相应的变化。

在用户切换图片时，底部的图片位置锚点就说了了用户当前操作的结果和状态。让用户明确了所见即所得。

2. 父子关系

组与组内元素的关系，组内元素被触发后发生了变化，这种关系可以成为父子关系。子级继承父级的影响而变化。

在触发后，子级从父级中有规律的出现和消失。对于用户的感知明确了动效的来源和终点。

空间

1. 层级

通过层级关系，可以让用户明确的知道当前页面的关注重点是什么，清楚页面和内容。层级之间的关系，也指明了动效从哪里来，到哪里去。

在原先平面的空间中，通过阴影、蒙层来创造AB层之间的空间关系。

2. 景深

就像相机一样，当焦点过于集中于近景，远景的图像就会虚焦，变的模糊。人为的创造景深可以让画面不受其他无关因素的影响，从而更加的聚焦和集中精力。

当前景界面被激活而覆盖背景画面，使用背景模糊加透明覆盖让背景虚焦，远离用户的焦点。突出了视觉的空间感。

3. 视差

时差是一种动效元素之间运动不同速度的表现。也是一种刻意模仿现实空间中近景和远景运动的方式。

在现实空间中，近景因为距离近而运动幅度大，而远景因为距离远而幅度小，让用户聚焦于重要操作和内容。

4. 折叠

元素组件通过折叠的进行消失和出现，呈现了一种二维平面和三维过渡的方式。让元素的动画合乎情理的流畅过渡。

将二维组件运用3D控件去实现真实的折叠翻转效果，让用户明确知道二维的表象下是三维的关系。