一套完善的產(chǎn)品化設(shè)計(jì)系統(tǒng)，可以解決內(nèi)部協(xié)作的一致性問(wèn)題，解決設(shè)計(jì)系統(tǒng)更新的周期性問(wèn)題，解決一群設(shè)計(jì)師與工程師如何規(guī)?；纳a(chǎn)各種業(yè)務(wù)、UI的問(wèn)題，從而最終解決用戶(hù)體驗(yàn)一致性的問(wèn)題。說(shuō)到自己，公司的產(chǎn)品從接手開(kāi)始便是以antdesign作為前端框架，所以很多人會(huì)說(shuō)后臺(tái)用antdesign、Element或者Taro的框架就足夠了呀，當(dāng)然不～在已有的成熟框架下，也并不能完全滿(mǎn)足產(chǎn)品日（sang）益（xin）旺（bing）盛（kuang）的需求，所以設(shè)設(shè)計(jì)規(guī)范還是很有必要的。

作為B端設(shè)計(jì)師，視覺(jué)表現(xiàn)層面權(quán)重逐漸減少，更多的是需要梳理邏輯流程，將線下業(yè)務(wù)更好的梳理到線上流程，所以熟知設(shè)計(jì)規(guī)范可以更效率的完成工作。

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

1、解決內(nèi)部協(xié)作的一致性問(wèn)題

為設(shè)計(jì)師內(nèi)部溝通協(xié)作起到?jīng)Q定作用，當(dāng)同一個(gè)項(xiàng)目存在多個(gè)設(shè)計(jì)師橫向設(shè)計(jì)的時(shí)候，設(shè)計(jì)規(guī)范會(huì)避免顏色錯(cuò)誤、間距失調(diào)、控件混亂等問(wèn)題。

2、解決設(shè)計(jì)系統(tǒng)更新的周期性問(wèn)題

隨著產(chǎn)品的不斷推進(jìn)和發(fā)展，為了新增的需求和不斷優(yōu)化的用戶(hù)體驗(yàn)，這時(shí)候會(huì)需要對(duì)某些規(guī)范控件進(jìn)行調(diào)整，在有設(shè)計(jì)規(guī)范的情況下，可以迅速對(duì)接開(kāi)發(fā)快速全局調(diào)整控件，極大的提升了設(shè)計(jì)和開(kāi)發(fā)的工作效率。

3、解決設(shè)計(jì)師與工程師如何規(guī)?；纳a(chǎn)各種業(yè)務(wù)

關(guān)于和開(kāi)發(fā)對(duì)接，圖標(biāo)在如今有了iconfont的項(xiàng)目管理下，項(xiàng)目可以建立自己的圖標(biāo)庫(kù)。再加上設(shè)計(jì)建立的可復(fù)用的公共控件庫(kù)，開(kāi)發(fā)可以更加快捷的復(fù)用控件，減少返工率，也為后期的修改降低開(kāi)發(fā)成本。

關(guān)于建立后臺(tái)設(shè)計(jì)規(guī)范：

首先要了解項(xiàng)目適用的主要場(chǎng)景，也就是用戶(hù)爸爸一般是在什么情況下用什么樣的設(shè)備來(lái)進(jìn)行操作的，然鵝你永遠(yuǎn)不知道會(huì)有什么的場(chǎng)景和什么樣奇葩的設(shè)備在等待你。在后臺(tái)的設(shè)計(jì)群一直有一個(gè)經(jīng)久不衰的話題，那就是后臺(tái)設(shè)計(jì)的設(shè)計(jì)分辨率是向下適配還是向上適配更合適（是1980*1080 還是 1440*900 ），這兩者都是可以的，本案由于用戶(hù)使用筆記本的情況居多，且設(shè)備并不是很新所以采用1440*900的分辨率向上適配1980向下適配1200。
在清楚的了解到項(xiàng)目背景之后，開(kāi)始著手于設(shè)計(jì)規(guī)范的建立，這里關(guān)于設(shè)計(jì)規(guī)范的建立是隨著設(shè)計(jì)的不斷深入從而不斷完善的，不必刻意深入，但是要隨時(shí)更新規(guī)范文檔。

關(guān)于頁(yè)面構(gòu)成

開(kāi)發(fā)與設(shè)計(jì)所理解的頁(yè)面是不一樣的，所以會(huì)造成開(kāi)發(fā)出來(lái)的頁(yè)面有時(shí)候會(huì)因?yàn)楦鞣N原因與高保真相差較大，在設(shè)計(jì)看來(lái)（比如sketch），一個(gè)頁(yè)面是由多個(gè)組結(jié)合而來(lái)，每個(gè)組里包含一個(gè)或多個(gè)字段、圖片和圖標(biāo)等，在調(diào)整大小、間距、顏色之后慢慢成為高保真。而在開(kāi)發(fā)的角度來(lái)看，整個(gè)頁(yè)面就是由多個(gè)box構(gòu)成，盒子與盒子之間存在空白間隔，且盒子存在一定的屬性，例如盒子默認(rèn)對(duì)齊于左上，盒子之間相互嵌套或覆蓋需要基于所屬盒子來(lái)定位。

