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

這篇文章分為三個(gè)部分：

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

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

話不多說(shuō)，開(kāi)始正題。

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

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

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

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

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

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

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

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

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

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

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

這里來(lái)說(shuō)說(shuō)以下的情況：

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

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

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

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

所以省時(shí)省力的做法就是：公用組件、流程提煉出來(lái)作為統(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)目初期就可以列出一個(gè)大概的規(guī)范出來(lái)，但是規(guī)范列出來(lái)了，如何評(píng)定這個(gè)規(guī)范的合理性呢？

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

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

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

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

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

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