對(duì)于剛?cè)胄械男氯耍赡苡X(jué)得設(shè)計(jì)規(guī)范是一件很高大上又很讓人頭疼的事情，面對(duì)這么多設(shè)計(jì)模塊感到無(wú)從下手。設(shè)計(jì)規(guī)范如果考慮不到位，往往會(huì)出現(xiàn)規(guī)范太空洞缺乏實(shí)際指導(dǎo)意義、規(guī)范太死板影響設(shè)計(jì)發(fā)揮等問(wèn)題。這篇文章會(huì)從新人的角度出發(fā)，總結(jié)一些設(shè)計(jì)規(guī)范要點(diǎn)，算是一次溫故總結(jié)的分享。
對(duì)于剛?cè)胄械男氯?，可能覺(jué)得設(shè)計(jì)規(guī)范是一件很高大上又很讓人頭疼的事情，面對(duì)這么多設(shè)計(jì)模塊感到無(wú)從下手。設(shè)計(jì)規(guī)范如果考慮不到位，往往會(huì)出現(xiàn)規(guī)范太空洞缺乏實(shí)際指導(dǎo)意義、規(guī)范太死板影響設(shè)計(jì)發(fā)揮等問(wèn)題。這篇文章會(huì)從新人的角度出發(fā)，總結(jié)一些設(shè)計(jì)規(guī)范要點(diǎn)，算是一次溫故總結(jié)的分享。
本文提供網(wǎng)易云音樂(lè)和LOFTER的規(guī)范文檔下載，強(qiáng)烈推薦下載：http://pan.baidu.com/s/1o8arqhc
文：網(wǎng)易UEDC / 吳良
一、設(shè)計(jì)規(guī)范有什么用？
設(shè)計(jì)規(guī)范能為團(tuán)隊(duì)解決不少問(wèn)題，并提升工作效率，主要體現(xiàn)在以下三個(gè)方面：
1、解決多人協(xié)作時(shí)控件混亂問(wèn)題
一個(gè)大型項(xiàng)目的視覺(jué)稿，往往會(huì)有幾十個(gè)甚至是上百個(gè)頁(yè)面。對(duì)于第一次做這種大項(xiàng)目的設(shè)計(jì)師，如果在視覺(jué)風(fēng)格成型后沒(méi)有做規(guī)范的話，哪怕自己一手包辦全部頁(yè)面，恐怕也很難統(tǒng)一視覺(jué)樣式。在創(chuàng)作階段設(shè)計(jì)其他頁(yè)面時(shí)，如果沒(méi)有規(guī)范來(lái)指導(dǎo)，設(shè)計(jì)過(guò)程中很容易產(chǎn)生細(xì)微的出入，導(dǎo)致每個(gè)控件都會(huì)有細(xì)微的差別，經(jīng)常會(huì)做著做著就出現(xiàn)控件不一致的問(wèn)題，比如A頁(yè)面的按鈕是4PX圓角，B頁(yè)面的按鈕又做成了6PX圓角，再后來(lái)做的C頁(yè)面的按鈕又做成了2PX圓角。如果一直埋頭苦干趕頁(yè)面，沒(méi)檢查出這些問(wèn)題，頁(yè)面做的越多錯(cuò)誤就越多，到時(shí)候幾十個(gè)頁(yè)面的控件都要修改，那可真是苦不堪言啊。
一個(gè)人做頁(yè)面尚且會(huì)出現(xiàn)這種樣式不統(tǒng)一的問(wèn)題，更何況是多人協(xié)作。因此，在進(jìn)行多人協(xié)作一個(gè)項(xiàng)目前，可由主視覺(jué)設(shè)計(jì)師出一份視覺(jué)規(guī)范，其他一起協(xié)作的幾個(gè)設(shè)計(jì)師遵循這個(gè)規(guī)范，才能把控視覺(jué)統(tǒng)一性，提高效率，減少返工率。
另外，當(dāng)新人加入團(tuán)隊(duì)的時(shí)候，他們對(duì)產(chǎn)品的品牌基因可能理解不透，這時(shí)設(shè)計(jì)規(guī)范就可以幫他們快速上手，并且保持產(chǎn)品的統(tǒng)一性。
2、解決開(kāi)發(fā)效率、代碼冗余問(wèn)題
如果沒(méi)有做規(guī)范，就拿按鈕這個(gè)常見(jiàn)的控件來(lái)舉例，程序員不知道具體的規(guī)范，每個(gè)程序員用代碼寫(xiě)了A頁(yè)面的按鈕樣式，然后在開(kāi)發(fā)B頁(yè)面時(shí)又要重新用代碼寫(xiě)按鈕樣式，頁(yè)面越多程序員的工作量也就越大，影響項(xiàng)目進(jìn)度，代碼也會(huì)越來(lái)越臃腫。
如果做了規(guī)范，程序員從視覺(jué)規(guī)范中了解到哪些控件是可以一次性寫(xiě)好并能重復(fù)調(diào)用。在規(guī)范的輔助下，程序員在搭建全局共用元素時(shí)規(guī)則更加清晰明了，如按鈕、行間距、字體大小、色值等等。
另外，對(duì)于末端界面沒(méi)有規(guī)范到的角落和由規(guī)范控件組成的新頁(yè)面提供了有效參考，比如規(guī)范中已經(jīng)列出的5種常用彈窗樣式，后來(lái)需求迭代時(shí)出現(xiàn)由原有規(guī)范樣式混搭組成的新彈窗，這時(shí)程序員就可以借鑒原有5種彈窗里的標(biāo)題、間距、按鈕等樣式去完成該工作。
3、解決產(chǎn)品迭代中品牌形象會(huì)走樣問(wèn)題
產(chǎn)品在迭代過(guò)程中，往往是小版本進(jìn)行幾個(gè)功能的迭代比較多。如果沒(méi)有做規(guī)范，在多次迭代過(guò)程中會(huì)忘記設(shè)計(jì)初衷，同樣一個(gè)TAB控件，可能會(huì)出現(xiàn)多種不同樣式的TAB，舉一反三，這種太隨意的設(shè)計(jì)會(huì)讓產(chǎn)品控件混亂，導(dǎo)致品牌形象走樣，看起來(lái)很不協(xié)調(diào)，像是幾個(gè)風(fēng)格不同的設(shè)計(jì)師共同完成的半成品。
有了規(guī)范，后續(xù)迭代中也能保持設(shè)計(jì)初衷，遵循定制好的設(shè)計(jì)規(guī)范，維護(hù)好品牌形象。就算是后來(lái)加入新的設(shè)計(jì)師，新的設(shè)計(jì)師也能通過(guò)主設(shè)計(jì)師做好的規(guī)范，統(tǒng)一品牌形象。
規(guī)范能使產(chǎn)品在不斷更新迭代中保持品牌形象不走樣，保持產(chǎn)品特性，產(chǎn)品的規(guī)范統(tǒng)一增加了用戶使用認(rèn)知，不同程度有效提升用戶體驗(yàn)。
二、設(shè)計(jì)規(guī)范操作的五大誤區(qū)
設(shè)計(jì)規(guī)范的工作量不小，開(kāi)始動(dòng)手之前應(yīng)了解一下有哪些誤區(qū)，盡量少走彎路，更科學(xué)高效地完成一份有效的規(guī)范文檔。
錯(cuò)誤一：規(guī)范建立時(shí)機(jī)不對(duì)
規(guī)范建立的時(shí)機(jī)很重要，太早或者太晚都會(huì)給后續(xù)迭代帶來(lái)很多麻煩。
如上圖所示，如果在創(chuàng)作初期就做設(shè)計(jì)規(guī)范，這時(shí)視覺(jué)風(fēng)格還沒(méi)成型，投入太多精力去做規(guī)范，在視覺(jué)風(fēng)格定位后，之前做的視覺(jué)規(guī)范又要推翻重做，因此太早做設(shè)計(jì)規(guī)范會(huì)造成沒(méi)必要的返工。
如果等V1.0上線后才開(kāi)始做規(guī)范，已經(jīng)錯(cuò)過(guò)了最佳時(shí)機(jī)。因?yàn)樵赩1.0開(kāi)發(fā)的后半部分的兩大工作是設(shè)計(jì)師拓展頁(yè)面和程序員進(jìn)行開(kāi)發(fā)，在設(shè)計(jì)師拓展頁(yè)面的階段，如果沒(méi)有設(shè)計(jì)規(guī)范的指導(dǎo)往往會(huì)很難保持視覺(jué)統(tǒng)一性，這時(shí)把頁(yè)面交到程序員手里，同樣一個(gè)控件在各個(gè)頁(yè)面中的呈現(xiàn)樣式卻不一樣，混亂不協(xié)調(diào)的控件庫(kù)會(huì)對(duì)程序員造成困擾，從而影響開(kāi)發(fā)進(jìn)度。在程序員前期開(kāi)發(fā)階段，如果有了規(guī)范，就可以快速根據(jù)規(guī)范搭建控件庫(kù)，高效完成工作。
因此，最佳時(shí)機(jī)是在完成風(fēng)格定位后做規(guī)范，可以承上啟下高效完成工作。
錯(cuò)誤二：對(duì)非重要界面進(jìn)行規(guī)范設(shè)定
記得以前剛接觸設(shè)計(jì)規(guī)范的時(shí)候，覺(jué)得設(shè)計(jì)規(guī)范就像一本設(shè)計(jì)圣經(jīng)可以非常細(xì)致全面的指導(dǎo)設(shè)計(jì)工作，然后我對(duì)全部界面都做了詳細(xì)的規(guī)范，花了很多時(shí)間和精力做出的設(shè)計(jì)規(guī)范多達(dá)幾十頁(yè)好幾十個(gè)細(xì)分模塊，最后實(shí)際應(yīng)用時(shí)發(fā)現(xiàn)自己被這份設(shè)計(jì)規(guī)范打臉，因?yàn)橛袝r(shí)做新的頁(yè)面，如果死板的100%遵循了規(guī)范，做出來(lái)的視覺(jué)效果不好；如果完全拋開(kāi)設(shè)計(jì)規(guī)范，那之前做的過(guò)于全面的規(guī)范等于白做了，可見(jiàn)太過(guò)全面的規(guī)范會(huì)影響設(shè)計(jì)師發(fā)揮，并不是一件好事。
所以，整理規(guī)范時(shí)，應(yīng)只針對(duì)控件、色值、質(zhì)感、動(dòng)效、品牌元素等重要界面進(jìn)行規(guī)范設(shè)定。
錯(cuò)誤三：規(guī)則沒(méi)彈性
采用28原則只能針對(duì)產(chǎn)品80%的界面進(jìn)行規(guī)范。這里講的80%和20%是一個(gè)相對(duì)的概念，80%代表色彩、按鈕、字體、間距等重要內(nèi)容，這些內(nèi)容需要進(jìn)行詳細(xì)的規(guī)范說(shuō)明。另外的20%是指某些控件是不可復(fù)用并且不重要的，這種20%的內(nèi)容不需要花費(fèi)精力做進(jìn)規(guī)范里。這個(gè)28原則需要設(shè)計(jì)師根據(jù)具體情況具體分析，作出更適合當(dāng)下的設(shè)計(jì)。
如果對(duì)所有界面進(jìn)行100%規(guī)范，一方面會(huì)束縛設(shè)計(jì)師的發(fā)揮，另一方面也會(huì)影響產(chǎn)品迭代的設(shè)計(jì)彈性，比如一個(gè)產(chǎn)品官網(wǎng)進(jìn)行了100%規(guī)范，需求迭代時(shí)要在導(dǎo)航加上一個(gè)活動(dòng)入口，這時(shí)如果死板的遵循原先的導(dǎo)航規(guī)范來(lái)加這個(gè)活動(dòng)入口，視覺(jué)效果和活動(dòng)數(shù)據(jù)效果可能并不理想，所以在面對(duì)這類需求的時(shí)候，適當(dāng)?shù)淖龀鰧?dǎo)航調(diào)整也是可以的。
錯(cuò)誤四：規(guī)范沒(méi)有迭代
在完成v1.0版規(guī)范后，產(chǎn)品還會(huì)一直迭代，產(chǎn)品改版過(guò)程中必定會(huì)不斷優(yōu)化設(shè)計(jì)。
如果設(shè)計(jì)師沒(méi)有跟著產(chǎn)品改版的節(jié)奏去迭代視覺(jué)規(guī)范，一般會(huì)出現(xiàn)兩種情況：一是被原規(guī)范的舊樣式束縛，死板的遵循最初的規(guī)范，長(zhǎng)久下去會(huì)出現(xiàn)視覺(jué)樣式過(guò)時(shí)的問(wèn)題。二是改版中用了新的視覺(jué)風(fēng)格，沒(méi)有及時(shí)總結(jié)歸納成規(guī)范，這樣一來(lái)又會(huì)出現(xiàn)品牌形象走樣的問(wèn)題。
所以在產(chǎn)品迭代過(guò)程中需要對(duì)舊的規(guī)范進(jìn)行更新優(yōu)化，不好的、過(guò)時(shí)的規(guī)范需要及時(shí)同步歸納，并及時(shí)通知到項(xiàng)目相關(guān)人員。要不然，陳舊的規(guī)范起不到幫助設(shè)計(jì)工作的開(kāi)展，反而是一種負(fù)面影響。
錯(cuò)誤五：規(guī)范沒(méi)有執(zhí)行力
有兩種規(guī)范是缺乏執(zhí)行力的：
第一、規(guī)范內(nèi)容不具體，缺少對(duì)核心模塊的細(xì)節(jié)說(shuō)明。各個(gè)模塊缺少必需的說(shuō)明，比如色彩模塊中有主色卻缺少輔助色的說(shuō)明，按鈕模塊中缺少滑過(guò)、點(diǎn)擊、不可點(diǎn)狀態(tài)的說(shuō)明，字體模塊缺少字體磅數(shù)的分布設(shè)定。這種沒(méi)有核心內(nèi)容的規(guī)范，沒(méi)有參考價(jià)值，規(guī)范的作用幾乎等于零，其他參與項(xiàng)目的設(shè)計(jì)師還得找制作規(guī)范的設(shè)計(jì)師要相關(guān)的規(guī)范才能進(jìn)行下去，所以這種類型的規(guī)范是沒(méi)有執(zhí)行力的。
第二、規(guī)范太全面死板太臃腫，無(wú)從看起，對(duì)后續(xù)設(shè)計(jì)有束縛。對(duì)所有界面的所有元素進(jìn)行規(guī)范，連不重要的元素也強(qiáng)行歸納進(jìn)來(lái)，多達(dá)幾十頁(yè)的規(guī)范文檔。造成三方面的影響，一是會(huì)增加大量沒(méi)必要的工作時(shí)間來(lái)制作規(guī)范，二是設(shè)計(jì)師和程序員需要花很多時(shí)間精力去看無(wú)關(guān)緊要的內(nèi)容，增加了很多負(fù)擔(dān)。三是設(shè)計(jì)本來(lái)就不是一件絕對(duì)的事，需要20%的靈活空間，不然后面遇到新的頁(yè)面，死板的把規(guī)范用在新的頁(yè)面上，出來(lái)的效果可能并不好。
三、設(shè)計(jì)規(guī)范怎么做？
設(shè)計(jì)規(guī)范的模塊分類有很多，會(huì)讓新人感到無(wú)從下手，怎么樣梳理才更能科學(xué)易用？以下六個(gè)維度可以作為參考。
1、信息系統(tǒng)：字體選擇、顏色、層級(jí)區(qū)分
產(chǎn)品中的字號(hào)應(yīng)該有一個(gè)全局的規(guī)劃，在同一個(gè)界面內(nèi)，盡量少用太多太接近的字號(hào)，比如一個(gè)產(chǎn)品詳情頁(yè)的正文部分，如果同時(shí)用了12、13、14、15、16、18去排版，文字的層級(jí)對(duì)比會(huì)比較弱，不利于閱讀，視覺(jué)效果也會(huì)有點(diǎn)凌亂。
如果你對(duì)全局的字號(hào)沒(méi)把握，不妨參考一下上圖的字號(hào)分布，這套基于12、14、16、20和34號(hào)的字號(hào)分布能夠良好的適應(yīng)布局結(jié)構(gòu)，層次明晰，所以具有一定的參考意義。當(dāng)然以上僅供參考，沒(méi)有絕對(duì)的字號(hào)布局方案，設(shè)計(jì)師可以根據(jù)具體的產(chǎn)品情況來(lái)分布。
如上圖所示，「L」和 「XXL」用了兩個(gè)很相似的顏色#666666和#6e6e6e，這兩個(gè)顏色肉眼難以區(qū)分，在同一層級(jí)去做字體顏色區(qū)分是沒(méi)必要的。同一組中的內(nèi)容屬于同一層級(jí)，從信息層級(jí)來(lái)講應(yīng)該要用同一種顏色，表示是同一個(gè)層級(jí)。
產(chǎn)品文字中一般會(huì)有一級(jí)標(biāo)題、二級(jí)標(biāo)題、一級(jí)正文、二級(jí)正文、提示文字、輔助文字等，為了區(qū)分層級(jí)便于瀏覽，通常會(huì)根據(jù)產(chǎn)品需要把字體顏色深淺分成3到5個(gè)層級(jí)，常見(jiàn)的有#333333、#666666、#999999這個(gè)組合，這個(gè)組合的層級(jí)區(qū)分比較分明，適應(yīng)性比較廣，因此有一定的參考價(jià)值。
從技術(shù)實(shí)現(xiàn)層面來(lái)講，對(duì)于字體的選擇，產(chǎn)品設(shè)計(jì)和推廣設(shè)計(jì)有較大的區(qū)別。
推廣設(shè)計(jì)的風(fēng)格多種多樣，需要根據(jù)需求選擇字體來(lái)營(yíng)造氛圍，推廣設(shè)計(jì)的字體往往是做在圖片上，不需要考慮用戶的設(shè)備中有沒(méi)有包含該字體。
產(chǎn)品設(shè)計(jì)的字體，很少會(huì)做在圖上，大多數(shù)字體由前端工程師來(lái)實(shí)現(xiàn)，設(shè)計(jì)師一般會(huì)選擇用戶設(shè)備里自帶的字體來(lái)進(jìn)行設(shè)計(jì)。如果在頁(yè)面中用了蘭亭黑、正黑等大量第三方字體，用戶的設(shè)備沒(méi)有這些字體就會(huì)以默認(rèn)字體來(lái)顯示，最終效果會(huì)和視覺(jué)稿有很大出入。
另外，從視覺(jué)層面來(lái)講，文字的層級(jí)一般用字號(hào)去區(qū)分，如果既用字號(hào)去區(qū)分，又用不同字體去區(qū)分信息，會(huì)顯得凌亂缺乏美感，因此字體的數(shù)量應(yīng)做減法，能用2種就不要用3種，能用1種就不要用2種。
2、控件系統(tǒng)：按鈕的樣式統(tǒng)一
在產(chǎn)品中按鈕控件的復(fù)用度是很高的，同樣的一個(gè)確定按鈕也會(huì)根據(jù)頁(yè)面環(huán)境不同來(lái)設(shè)定不同寬高尺寸。
需要注意的是，即使按鈕寬高不同，按鈕樣式也需要統(tǒng)一寬高比例、描邊、直角、圓角、色值、文字區(qū)域、字體、字間距等，以保證按鈕樣式的統(tǒng)一。
另外，在一般情況下，按鈕會(huì)有四種鼠標(biāo)狀態(tài)。不同顏色的按鈕之間，相同的鼠標(biāo)狀態(tài)也需統(tǒng)一視覺(jué)效果。比如同層級(jí)的藍(lán)色和綠色按鈕放在一起，這2個(gè)按鈕在hover狀態(tài)下的明度變化看起來(lái)應(yīng)相對(duì)統(tǒng)一。
3、布局系統(tǒng)：界面內(nèi)不能出現(xiàn)多余的行間距
在設(shè)計(jì)的過(guò)程中，間距這個(gè)隱形元素往往會(huì)被新人忽略，間距能表明內(nèi)容之間的層級(jí)和從屬關(guān)系，凌亂復(fù)雜的間距會(huì)對(duì)用戶認(rèn)知造成較大困擾。
因此，設(shè)計(jì)師需要將間距當(dāng)做色彩、字體、字號(hào)一樣的元素來(lái)設(shè)計(jì)。一個(gè)界面中能用5種間距，就不要用6種；能用3種就不要用4種，這是一個(gè)需要做減法的設(shè)計(jì)原則。
另外，內(nèi)間距盡量不要大于外邊距。大多環(huán)境下，外邊距小于內(nèi)邊距時(shí)內(nèi)容會(huì)有外擴(kuò)力，顯得擁擠，有閱讀壓力。外邊距大于內(nèi)邊距時(shí)，有適當(dāng)?shù)牧舭?，?nèi)容沒(méi)有外擴(kuò)力，用戶的視線不受干擾，更專注于內(nèi)容本身。
4、配色系統(tǒng)
選擇主色調(diào)時(shí)，首先確定產(chǎn)品的調(diào)性、用戶對(duì)象和所要表達(dá)的氣氛，以及利用色彩所希望達(dá)到的目的，色彩取向決定了這個(gè)產(chǎn)品的風(fēng)格。產(chǎn)品的輔助色可用主調(diào)色的鄰近色，也可用對(duì)比色。確定主色和輔助色之前，建議應(yīng)用到各種頁(yè)面中去看看實(shí)際效果，因?yàn)槊總€(gè)頁(yè)面的使用環(huán)境都不同，反復(fù)驗(yàn)證后才能確定最終的色彩方案。
一般情況下，可選擇一到三種輔助色配合使用，整個(gè)產(chǎn)品的色彩最好控制在四種顏色之內(nèi)。
5、品牌系統(tǒng)：LOGO應(yīng)用
LOGO會(huì)應(yīng)用到各種頁(yè)面中，在LOGO定稿后需要將LOGO的各種組合方式整理出來(lái)，便于后續(xù)的實(shí)際應(yīng)用。比如LOGO的左右結(jié)構(gòu)及上下結(jié)構(gòu)；反白的情況；黑白的情況；單色的情況；黑底白底的情況；最小尺寸；以及錯(cuò)誤的使用方式都需要標(biāo)示出來(lái)。
6、推廣系統(tǒng)
推廣規(guī)范設(shè)定應(yīng)突出商品、主體內(nèi)容和主要文案。不得使用無(wú)版權(quán)的圖片和字體，文案排版需符合閱讀習(xí)慣，避免折行，字體不要過(guò)小，字體筆畫(huà)均勻識(shí)別度高，輔助圖形不得擾亂文案信息和產(chǎn)品展示。
以及具體的排版結(jié)構(gòu)，它是上下還是左右，先圖后文，還是先文后圖，四周的邊距和文案的間距，可以和不可以的排版行為需要標(biāo)示。
四、設(shè)計(jì)規(guī)范案例
網(wǎng)易云音樂(lè)android端V3.0版規(guī)范遵循28原則，對(duì)產(chǎn)品80%的主要界面進(jìn)行規(guī)范，ICON的風(fēng)格統(tǒng)一和色彩的整體把控，以及品牌的統(tǒng)一性，都有條有理的安排在規(guī)范中。這份考究嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)規(guī)范，列出大量方便復(fù)用的控件，在內(nèi)容的框架梳理和模塊的細(xì)節(jié)說(shuō)明上極具參考性，非常適合設(shè)計(jì)新人借鑒參考。
LOFTER經(jīng)過(guò)幾個(gè)大版本的迭代，設(shè)計(jì)風(fēng)格和LOGO都有所改變，因此規(guī)范也隨之迭代優(yōu)化。對(duì)比V1.0和V5.2規(guī)范，可以發(fā)現(xiàn)LOFTER在V1.0產(chǎn)品初期階段，只需對(duì)色彩、字號(hào)、按鈕等主要模塊進(jìn)行規(guī)范，隨著產(chǎn)品的發(fā)展，到了V5.2版設(shè)計(jì)規(guī)范，對(duì)規(guī)范進(jìn)行了更多的補(bǔ)充說(shuō)明，以及保持產(chǎn)品自身的品牌調(diào)性。
LOFTER這份精而美的設(shè)計(jì)規(guī)范，頁(yè)數(shù)不多，但每頁(yè)都是經(jīng)過(guò)三思后得出的總結(jié)，推薦一看。
