最近在做外包時，遇到客戶找的做平面設計的美工來設計前端Ui,界面是設計的無可挑剔，可卻讓前端基本沒法切圖。
所以在這裡講一講做為項目開發中的一個環節的開發者應該如何遵守設計開發規範，才能讓你的下一步開發者能更好的理解和使用，減少溝通成本。
一、關於UI設計的規範
很多美工平面設計水平非常不錯，但是因為做平面設計時要求的結果只是一個最終效果圖片，所以在對圖層處理與分類時比較混亂，甚至沒有；以及尺寸不標準，前端還需要二次加工才有法切圖。
1.網頁UI設計尺寸規範
01.從頭到尾統一個尺寸，比較常見的是寬1200px，少部分1400px。 尺寸固定的網頁是最容易設計的，在photoshop裡按照網頁尺寸新建項目即可。
02.帶全屏輪播，菜單欄全屏，底部全屏。這種的話我們要考慮現在目前市面上的常用電腦屏幕最大分辨率，一般為最大分辨率為1920px。
所以在設計網頁時新建項目畫布尺寸不能低於1920px，然後中間的網頁主區域常用1200px。設計時主內容都限定在居中的1200像素上，需要全屏的區域，比如菜單背景色采色可以重複背景圖或純色，底部採用純色，儘量少用背景圖，這樣網頁運行速度快。
全屏輪播橫幅主內容限制在居中1200px的範圍內，這裡要特別強調，很小夥伴把banner圖的內容設計到主內容外去了，造成電腦屏幕小的電腦看不到圖片上的完整內容。
03.全屏可隨屏幕分辨率放大縮小UI，這種也是按照市面上常最大分辨率來1920來設計，然後儘量少用背景圖，自定義設計的圖標，因為圖片放大縮小都會造成效果失真。所以前端在做這類網頁時基本是用css畫的矢量圖標。
04.響應式網頁設計，這個就需要比較專業的美工來設計了，得了解各種不同場景的分辨率，PC端,平板,各種尺寸的手機分辨率，然後規劃佈局，使模塊可以不同的分辨率中有不同的展示效果。
05.手機端UI設計，因為我不是專業美工，對於尺寸也不是很瞭解，只知道大多采用640px設計原圖。我以前做的很多按例都是按這像素在做，在不同分辨率的手機中也能很好的展示。
2.網頁UI設計圖層規範
各位前端在切圖時應該深有體會的，美工給的psd一團亂麻煩，圖層不分組，想切某個小圖標下來，得找半天，尤其是切不帶背景的png，可能讓人崩潰。所以請各位美工設計時一定要對圖層進行分組歸類。
作為一名web全棧，我自己也經常做設計，下面是我的一些圖層分組建議。
1.新建項目，先建四個分組，分別為：頭部，內容，底部，背景， 然後再在各個分組中進行當前的設計並且進行細節分組。
分組結構如下：
-頭部
-- 頂部top
--- 左側文字 （一般的網頁最頂部都有40高的麵包屑，廳側為登錄信息，右側為下拉菜單）
---右側下拉菜單
---- 第一組下拉
---- 第二組下拉
................
--中間LOGO與搜索框
---LOGO
---中間搜索
---右側聯繫電話
--導航菜單
---左側分類下拉 （一般的網頁都有左側有個下拉行類分類導航）
----每組菜單的分組，如果是鼠標放上去右側還需要彈出二三級的菜單的話，繼續往下分組
---主菜單
---- 如果每個主菜單帶有下拉，則一個菜單分一組
--banner（橫幅）
-內容
--模塊一
---模塊中小塊
---模塊中小塊
--模塊二
---模塊中小塊
---模塊中小塊
-底部
--菜單
-背景
總結：UI設計分組分層遵循一個統一的原則，儘量對每個小片進行分組，有層級分明的上下結構；圖層不合並；對圖層進行命名，屬同一個圖標的圖層用鏈鎖連起來或者分組。
讓前端切圖時想找任意一個圖標都可以輕易找到，不需要去一個一個的圖片來隱藏去找。
接下來有時間的話我會繼續寫前端html css規範，後端api開發規範。歡迎關注。
