有幸在剛入部門就參與設計規(guī)范制定，前前后后大概花費一個月時間。本次博文結合親身參與的制定規(guī)范項目，圍繞：設計規(guī)范的重要性，制定規(guī)范的時機，制定的過程和后續(xù)工作這幾個方面來總結和分享。

設計規(guī)范的重要性

設計總監(jiān)剛開始召集設計師討論立項制作設計規(guī)范時，就有設計師提出“規(guī)范只是公司給外部看的一種噱頭”，更像是體現(xiàn)一種公司視覺形象（VI）。其實互聯(lián)網公司的產品設計規(guī)范并非是僅僅用來宣傳形象的，更多用來使用、簡化開發(fā)過程、使多個產品擁有一致的體驗，是落到實處的東西。

在一個部門含有多個產品線的情況下，此時產品設計規(guī)范最能體現(xiàn)其作用

統(tǒng)一產品用戶體驗

由于負責各個產品線的產品經理并非同一人，如果此時設計師們又是滲透到各個產品組中，那么產品之間的體驗就根本讓用戶感覺不出是一個部門設計開發(fā)出來的。

不同產品線的產品經理交予設計師的線框圖就千差萬別。比如實現(xiàn)一個篩選功能，有的采用下拉菜單，有的采用彈窗。相同的情景不同的交互方式，先拋開各自的優(yōu)劣不談，產品之間本身就出現(xiàn)體驗上的矛盾。產品經理間缺少溝通，而產品團隊基本會按照產品經理的規(guī)劃設計產品，這就造成產品間存在體驗差別。

不同產品線上的設計師設計風格也存在差別。比如外觀尺寸設計，配色選擇。當沒有獨立的設計組時，產品線上的設計師均各自為政，并直接對產品經理負責，更加深化了產品間的不協(xié)調。

產品設計者沒有錯，只是缺少了讓各個產品線之間協(xié)調統(tǒng)一的橋梁。通過設計師間的討論并協(xié)商各產品線上的產品經理，制定一套規(guī)范，架起這座橋梁，讓產品設計者們有參考、有準則。

方便設計開發(fā)產品

在制定設計規(guī)范的過程中，會形成統(tǒng)一標準控件庫、頁面元素尺寸規(guī)定、配色方案規(guī)定和視覺風格統(tǒng)一指導。設計者可以按照功能需求直接調用規(guī)范中的標準控件，按照信息結構需求調用不同的元素尺寸進行設計。很輕易便能輸出高保真原型圖，減輕了設計過程中對交互控件選擇和信息排版的思考負擔。

形成備案和文庫

如同技術文檔一樣，產品在設計方面也需要文檔與規(guī)范。由于業(yè)務需求的變化，設計規(guī)范不會一成不變。通過文檔備案記錄每次設計調整，調整的初衷和理論依據(jù)，便于日后的回顧與總結。自己在剛入部門時既沒有產品設計規(guī)范文檔，又沒有規(guī)范的技術框架文檔，在產品成長與傳承中出現(xiàn)了中斷。形成簡單易讀的文檔規(guī)范是一種對產品負責任的體現(xiàn)。

制定規(guī)范的時機

規(guī)范出現(xiàn)時機應恰到好處，過早或過晚，均會為產品迭代帶來麻煩和阻礙。

在產品剛剛起步或僅迭代幾代版本后便想總結出一套規(guī)范為時尚早。此時產品僅僅擁有大體發(fā)展方向和基本功能，很多細分工功能不夠完善，產品整體不夠豐滿。此時制定出的規(guī)范并不能起到概括和統(tǒng)一作用，隨著產品不斷完善，大量功能需求會添加進來，而規(guī)范也要隨之大更改，增加各個部門修改調整負擔。如此大規(guī)模修改規(guī)范本身就失去了規(guī)范作為一個準則的意義。

在產品已經成熟之后再制定規(guī)范則為時較晚。此時每個產品線上的產品功能、結構信息組織框架已經定型，只有偶爾優(yōu)化提升體驗細節(jié)修改和輔助類功能的添加。產品技術框架邏輯，尤其是前端技術框架已成型，且技術人員在開發(fā)過程中對于產品界面設計，交互方式也諳熟于心。如果迭代過程中產品間差別不大還好，產品差別很大時，再出臺規(guī)范會增加很多技術人員調整的成本，拖延新版本上線時間。

