今天在网上看技术文章的时候,转到了我以前经常光顾的博客中,里面有一篇文章说得很好。因为它介绍的是自己所向往的职业:页面重构工作者,先来看看是怎么说,怎么做的吧!
做为一个专职的页面重构者,我们从事的工作简单的说就是“将设计稿转换成WEB页面”,这一过程可以很简单到直接把PSD从
PS里导出成网页;也可复杂到需要考虑页面中每个标签的使用,考虑“页面性能”。“页面重构”虽然也是“前端工程师”的一个范畴,在职业化中,对专职的页面重构者,要求当然也更高。不单是做出页面,而是做出好页面。又引出另一个话题,“何为好页面?”,一般包括下面几点:
- 结构完整,可通过标准验证
- 标签语义化,结构合理
- 充分考虑到页面在站点中的“作用和重要性”,并对其进行有针对性的优化
很多同学多少都遇到过方向不明,不知道自己应该提高些什么,我们可以从“分析设计稿=>切图=>写HTML和CSS”这个工作内容,针对每一点提出一些要求,以方便我们分析自己的能力水平,为继续提高确定个方向:
-
设计稿的分析
设计稿的分析是指对设计稿如何制作成页面的分析,即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段:
- 能分清设计稿中的公共与私有的部分
- 在1的基础上对各部分的实现方式有一个初步的方案(包括如何切图、写结构、写样式)
- 在1的基础上,准确的给出各部分的实现方案(包括如何切图、写结构、写样式)
- 在3的基础上,能同时考虑方案的扩展性、复用性及页面性能(包括如何切图、写结构、写样式)
- 在4的基础上,考虑整站的结构分布(包括文件分布、目录结构)
上面这些都是在还没开始动手制作之前所要做的。
-
切图
切图是指将设计稿切成便于制作成页面的图片。都有个误区,觉得切图就是把图片切出来,其实并不完全是这样,还包括把切出来的图片合并到一起,怎么切、从哪切才能将性能最大化,说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段:
- 切成所需要的图片(如何将需要的部分切出来)
- 在1的基础上,对切出来的图片进行一些优化(包括压缩文件大小、选择图片类型)
- 在2的基础上,规划切出来的图片(包括文件分布)
- 在3的基础上,考虑整体的性能(包括合并图片、压缩文件大小)