從一開始的立項到現(xiàn)在落地上線，可以說是從零開始進行 APP 全部細節(jié)的梳理并且規(guī)定規(guī)范，這一路走過來還是能總結出很多心得，本文將分為3個部分，闡述如何從0到1建立設計規(guī)范。

目錄

• 如何確定內容，規(guī)范里要寫什么
• 如何寫
• 如何推動規(guī)范落地

一、如何確定內容？

這里我總結了三步：

1. 確定目標用戶、用戶目標、設計目標

根據(jù)不同的用途和目標，不同的團隊對設計規(guī)范的制定是不一樣。比如為了指導與規(guī)范全球第三方開發(fā)者進行設計和開發(fā)，Google 建立的 Material Design 覆蓋面廣，每個組件細節(jié)寫得非常細致。Ant Design 則是直接做出了組件，方便直接進行調用。有些國內設計團隊的規(guī)范則是主要描述常用控件和色值。因此我們需要確立用戶目標和設計目標，這樣才能確定我們的規(guī)范側重點是什么，需要做成怎么樣的形式。

在這里我列舉了自己撰寫規(guī)范時的用戶與目標：

2. 模范大平臺，先列全

一個規(guī)范里面的東西是很多的，那么我們究竟需要做什么呢？假如一開始我們沒有方向，找一個，列一個，這樣我們很容易疏漏很多情況。在這里我采用的一個辦法是：首先熟讀 iOS，Material Design規(guī)范，并且模仿他們，在腦圖中，把規(guī)范中應含有的所有內容羅列出來，羅列一個大綱。

這里我列舉當時自己做的一個腦圖大綱，覆蓋了主流規(guī)范中的所有細節(jié)，大家可以進行參考并模仿：

3. 針對自己情況進行刪減

列完齊全的大綱后，我們需回顧設計目標，對大綱里的內容進行刪減。（比如在組件、模式這些地方，可以對著自己的 APP，進行挨個尋找，看自己的 APP 當前是不是運用了這個組件，沒有的話就進行刪減。）

在這里我列舉了針對自身 APP 的情況刪減后的大綱圖：

二、如何寫

進過了以上的三步，我們基本得出了要寫什么的框架了，接下來就是如何寫規(guī)范的階段。

這里我總結了3步：

1. 確定優(yōu)先級

我們可以通過版本迭代計劃+性價比+重要性（該組件在頁面出現(xiàn)的場景次數(shù)以及當前的不統(tǒng)一對 APP 體驗影響程度）這幾個維度分別確定每塊內容的優(yōu)先級和分工?；A的、必要的、高性價比的放在第一期，復雜的向后放，隨著產(chǎn)品的迭代，我們的規(guī)范也會越來越完整。

同時需要留意版本規(guī)劃，了解即將要做的功能或即將要改版的頁面。我們可以提高這里面牽涉到的控件、組件等內容的優(yōu)先級。龐大復雜，牽涉到很多頁面的，我們可以先降低其優(yōu)先級：比如全局提示框的規(guī)范，toast 的規(guī)范。

同時，我們也需常與開發(fā)溝通，爭取把可復用性高、組件日后變化幅度少的組件做成開發(fā)組件庫。

2. 確定規(guī)范書寫格式

我們制定的規(guī)范本身也是設計的交付物，假如每個設計師都按照自己的喜好來編寫規(guī)范，那么這個規(guī)范本身也會變得不規(guī)范，規(guī)范自身保持一致性是提高規(guī)范閱讀效率的一部分。

我們可以回歸我們之前制定的用戶目標和設計目標來制定我們規(guī)范的書寫格式。規(guī)范的用戶群是誰，主要想達到什么作用，是通過文檔展示還是網(wǎng)上展示，確定了這些問題后，就可確定規(guī)范的詳細程度、主要的展示形式（比如前文說到的 Ant Design 和 Material Design）。

這里我的思考點是：假如規(guī)范寫太多字就會變得很臃腫，沒有人喜歡慢慢仔細的閱讀你寫的規(guī)范，所以我們應該做到寫得簡明扼要，再輔以例子說明（根據(jù)開發(fā)的習慣，都是喜歡直接看例子，看標注）。

我的書寫格式是：先寫描述這個組件是什么，再列舉出現(xiàn)的場景，然后編寫交互規(guī)則，最后給出視覺標注+例子。

3. 逐步對單個規(guī)范進行整理與書寫

當確定了要寫什么東西和格式之后，我們開始進入到細節(jié)，對每個內容進行整理，制定規(guī)范了。

通過對每個內容制定規(guī)范也是有方法的：

