日期:2014-03-22  浏览次数:20959 次

一,设计稿的分析

设计稿的分析是指对设计稿如何制形成页面的分析,即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段:

  1. 能分清设计稿中的公共与私有的部分
  2. 在1的基础上对各部分的实现方式有一个初步的方案(包括如何切图、写结构、写款式)
  3. 在1的基础上,精确的给出各部分的实现方案(包括如何切图、写结构、写款式)
  4. 在3的基础上,能同时考虑方案的扩展性、复用性及页面功用(包括如何切图、写结构、写款式)
  5. 在4的基础上,考虑整站的结构分布(包括文件分布、目录结构)

上面这些都是在还没开始动手制造之前所要做的。

二,切图

切图是指将设计稿切成便于制形成页面的图片。都有个误区,觉得切图就是把图片切出来,其实并不完全是这样,还包括把切出来的图片合并到一同,怎样切、从哪切才能将功用最大化,说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段:

  1. 切成所需求的图片(如何将需求的部分切出来)
  2. 在1的基础上,对切出来的图片进行一些优化(包括紧缩文件大小、选择图片类型)
  3. 在2的基础上,规划切出来的图片(包括文件分布)
  4. 在3的基础上,考虑全体的功用(包括合并图片、紧缩文件大小)

HTML和CSS的编写

HTML和CSS的编写是指将上面完成的内容,通过HTML和CSS的编写,将设计稿转换成WEB页面最重要的一块,也是我们所要重点掌握的内容,把它们放在一同,是由于它们互相的关联性太强,HTML的写法会影响到CSS的写法,它又可以划分成下面几个阶段:

  1. 还原设计稿视觉效果,并通过标准验证(HTML)
  2. 在1的基础上,实现多浏览器的兼容(HTML)
  3. 在2的基础上,标签语义化(HTML)
  4. 在3的基础上,选择较优的实现方式(包括模块化结构,方便程序脚本使用,HTML和CSS)
  5. 在4的基础上,考虑到扩展性、复用性和可维护性(HTML和CSS)
  6. 在5的基础上,考虑到整站的款式分布(包括如何实现分布)
  7. 在6的基础上,款式写法的优化(包括技巧的使用)

是对所遇到问题的处理能力,这一点在不同的阶段都可能会遇到,所以没有写到上面。

如果你曾经达到或超过3、4、5,祝贺你,你曾经是一个职业的“页面重构任务者”了。为了我们本身的发展,关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等,也是十分必要的。大家一同进步吧。