前言

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

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

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

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

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

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

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

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

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

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

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

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

1.搭建時(shí)間

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

2.搭建的要點(diǎn)

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

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

字體

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

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

顏色

一個(gè)項(xiàng)目的顏色不宜太多，通常三個(gè)，不超過五個(gè)。谷小酒以紅色#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)迭代時(shí)，無需更改圖標(biāo)名字，只替換圖片內(nèi)容即可。

按鈕

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

彈窗

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

二級導(dǎo)航

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

列表

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

商品圖片

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

間距

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

結(jié)語

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