Web前端设计是在div+css流行起来后衍生出的一个职位,它是从笼统的“网页设计师”概念里分离出来的独立工作。这里的“设计”是指将PSD设计稿转换成Web页面时html结构及css样式的代码设计,行业内对此项工作有多种称呼:切图、网页排版、网页设计等等。

专职的Web前端设计,这听起来是一个轻松又容易的活儿,确实,这项工作可以简单到直接把PSD效果图从PS里导出为网页,但这显然太过理想化了,我们日常接触的网站项目是基本不存在这样的案例的。事实上,我们的工作流程一般是:“分析设计稿=>制作切片=>编写HTML和CSS”,在这项工作中我们需要考虑的因素很多:结构代码完整性、标签的正确使用、结合SEO知识语义化标签、页面性能最优化等。工作内容越纯粹,要求也就越苛刻,只有综合考虑以上几点因素才能设计出好的Web页面。

那么工作中具体应怎样考虑这些因素,以及怎样做才能尽量实现要求呢?下面我们来逐一分析下工作流程:

一、分析设计稿。就是说拿到设计稿后不要急于动手,要先细细观摩一番,然后从以下几点展开分析:

1、页面结构及层次

2、页面中的可公用部分(结构、样式等)及特立独行部分

3、在1、2基础上对各部分工作的实现有个总体思考

4、在3的基础上,综合扩展性、复用性及页面性能来个深思熟虑

5、在4的基础上,考虑出本地站点建立的文件分布和目录结构

二、制作切片。就是将设计稿上的必要图片元素分别切出来保存成各个独立的小图片,便于制作Web页面时使用。这一步并不单纯是把图片切出来就完事了,要想让Web页面性能最大化,我们需要依次按下面的步骤着手:

1、切出需要的部分

2、存储切片,这一步包括图片优化(要权衡图片文件大小、质量及存储类型)

3、将2步完成的切片分类:插入图片和背景图片。

4、在3的基础上,将所有背景图片合并为一个整体图片(减轻页面加载负担)

三、编写HTML和CSS。这是将设计稿转换成Web页面具体实施的一块,也是我们的工作重点。前面两步都是为这一阶段的完美实现奠定的基础,也是不容忽视的。众所周知,html是结构语言,css是样式描述,两者紧密结合才形成了精彩页面,所以在进程中我们必须同时兼顾二者,要做到以下几点:

1、通过html结构搭建和css样式控制实现设计稿视觉效果(注意标签语义化、类及ID命名规范)

2、考虑html结构模块化,及css样式的扩展性、复用性和可维护性来实现整站样式分布

3、测试网页在各个主流浏览器下的兼容性。注意,这里放在最后说,并不是指我们在完成整站页面后才做测试,通常在制作的过程中就要边写边测试,这样有利于发现不兼容的地方和查找原因,久而久之知道的多了,我们就可以对兼容性问题了如指掌了。大家要知道,CSS Hack只有在迫不得已时才用,因为有些兼容性问题是可以避免的,这就需要我们对CSS特点掌握透彻,才能写出更标准的样式。

这些其实就是我平日的工作心得,希望对大家有所帮助。前端设计师们,让我们一起努力吧~