一份超實用的設計規範制定指南
作者：米_亓 來源：視覺同盟 發佈於： 2016-6-23
@米_亓 ：有幸在剛入部門時就參與設計規範制定，前前後後大概花費一個月時間。本篇文章結合親身參與的制定規範項目，圍繞：1，設計規範的重要性；2，制定規範的時機；3，制定的過程和後續工作這幾個方面來總結和分享。
1、設計規範的重要性
設計總監剛開始召集設計師討論立項製作設計規範時，就有設計師提出“規範只是公司給外部看的一種噱頭”，更像是體現一種公司視覺形象（VI）。其實互聯網公司的產品設計規範並非是僅僅用來宣傳形象的，更多用來使用、簡化開發過程、使多個產品擁有一致的體驗，是落到實處的東西。
在一個部門含有多個產品線的情況下，此時產品設計規範最能體現其作用。
統一產品用戶體驗
由於負責各個產品線的產品經理並非同一人，如果此時設計師們又是滲透到各個產品組中，那麼產品之間的體驗就根本讓用戶感覺不出是一個部門設計開發出來的。
不同產品線的產品經理交予設計師的線框圖就千差萬別。比如實現一個篩選功能，有的採用下拉菜單，有的採用彈窗。相同的情景不同的交互方式，先拋開各自的優劣不談，產品之間本身就出現體驗上的矛盾。產品經理間缺少溝通，而產品團隊基本會按照產品經理的規劃設計產品，這就造成產品間存在體驗差別。
不同產品線上的設計師設計風格也存在差別。比如外觀尺寸設計，配色選擇。當沒有獨立的設計組時，產品線上的設計師均各自爲政，並直接對產品經理負責，更加深化了產品間的不協調。
產品設計者沒有錯，只是缺少了讓各個產品線之間協調統一的橋樑。通過設計師間的討論並協商各產品線上的產品經理，制定一套規範，架起這座橋樑，讓產品設計者們有參考、有準則。
方便設計開發產品
在制定設計規範的過程中，會形成統一標準控件庫、頁面元素尺寸規定、配色方案規定和視覺風格統一指導。設計者可以按照功能需求直接調用規範中的標準控件，按照信息結構需求調用不同的元素尺寸進行設計。很輕易便能輸出高保真原型圖，減輕了設計過程中對交互控件選擇和信息排版的思考負擔。
形成備案和文庫
如同技術文檔一樣，產品在設計方面也需要文檔與規範。由於業務需求的變化，設計規範不會一成不變。通過文檔備案記錄每次設計調整，調整的初衷和理論依據，便於日後的回顧與總結。自己在剛入部門時既沒有產品設計規範文檔，又沒有規範的技術框架文檔，在產品成長與傳承中出現了中斷。形成簡單易讀的文檔規範是一種對產品負責任的體現。
2、制定規範的時機
規範出現時機應恰到好處，過早或過晚，均會爲產品迭代帶來麻煩和阻礙。
在產品剛剛起步或僅迭代幾代版本後便想總結出一套規範爲時尚早。此時產品僅僅擁有大體發展方向和基本功能，很多細分工功能不夠完善，產品整體不夠豐滿。此時制定出的規範並不能起到概括和統一作用，隨着產品不斷完善，大量功能需求會添加進來，而規範也要隨之大更改，增加各個部門修改調整負擔。如此大規模修改規範本身就失去了規範作爲一個準則的意義。
在產品已經成熟之後再製定規範則爲時較晚。此時每個產品線上的產品功能、結構信息組織框架已經定型，只有偶爾優化提升體驗細節修改和輔助類功能的添加。產品技術框架邏輯，尤其是前端技術框架已成型，且技術人員在開發過程中對於產品界面設計，交互方式也諳熟於心。如果迭代過程中產品間差別不大還好，產品差別很大時，再出臺規範會增加很多技術人員調整的成本，拖延新版本上線時間。
如果部門同時存在成熟與剛起步的產品，按照成熟產品設計方向制定規範會更方便後續調整。即使規範出臺時間較晚，也要比部門內部沒有統一規範使產品間不統一、不一致好得多。
3、制定設計規範過程
設計規範雖然只是簡單幾頁，但那是濃縮概括的結果，並非一蹴而就。
早期注意積累和歸納
設計師在設計初期產品效果圖時要注意實時歸納和總結，原文件和導出文件進行分類整理，對設計過程中使用的控件和模式及時歸納，同時簡單記錄一些界面設計的初衷，有爭議的設計點等等。及時地總結對後期設計規範的制定打下良好基礎，否則很容易忘記設計初衷，找不到文件或者設計負責人等等問題。
總結歸納會議
準備製作設計規範時，需要召集各產品線上的設計師將設計結果進行彙總和提煉。這樣的會議既是討論性會議又是決策性會議，所以耗時較長，但這又是要制定設計規範的必要會議。
可以預先將規範劃分成各個模塊，分步進行會議討論和決議，並將不同模塊對應到不同設計師來負責總結。當遇到難以解決、產品間互相沖突的問題要即時溝通相關產品負責人，當涉及到一些產品需要重大樣式修改時更要即時溝通，設計組內部意見統一的同時也要得到外部支持和認可。
製作
在動手製作之前，設計師間要對規範自身的展現形式和樣式達成一致。設計師按照會議討論決議出的結果製作自己負責模塊的規範。模塊分爲：配色，圖標，字體，控件尺寸，控件交互等等
彙總和微調
將各部分規範彙總，再修改細節、微調排版後便可發佈了。爲了使規範更方便傳播和閱讀，個人建議將規範以網頁形式呈現更爲合適。
4、規範標準
先看幾個優秀的設計規範：微信Weui 與 Weui文檔；Ant Design； Material Design；IBM Design Language。
優秀設計規範擁有明確層級和邏輯，便於其他組員查找相應內容，便於設計師日後對不同模塊進行內容完善。
優秀設計規範是高度精簡和概括的，將相同情境下的不同設計樣式統一成適應性更強、更科學合理的設計樣式，減少很多所謂的特殊情況設計和繁瑣的重複尺寸標註。參與設計開發的組員可以結合情景直接調用適合的設計樣式。當然在設計過程中會出現特殊情景，需要規範中不包含的特殊設計樣式，此時設計師要單獨給出設計效果圖。當特殊情況越來越多就要考慮將這些情況整合，補充進現有的規範中。
後續補充
規範制定出來並非一成不變，隨着業務發展、需求增加，規範要在原有內容基礎上進行需改、增刪。規範的弊端就是每次有重大更改，會造成很多產品線多個產品的相應調整，甚至還會牽扯到結構架構的修改。慎重修改已制定出的規範，多采用小更改迭代的方式對規範進行補充修改。
擁有設計規範並不代表團隊不再需要設計師，也不代表團隊中誰都可以使用規範組件拼拼湊湊就輸出設計效果圖。產品設計含有感性的成分，需要設計師通過調研和認知去設計、把握產品的體驗。規範是工具、是標尺，需要設計開發人員的靈活運用和不斷完善，適應變化。規範擁有重要作用，但不可拿着規範把產品做死、做僵。