現(xiàn)在已經(jīng)不是一個人做設(shè)計(jì)的時代了，多人協(xié)作中，為了達(dá)到設(shè)計(jì)的統(tǒng)一性，交互規(guī)范正在起著越來越重要的作用。而且軟件中還可以做成組件，大家共同維護(hù)，省時省力。

這篇文章分為三個部分：

1. 一般規(guī)范包含什么內(nèi)容
2. 如何通過規(guī)范省時省力
3. 如何評估規(guī)范的合理性

為什么要寫這些內(nèi)容。首先第一部分讓大家大概了解設(shè)計(jì)規(guī)范有什么內(nèi)容，日后制定規(guī)范可以直接套用；了解第一部分就會發(fā)現(xiàn)，現(xiàn)在很多設(shè)計(jì)規(guī)范的內(nèi)容都大差不差，每次一個新項(xiàng)目都有一個新規(guī)范，規(guī)范以及是一個累贅的負(fù)擔(dān)，沒有起到最初的作用：省時省力，當(dāng)前我們團(tuán)隊(duì)也沒有完全解決，這里我就先假定某些解決方案僅供參考；第三部分則是花費(fèi)了大量精力制定的規(guī)范如何評估它的合理性，依據(jù)有哪些，只有這樣，設(shè)計(jì)的合理性才可站穩(wěn)腳跟。

話不多說，開始正題。

一、規(guī)范包含什么內(nèi)容

設(shè)計(jì)規(guī)范一般分為：視覺規(guī)范和交互規(guī)范。交互規(guī)范會更注重整體的層級關(guān)系、邏輯、流程方面的定義，對于已確認(rèn)會用到的常用組件也會有概念定義，由于業(yè)務(wù)的不確定性，所以交互規(guī)范更多的是起到框起某個范圍的作用，設(shè)計(jì)師可以在該范圍中進(jìn)行設(shè)計(jì)；而視覺規(guī)范則會事無巨細(xì)的制定字體、顏色、邊距等等非常具體的規(guī)范，這是一個明確且不可變更的規(guī)范，除非有新的組件出現(xiàn)，已有的內(nèi)容則基本都要按照規(guī)范去實(shí)現(xiàn)。

交互規(guī)范大體上包含：結(jié)構(gòu)、布局、公用組件、業(yè)務(wù)組件、反饋、公用流程（編輯等）、業(yè)務(wù)流程（下單等），再從上述幾個大類中去細(xì)分，就構(gòu)成了一個規(guī)范。

視覺規(guī)范在交互規(guī)范的基礎(chǔ)上增加：顏色、字體、間距的規(guī)范即可。

制定規(guī)范的初衷也是為了解決一下問題：

1. 團(tuán)隊(duì)內(nèi)部協(xié)作
2. 可追溯的更新版本
3. 組件化設(shè)計(jì)，可復(fù)用性強(qiáng)
4. 通過組件化設(shè)計(jì)，提升可復(fù)用性，來提升開發(fā)效率
5. 如果是多個業(yè)務(wù)線并行，統(tǒng)一的規(guī)范能夠起到統(tǒng)一的作用

二、如何通過規(guī)范省時省力

身為懶人，在如何偷懶的道路上深有研究，那么對于設(shè)計(jì)師而言偷懶偷得名正言順的規(guī)范怎么能放過呢。如何通過制定規(guī)范達(dá)到省時省力的目的，這里就詳細(xì)說一說。

制定規(guī)范分為以下幾個階段：

1. 項(xiàng)目前期：結(jié)構(gòu)層級，以及某些常用的公用流程和組件方便初始的交互設(shè)計(jì)搭建
2. 項(xiàng)目中期：對出現(xiàn)的新組件的定義，某個元件是否能被定義為組件取決于該元件出現(xiàn)的頻率、普適性以及可擴(kuò)展性
3. 項(xiàng)目后期：收尾工作，查看新組件和之前的是否有沖突、重合，是否有某些地方可以成為新的組件，并進(jìn)行迭代更新

如果設(shè)計(jì)師處于多個項(xiàng)目中，就會出現(xiàn)要維護(hù)多套規(guī)范的情況。

