如何寫后臺系統(tǒng)UI設(shè)計規(guī)范?

（閱讀本文需6分鐘左右）

經(jīng)過幾個后臺系統(tǒng)從無到有的設(shè)計，從前期的競品分析、設(shè)計規(guī)范與設(shè)計稿到開發(fā)最后產(chǎn)品落地。在整個過程中都會遇到很多需要反復(fù)思考，考慮實際情況調(diào)整設(shè)計方案、優(yōu)化設(shè)計交互的過程。在這個過程中參與討論的有產(chǎn)品、設(shè)計及開發(fā)，三方并行參與最后落地一個可實施優(yōu)于用戶體驗及視覺的方案。通過每一些細微的點的重復(fù)思考、探索慢慢的形成了一些可適用的大多數(shù)場景的可尋規(guī)律。文章中放入了一些自己項目中的內(nèi)容作為示例。

 

  設(shè)計規(guī)范存在的目的  

 

1、多個設(shè)計師同步設(shè)計

大多數(shù)是因為同一個項目存在多個設(shè)計師橫向合作設(shè)計，以避免同一項目出現(xiàn)設(shè)計控件混亂問題。

方便把控視覺統(tǒng)一性，提高效率，減少返工率。

 

2、提高開發(fā)效率、減少返工率

以及縱向到前端開發(fā)他們有了規(guī)范的約束后，在開發(fā)項目中會大大提高設(shè)計稿的還原度，以及規(guī)范建立他們自己的控件庫，提高復(fù)用率，減少返工的成本，如果做了規(guī)范，程序員從視覺規(guī)范中了解到哪些控件是可以一次性寫好并能重復(fù)調(diào)用。在規(guī)范的輔助下，開發(fā)在搭建全局共用控件時規(guī)則更加清晰明了，如按鈕、行間距、字體大小、色值等等。

 

 

 

（網(wǎng)上截圖）

 

3、輔助設(shè)計及開發(fā)理解業(yè)務(wù)

如果產(chǎn)品經(jīng)理在畫原型圖的時候能夠大概遵循設(shè)計規(guī)范的交互以及排版格式會減少開發(fā)再看原型圖和設(shè)計稿之間產(chǎn)生歧義，產(chǎn)品原型圖不需要精確，只需按照項目既定的規(guī)范排版即可，這樣既不會給產(chǎn)品造成過多的工作量，也方便了開發(fā)查看文檔（這個也看每個公司的合作方式，如果產(chǎn)品經(jīng)理能夠在一定程度遵循設(shè)計規(guī)范對下游的工作都是有非常大的好處的）。

 

 

 （公司的原型圖示例，為他們打電話）

 

4、方便產(chǎn)品迭代

產(chǎn)品在設(shè)計過程中，經(jīng)常會得到經(jīng)過市場檢驗或者由用戶反映體驗相關(guān)的一些問題，這時需要調(diào)整某些規(guī)范的控件交互或者顯示方式，有了設(shè)計規(guī)范開發(fā)可以快速定位控件位置，并根據(jù)新調(diào)整的樣式項目整體調(diào)整，大大提高了工作率。這樣統(tǒng)一修改的方式不錯出現(xiàn)，A頁面與B頁面統(tǒng)一控件用了兩種不同的顯示方式。

 

  如何開始著手整理規(guī)范  

對于我們設(shè)計師來說第一次在評審會上面對一個全新產(chǎn)品的時候是非常迷茫，聽著各種功能邏輯，各種解決方案。懵逼狀態(tài)（噓………）在項目還沒開始之前，大多數(shù)公司的設(shè)計是無法有機會和時間參與到前期的調(diào)研和競品分析工作中去的。這個時候我們就應(yīng)該帶著自己更多的疑問去問我們的上游產(chǎn)品經(jīng)理，我們的用戶群體是誰、年齡段的范圍、是什么樣的產(chǎn)品、解決用戶的什么問題等等。

 

對于落地實現(xiàn)我們需要清楚開發(fā)適配的分辨率是多少（后臺系統(tǒng)一般基于1920*1080尺寸做，然后適配1366*768的屏），對于某些行業(yè)還會考慮到用戶使用的顯示器（你永遠不知道你的甲方爸爸是在什么的環(huán)境和情況下使用），將我們能想到的各種因素都考慮進去，讓返工率降到最低。

在我們了解清楚項目的背景之后，就可以開始定位產(chǎn)品的設(shè)計風(fēng)格，根據(jù)產(chǎn)品原型出幾張產(chǎn)品風(fēng)格前期定位的示例設(shè)計稿，主要包括項目的主體界面風(fēng)格包含顏色、按鈕、表格、表單、彈框等相關(guān)樣式的提現(xiàn)。出這些前期的示例頁面是為了方便組內(nèi)討論以及跟領(lǐng)導(dǎo)展示到最后的敲定。

 

顏色

主色調(diào)的選擇，一般根據(jù)用戶群體、用戶使用場景以及產(chǎn)品的定位來進行思考和選取。當(dāng)然對于后臺系統(tǒng)來說系統(tǒng)可做皮膚功能的擴展，給定用戶一個基礎(chǔ)的色調(diào)，然后做幾套配色好的皮膚，讓用戶可以自由選擇。對于公司來說一個項目可能會兼顧多個客戶，客戶都想要根據(jù)自己品牌色來做自己的系統(tǒng)，擁有多套可選擇的方案也給后續(xù)維護和銷售提供了便利。

 

 

 

