設計與開發規範

設計與開發規範

l 設計規範

一、圖層分類和命名規範

設計在制作PSD

圖層時一定要層次分離，結構清楚（如圖（1）,（2）），看到下圖就可以感覺到圖（2）更能清晰的看到PSD裡面的内容，以相應的頁面結構内容名稱來命名對應的圖層，這樣可以一目了然，知道PSD裡面的各個層内容屬于頁面的哪一塊。

（圖1）                                                    

（圖2）

二、圖層結構規範

以HTML代碼結構和對應PSD的層結構（圖3），這樣排版友善前期制作頁面，更友善後期進行頁面重構，這就需要設計人員在得到設計文案時，就注意到頁面結構這方面，到時前端開發人員就可以方面的按照PSD結構來進行制作頁面。

　　　　　　　　　　　　（圖3）

三、頁面設計規範

設計人員在設計小圖示的時候，要做成透明背景層，友善在不同背景色下的調用。

頁面整體布局要确認好主字型，主顔色，次顔色，色彩搭配方面在網頁中也是一個層次結構。

為友善開發頁面，最好能把一個關鍵内容，字型顔色，連結顔色，小圖示等提取出來放到一新圖上展現（圖4），這些對于設計人員和開發人員來說相對簡單！。

 　　　　　　　　（圖4）

l 前端規範：

一、樣式命名規範

寫樣式表如何命名，怎麼才能看名字就清楚的知道所的代表的子產品，這可以以相應子產品的内容來命名如圖（圖5），這樣頁面大結構就出來了。

子產品層次太多，為了一層一層的去區分，一般都是用駱駝規則和下劃線規則（圖6），

　　　　　　　　　　　　（圖5）

　　　　　　　　　　　　　　　　　　（圖6）

　　　　　　　　　　　　　　　　　　（圖7）

二、樣式結構規範

在切頁面之前先仔細看下PSD上的頁面結構是怎麼樣的，一般都是上中下，中間在分左右結構，這種符合大多數網站，一些其他自己看看也就清楚了。如（圖7）中的頁面結構布局就把整個頁面先分割出來，在相應的編寫裡面的内容，當大的架構出來了，就可以去編寫樣式表，如圖（8）樣式表裡面的代碼也是按照HTML布局好了的結構來逐層編寫，大子產品帶動小子產品格式。

　　　　　　　　　　　　（圖8）

　　　　　　（圖9）

l 背景規範：

一、樣式調用規範

我們前端總結出了2份公共樣式檔案，新的項目以後在模闆頁都調用這2個檔案。

css/global.css  初始化W3C标簽的預設樣式，這個檔案不用怎麼管。

css/base.css 這個是公共樣式檔案，裡面初始化了很多可以直接在頁面上調用的樣式。

下面是base.css檔案裡面的内容。

　　　　（圖10）

2014年2月21日

BY  樂建民、陳松