如果部門同時存在成熟與剛起步的產品，按照成熟產品設計方向制定規(guī)范會更方便后續(xù)調整。即使規(guī)范出臺時間較晚，也要比部門內部沒有統(tǒng)一規(guī)范使產品間不統(tǒng)一、不一致好得多。

制定設計規(guī)范過程

設計規(guī)范雖然只是簡單幾頁，但那是濃縮概括的結果，并非一蹴而就。

早期注意積累和歸納

設計師在設計初期產品效果圖時要注意實時歸納和總結，原文件和導出文件進行分類整理，對設計過程中使用的控件和模式及時歸納，同時簡單記錄一些界面設計的初衷，有爭議的設計點等等。及時地總結對后期設計規(guī)范的制定打下良好基礎，否則很容易忘記設計初衷，找不到文件或者設計負責人等等問題。

總結歸納會議

準備制作設計規(guī)范時，需要召集各產品線上的設計師將設計結果進行匯總和提煉。這樣的會議既是討論性會議又是決策性會議，所以耗時較長，但這又是要制定設計規(guī)范的必要會議。

可以預先將規(guī)范劃分成各個模塊，分步進行會議討論和決議，并將不同模塊對應到不同設計師來負責總結。當遇到難以解決、產品間互相沖突的問題要即時溝通相關產品負責人，當涉及到一些產品需要重大樣式修改時更要即時溝通，設計組內部意見統(tǒng)一的同時也要得到外部支持和認可。

制作

在動手制作之前，設計師間要對規(guī)范自身的展現(xiàn)形式和樣式達成一致。設計師按照會議討論決議出的結果制作自己負責模塊的規(guī)范。模塊分為：配色，圖標，字體，控件尺寸，控件交互等等

匯總和微調

將各部分規(guī)范匯總，再修改細節(jié)、微調排版后便可發(fā)布了。為了使規(guī)范更方便傳播和閱讀，個人建議將規(guī)范以網頁形式呈現(xiàn)更為合適。

規(guī)范標準

先看幾個優(yōu)秀的設計規(guī)范：微信weui與weui文檔；Ant Design ; Material Design；IBM Design Language

優(yōu)秀設計規(guī)范擁有明確層級和邏輯，便于其他組員查找相應內容，便于設計師日后對不同模塊進行內容完善。

優(yōu)秀設計規(guī)范是高度精簡和概括的，將相同情境下的不同設計樣式統(tǒng)一成適應性更強、更科學合理的設計樣式，減少很多所謂的特殊情況設計和繁瑣的重復尺寸標注。參與設計開發(fā)的組員可以結合情景直接調用適合的設計樣式。當然在設計過程中會出現(xiàn)特殊情景，需要規(guī)范中不包含的特殊設計樣式，此時設計師要單獨給出設計效果圖。當特殊情況越來越多就要考慮將這些情況整合，補充進現(xiàn)有的規(guī)范中。

后續(xù)補充

規(guī)范制定出來并非一成不變，隨著業(yè)務發(fā)展、需求增加，規(guī)范要在原有內容基礎上進行需改、增刪。規(guī)范的弊端就是每次有重大更改，會造成很多產品線多個產品的相應調整，甚至還會牽扯到結構架構的修改。慎重修改已制定出的規(guī)范，多采用小更改迭代的方式對規(guī)范進行補充修改。

擁有設計規(guī)范并不代表團隊不再需要設計師，也不代表團隊中誰都可以使用規(guī)范組件拼拼湊湊就輸出設計效果圖。產品設計含有感性的成分，需要設計師通過調研和認知去設計、把握產品的體驗。規(guī)范是工具、是標尺，需要設計開發(fā)人員的靈活運用和不斷完善，適應變化。規(guī)范擁有重要作用，但不可拿著規(guī)范把產品做死、做僵。

作者@米亓

來源@簡書

本文由 @米亓 授權發(fā)布于人人都是產品經理?，未經許可，禁止轉載。