后臺UI設(shè)計其實都趨于相同，除了定義的品牌色以及業(yè)務(wù)邏輯的不同，整理設(shè)計控件和模版，實現(xiàn)組件的復(fù)用，從而減少開發(fā)的成本。以下是一些規(guī)范總結(jié)。
布局
統(tǒng)一的布局，會讓頁面統(tǒng)一，并具有秩序之美。設(shè)計是感性的，也是理性的，統(tǒng)一的布局以及統(tǒng)一的模度，讓界面有有秩序感和韻律感。
統(tǒng)一畫板尺寸
后臺設(shè)計的統(tǒng)一畫板尺寸的寬度為1440，一方面為了不同設(shè)計師設(shè)計的統(tǒng)一性，另一方面在設(shè)計師用筆記本演示的時候是全屏的體驗效果。
適配
設(shè)計畫布尺寸和實際屏幕的寬度是有出入的，主流屏幕分辨率從1920、1440、1366以及小屏幕的1280的顯示設(shè)備，我們設(shè)計的時候，可以根據(jù)設(shè)計需要設(shè)置版心的寬度，在主流屏幕中，可以全部顯示數(shù)據(jù)，其他部分留白或者工作區(qū)根據(jù)設(shè)計的布局動態(tài)縮放。
1. 左右欄布局
導(dǎo)航欄長度以及位置固定，工作區(qū)動態(tài)擴展。
2. 上下布局
導(dǎo)航欄上部固定，工作區(qū)寬度固定，左右空白間距動態(tài)擴展。
布局柵格化
布局采用 24 柵格體系。以 1440x768 大小的畫布，對寬度為 1128 的內(nèi)容區(qū)域進行 24 柵格的劃分設(shè)置，頁面中柵格的 Gutter 設(shè)定了定值，即瀏覽器在一定范圍擴大或縮小，柵格的 Column 寬度會隨之?dāng)U大或縮小，但 Gutter 的寬度值固定不變。
其中： 1 column， 1 gutter=24px，總寬度 = 23列 + 1 column， 1 列 = 1 column + 1 gutter
柵格化之后，在設(shè)計中，我們可以對布局進行劃分，使整體界面整體有序。
網(wǎng)格模數(shù)
布局保持了 8 倍數(shù)的原則、具備動態(tài)的韻律感。在1128的柵格化設(shè)計中，column/gutter=24px，即8x3。
在后續(xù)的控件的設(shè)計中，大小可以采用32px（8x4），40px（8x5）；
在布局的相對間距可以采用8px，16px（8x2），24px（8x3）。
顏色
顏色有品牌色和功能色之分。
主題色
品牌色是根據(jù)已有的顏色進行設(shè)計，因為后臺一般是與客戶端配合使用，可以使用與客戶端相匹配的顏色。如果自主重新配色的選擇話，建議使用冷色系，比如藍色。因為我們的品牌色，是橙色系，因此在顏色上采用了橙色和深藍色（補色），橙色不適合大面積使用，整體界面會很亮，藍色作為補充使用，可使后臺界面整體沉穩(wěn)，更符合后臺界面的調(diào)性。
功能色
功能色主要有四種：成功、鏈接、警告、錯誤四種，用來表示信息以及流程的狀態(tài)。
文字色
title/標(biāo)題
emphasize/強調(diào)
body/正文
secondary/二級文字
disable/不可用文字
UI元素色
色值給出參考，如果需要重新定義，可以參考顏色的色相和明度
background/背景色
tableHeader/表單背景色
border/描邊
divider/分割線
文字
網(wǎng)頁端文字大小，最小文字一般大小為12px，正文為14px。配合16px、20px、24px、30px…使用。行間距在字體基礎(chǔ)上加8px，12px的行間距即為20px。
圖標(biāo)
圖標(biāo)基于1024x1024的畫板上繪制，留出出血位（切圖為位圖，像素會有一定的擴展），根據(jù)里面的形狀進行設(shè)計，保證視覺的統(tǒng)一。圖標(biāo)尺寸按照8的倍數(shù)進行延展。包括圓角以及線的寬度。圖標(biāo)管理可以使用iconfront建立自己的圖標(biāo)庫，方便開發(fā)以及多次使用。
詳細介紹可以參照：https://ant.design/docs/spec/icon-cn
按鈕
按鈕是用戶進行點擊操作，分類一般為，文字按鈕、線性按鈕、填充按鈕、虛線按鈕。
按鈕大小可根據(jù)8的模數(shù)變化，small、default、big，以填充性按鈕為例。
交互態(tài)，主要為正常、按壓，懸停、不可用。
為了統(tǒng)一樣式，對于懸停樣式，采用文字改變透明度；按壓采用按鈕背景色變深（填充色采用添加一層10%的黑色蒙板，線性按鈕采用添加灰色背景的填充）；不可用按鈕，采用灰色背景。
導(dǎo)航欄
為頁面和功能提供導(dǎo)航的菜單列表，常用于網(wǎng)站頂部和左側(cè)。大多數(shù)的后臺設(shè)計網(wǎng)站，多為左側(cè)菜單欄的設(shè)計。
輸入框/選擇框
在后臺設(shè)計中，數(shù)據(jù)的輸入以及數(shù)據(jù)選擇框會占比較大的比例，因此定義好這兩個控件的交互態(tài)，一級可能出現(xiàn)的應(yīng)用形式會讓我們在后臺設(shè)計中省時省力。
輸入框的交互態(tài)
默認樣式、獲取焦點、輸入結(jié)果、 校檢錯誤、 禁用狀態(tài)
輸入框的形式
直接使用默認提示語，這種比較適合選項較少，對用戶的記憶要求不是那么高的時候（盡量不要超過4個）；當(dāng)選項較多的時候，適合標(biāo)題+輸入框的形式。
以登錄注冊為例，輸入數(shù)據(jù)的數(shù)量較少，可以采用無標(biāo)題的形式。
輸入表單
在我們輸入的數(shù)據(jù)類型比較多的時候，輸入框和選擇框有很多變形，來滿足我們對不同數(shù)據(jù)類型的輸入。
輸入框尺寸
輸入框的長度可以根據(jù)需要調(diào)整，但是為了界面的統(tǒng)一，我們以8的模數(shù)對高度進行定義，24px、32px、40px。
表單
后臺系統(tǒng)的頁面由很多表單組成，大多數(shù)界面都是各類的表單。大表單、默認表單、小表單尺寸的模數(shù)也采用：40px、48px、60px。
分頁
上傳
上傳包括附件以及圖片，在特定比例的圖片或者封面之類的圖片上傳中，我們設(shè)計可裁剪的彈框（不是所有人可以像我們設(shè)計師這樣P圖的）
步驟條
選擇框
常用缺省圖
缺省圖，采用了情感化的扁平化的插畫形式，緩解用戶的焦慮等待的情緒。
選擇了比較常出現(xiàn)的幾個控件做了分享，還有可能遇到的更多的情況，可以參考以下網(wǎng)站。如果可以把主要的控件定義，做成模版，在具體場景中進行重組，在節(jié)省開發(fā)和設(shè)計人力的同時，讓界面統(tǒng)一有美感。設(shè)計的同學(xué)也可以搬運組件，讓設(shè)計更高效。
