迅雷7.9宣传下载页面CSS3动画实现心得.pdfVIP

迅雷7.9宣传下载页面CSS3动画实现心得 产品宣传页往往会向用户介绍产品的功能特点 ，传达产品的理 ，也是用户初次对新产品或产品新 功能新特性的感观认知 ，对此 ，视觉设计师在设计产品宣传页的时候 ，往往会特别注重页面的精 致度 ，而最终的设计稿出来后 ，往往只是一个静态的页面。从视觉设计的角度看 ，也许静态页视觉 效果已经很好 ，但始终缺少给人视觉冲击的动感效果 ，相信不少设计师都希望给页面多增加一些动 画元素 ，但又不希望太过依赖f lash动画。 其实可以针对高端浏览器 ，利用CSS3为页面实现一些动画效果 ，而对比较低端的浏览器 ，可以优 雅降级做成静态页面 ，为不一样的用户群带来不一样的体验。要做好这种差异化体验的页面 ，需要 各个线的人员积极配合 ，大家一起合力协作才能完成的 最近有幸接到迅雷7.9宣传下载页面的重构 ，在产品、设计师和开发给力配合帮助下 ，针对高富 帅Chro me、Firef ox、O pera和正在努力变高富帅的IE10 ，完成了轮播图的CSS3动画效果 ，为高 级用户群带来不一样的高级体验。 线上页面 ：ht t p://dl.xunlei.co m/xl7.9/int ro .ht ml （请使用Chro me\Firef ox\O pera\IE10 ） 以下是做这个页面的一些心得 前期沟通 ，团队合作 有时候 ，重构拿到设计稿后 ，会尝试去做CSS3动画 ，在征求产品同意后 ，再回到设计稿 ，可能会 发现自己想要动画元素设计师并没有在设计稿上单独分出来 ；做出来的最终效果产品又觉得不符合 页面主题风格 ；想找设计师帮忙P图 ，但设计师又排满期抽不出时间等等问题 ，显然 ，这是重构和 产品、设计师前期沟通不够充分而产生的问题。因此 ，做好充分的前期沟通 ，是完成动画效果的第 一步 ，也是最重要的一步。 若决心要做CSS3动画的高级体验 ，绝不建议重构在最终设计稿出来后才开始着手考虑 ，建议在设 计师给出原型初稿甚至在设计开始前就和产品和设计提前沟通打好招呼 ，一起讨论动画的方案。 动画讨论的内容大致要确认 ： 1、动画怎么动 2、动画元素有哪些 3、不支持动画的浏览器如何表现 大致分工如下 ： 产品 （设计 ）：根据产品的特点 ，决定动画的展现方式 ，大致的动画过程 ；非高端浏览器页面展现 方式 重构 ：根据产品 （设计 ）提出的要求 ，评估动画的可实现性 ，并和设计师确认动画元素有哪些 设计 ：提供重构需要的动画元素 ，在设计稿中做好分离 拿这次迅雷7.9宣传页其中一张轮播图的动画方案为例 ，原型稿如下图 ： 简要讨论实录如下 ： 产品 ： 做动画并不能为了动画而动画 ，动画更应该根据产品的特点去考虑。 这个轮播图要介绍的功能特点是“极速体验 ，快如闪电” ，“速度”是主要表达的元素。 可以考虑闪电从天而降劈下 ，闪电到一定位置后停止下降 ，由于闪电的“极速”而产生强劲威力 ，底部 会出现光圈 ，小图标被炸开 ，同时描述文字从左向右飞出 ，然后趋向静止 ，最后闪电停留一定时间 ，让用户的视觉焦点聚在功能点介绍 ，最后闪电 ，文字 ，小图标 ，光圈同时消失 ，用炸飞小图标的 威力去衬托“速度”之快威力之大。 整个动画过程持续时间为5秒 ，低端浏览器以静态图片显示。 视觉 ： 闪电从天劈下来的时候 ，最好不要垂直下来 ，可以考虑从一定的倾斜角劈下 ，更显力量 ； 小图标被炸开的过程通过缩放图标达到小图标被炸散的效果 ， 闪电、小图标、光圈、文字控制透明度显得更平缓 其实还可以考虑让背景的数字动起来 ，更具下载过程的动感 重构 ： 动画实现需要的动画元素是 ：闪电、飞出文字、小图标、光圈、数字背景图 ，遮挡蒙层 ，如下图 考虑到动画过程有缩放 ，会出现图片精度问题 ，设计师提供小图标的时候 ，应该提供放大到闪电停 留时图标大小清晰图 ，以免图标在放大拉伸过程过度失真变模糊 ； 数字背景图要求可Y轴平铺的图片 ，动画过程 ，要不断不断重复 到此 ，动画的前期讨论结束 ，可以进入重构阶段 DEMO 1是在我还没和产品、设计进行充分的前期沟通前利用周末时间做的动画 DEMO 1 DEMO2是周一回到公司进一步和产品、设计讨论的动画 DEMO2 DEMO3是最终讨论出来的动画 DEMO3 从三个DEMO我们可以看到个人的力量永远是有限的 ，团队合作爆发出来的力量才是最强的 讨论过程中我们尝试过不同效果的对比 ，然后选取好的 ，当中产品、设计师、重构师各种意见的 碰撞 ，设计师积极的配合给出优化好的图片 ，如果产品、设计或重构都以各