網(wǎng)易UEDC精品教程：六步透視網(wǎng)易設(shè)計規(guī)范

序：對于剛?cè)胄械男氯耍赡苡X得設(shè)計規(guī)范是一件很高大上又很讓人頭疼的事情，面對這么多設(shè)計模塊感到無從下手。設(shè)計規(guī)范如果考慮不到位，往往會出現(xiàn)規(guī)范太空洞缺乏實際指導(dǎo)意義、規(guī)范太死板影響設(shè)計發(fā)揮等問題。這篇文章會從新人的角度出發(fā)，總結(jié)一些設(shè)計規(guī)范要點，算是一次溫故總結(jié)的分享。

一、設(shè)計規(guī)范有什么用？

設(shè)計規(guī)范能為團隊解決不少問題，并提升工作效率，主要體現(xiàn)在以下三個方面：

1、解決多人協(xié)作時控件混亂問題

一個大型項目的視覺稿，往往會有幾十個甚至是上百個頁面。對于第一次做這種大項目的設(shè)計師，如果在視覺風(fēng)格成型后沒有做規(guī)范的話，哪怕自己一手包辦全部頁面，恐怕也很難統(tǒng)一視覺樣式。在創(chuàng)作階段設(shè)計其他頁面時，如果沒有規(guī)范來指導(dǎo)，設(shè)計過程中很容易產(chǎn)生細微的出入，導(dǎo)致每個控件都會有細微的差別，經(jīng)常會做著做著就出現(xiàn)控件不一致的問題，比如A頁面的按鈕是4PX圓角，B頁面的按鈕又做成了6PX圓角，再后來做的C頁面的按鈕又做成了2PX圓角。如果一直埋頭苦干趕頁面，沒檢查出這些問題，頁面做的越多錯誤就越多，到時候幾十個頁面的控件都要修改，那可真是苦不堪言啊。

一個人做頁面尚且會出現(xiàn)這種樣式不統(tǒng)一的問題，更何況是多人協(xié)作。因此，在進行多人協(xié)作一個項目前，可由主視覺設(shè)計師出一份視覺規(guī)范，其他一起協(xié)作的幾個設(shè)計師遵循這個規(guī)范，才能把控視覺統(tǒng)一性，提高效率，減少返工率。

另外，當(dāng)新人加入團隊的時候，他們對產(chǎn)品的品牌基因可能理解不透，這時設(shè)計規(guī)范就可以幫他們快速上手，并且保持產(chǎn)品的統(tǒng)一性。

2、解決開發(fā)效率、代碼冗余問題

如果沒有做規(guī)范，就拿按鈕這個常見的控件來舉例，程序員不知道具體的規(guī)范，每個程序員用代碼寫了A頁面的按鈕樣式，然后在開發(fā)B頁面時又要重新用代碼寫按鈕樣式，頁面越多程序員的工作量也就越大，影響項目進度，代碼也會越來越臃腫。

如果做了規(guī)范，程序員從視覺規(guī)范中了解到哪些控件是可以一次性寫好并能重復(fù)調(diào)用。在規(guī)范的輔助下，程序員在搭建全局共用元素時規(guī)則更加清晰明了，如按鈕、行間距、字體大小、色值等等。

另外，對于末端界面沒有規(guī)范到的角落和由規(guī)范控件組成的新頁面提供了有效參考，比如規(guī)范中已經(jīng)列出的5種常用彈窗樣式，后來需求迭代時出現(xiàn)由原有規(guī)范樣式混搭組成的新彈窗，這時程序員就可以借鑒原有5種彈窗里的標(biāo)題、間距、按鈕等樣式去完成該工作。

3、解決產(chǎn)品迭代中品牌形象會走樣問題

產(chǎn)品在迭代過程中，往往是小版本進行幾個功能的迭代比較多。如果沒有做規(guī)范，在多次迭代過程中會忘記設(shè)計初衷，同樣一個TAB控件，可能會出現(xiàn)多種不同樣式的TAB，舉一反三，這種太隨意的設(shè)計會讓產(chǎn)品控件混亂，導(dǎo)致品牌形象走樣，看起來很不協(xié)調(diào)，像是幾個風(fēng)格不同的設(shè)計師共同完成的半成品。

有了規(guī)范，后續(xù)迭代中也能保持設(shè)計初衷，遵循定制好的設(shè)計規(guī)范，維護好品牌形象。就算是后來加入新的設(shè)計師，新的設(shè)計師也能通過主設(shè)計師做好的規(guī)范，統(tǒng)一品牌形象。

規(guī)范能使產(chǎn)品在不斷更新迭代中保持品牌形象不走樣，保持產(chǎn)品特性，產(chǎn)品的規(guī)范統(tǒng)一增加了用戶使用認知，不同程度有效提升用戶體驗。

