前言

設(shè)計規(guī)范能夠使視覺設(shè)計更加統(tǒng)一，前端開發(fā)更加高效準(zhǔn)確。當(dāng)接手一個新項目時，我們應(yīng)該如何著手搭建呢？前段時間我為谷小酒項目制定了一套設(shè)計規(guī)范，現(xiàn)將遇到對問題總結(jié)一下，分享給大家，歡迎大家補充討論。

什么是設(shè)計規(guī)范

首先，我們要知道什么是設(shè)計規(guī)范。通俗的來說，設(shè)計規(guī)范就是對設(shè)計元素進行一些規(guī)范化的限制規(guī)定，諸如顏色，形狀，大小等等，方便后續(xù)延展時，能夠很好的保證視覺上的統(tǒng)一性。對于前端開發(fā)人員來說，提供了一份參考，實現(xiàn)時能更加準(zhǔn)確，從而也減小了復(fù)核的工作量。

設(shè)計規(guī)范應(yīng)當(dāng)避免兩個的坑

1.避免寫得過于“精細(xì)”

規(guī)范應(yīng)該是針對整個項目通用的，所以要善于提煉出重疊的部分。對于某個界面特有的元素，就不要列入了，寫的過于“精細(xì)”，便成了單個頁面的標(biāo)注和需求，失去了意義，而且在使用的過程中，定的太死也會出現(xiàn)一些問題。我們來看一個例子：

在針對二級導(dǎo)航欄做規(guī)范設(shè)計的時候，這里并沒有考慮到二級導(dǎo)航欄的選項數(shù)是不確定的，所以這里的給出的選中條寬度的限制是無意義的。在執(zhí)行過程中如果嚴(yán)格遵循，也會出現(xiàn)問題。

2.避免將需求文檔摘抄一遍

一般情況我們都會先拿到需求交互文檔，然后再開始設(shè)計。程序也會先看需求交互文檔。所以沒有必要將需求交互的說明文字再添加到設(shè)計規(guī)范里面，這樣會導(dǎo)致整個文檔拖沓冗余。還是舉個例子：

在上面的規(guī)范中，除了元素大小，顏色，邊距，其他均為需求交互文檔里的內(nèi)容。重復(fù)交叉的描述大大增加了閱讀時間，不利于快速方便地查看。

以上兩點是很容易出現(xiàn)的問題，有時候可能為了顯得“豐滿”，不自覺地就寫多了，其實效果并不好，還是簡練方便的文檔更好用。

如何搭建設(shè)計規(guī)范

1.搭建時間

新的項目開動后，初期頁面審核完成時即可開始整理規(guī)范。在整理的過程中可能還會遇到一些小小的改動，需要不斷調(diào)整。當(dāng)設(shè)計基本穩(wěn)定時，規(guī)范也相應(yīng)的可以制定出了。

2.搭建的要點

設(shè)計規(guī)范很重要的一點，就是提煉要點，形成該項目獨有的設(shè)計語言。也可在自由發(fā)揮的部分給出一些指導(dǎo)建議，使得整個項目更具有統(tǒng)一感。比如可以從字體，顏色，圖標(biāo)，控件等角度出發(fā)，進行闡述。語言盡量簡單明了，使用表格、圖片等更有利于查看。

在設(shè)計的過程中，采用怎樣的尺寸距離，怎樣有效提升用戶體驗是一個值得研究的問題。本章只針對規(guī)范的制定進行討論，不做延展。下面是谷小酒的設(shè)計規(guī)范，供大家參考：

字體

對于大部分app來說，都會使用默認(rèn)字體，比如以IOS作為設(shè)計標(biāo)準(zhǔn)時，采用蘋方。默認(rèn)字體的好處就是程序上不用另外對打字體包。字體包通常都比較大，會導(dǎo)致系統(tǒng)變慢，不利于流暢的用戶體驗。但是默認(rèn)字體也有不好的地方，就是顯得大眾化沒有個性。對于一些強調(diào)腔調(diào)的應(yīng)用來說，可能會精心挑選出一款字體。這就要看具體的項目需求，權(quán)衡利弊啦。

在這里不僅列出了字體的樣式，字號，重要程度，建議行距，使用場景，還為其設(shè)置了一組編號。編號的作用在于：程序編寫代碼時可利用編號一一對應(yīng)不同的css樣式，后期迭代時，只需要修改css樣式，就可以將對應(yīng)字體一并修改，非常方便。這個方法是借鑒了騰訊視頻的設(shè)計規(guī)范，第一時間就覺得非常好用，所以用在了本次項目里。

顏色

一個項目的顏色不宜太多，通常三個，不超過五個。谷小酒以紅色#81125為品牌色，搭配黑色#333333，VIP頁面為了突出尊享的感覺，另采用黃色#ffda77主打。由于涉及諸多頁面和功能，需要有不同的信息層級，所以以此衍生出了其他顏色。

圖標(biāo)

圖標(biāo)不僅要在形式上作出規(guī)范，也要在命名上做規(guī)范。命名規(guī)則: 位置名稱_功能名稱_ 詳細(xì)區(qū)分標(biāo)志名稱@2x.png。

例如head導(dǎo)航區(qū)域左邊返回按鈕命名：navigationItem_leftBackIcon@2x.png       

在后期圖標(biāo)迭代時，無需更改圖標(biāo)名字，只替換圖片內(nèi)容即可。

按鈕

除了不同地方會出現(xiàn)一些形式不同的按鈕外，還應(yīng)注意統(tǒng)一按鈕的不同形態(tài)。

彈窗

彈窗分為沒有按鈕，有一個按鈕，有多個按鈕三種。本次沒有按鈕的彈框采用系統(tǒng)自帶的。有多個按鈕的時候，注意區(qū)分推薦操作和次要操作，從表現(xiàn)形式上去引導(dǎo)用戶。

二級導(dǎo)航

注意選項的可變化性，靈活制定規(guī)范。

列表

列表相對來說比較簡單，由于重復(fù)使用的場景很多，也在規(guī)范中單獨列出。

商品圖片

谷小酒是米小酒旗下的一款高端白酒，該項目是以酒為主的電商平臺，必然有很多商品圖片的頁面。商品圖片除了尺寸還需對文件大小作出限制。圖片如果不經(jīng)壓縮，文件太大，會非常影響運行的流暢度。有了這樣的限制，方便和平面設(shè)計師以及和后臺程序溝通。

間距

間距對于信息的分割是不可或缺的。對于同等層級的信息分割需采用同一距離，對于不同頁面不同功能的信息分割也建議重復(fù)利用這些間距。保證使整個項目視覺上的統(tǒng)一流暢，有條不紊。

結(jié)語

以上就是規(guī)范落地的一個小總結(jié)啦～！希望能夠?qū)Υ蠹矣兴鶐椭?/p>