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

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

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

 

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

 

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

大多數(shù)是因?yàn)橥粋€(gè)項(xiàng)目存在多個(gè)設(shè)計(jì)師橫向合作設(shè)計(jì)，以避免同一項(xiàng)目出現(xiàn)設(shè)計(jì)控件混亂問題。

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

 

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

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

 

 

 

（網(wǎng)上截圖）

 

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

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

 

 

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

 

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

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

 

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

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

 

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

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

 

顏色

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

 

 

 

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

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

 

 

圖標(biāo)

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

 

頁面布局框架 

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

 

按鈕

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

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

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

 

 

表單

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

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

 

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

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

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

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

 

 

 

表格

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

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

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

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

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

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

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

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

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

 

 

彈框

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

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

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

我們?cè)趯憦椏蛞?guī)范時(shí)，應(yīng)了解各自項(xiàng)目中需使用彈框的有哪些內(nèi)容，給出相關(guān)大小彈框的比例，哪些為固定尺寸，哪些為適配比例。對(duì)于通知提示給出停留多少時(shí)間后自動(dòng)消失。

 

 

缺省狀態(tài)

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

 

 

總結(jié)

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

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