二、設(shè)計規(guī)范操作的五大誤區(qū)

設(shè)計規(guī)范的工作量不小，開始動手之前應(yīng)了解一下有哪些誤區(qū)，盡量少走彎路，更科學(xué)高效地完成一份有效的規(guī)范文檔。

錯誤一：規(guī)范建立時機不對

規(guī)范建立的時機很重要，太早或者太晚都會給后續(xù)迭代帶來很多麻煩。

如上圖所示，如果在創(chuàng)作初期就做設(shè)計規(guī)范，這時視覺風(fēng)格還沒成型，投入太多精力去做規(guī)范，在視覺風(fēng)格定位后，之前做的視覺規(guī)范又要推翻重做，因此太早做設(shè)計規(guī)范會造成沒必要的返工。

如果等V1.0上線后才開始做規(guī)范，已經(jīng)錯過了最佳時機。因為在V1.0開發(fā)的后半部分的兩大工作是設(shè)計師拓展頁面和程序員進行開發(fā)，在設(shè)計師拓展頁面的階段，如果沒有設(shè)計規(guī)范的指導(dǎo)往往會很難保持視覺統(tǒng)一性，這時把頁面交到程序員手里，同樣一個控件在各個頁面中的呈現(xiàn)樣式卻不一樣，混亂不協(xié)調(diào)的控件庫會對程序員造成困擾，從而影響開發(fā)進度。在程序員前期開發(fā)階段，如果有了規(guī)范，就可以快速根據(jù)規(guī)范搭建控件庫，高效完成工作。

因此，最佳時機是在完成風(fēng)格定位后做規(guī)范，可以承上啟下高效完成工作。

錯誤二：對非重要界面進行規(guī)范設(shè)定

記得以前剛接觸設(shè)計規(guī)范的時候，覺得設(shè)計規(guī)范就像一本設(shè)計圣經(jīng)可以非常細致全面的指導(dǎo)設(shè)計工作，然后我對全部界面都做了詳細的規(guī)范，花了很多時間和精力做出的設(shè)計規(guī)范多達幾十頁好幾十個細分模塊，最后實際應(yīng)用時發(fā)現(xiàn)自己被這份設(shè)計規(guī)范打臉，因為有時做新的頁面，如果死板的100%遵循了規(guī)范，做出來的視覺效果不好；如果完全拋開設(shè)計規(guī)范，那之前做的過于全面的規(guī)范等于白做了，可見太過全面的規(guī)范會影響設(shè)計師發(fā)揮，并不是一件好事。

所以，整理規(guī)范時，應(yīng)只針對控件、色值、質(zhì)感、動效、品牌元素等重要界面進行規(guī)范設(shè)定。

錯誤三：規(guī)則沒彈性

采用28原則只能針對產(chǎn)品80%的界面進行規(guī)范。這里講的80%和20%是一個相對的概念，80%代表色彩、按鈕、字體、間距等重要內(nèi)容，這些內(nèi)容需要進行詳細的規(guī)范說明。另外的20%是指某些控件是不可復(fù)用并且不重要的，這種20%的內(nèi)容不需要花費精力做進規(guī)范里。這個28原則需要設(shè)計師根據(jù)具體情況具體分析，作出更適合當(dāng)下的設(shè)計。

如果對所有界面進行100%規(guī)范，一方面會束縛設(shè)計師的發(fā)揮，另一方面也會影響產(chǎn)品迭代的設(shè)計彈性，比如一個產(chǎn)品官網(wǎng)進行了100%規(guī)范，需求迭代時要在導(dǎo)航加上一個活動入口，這時如果死板的遵循原先的導(dǎo)航規(guī)范來加這個活動入口，視覺效果和活動數(shù)據(jù)效果可能并不理想，所以在面對這類需求的時候，適當(dāng)?shù)淖龀鰧?dǎo)航調(diào)整也是可以的。

錯誤四：規(guī)范沒有迭代

在完成v1.0版規(guī)范后，產(chǎn)品還會一直迭代，產(chǎn)品改版過程中必定會不斷優(yōu)化設(shè)計。

如果設(shè)計師沒有跟著產(chǎn)品改版的節(jié)奏去迭代視覺規(guī)范，一般會出現(xiàn)兩種情況：一是被原規(guī)范的舊樣式束縛，死板的遵循最初的規(guī)范，長久下去會出現(xiàn)視覺樣式過時的問題。二是改版中用了新的視覺風(fēng)格，沒有及時總結(jié)歸納成規(guī)范，這樣一來又會出現(xiàn)品牌形象走樣的問題。

