經(jīng)過(guò)幾個(gè)后臺(tái)系統(tǒng)從無(wú)到有的設(shè)計(jì)，從前期的競(jìng)品分析、設(shè)計(jì)規(guī)范與設(shè)計(jì)稿到開(kāi)發(fā)最后產(chǎn)品落地。在整個(gè)過(guò)程中都會(huì)遇到很多需要反復(fù)思考，考慮實(shí)際情況調(diào)整設(shè)計(jì)方案、優(yōu)化設(shè)計(jì)交互的過(guò)程。在這個(gè)過(guò)程中參與討論的有產(chǎn)品、設(shè)計(jì)及開(kāi)發(fā)，三方并行參與最后落地一個(gè)可實(shí)施優(yōu)于用戶體驗(yàn)及視覺(jué)的方案。通過(guò)每一些細(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ì)控件混亂問(wèn)題。

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

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

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

(網(wǎng)上截圖)

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

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

(公司的原型圖示例，為他們打電話)

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

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

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

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

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

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

顏色

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

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

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

圖標(biāo)

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

頁(yè)面布局框架

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

按鈕

最按鈕是交互設(shè)計(jì)中必備的元素，它在用戶和系統(tǒng)的交互中承擔(dān)著非常重要的作用。后臺(tái)中常見(jiàn)的按鈕類型分為線性按鈕、面狀按鈕、文字按鈕、圖標(biāo)按鈕、文字+圖標(biāo)按鈕。規(guī)范中要寫(xiě)出按鈕的樣式包括寬高、圓角以及文字按鈕的字?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ī)的寬度和高度，然后操作正常寬度文字離邊框的間間距是多少都需要寫(xiě)清楚。

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

表單

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

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