设计与开发规范

设计与开发规范

 

 

l 设计规范

 

1、图层分类和命名规范

设计在制做PSD 图层时必定要层次分离，结构清楚（如图（1）,（2）），看到下图就能够感受到图（2）更能清晰的看到PSD里面的内容，以相应的页面结构内容名称来命名对应的图层，这样能够一目了然，知道PSD里面的各个层内容属于页面的哪一块。

 

                       

               （图1）                                                     （图2）

 

 

2、图层结构规范

以HTML代码结构和对应PSD的层结构（图3），这样排版方便前期制做页面，更方便后期进行页面重构，这就须要设计人员在获得设计文案时，就注意到页面结构这方面，到时前端开发人员就能够方面的按照PSD结构来进行制做页面。

 

　　　　　　　　　　　　（图3）

 

 

 

3、页面设计规范

设计人员在设计小图标的时候，要作成透明背景层，方便在不一样背景色下的调用。

页面总体布局要确认好主字体，主颜色，次颜色，色彩搭配方面在网页中也是一个层次结构。

为方便开发页面，最好能把一个关键内容，字体颜色，连接颜色，小图标等提取出来放到一新图上展示（图4），这些对于设计人员和开发人员来讲相对简单！。

 

 　　　　　　　　（图4）

 

 

 

 

 

l 前端规范：

 

1、样式命名规范

写样式表如何命名，怎么才能看名字就清楚的知道所的表明的模块，这能够以相应模块的内容来命名如图（图5），这样页面大结构就出来了。

模块层次太多，为了一层一层的去区分，通常都是用骆驼规则和下划线规则（图6），

 

 

　　　　　　　　　　　　（图5）

 

 

 

 

　　　　　　　　　　　　　　　　　　（图6）

 

 

 

　　　　　　　　　　　　　　　　　　（图7）

 

 

 

2、样式结构规范

在切页面以前先仔细看下PSD上的页面结构是怎么样的，通常都是上中下，中间在分左右结构，这种符合大多数网站，一些其余本身看看也就清楚了。如（图7）中的页面结构布局就把整个页面先分割出来，在相应的编写里面的内容，当大的框架出来了，就能够去编写样式表，如图（8）样式表里面的代码也是按照HTML布局好了的结构来逐层编写，大模块带动小模块格式。

 

 

 

　　　　　　　　　　　　（图8）

 

 

 

　　　　　　（图9）

 

 

 

l 后台规范：

 

1、样式调用规范

咱们前端总结出了2份公共样式文件，新的项目之后在模板页都调用这2个文件。

 

 

css/global.css  初始化W3C标签的默认样式，这个文件不用怎么管。

css/base.css 这个是公共样式文件，里面初始化了不少能够直接在页面上调用的样式。

 

 

下面是base.css文件里面的内容。

 

　　　　（图10）

 

 

 

 

 

 

 

 

 

 

 

 

2014年2月21日

 

BY  乐建民、陈松