下面我通過整理「列表」這個規(guī)范來講解：

收集出現(xiàn)的所有的場景

當一個產(chǎn)品已經(jīng)趨于成熟，這個組件出現(xiàn)的場景就會非常多，比如對話框，toast，列表這些組件出現(xiàn)的地方很多，需要我們自己仔細地體驗產(chǎn)品，把所有頁面都找出來。

提取共性，歸納分類

我們需要分析每個頁面的特點并且把相同特點的頁面歸納一起，眾多的頁面場景就能整理成幾個典型的種類，然后只需對這幾個典型的種類進行定義和描述即可。

在列表中，我分為了大封面列表、小封面列表、用戶列表、單行列表

編寫規(guī)則

在分類好后，我們可以對每個種類編寫規(guī)則，在這里我們需要描述好每個種類有什么特點或屬性，什么時候場景下適用，并且給出標注和例子，方便閱讀者理解。

多與組內成員討論修改

在制定好初稿后，我們可以與組內成員宣講下自己制定的規(guī)范。多從別人的角度出發(fā)，確保你編寫的規(guī)范是否易懂，是否包含了全部的情況，是否容易執(zhí)行落實。

三、如何推動規(guī)范落地

寫完內容后，最重要的一步就是推動落地，規(guī)范要真正有人用才能體現(xiàn)價值。

1. 幫助推動規(guī)范落地的小建議

制定規(guī)范推進進度表

表格里面應該包含規(guī)范制定的優(yōu)先級，分工進度，分工人員，并且確定每一期進度的交付時間，開會討論的時間，作為負責人，也可以適時提醒成員每次的開會時間。

編寫過程中多與其他成員討論，達成一致性共識

制定規(guī)范后，與部門其他人員進行宣講，灌輸概念，針對如何更好的落實進行討論調整。在設計中都不可能一次就完美，我們需要不斷的在修改中逐漸完善。

規(guī)范建成后放在網(wǎng)上

同步在網(wǎng)上，方便部門內的其他成員能隨時查看和團隊成員對規(guī)范的更新修改、同步。

強制性制定規(guī)則要求團隊成員執(zhí)行

有明確的懲罰機制和要求才能更好的執(zhí)行，不然在規(guī)范制定后很容易健忘此事。

規(guī)范保持持續(xù)的更新迭代

規(guī)范推動落地后并不是完全了事，要根據(jù)產(chǎn)品的迭代，保持規(guī)范的更新。

這整個制定規(guī)范的項目中，還是有不少反思的地方，值得我們深思和注意。

2. 深思和注意

切記不要為設計規(guī)范而做規(guī)范

規(guī)范最重要的點是能推動落地，能確確實實改善產(chǎn)品，達到統(tǒng)一性。因此我們在設計規(guī)范時，并不需要「高大上」術語，給出一大堆的設計理念用來提升設計檔次。而是真正的回歸到我們的設計目標，針對目標用戶制定規(guī)范，做到簡樸、易懂、能落地。

沒人愿意閱讀長篇文字

我們應該盡量控制文案長度，做到通俗易懂即可。

要時刻圍繞我們的目標做規(guī)范

比如，我這次做的規(guī)范中有一項是去工具化，在制定控件中，空白頁面中就會加入很多趣味化的設計。

靈活變通

規(guī)范只是適合大多時候的場景，對于一些規(guī)范中沒有包含或者不符合規(guī)范的場景，我們可以靈活變通，積極創(chuàng)新或者是補充新的規(guī)范（前提是與組內積極溝通，達成共識）。

總結

再來回顧如何從0到1建立規(guī)范。

1. 確定內容

• 確定用戶目標和設計目標
• 模仿大平臺，列全
• 針對自己情況進行縮減

2. 寫

• 確定優(yōu)先級
• 確定規(guī)范書寫格式
• 逐步對單個內容進行整理與書寫： 收集全部情況 、 分類歸納 、提取共性，編寫規(guī)則

3. 推動

• 制定規(guī)范推進進度表
• 編寫過程中多與其他成員討論
• 把規(guī)范建成后放在網(wǎng)上
• 強制性制定規(guī)則要求團隊成員執(zhí)行
• 規(guī)范保持持續(xù)的更新迭代

歡迎關注「TCD設計中心」公眾號：

圖片素材作者：Tran Mau Tri Tam ?

「有效制作設計規(guī)范的實用方法」

• 《超全面的移動端UI 設計規(guī)范整理匯總》
• 《騰訊實戰(zhàn)經(jīng)驗！如何搭建有效的設計規(guī)范？》
• 《中小團隊來收！如何快速制作有效的UI設計規(guī)范？》