所以在產(chǎn)品迭代過程中需要對舊的規(guī)范進行更新優(yōu)化，不好的、過時的規(guī)范需要及時同步歸納，并及時通知到項目相關(guān)人員。要不然，陳舊的規(guī)范起不到幫助設(shè)計工作的開展，反而是一種負面影響。

錯誤五：規(guī)范沒有執(zhí)行力

有兩種規(guī)范是缺乏執(zhí)行力的：

第一、規(guī)范內(nèi)容不具體，缺少對核心模塊的細節(jié)說明。各個模塊缺少必需的說明，比如色彩模塊中有主色卻缺少輔助色的說明，按鈕模塊中缺少滑過、點擊、不可點狀態(tài)的說明，字體模塊缺少字體磅數(shù)的分布設(shè)定。這種沒有核心內(nèi)容的規(guī)范，沒有參考價值，規(guī)范的作用幾乎等于零，其他參與項目的設(shè)計師還得找制作規(guī)范的設(shè)計師要相關(guān)的規(guī)范才能進行下去，所以這種類型的規(guī)范是沒有執(zhí)行力的。

第二、規(guī)范太全面死板太臃腫，無從看起，對后續(xù)設(shè)計有束縛。對所有界面的所有元素進行規(guī)范，連不重要的元素也強行歸納進來，多達幾十頁的規(guī)范文檔。造成三方面的影響，一是會增加大量沒必要的工作時間來制作規(guī)范，二是設(shè)計師和程序員需要花很多時間精力去看無關(guān)緊要的內(nèi)容，增加了很多負擔(dān)。三是設(shè)計本來就不是一件絕對的事，需要20%的靈活空間，不然后面遇到新的頁面，死板的把規(guī)范用在新的頁面上，出來的效果可能并不好。

三、設(shè)計規(guī)范怎么做？

設(shè)計規(guī)范的模塊分類有很多，會讓新人感到無從下手，怎么樣梳理才更能科學(xué)易用？以下六個維度可以作為參考。

1、信息系統(tǒng)：字體選擇、顏色、層級區(qū)分

產(chǎn)品中的字號應(yīng)該有一個全局的規(guī)劃，在同一個界面內(nèi)，盡量少用太多太接近的字號，比如一個產(chǎn)品詳情頁的正文部分，如果同時用了12、13、14、15、16、18去排版，文字的層級對比會比較弱，不利于閱讀，視覺效果也會有點凌亂。

如果你對全局的字號沒把握，不妨參考一下上圖的字號分布，這套基于12、14、16、20和34號的字號分布能夠良好的適應(yīng)布局結(jié)構(gòu)，層次明晰，所以具有一定的參考意義。當(dāng)然以上僅供參考，沒有絕對的字號布局方案，設(shè)計師可以根據(jù)具體的產(chǎn)品情況來分布。

如上圖所示，「L」和 「XXL」用了兩個很相似的顏色#666666和#6e6e6e，這兩個顏色肉眼難以區(qū)分，在同一層級去做字體顏色區(qū)分是沒必要的。同一組中的內(nèi)容屬于同一層級，從信息層級來講應(yīng)該要用同一種顏色，表示是同一個層級。

產(chǎn)品文字中一般會有一級標(biāo)題、二級標(biāo)題、一級正文、二級正文、提示文字、輔助文字等，為了區(qū)分層級便于瀏覽，通常會根據(jù)產(chǎn)品需要把字體顏色深淺分成3到5個層級，常見的有#333333、#666666、#999999這個組合，這個組合的層級區(qū)分比較分明，適應(yīng)性比較廣，因此有一定的參考價值。

從技術(shù)實現(xiàn)層面來講，對于字體的選擇，產(chǎn)品設(shè)計和推廣設(shè)計有較大的區(qū)別。

推廣設(shè)計的風(fēng)格多種多樣，需要根據(jù)需求選擇字體來營造氛圍，推廣設(shè)計的字體往往是做在圖片上，不需要考慮用戶的設(shè)備中有沒有包含該字體。

產(chǎn)品設(shè)計的字體，很少會做在圖上，大多數(shù)字體由前端工程師來實現(xiàn)，設(shè)計師一般會選擇用戶設(shè)備里自帶的字體來進行設(shè)計。如果在頁面中用了蘭亭黑、正黑等大量第三方字體，用戶的設(shè)備沒有這些字體就會以默認字體來顯示，最終效果會和視覺稿有很大出入。

另外，從視覺層面來講，文字的層級一般用字號去區(qū)分，如果既用字號去區(qū)分，又用不同字體去區(qū)分信息，會顯得凌亂缺乏美感，因此字體的數(shù)量應(yīng)做減法，能用2種就不要用3種，能用1種就不要用2種。

2、控件系統(tǒng)：按鈕的樣式統(tǒng)一

