B类电商业务的Web动态效果研究与实践

随着CSS3和HTML5的发展，越来越多狂拽炫酷叼炸天的动效在网页设计上遍地开花，根据最新的浏览器市场份额报告，IE6的份额已经降到了5.21%，这简直是一个喜大普奔的消息，做动效可以完全不care低端浏览器的时代已经在向我们招手了。俗话说得好，颜值不够，动效来凑，Web动效已经不仅仅是网页设计的润滑剂了，它的功能更多的体现在了交互逻辑、视觉渲染和创新实践上，上能引人注目，下能潜移默化。

下面将通过经典的黄金圈法则来为大家讲解我们在B2B聚合页——1688首页项目上的动效设计，主要分为三个部分，动效设计的目的、方法和方案。

首先来一发大师金句，迪士尼动画大师乃特维克的毕生经验浓缩成一句话就是“动画的一切皆在于时间点和空间幅度”，动效设计和做动画是一脉相通的，我们不是要做写实主义的动画，而是要通过时间点和空间幅度的设置为用户建立运动的可信度。

在设计开发的过程中，当设计师做好了一套静态页面而且设想出N种有趣的交互动画，再交付前端进行重构还原页面的时候，由于无法提供精确的动态参数，导致沟通和制作的成本增加，而最终的测试demo也差强人意。因此，我们在1688首页项目的动效设计中总结归纳出一套适于设计师表达动效概念的方法和流程。

首先，为什么做动效，在动效设计的初期阶段，我们需要从业务和用户两个方面对对项目本身进行一个需求分析，从中得出动效在其中的作用，业务方面是引导用户，层级信息展示，用户方面是页面过度，改善用户体验，动效设计的目的是为了自然流畅的呈现B类电商网站信息，并且，体现出专业和诚信的气质。

接下来，具体到如何做动效，正所谓设计来源于生活，运动过程的定义都是基于我们日常的生活经验的，为了给B类用户制造熟悉感，我们设置了一个动效设计的切入点——B类商务特色动作，并为每一个动作提炼了一个动效方式，包括:

盖章，状态切换不好把控，动作衔接有难度；

交换名片，切换动作可参考；

扫码，科技感过重，应用较难；

包装，3D动作幅度大，过度不自然；

握手，效果单一，可参考；

签名，这个效果是无法应用的；

流水线，一个完整的流水线场景中基本包含页面motion的所有动作，可提炼易发散，同时，我们B类电商承载了从设计师、原料商、生产商、批发商、零售商中各个环节的业务，包含底层的支付物流等等，就是一个宏观的传送带，因此作为B2B业务的聚合页，我们把传送带作为1688首页动效设计的基本动作。

确定好了基本动作之后，我们需要结合页面的交互框架对区块进行一个层次分级，设定节奏，突出重点。从用户看到一个页面的瞬间开始，如果在展示面积相同的情况下，用户的注意力被吸引的情况是：动态>颜色>形状。判断一个区块是否需要动效主要基于以下两点：

1.交互上，是否包含隐藏信息；

2.视觉上，是否需要辅助渲染。

所以，对于1688首页上点击率高的搜索和隐藏信息最多的类目、banner将会是我们设计的重点。

下面我们来具体分析一下刚才确定的三个重点区块的动效设计，对于一般的输入框，需要用户在输入框中产生点击之后才能开始输入操作，在1688首页项目中，我们改进了输入框的方式，设定了一个阈值的时间，让用户鼠标hover到输入框后，停留时间超过阈值则激活输入框，用户可以直接进行输入的操作，减少用户点击，让操作更加流畅。