標(biāo)準(zhǔn)字

后臺系統(tǒng)在字體選擇上都比較單一，中文：微軟雅黑、英文：Arial即可。只是注意在給前端開發(fā)培訓(xùn)規(guī)范的時候重點提醒他們需要做字體樣式的重置，不然當(dāng)你后期走查界面的時候一個頁面同時有宋體、有微軟雅黑強迫癥嚴重受不了啊，會非常影響看界面的心情。體會過走查這一步的設(shè)計師都懂。

 

 

圖標(biāo)

圖標(biāo)現(xiàn)在幾乎不用切圖的方式去做了，都在是制作完成后上傳到阿里巴巴的字體圖標(biāo)庫中。前端調(diào)用方便調(diào)整大小和顏色也方便，關(guān)鍵是怎么處理都不會失真。

 

頁面布局框架 

我們在設(shè)計過程中，還需要考慮我們基于什么樣的尺寸進行基礎(chǔ)設(shè)計。劃分哪些區(qū)域需要固定尺寸、哪些需要做適配、菜單是否支持收縮功能等等。據(jù)統(tǒng)計，使用中系統(tǒng)的用戶的主流分辨率主要為 1920、1440 和 1366，個別系統(tǒng)還存在 1280 的顯示設(shè)備。具體適配最低和最高分辨率也可根據(jù)你的用戶使用情況來決定，我們一般基于1920設(shè)計，下限考慮1366的分辨率即可。頁面包括頂欄、頁簽、各應(yīng)用左側(cè)菜單、主體內(nèi)容等區(qū)域。各系統(tǒng)有部分差異根據(jù)自身情況來定。

 

按鈕

最按鈕是交互設(shè)計中必備的元素，它在用戶和系統(tǒng)的交互中承擔(dān)著非常重要的作用。后臺中常見的按鈕類型分為線性按鈕、面狀按鈕、文字按鈕、圖標(biāo)按鈕、文字+圖標(biāo)按鈕。規(guī)范中要寫出按鈕的樣式包括寬高、圓角以及文字按鈕的字數(shù)一般限制6個以內(nèi)（這個是給產(chǎn)品同事看，有時候會拿到原型一個按鈕字數(shù)特別長。想想看一個正常的按鈕字數(shù)太多了用戶都需要花很長時間去讀取這個按鈕的功能然后再操作，非常影響用戶體驗）。

按鈕的寬度給一個常規(guī)的寬度和高度，然后操作正常寬度文字離邊框的間間距是多少都需要寫清楚。

以及按鈕的各種狀態(tài)：默認狀態(tài)、鼠標(biāo)懸停、焦點獲取、按住/激活、禁用

 

 

表單

常見表單是由多個列表項構(gòu)成的。而每一個列表項都是由最基本的標(biāo)簽（標(biāo)題）和輸入框組成，常規(guī)的表單包括單選、多選、下拉選、輸入框、時間選擇、開關(guān)選擇、圖片附件上傳等眾多控件。

標(biāo)簽與控件之前的對齊方式有左標(biāo)簽、頂部標(biāo)簽、行內(nèi)標(biāo)簽

 

左標(biāo)簽是比較常見的對齊方式，對與后臺系統(tǒng)也是比較常用的一種方式，比較符合pc端常規(guī)顯示屏橫向空間比較充足的場景

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

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

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

 

 

 

表格

表格，對于大家來說再熟悉不過了，表格在后臺系統(tǒng)設(shè)計中應(yīng)該能占40%左右的比重，它看似簡單橫豎條。卻有著非常多細小卻影響用戶體驗的小細節(jié)?？偨Y(jié)幾點我每次寫規(guī)范會考慮到的

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

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

列表的寬度：寬度自適應(yīng)，但根據(jù)字段的重要性顯示，重要字段優(yōu)先完整顯示，出寬度限以“...”代替，鼠標(biāo)經(jīng)過展示全部內(nèi)容

列標(biāo)題：表頭列標(biāo)題最多輸入8個字符（在復(fù)雜的后臺系統(tǒng)中，會出現(xiàn)字數(shù)較多的標(biāo)題，這些需要和產(chǎn)品共同討論選取簡短又能表達清楚含義的名稱）

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

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

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

對齊：表格數(shù)值型內(nèi)容左對齊，非數(shù)值型右對齊

 

 

彈框

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

模態(tài)框：對話框、抽屜式側(cè)滑窗

模非模態(tài)：警示框、氣泡提示框、通知提示

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

 

 

缺省狀態(tài)

缺省頁面是當(dāng)頁面沒有數(shù)據(jù)、用戶沒有建立資料或者網(wǎng)絡(luò)連接不通暢的情況下所展現(xiàn)的頁面。為了緩解用戶面對這類情況產(chǎn)生焦慮情緒以及面對這類情況的手足無措，設(shè)計師可以用一些插畫和文字的結(jié)合來引導(dǎo)用戶進行下一步的操作。

 

 

總結(jié)

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

把公司一個項目的規(guī)范發(fā)出來大家學(xué)習(xí)互相討論一下。