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