左標簽是比較常見的對齊方式，對與后臺系統也是比較常用的一種方式，比較符合pc端常規顯示屏橫向空間比較充足的場景

頂部標簽是標簽在控件的上方，標簽可以和控件很整齊的靠左對齊，對于橫向空間不足的情況是一種很好的方案，但它同時也增加了整個表單的豎向高度，表單內容太多時，用戶可能需要多次使用滾動條才能填完整個表單。

行內標簽非常大的節省了空間，但是填寫錯誤率非常高，當空間獲取焦點的時候標簽名就消失了，用戶可能忘記了當前填寫的標簽是什么內容，需要用戶的記憶成本。

每個標簽都有它的優缺點根據自己的產品選擇一種最適合自己產品的方式，規范中確定標簽的對齊方式，每個控件的寬高度，控件之間的間距以及控件的各種狀態(默認、激活、禁用、錯誤提示)。表單填寫中錯誤提示的引導尤為重要，例如我們在填寫手機號碼時，用戶填寫可能少填了一位提示文字如果是“您填寫的號碼有誤”，這時候需要用戶自己去查找錯誤點在哪里。如果我們能快速給用戶定位錯誤點給出提示“手機號不足11位”，這樣的提示能幫助用戶快速正確填寫完表單，提高用戶的工作效率。

表格

表格，對于大家來說再熟悉不過了，表格在后臺系統設計中應該能占40%左右的比重，它看似簡單橫豎條。卻有著非常多細小卻影響用戶體驗的小細節。總結幾點我每次寫規范會考慮到的

操作列按鈕：每個按鈕字數不得超過6個字。超過4個的按鈕采用折疊方式，用“更多”收縮多余按鈕

列數太多：默認展示范圍：3-8列，若出現更多，可固定重要列，剩余列滾動條展示(做好能支持用戶隊列的自動排序)

列表的寬度：寬度自適應，但根據字段的重要性顯示，重要字段優先完整顯示，出寬度限以“...”代替，鼠標經過展示全部內容

列標題：表頭列標題最多輸入8個字符(在復雜的后臺系統中，會出現字數較多的標題，這些需要和產品共同討論選取簡短又能表達清楚含義的名稱)

表行：表格行高可設置為字體高度的2.5倍到3倍，采用斑馬線方式展示，加強視覺流的橫向引導。表頭與表體的顏色做區分

滾動條：表格內容超過一屏需要顯示豎向滾動條時， 需要固定表頭和頁碼。只需滾動表體內容部分

空數據：表格某部分無數據時用“-”來填充顯示,對于數據為零的單元格，填上0

對齊：表格數值型內容左對齊，非數值型右對齊

彈框

彈框主要分為兩個大類模態彈框和非模態彈框，他們最大的區別就是是否強制用戶交互。模態彈框會打斷用戶的當前操作流程，只允許用戶在當前彈窗上進行操作,非模態則反之。后臺中常見的有

模態框：對話框、抽屜式側滑窗

模非模態：警示框、氣泡提示框、通知提示

我們在寫彈框規范時，應了解各自項目中需使用彈框的有哪些內容，給出相關大小彈框的比例，哪些為固定尺寸，哪些為適配比例。對于通知提示給出停留多少時間后自動消失。

缺省狀態

缺省頁面是當頁面沒有數據、用戶沒有建立資料或者網絡連接不通暢的情況下所展現的頁面。為了緩解用戶面對這類情況產生焦慮情緒以及面對這類情況的手足無措，設計師可以用一些插畫和文字的結合來引導用戶進行下一步的操作。

總結

經過設計師的規范整理，最終需要落地實現才是最重要的一步。規范確立以后我們需要對前端同事進行規范內容的培訓，讓前端同事清楚每一塊內容的細節部分。規范培訓的這步工作非常重，因為前端同事也會分好幾個人一起項目，同時一個大的產品都會分成多個小模塊來逐步開發，這樣的工作模式是在無形中會增加樣式不統一的幾率。所以我們在開發前期要做好培訓這一步，也會減少后期的返工量。規范也需要給標注(我一般上傳到藍湖)，方便前端開發根據規范樣式組建他們的控件庫。在實際工作中，也會有一些特殊的控件是由根據前端提供的控件庫讓我們來選擇合適的控件然后更改樣式。現在各種好用又比較完善的控件層出不窮，選擇現有的控件可以節省開發很多的工作時間。

把公司一個項目的規范發出來大家學習互相討論一下。