记:Tmall活动页面开发

8/31/2015来源:CSS教程人气:750

记:Tmall活动页面开发

一、年轻的我

“无人不成商”,如果一个电子商务网站想要做起来,搞活动时必不可少的(引入流量、提高用户黏度、活跃网站氛围),今天打折,明天送红包。

(立秋活动,右)

作为一个前端,我当然要从技术的角度来讲一下活动页面怎么做,怎么做?刚到,天猫的时候第一个任务就是要做一个(关于立秋食材)的活动页面。由于,太年轻了,跟着我的前任,来到设计师妹纸的屏幕下晃了两眼,嗯,不错,真漂亮,呵呵(可以意会)。言归正传,当时觉得这个页面挺简单的啊,不就切个图嘛,一两天随便玩嘛,还是太年轻。

前两天我一点也不急,淡定中。直到大限将至,开始整了。前面,很是顺利,框架几下子就搭起来了,接着就切图往里面填素材(要求每张图片的大小不超过50k)。切着切着,觉着不对劲,ps玩过但没有这么玩过,后果就是起来感觉不行,重切,不行,重切,下一张,不行,重切....最最麻烦的是页头(下面细诉难点),切了一天怎么都有空隙,不得不求教前辈了。不知不觉,时间就要到了,设计师,看了设计稿后,是这样的......,好吧,你把要改的地方写个文档。后来,要放到线上的预发环境,我又发现了一个问题,就是图片的本地链接要换成线上的,靠,这个不是坑爹吗(几十张图啊)?我试着问了一些前辈,他们说没有这样的工具(实际上是有的,怪我问错人了)。好吧,于是我又自己随手写了一个图片链接自动替换的工具...后面的事不再细说,这就是成长的代价啊。(沟通不足,切在不了解环境的前提下盲目自信,还是太年轻啊)。

二、“我要打十个!”

后来,做了些活动页面,慢慢的有了些体会。总结一下吧,

活动页面,往往量是非常大的,而且有很多个性化,据活动组的同学说(一周可以达到上百个),“我要打十个!”是经常回荡在他们中间的一句话。

活动页面涉及到几个很重要的部分,构图、图片、组件(包含模板)。

1、构图

当你拿到一个PSD,你怎么下手切图?这就是构图的过程,可以通过拉出辅助线来帮助构图,在使用切片工具将大图分隔为几个划定的小图。我着重介绍最麻烦的页头切割,

方式一,中分:

特点:布局比较容易,但是切图时很难精确,(就算精确)两个背景间也很难完全吻合,此时会有缝隙出现。解决这个问题需要在切割时,多切几个像素。

方式二,水平:

特点:切图简单,但是布局相对复杂,需要的dom元素也较多。

注:(这里存在两种布局方式,将图片作为背景,或者使用absolute,50%布局,或者对避免图片间的空隙有很大作用。)

布局:contianer{width:100%;backgorund:url center;}

或者 inner{pos:absolute;left:50%;margin-left:-(width/2)px;}

当然,还有更多其他的方式。

3、图片:

1)、常用图片格式,为gif,jpg,png(png8,png24)。对于活动的背景图,期色彩通常不会特别的艳丽,这种情况下使用gif将会有更好的效果,其质量趋近于jpg的最高品质,当前大小却相当于jpg的中等品质。 (中等品质下图片已经模糊了)

2)、使用web图片格式(ps,ctrl+alt+s),同一种格式将拥有更小的图片大小。

3)、透明

在移动端采用Png8来完成透明,质量小,且支持良好。

在PC端,除IE6外采用Png32来完成透明,IE6下则使用Png8,其次是Gif。

三、组件、模板

组件、模板复用可以加快页面开发速度,而活动的个性化较低,重复度较高(固定导航,图片热区,tab切换,投票,分享),如果做好了组件和模板的沉淀,那么搭建页面框架,添加功能就会非常的容易。