顏色

根據(jù)品牌背景和產(chǎn)品定位來(lái)確定你的品牌色，用于字體、icon、按鈕、插畫(huà)等業(yè)務(wù)流程。功能色則是為特殊場(chǎng)景，例如失敗、成功、提醒等情況。

字體

通過(guò)購(gòu)買(mǎi)商用字體或使用免費(fèi)字體來(lái)使用，如果選用免費(fèi)字體同時(shí)也要注意區(qū)分系統(tǒng)，通常情況下mac系統(tǒng)使用默認(rèn)字體蘋(píng)方字體，windows系統(tǒng)使用微軟雅黑。如今免費(fèi)等字庫(kù)已經(jīng)越來(lái)越多了，所以這對(duì)設(shè)計(jì)師來(lái)說(shuō)是一個(gè)好消息，今年阿里也在UCAN上公布了普惠體，年尾oppo也推出了自己的免費(fèi)字體，文章末尾附上群友整理的免費(fèi)字體導(dǎo)圖。

邊角

倒角的使用可以起到樣式的區(qū)分，從而讓用戶(hù)感知到功能區(qū)域的分別。

圖標(biāo)

快速幫助用戶(hù)理解產(chǎn)品并順利完成操作，好的圖標(biāo)具有高度濃縮并快捷傳達(dá)、便于記憶的特性，能夠更好的傳達(dá)品牌特性。

陰影

陰影的添加可以更好的提高界面品質(zhì)，讓用戶(hù)易于區(qū)分功能區(qū)域

按鈕

按鈕是傳達(dá)它將要發(fā)起動(dòng)作的載體。 用戶(hù)可以點(diǎn)擊一個(gè)按鈕來(lái)開(kāi)始一個(gè)過(guò)程或工作流程，或觸發(fā)一個(gè)動(dòng)作。

用法：

1、要傳達(dá)重要的行動(dòng)。如：提交表單；

2、要導(dǎo)航到另一個(gè)屏幕，觸發(fā)一個(gè)模式或啟動(dòng)一個(gè)動(dòng)作。如：在進(jìn)程中指定新的動(dòng)作或模式；

3、按鈕上的文本應(yīng)保持簡(jiǎn)潔，帶著明確、可操作的動(dòng)詞，例如：注冊(cè)、下一步、下載 ；

4、優(yōu)先考慮最重要的行動(dòng)。行動(dòng)號(hào)召太多會(huì)引起混亂，并使用戶(hù)不知道下一步該做什么。

選擇輸入框

如無(wú)特殊需求，則默認(rèn)采用框架內(nèi)輸入框，特殊情況可同研發(fā)一起討論修改。這邊因?yàn)橐恍┨厥庠?，在修改了代碼的情況下實(shí)現(xiàn)了標(biāo)題、選擇、輸入同時(shí)在框架內(nèi)，這樣為寸土寸金的后臺(tái)界面留出了更多的空間。

表格

表格在后臺(tái)系統(tǒng)中無(wú)處不在，對(duì)數(shù)據(jù)管理和分析起到了重要的作用，方便用戶(hù)閱讀，分析和比較數(shù)據(jù)。表格一般由表頭、表尾、數(shù)據(jù)單元格組成。

模態(tài)/非模態(tài)彈窗

用戶(hù)交互的兩種方式，模態(tài)彈窗強(qiáng)制交互完成當(dāng)前操作流程，非模態(tài)則是弱提示。

缺省狀態(tài)

缺省頁(yè)是指操作異常狀態(tài)下給予用戶(hù)反饋的提示頁(yè)面，它的作用不僅是提醒用戶(hù)，安撫情緒；更重要的是用“空白”觸發(fā)用戶(hù)的操作行為，營(yíng)造良好用戶(hù)體驗(yàn)。

結(jié)語(yǔ)

以上是我對(duì)于設(shè)計(jì)規(guī)范的部分總結(jié)，還有很多沒(méi)有涉及到，包括非常重要的可視化部分，可以多了解一下ECharts（https://www.echartsjs.com/zh/index.html），然后希望可以和大家互相學(xué)習(xí)。設(shè)計(jì)規(guī)范的建立是長(zhǎng)征的第一步，貫徹執(zhí)行才是根本，在B端龐大的設(shè)計(jì)系統(tǒng)中，我們需要維護(hù)好產(chǎn)品的組件庫(kù)，不斷的完善用戶(hù)體驗(yàn)和清晰的梳理線上業(yè)務(wù)，保證產(chǎn)品的功能需求才是重中之重。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)