之前大大小小的規(guī)范做過一些，踩過很多坑，趁著這次主站和移動端改版開始，想總結(jié)之前的經(jīng)驗教訓(xùn)，建立一套有用的設(shè)計規(guī)范，有用的意思也就是說可以幫助我們達(dá)到一些目標(biāo)。當(dāng)然，不包括獨立設(shè)計師或主設(shè)計師帶領(lǐng)設(shè)計師助理兩個人的小微團(tuán)隊主導(dǎo)的項目，那種只要能讓設(shè)計師按照自己的習(xí)慣制定，只要確保能很好的和下游團(tuán)隊溝通就可以了。

一、首先在做之前我們能預(yù)見并希望繞過哪些坑？

1.規(guī)范本身臃腫：很好理解臃腫的問題，如果拿到一份幾十頁的規(guī)范，不但設(shè)計師很難看下去，相關(guān)利益者更難去閱讀，就算閱讀了，又能記住多少，后續(xù)的工作又有哪些是根本用不到的；避免這個問題，這需要規(guī)范千萬不能脫離與業(yè)務(wù)的聯(lián)系，需要具有在能夠匹配業(yè)務(wù)訴求的基礎(chǔ)上具有高度歸納性和凝練性；

2.內(nèi)容更新不透明：是設(shè)計師本身的性格決定的，有很多設(shè)計師性格內(nèi)向，喜歡做完自己的工作就默默的放在那里，內(nèi)心比較抗拒去動員大家都知道這件事情，這容易導(dǎo)致說，如果我改規(guī)范，還要去和大家溝通，還是算了，要么不改，要么我自己偷偷設(shè)計個規(guī)范外的特例好了，這樣的話，規(guī)范沒有辦法達(dá)到我們建立它的初衷；避免這個問題，我們會定期建立溝通會議，后面會提到；

3.拆得太細(xì)：舉個例子，比如控件吧，每種控件都有自己不同的尺寸、顏色和交互方式，然而設(shè)計師實際使用控件的時候的場景多半是在表單/表格/浮層中，需要把控件組合起來，那么如何組合起來，不但需要花心思思考，而且不同的設(shè)計師有不同的處理方式，這也偏離了我們做規(guī)范的目的；所以我們的規(guī)范很重要的組成部分是素材庫，尤其是移動端素材庫，后面會提到；

4.限制設(shè)計師的創(chuàng)造力：這是執(zhí)行層面的問題，設(shè)計本身是件發(fā)揮創(chuàng)造力和想象力的快樂的事情，設(shè)計師們都希望開開心心做設(shè)計不希望被調(diào)調(diào)框框束縛；避免這個問題，我們只對高頻的、品牌代表性的關(guān)鍵頁或關(guān)鍵組件做規(guī)范，后面會提到；

5.產(chǎn)品阻礙：產(chǎn)品同學(xué)不會在乎彈窗的寬度到底是100還是110，但是，如果我們粗暴的把彈窗規(guī)定了某種寬度，當(dāng)產(chǎn)品同學(xué)提出一種合理的業(yè)務(wù)需求，但是是這種寬度內(nèi)不能承載的，設(shè)計師就會告訴產(chǎn)品說按照規(guī)范這個內(nèi)容不能用浮層設(shè)計，這樣產(chǎn)品同學(xué)就會質(zhì)疑設(shè)計同學(xué)死腦筋，不懂變通，質(zhì)疑我們的規(guī)范是絆腳石，設(shè)計同學(xué)也會左右為難，長此以往，設(shè)計同學(xué)默默的也就不再想使用規(guī)范了。所以，我們希望規(guī)范務(wù)必能夠匹配業(yè)務(wù)訴求在合理范圍內(nèi)的多樣性。

6.開發(fā)不看：可讀性差是一方面，另外，組件化后更改成本大，一些更好的方案可能由于需要更改一下規(guī)范內(nèi)的組件而被開發(fā)打回。

二、既然這么多坑那為什么還要做呢？因為絕大部分坑都是可以以正確的姿勢規(guī)避掉的，更重要的是由我司實際情況和我們想要達(dá)成怎樣的目標(biāo)來決定的。

1.跨度廣：PC/iOS/Android/H5/服務(wù)號/小程序，這么多的平臺，為了減少用戶的認(rèn)知成本和形成品牌一致性的需求，我們不得不著手建立對端對端設(shè)計規(guī)范；

2.組件可復(fù)用程度高：可以避免設(shè)計師個人的重復(fù)思考，提升個人效率；

3.負(fù)責(zé)不同的產(chǎn)品線的產(chǎn)品經(jīng)理和設(shè)計師都并非一人：不同產(chǎn)品經(jīng)理之間對于同一模塊的理解不同，不同的設(shè)計師設(shè)計風(fēng)格也不同，如果沒有規(guī)范的話很容易看起來不是一個團(tuán)隊做的。好的設(shè)計規(guī)范不但可以使產(chǎn)品經(jīng)理和設(shè)計師之間減少不必要的溝通成本，更重要的是可以更好的滿足業(yè)務(wù)需求，帶來業(yè)務(wù)價值。

