如何寫後臺系統UI設計規範
（閱讀本文需6分鐘左右）
經過幾個後臺系統從無到有的設計，從前期的競品分析、設計規範與設計稿到開發最後產品落地。在整個過程中都會遇到很多需要反覆思考，考慮實際情況調整設計方案、優化設計互動的過程。在這個過程中參與討論的有產品、設計及開發，三方並行參與最後落地一個可實施優於使用者體驗及視覺的方案。通過每一些細微的點的重複思考、探索慢慢的形成了一些可適用的大多數場景的可尋規律。文章中放入了一些自己專案中的內容作為示例。
設計規範存在的目的
1 、多個設計師同步設計
大多數是因為同一個專案存在多個設計師橫向合作設計，以避免同一專案出現設計控制元件混亂問題。
方便把控視覺統一性，提高效率，減少返工率。
2 、提高開發效率、減少返工率
以及縱向到前端開發他們有了規範的約束後，在開發專案中會大大提高設計稿的還原度，以及規範建立他們自己的控制元件庫，提高複用率，減少返工的成本，如果做了規範，程式員從視覺規範中瞭解到哪些控制元件是可以一次性寫好並能重複調 用。 在規範的輔助下，開發在搭建全域性共用控制元件時規則更加清晰明瞭，如按鈕、行間距、字型大小、色值等等。
（網上截圖）
3 、輔助設計及開發理解業務
如果產品經理在畫原型圖的時候能夠大概遵循設計規範的互動以及排版格式會減少開發再看原型圖和設計稿之間產生歧義，產品原型圖不需要精確，只需按照專案既定的規範排版即可，這樣既不會給產品造成過多的工作量，也方便了開發檢視文件（這個也看每個公司的合作方式，如果產品經理能夠在一定程度遵循設計規範對下游的工作都是有非常大的好處的）。
（公司的原型圖示例，為他們打電話）
4 、方便產品迭代
產品在設計過程中，經常會得到經過市場檢驗或者由使用者反映體驗相關的一些問題，這時需要調整某些規範的控制元件互動或者顯示方式，有了設計規範開發可以快速定位控制元件位置，並根據新調整的樣式專案整體調整，大大提高了工作率。這樣統一修改的方式不錯出現，A頁面與B頁面統一控制元件用了兩種不同的顯示方式。
如何開始著手整理規範
對於我們設計師來說第一次在評審會上面對一個全新產品的時候是非常迷茫，聽著各種功能邏輯，各種解決方案。懵逼狀態（噓………）在專案還沒開始之前，大多數公司的設計是無法有機會和時間參與到前期的調研和競品分析工作中去的。這個時候我們就應該帶著自己更多的疑問去問我們的上游產品經理，我們的使用者群體是誰、年齡段的範圍、是什麼樣的產品、解決使用者的什麼問題等等。
對於落地實現我們需要清楚開發適配的解析度是多少（後臺系統一般基於1920*1080尺寸做，然後適配1366*768的屏），對於某些行業還會考慮到使用者使用的顯示器（你永遠不知道你的甲方爸爸是在什麼的環境和情況下使用），將我們能想到的各種因素都考慮進去，讓返工率降到最低。
在我們瞭解清楚專案的背景之後，就可以開始定位產品的設計風格，根據產品原型出幾張產品風格前期定位的示例設計稿，主要包括專案的主體介面風格包含顏色、按鈕、表格、表單、彈框等相關樣式的提現。出這些前期的示例頁面是為了方便組內討論以及跟領導展示到最後的敲定。
顏色
主色調的選擇，一般根據使用者群體、使用者使用場景以及產品的定位來進行思考和選取。當然對於後臺系統來說系統可做面板功能的擴充套件，給定使用者一個基礎的色調，然後做幾套配色好的面板，讓使用者可以自由選擇。對於公司來說一個專案可能會兼顧多個客戶，客戶都想要根據自己品牌色來做自己的系統，擁有多套可選擇的方案也給後續維護和銷售提供了便利。
標準字
後臺系統在字型選擇上都比較單一，中文：微軟雅黑、英文：Arial即可。只是注意在給前端開發培訓規範的時候重點提醒他們需要做字型樣式的重置，不然當你後期走查介面的時候一個頁面同時有宋體、有微軟雅黑強迫症嚴重受不了啊，會非常影響看介面的心情。體會過走查這一步的設計師都懂。
圖示
圖示現在幾乎不用切圖的方式去做了，都在是製作完成後上傳到阿里巴巴的字型圖示庫中。前端呼叫方便調整大小和顏色也方便，關鍵是怎麼處理都不會失真。
頁面佈局框架
我們在設計過程中，還需要考慮我們基於什麼樣的尺寸進行基礎設計。劃分哪些區域需要固定尺寸、哪些需要做適配、選單是否支援收縮功能等等。據統計，使用中系統的使用者的主流解析度主要為 1920、1440 和 1366，個別系統還存在 1280 的顯示裝置。具體適配最低和最高解析度也可根據你的使用者使用情況來決定，我們一般基於1920設計，下限考慮1366的解析度即可。頁面包括頂欄、頁籤、各應用左側選單、主體內容等區域。各系統有部分差異根據自身情況來定。 
按鈕
最按鈕是互動設計中必備的元素，它在使用者和系統的互動中承擔著非常重要的作用。後臺中常見的按鈕型別分為線性按鈕、面狀按鈕、文字按鈕、圖示按鈕、文字+圖示按鈕。規範中要寫出按鈕的樣式包括寬高、圓角以及文字按鈕的字數一般限制6個以內（這個是給產品同事看，有時候會拿到原型一個按鈕字數特別長。想想看一個正常的按鈕字數太多了使用者都需要花很長時間去讀取這個按鈕的功能然後再操作，非常影響使用者體驗）。
按鈕的寬度給一個常規的寬度和高度，然後操作正常寬度文字離邊框的間間距是多少都需要寫清楚。
以及按鈕的各種狀態：預設狀態、滑鼠懸停、焦點獲取、按住/啟用、禁用
表單
常見表單是由多個列表項構成的。而每一個列表項都是由最基本的標籤（標題）和輸入框組成，常規的表單包括單選、多選、下拉選、輸入框、時間選擇、開關選擇、圖片附件上傳等眾多控制元件。
標籤與控制元件之前的對齊方式有左標籤、頂部標籤、行內標籤
左標籤是比較常見的對齊方式，對與後臺系統也是比較常用的一種方式，比較符合pc端常規顯示屏橫向空間比較充足的場景
頂部標籤是標籤在控制元件的上方，標籤可以和控制元件很整齊的靠左對齊，對於橫向空間不足的情況是一種很好的方案，但它同時也增加了整個表單的豎向高度，表單內容太多時，使用者可能需要多次使用滾動條才能填完整個表單。
行內標籤非常大的節省了空間，但是填寫錯誤率非常高，當空間獲取焦點的時候標籤名就消失了，使用者可能忘記了當前填寫的標籤是什麼內容，需要使用者的記憶成本。
每個標籤都有它的優缺點根據自己的產品選擇一種最適合自己產品的方式，規範中確定標籤的對齊方式，每個控制元件的寬高度，控制元件之間的間距以及控制元件的各種狀態（預設、啟用、禁用、錯誤提示）。表單填寫中錯誤提示的引導尤為重要，例如我們在填寫手機號碼時，使用者填寫可能少填了一位提示文字如果是“您填寫的號碼有誤”，這時候需要使用者自己去查詢錯誤點在哪裡。如果我們能快速給使用者定位錯誤點給出提示“手機號不足11位”，這樣的提示能幫助使用者快速正確填寫完表單，提高使用者的工作效率。
表格
表格，對於大家來說再熟悉不過了，表格在後臺系統設計中應該能佔40%左右的比重，它看似簡單橫豎條。卻有著非常多細小卻影響使用者體驗的小細節。總結幾點我每次寫規範會考慮到的
操作列按鈕：每個按鈕字數不得超過6個字。超過4個的按鈕採用摺疊方式，用“更多”收縮多餘按鈕
列數太多：預設展示範圍：3-8列，若出現更多，可固定重要列，剩餘列滾動條展示（做好能支援使用者佇列的自動排序）
列表的寬度：寬度自適應，但根據欄位的重要性顯示，重要欄位優先完整顯示，出寬度限以“...”代替，滑鼠經過展示全部內容
列標題：表頭列標題最多輸入8個字元（在複雜的後臺系統中，會出現字數較多的標題，這些需要和產品共同討論選取簡短又能表達清楚含義的名稱）
錶行：表格行高可設定為字型高度的2.5倍到3倍，採用斑馬線方式展示，加強視覺流的橫向引導。表頭與表體的顏色做區分
滾動條：表格內容超過一屏需要顯示豎向滾動條時， 需要固定表頭和頁碼。只需滾動表體內容部分
空資料：表格某部分無資料時用“-”來填充顯示,對於資料為零的單元格，填上0
對齊：表格數值型內容左對齊，非數值型右對齊
彈框
彈框主要分為兩個大類模態彈框和非模態彈框，他們最大的區別就是是否強制使用者互動。模態彈框會打斷使用者的當前操作流程，只允許使用者在當前彈窗上進行操作,非模態則反之。後臺中常見的有
模態框：對話方塊、抽屜式側滑窗
模非模態：警示框、氣泡提示框、通知提示
我們在寫彈框規範時，應瞭解各自專案中需使用彈框的有哪些內容，給出相關大小彈框的比例，哪些為固定尺寸，哪些為適配比例。對於通知提示給出停留多少時間後自動消失。
預設狀態
預設頁面是當頁面沒有資料、使用者沒有建立資料或者網路連線不通暢的情況下所展現的頁面。為了緩解使用者面對這類情況產生焦慮情緒以及面對這類情況的手足無措，設計師可以用一些插畫和文字的結合來引導使用者進行下一步的操作。
總結
經過設計師的規範整理，最終需要落地實現才是最重要的一步。規範確立以後我們需要對前端同事進行規範內容的培訓，讓前端同事清楚每一塊內容的細節部分。規範培訓的這步工作非常重，因為前端同事也會分好幾個人一起專案，同時一個大的產品都會分成多個小模組來逐步開發，這樣的工作模式是在無形中會增加樣式不統一的機率。所以我們在開發前期要做好培訓這一步，也會減少後期的返工量。規範也需要給標註（我一般上傳到藍湖），方便前端開發根據規範樣式組建他們的控制元件庫。在實際工作中，也會有一些特殊的控制元件是由根據前端提供的控制元件庫讓我們來選擇合適的控制元件然後更改樣式。現在各種好用又比較完善的控制元件層出不窮，選擇現有的控制元件可以節省開發很多的工作時間。
把公司一個專案的規範發出來大家學習互相討論一下。