在產(chǎn)品中按鈕控件的復(fù)用度是很高的，同樣的一個確定按鈕也會根據(jù)頁面環(huán)境不同來設(shè)定不同寬高尺寸。

需要注意的是，即使按鈕寬高不同，按鈕樣式也需要統(tǒng)一寬高比例、描邊、直角、圓角、色值、文字區(qū)域、字體、字間距等，以保證按鈕樣式的統(tǒng)一。

另外，在一般情況下，按鈕會有四種鼠標(biāo)狀態(tài)。不同顏色的按鈕之間，相同的鼠標(biāo)狀態(tài)也需統(tǒng)一視覺效果。比如同層級的藍色和綠色按鈕放在一起，這2個按鈕在hover狀態(tài)下的明度變化看起來應(yīng)相對統(tǒng)一。

3、布局系統(tǒng)：界面內(nèi)不能出現(xiàn)多余的行間距

在設(shè)計的過程中，間距這個隱形元素往往會被新人忽略，間距能表明內(nèi)容之間的層級和從屬關(guān)系，凌亂復(fù)雜的間距會對用戶認知造成較大困擾。

因此，設(shè)計師需要將間距當(dāng)做色彩、字體、字號一樣的元素來設(shè)計。一個界面中能用5種間距，就不要用6種；能用3種就不要用4種，這是一個需要做減法的設(shè)計原則。

另外，內(nèi)間距盡量不要大于外邊距。大多環(huán)境下，外邊距小于內(nèi)邊距時內(nèi)容會有外擴力，顯得擁擠，有閱讀壓力。外邊距大于內(nèi)邊距時，有適當(dāng)?shù)牧舭?，?nèi)容沒有外擴力，用戶的視線不受干擾，更專注于內(nèi)容本身。

4、配色系統(tǒng)

選擇主色調(diào)時，首先確定產(chǎn)品的調(diào)性、用戶對象和所要表達的氣氛，以及利用色彩所希望達到的目的，色彩取向決定了這個產(chǎn)品的風(fēng)格。產(chǎn)品的輔助色可用主調(diào)色的鄰近色，也可用對比色。確定主色和輔助色之前，建議應(yīng)用到各種頁面中去看看實際效果，因為每個頁面的使用環(huán)境都不同，反復(fù)驗證后才能確定最終的色彩方案。

一般情況下，可選擇一到三種輔助色配合使用，整個產(chǎn)品的色彩最好控制在四種顏色之內(nèi)。

5、品牌系統(tǒng)：LOGO應(yīng)用

LOGO會應(yīng)用到各種頁面中，在LOGO定稿后需要將LOGO的各種組合方式整理出來，便于后續(xù)的實際應(yīng)用。比如LOGO的左右結(jié)構(gòu)及上下結(jié)構(gòu)；反白的情況；黑白的情況；單色的情況；黑底白底的情況；最小尺寸；以及錯誤的使用方式都需要標(biāo)示出來。

6、推廣系統(tǒng)

推廣規(guī)范設(shè)定應(yīng)突出商品、主體內(nèi)容和主要文案。不得使用無版權(quán)的圖片和字體，文案排版需符合閱讀習(xí)慣，避免折行，字體不要過小，字體筆畫均勻識別度高，輔助圖形不得擾亂文案信息和產(chǎn)品展示。

以及具體的排版結(jié)構(gòu)，它是上下還是左右，先圖后文，還是先文后圖，四周的邊距和文案的間距，可以和不可以的排版行為需要標(biāo)示。

四、設(shè)計規(guī)范案例

網(wǎng)易云音樂android端V3.0版規(guī)范遵循28原則，對產(chǎn)品80%的主要界面進行規(guī)范，ICON的風(fēng)格統(tǒng)一和色彩的整體把控，以及品牌的統(tǒng)一性，都有條有理的安排在規(guī)范中。這份考究嚴謹?shù)脑O(shè)計規(guī)范，列出大量方便復(fù)用的控件，在內(nèi)容的框架梳理和模塊的細節(jié)說明上極具參考性，非常適合設(shè)計新人借鑒參考。

LOFTER經(jīng)過幾個大版本的迭代，設(shè)計風(fēng)格和LOGO都有所改變，因此規(guī)范也隨之迭代優(yōu)化。對比V1.0和V5.2規(guī)范，可以發(fā)現(xiàn)LOFTER在V1.0產(chǎn)品初期階段，只需對色彩、字號、按鈕等主要模塊進行規(guī)范，隨著產(chǎn)品的發(fā)展，到了V5.2版設(shè)計規(guī)范，對規(guī)范進行了更多的補充說明，以及保持產(chǎn)品自身的品牌調(diào)性。