設計與開發規範

設計與開發規範

 

 

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  樂建民、陳鬆