這里來說說以下的情況：

1. 整個公司圍繞一個產(chǎn)品為主，那么規(guī)范只存在一套；
2. 公司N個產(chǎn)品并行，類似但不是同一個產(chǎn)品，這些產(chǎn)品還要有定制性，統(tǒng)一的規(guī)范不可行，那么有多少個產(chǎn)品就會有多少套規(guī)范；
3. 公司多個產(chǎn)品但是這些產(chǎn)品是互補(bǔ)的，那么可以有一定的共同性，那么就會存在一個統(tǒng)一的規(guī)范，然后各個產(chǎn)品根據(jù)具體業(yè)務(wù)需求看是否要制定支線規(guī)范；

第一種情況很簡單，大家共同維護(hù)好一套規(guī)范，按部就班的迭代就好；第三種情況也簡單，由于產(chǎn)品互補(bǔ)，那么整體的交互方式一致即可，相同、類似的操作可以采用統(tǒng)一的規(guī)范，至于業(yè)務(wù)流程部分則可從主規(guī)范中演變出來，那么這時候設(shè)計(jì)目標(biāo)、原則就起到了指向性作用。而第二種情況則比較復(fù)雜，產(chǎn)品不同、產(chǎn)品基調(diào)不同，規(guī)范不同也是情理中的事，但是如何維護(hù)，如何使用就成了問題。

第二種情況很難碰到，但每個公司生存肯定是有一個主線產(chǎn)品，不論外表產(chǎn)品形式如何更改，都無法改變核心業(yè)務(wù)。那么可以參考第三種情況的方式，針對核心業(yè)務(wù)整理核心流程并組件化，這樣可以適配各種類型的產(chǎn)品，那么剩下的工作就是針對項(xiàng)目做差異化設(shè)計(jì)了。

上圖（Xmind試用模式忽略忽略）是一個完整的交互規(guī)范可能有的內(nèi)容：結(jié)構(gòu)、布局、流程、組件。結(jié)構(gòu)主要是針對整體產(chǎn)品架構(gòu)、結(jié)構(gòu)層級的定義，這是一個產(chǎn)品的底層邏輯定義，而且設(shè)計(jì)原則也起到了設(shè)計(jì)指導(dǎo)的作用，當(dāng)出現(xiàn)新組件、新流程時，如何制定最終方案還是要依據(jù)設(shè)計(jì)原則進(jìn)行。

所以省時省力的做法就是：公用組件、流程提煉出來作為統(tǒng)一規(guī)范，而結(jié)構(gòu)、布局、業(yè)務(wù)流程和組件作為差異化的部分，以項(xiàng)目為緯度分別進(jìn)行維護(hù)和迭代。

三、規(guī)范制定的合理性

現(xiàn)在的規(guī)范系統(tǒng)都比較成熟，有經(jīng)驗(yàn)的人在項(xiàng)目初期就可以列出一個大概的規(guī)范出來，但是規(guī)范列出來了，如何評定這個規(guī)范的合理性呢？

1. 這個組件在項(xiàng)目中出現(xiàn)的頻率是否很高，如果僅出現(xiàn)過一次是否可以考慮作為特案處理
2. 這個組件在項(xiàng)目中其他模塊的設(shè)計(jì)中是否可以復(fù)用，復(fù)用率如何，如果不可復(fù)用那么更換樣式是否可以提高組件復(fù)用率
3. 如果這個組件實(shí)在不可復(fù)用，那么通過簡單的增刪是否可以復(fù)用；或者說通過多個組件之間的組合達(dá)到目的

上面3點(diǎn)就是我在做項(xiàng)目中總結(jié)的好的規(guī)范通過哪些緯度去評定：頻率、普適性和可擴(kuò)展性

好了，以上就是對于規(guī)范的一點(diǎn)碎碎念，這里都是從概念上去說明，后續(xù)會整理出合適的例子，那就到這里，謝謝大家的觀看。

作者：青絳，微信公眾號：搬磚人員素養(yǎng)

本文由 @青絳 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash ，基于 CC0 協(xié)議