Web动效研究与实践

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

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

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

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

动效设计目的

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

动效设计方法

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

确定好了基本动作之后，我们需要结合页面的交互框架对区块进行一个层次分级，设定节奏，突出重点。从用户看到一个页面的瞬间开始，如果在展示面积相同的情况下，用户的注意力被吸引的情况是：动态>颜色>形状。判断一个区块是否需要动效主要基于以下两点：1.交互上，是否包含隐藏信息；2.视觉上，是否需要辅助渲染。所以，对于1688首页上点击率最高的搜索和隐藏信息最多的类目、banner将会是我们设计的重点。

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

前端同学可以运用曲线进行运动定义，CSS属性中的transition和animation可指定缓动函数，但不支持全部函数，可通过贝塞尔曲线的绘制达到自定义的运动效果，固定贝塞尔曲线中头、尾两个点，通过这两个点引申出的锚点来确定曲线的弧度，任何运动曲线都可以拆解为一段段的贝塞尔曲线来进行定义。 贝塞尔曲线绘制函数：http://cubic-bezier.com/#.63,0,1,1

通过CSS为运动曲线专门设置的VIP属性来确定两个锚点位置，流畅的动效就搞定了

动效设计方案

最终我们会得到一个包含时间点、关键帧、触发条件、运动过程和空间幅度的完整时间轴，清晰的显示出页面区块元素在每一个时间点的样式和样式之间的过度，有了这样的规范输出，麻麻再也不用担心我的动效还原了。具体动效请线上查看：http://1688.com/ 其实今天文中提到的技术方案是有一个保质期的，由于技术的迭代迅猛，也不知道这个保质期能够持续多久，但是按照时间轴和关键帧的动效设计思路是不会过期的，迪士尼从白雪公主时期建立的动画设计精髓到了今天的超能陆战队上依然成立，大白的每一个动作设计从本质上来说仍旧是时间点和空间幅度，所以说，作为动效设计师，只要谨记这一点，一个好的动效方案就成功了一半，另外的一半就是结合业务和用户的思考了。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。