后臺(tái)其實(shí)趨于相同，除了你定義的品牌色以及業(yè)務(wù)邏輯的不同，設(shè)計(jì)控件以及設(shè)計(jì)方法差不多。

布局

統(tǒng)一的布局，會(huì)讓頁面統(tǒng)一，并具有秩序之美。設(shè)計(jì)是感性的，也是理性的，統(tǒng)一的布局以及統(tǒng)一的模度，讓界面有秩序感和韻律感。

統(tǒng)一畫板尺寸

后臺(tái)設(shè)計(jì)的統(tǒng)一畫板尺寸的寬度為1440，一方面為了不同設(shè)計(jì)師設(shè)計(jì)的統(tǒng)一性，另一方面在設(shè)計(jì)師用筆記本演示的時(shí)候是全屏的體驗(yàn)效果。

適配

設(shè)計(jì)畫布尺寸和實(shí)際屏幕的寬度是有出入的，主流屏幕分辨率從1920、1440、1360以及小屏幕的1280的顯示設(shè)備，我們?cè)O(shè)計(jì)的時(shí)候，可以根據(jù)設(shè)計(jì)需要設(shè)置版心的寬度，在主流屏幕中，可以全部顯示數(shù)據(jù)，其他部分留白或者工作區(qū)根據(jù)設(shè)計(jì)的布局動(dòng)態(tài)縮放。

（1）左右欄布局：導(dǎo)航欄長度以及位置固定，工作區(qū)動(dòng)態(tài)擴(kuò)展

（2）上下布局：導(dǎo)航欄上部固定，工作區(qū)寬度固定，左右空白間距動(dòng)態(tài)擴(kuò)展

主題色

品牌色是根據(jù)已有的顏色進(jìn)行設(shè)計(jì)，因?yàn)楹笈_(tái)一般是與客戶端配合使用，可以使用與客戶端相匹配的顏色，如果自主重新配色的話，建議使用冷色系

功能色

功能色主要有四種：成功、鏈接、警告錯(cuò)誤四種，用來表達(dá)信息及流程的狀態(tài)

文字

網(wǎng)頁端文字大小，最小文字一般大小為12px，正文為14px。配合16px、20px、24px、30px使用，行間距在字體基礎(chǔ)上加8px

圖標(biāo)

圖標(biāo)基于1024x1024的畫板上繪制，留出出血位，根據(jù)里面的形狀進(jìn)行設(shè)計(jì)，保證視覺的統(tǒng)一。圖標(biāo)尺寸按照8的倍數(shù)進(jìn)行延展。包括圓角以及線的寬度。圖標(biāo)管理可以使用iconfront建立自己的圖標(biāo)庫，方便開發(fā)以及多次使用

按鈕

按鈕是用戶進(jìn)行點(diǎn)擊操作，分類一般為，文字按鈕、線性按鈕、填充按鈕、虛線按鈕。

按鈕大小可以根據(jù)8的模數(shù)變化，small、default、big，以填充性按鈕為例。

交互態(tài)，主要為正常、按壓，懸停、不可用。

為了統(tǒng)一樣式，對(duì)于懸停樣式，采用文字改變透明度；按壓采用按鈕背景色變身（填充色采用添加一層10%的黑色蒙板，線性按鈕采用添加灰色背景額填充）；不可用的按鈕，采用灰色背景

導(dǎo)航欄

為頁面和功能提供導(dǎo)航的菜單列表，常用于網(wǎng)站頂部和左側(cè)，大多數(shù)的后臺(tái)設(shè)計(jì)網(wǎng)站，多為左側(cè)菜單欄的設(shè)計(jì)

輸入框/選擇框

（1）輸入框的交互態(tài)

默認(rèn)樣式、獲取焦點(diǎn)、輸入結(jié)果、校檢錯(cuò)誤、禁用狀態(tài)

（2）輸入框的形式

直接使用默認(rèn)提示語，這種比較適合選項(xiàng)較少，對(duì)用戶的記憶要求不是那么高的時(shí)候；當(dāng)選項(xiàng)較多的時(shí)候，適合標(biāo)題+輸入框的形式

（3）輸入表單

在我們輸入的數(shù)據(jù)類型比較多的時(shí)候，輸入框和選擇框有很多變形，來滿足我們對(duì)不用數(shù)據(jù)類型的輸入

（4）輸入框尺寸

輸入框的長度可以根據(jù)需要調(diào)整，但是為了界面的統(tǒng)一，我們以8的模數(shù)對(duì)高度進(jìn)行定義。24px、32px、40px

表單

后臺(tái)系統(tǒng)的頁面由很多表單組成，大多數(shù)界面都是各類的表單，大表單、默認(rèn)表單、小表單尺寸的模數(shù)也采用：40px、48px、60px

上傳

上傳包括附件及圖片，在特定比例的圖片或者封面之類的圖片上傳中，我們?cè)O(shè)計(jì)可裁剪的彈框

步驟條

選擇框