4.開發(fā)人員：可以用統(tǒng)一的控件庫調(diào)用從而減少代碼冗余，設(shè)計同學(xué)也可以在于開發(fā)同學(xué)對接的過程中節(jié)省掉重復(fù)的尺寸標(biāo)注并減少不必要的溝通。

三、怎樣在規(guī)避掉坑的同時建立起一套可實現(xiàn)目的的有用的設(shè)計規(guī)范呢？

建立的時間點：別太早也別太晚，如果設(shè)計還沒啟動，先想著建立規(guī)范，什么東西都沒有，仿佛空中樓閣；也別等到整個平臺的設(shè)計全部都結(jié)束，那樣在總結(jié)規(guī)范的時候總會覺得之前的設(shè)計哪哪有問題，再去改的話已經(jīng)提交前端或者已經(jīng)上線了，做規(guī)范的意義也不大了；最好的時間節(jié)點是出完重點的幾個頁面的之后，風(fēng)格已經(jīng)確定的情況下，建立起規(guī)范，這樣設(shè)計后續(xù)頁面的時候都參考并補(bǔ)充完善規(guī)范，等頁面設(shè)計完了，規(guī)范就建立的差不多了。

在早期注意積累和歸納：設(shè)計師尤其是設(shè)計定義風(fēng)格的主頁面的設(shè)計師，對風(fēng)格定義過程中使用的控件和品牌元素及時歸納，同時對設(shè)計的初衷，在哪里使用的等等，最好有必要的說明記錄下來。

會議討論達(dá)成一致后按模塊分配任務(wù)：風(fēng)格定義完成之后，就可以把所有的設(shè)計師召集起來，預(yù)先將規(guī)范劃分成各個模塊，并將不同模塊對應(yīng)到不同設(shè)計師來負(fù)責(zé)總結(jié)。模塊分為:顏色，圖標(biāo)，排版，字體，動效，控件尺寸與交互，表單，列表，表格等等 。領(lǐng)走任務(wù)的時候要充分考慮到各個產(chǎn)品線的設(shè)計師哪種模塊用到比較多，就領(lǐng)走哪種模塊。

匯總和微調(diào)：固定頻率的例會，將各部分規(guī)范匯總，和所有設(shè)計師匯報下自己負(fù)責(zé)模塊的進(jìn)度并確認(rèn)下是否有問題補(bǔ)充，重點/高頻頁面設(shè)計完之后，微調(diào)排版后即可發(fā)布。發(fā)布時要讓相關(guān)上下游對接的團(tuán)隊知道，實際上不但在發(fā)布時，在設(shè)計規(guī)范的整理過程中，最好也讓上下游團(tuán)隊參與進(jìn)來，讓他們知道我們在做什么，并且任何問題或不確定的點要及時的請教，避免閉門造車。

四、產(chǎn)品總是要不斷的更新迭代，設(shè)計規(guī)范也不可能一成不變，如何維護(hù)更新設(shè)計規(guī)范？

1.不好的、過時的規(guī)范需要及時同步歸納，并及時通知到負(fù)責(zé)的設(shè)計師。這種基于產(chǎn)品迭代過程中對設(shè)計樣式的迭代和優(yōu)化，建議用小步快走的方式，不建議大規(guī)模的修改，成本太高。

2.如果在設(shè)計過程中出現(xiàn)的特殊情景，需要規(guī)范中沒有包含的特殊設(shè)計樣式，此時設(shè)計師要單獨給出設(shè)計效果圖。當(dāng)特殊情況越來越多就要考慮將這些情況整合，補(bǔ)充進(jìn)現(xiàn)有的規(guī)范中。

3.改版過程中如果有新的更符合產(chǎn)品的視覺風(fēng)格，或者有新的用戶習(xí)慣的形成時，要及時總結(jié)歸納成新版本的規(guī)范，避免品牌形象走樣。

總結(jié)一下：

1.設(shè)計規(guī)范要匹配合理的業(yè)務(wù)訴求，對業(yè)務(wù)產(chǎn)生價值；

2.不要對所有頁面做規(guī)范，只針對有高頻和有代表性的頁面做規(guī)范；

3.規(guī)范要有彈性，有靈活的空間，根據(jù)需求適當(dāng)?shù)恼{(diào)整也是可以的；

4.不要默守陳規(guī)一成不變，及時更新和迭代；

以上都是在自己掉過的坑和在網(wǎng)上搜集到的優(yōu)秀規(guī)范的基礎(chǔ)上做的總結(jié)，規(guī)范這件事情依據(jù)不同的公司和不同體量的項目而制定，并不是所有的項目都需要制定規(guī)范；還有規(guī)范并不是為了彰顯領(lǐng)導(dǎo)能力而做，也不是為年終總結(jié)的光輝一筆而做，務(wù)必要真正能夠提供業(yè)務(wù)價值才是有用的規(guī)范。