經(jīng)過幾個后臺系統(tǒng)從無到有的設(shè)計，從前期的競品分析、設(shè)計規(guī)范與設(shè)計稿到開發(fā)最后產(chǎn)品落地。在整個過程中都會遇到很多需要反復(fù)思考，考慮實際情況調(diào)整設(shè)計方案、優(yōu)化設(shè)計交互的過程。在這個過程中參與討論的有產(chǎn)品、設(shè)計及開發(fā)，三方并行參與最后落地一個可實施優(yōu)于用戶體驗及視覺的方案。通過每一些細(xì)微的點的重復(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è)還會考慮到用戶使用的顯示器(你永遠(yuǎn)不知道你的甲方爸爸是在什么的環(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)你后期走查界面的時候一個頁面同時有宋體、有微軟雅黑強迫癥嚴(yán)重受不了啊，會非常影響看界面的心情。體會過走查這一步的設(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ī)范中要寫出按鈕的樣式包括寬高、圓角以及文字按鈕的字?jǐn)?shù)一般限制6個以內(nèi)(這個是給產(chǎn)品同事看，有時候會拿到原型一個按鈕字?jǐn)?shù)特別長。想想看一個正常的按鈕字?jǐn)?shù)太多了用戶都需要花很長時間去讀取這個按鈕的功能然后再操作，非常影響用戶體驗)。

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

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

表單

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

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