各行各業(yè)都有規(guī)范，可以說我們每天都是生活在各種條條框框中，那么對(duì)我們手上的設(shè)計(jì)工作來說，如何制定設(shè)計(jì)規(guī)范來幫助我們更高質(zhì)高效的完成設(shè)計(jì)工作。

最近在做工作的項(xiàng)目文件整理，其中一部分工作內(nèi)容就是維護(hù)更新之前產(chǎn)出的設(shè)計(jì)規(guī)范。

一、設(shè)計(jì)規(guī)范什么時(shí)候做？做到什么程度？

先有產(chǎn)品還是先有規(guī)范？

聽起來好像有點(diǎn)像先有雞還是先有蛋，先做產(chǎn)品后總結(jié)規(guī)范，or先出規(guī)范再做產(chǎn)品，or一邊出產(chǎn)品一邊整理規(guī)范，其實(shí)每種方法都沒有錯(cuò)。

不過在我來看，我比較中意第三種方式，即一邊出產(chǎn)品一邊出規(guī)范。

對(duì)于新的產(chǎn)品來說，需要在產(chǎn)品的初期先制定能夠主導(dǎo)產(chǎn)品體驗(yàn)大方向性的、主要組件的設(shè)計(jì)規(guī)范，先讓小車的輪子轉(zhuǎn)起來，隨后在產(chǎn)品的研發(fā)和迭代的過程中，不斷去完善。

對(duì)于大部分常見的設(shè)計(jì)組件基本上在產(chǎn)品的一個(gè)版本的迭代中就可以全部涉及到，所以在產(chǎn)品從0-1的這個(gè)階段是最合適的。

制定交互規(guī)范對(duì)我們工作中有什么幫助呢？

我們先來看看如果不制作交互規(guī)范的話，日常的設(shè)計(jì)工作中會(huì)遇到哪些問題：

• 同一類型的交互方式在不同頁面顯示的方式不一樣
• 對(duì)于明明可以復(fù)用的組件，每次出交互方案時(shí)都要重新畫組件，費(fèi)時(shí)費(fèi)力
• 與工作上下游伙伴的溝通效率低
• ……

那么設(shè)計(jì)規(guī)范做到什么程度才可以呢？

現(xiàn)在大部分的互聯(lián)網(wǎng)公司都是敏捷研發(fā)的模式，所以在產(chǎn)品起步的初期，我們最重要的事情不是制作各種交互組件，最重要的是定義整個(gè)產(chǎn)品最基礎(chǔ)的交互框架。

網(wǎng)易UEDC設(shè)計(jì)組對(duì)web頁面的框架層級(jí)做了如下的梳理：即底層、內(nèi)容層、導(dǎo)航層、全屏操作層、插件層和模態(tài)彈窗層（熟悉前端的同學(xué)應(yīng)該知道，前端同學(xué)在寫頁面時(shí)會(huì)把頁面劃分的三層：結(jié)構(gòu)層、表示層、行為層，我們制定設(shè)計(jì)的主要是圍繞這三個(gè)方向展開，即頁面框架、頁面樣式和交互動(dòng)作設(shè)計(jì)）。

當(dāng)我們制定好這框架之后，設(shè)計(jì)的工作就會(huì)變得更加的清晰，有條理，絕大部分的設(shè)計(jì)工作都可以依附在在這個(gè)設(shè)計(jì)框架內(nèi)完成，和前端的同學(xué)溝通效率也會(huì)更高。

在制定了完善的頁面交互框架之后，敏捷開發(fā)的團(tuán)隊(duì)中，產(chǎn)品的生命周期節(jié)奏很快，所以我們?cè)谠O(shè)計(jì)工作的前期，只需要根據(jù)產(chǎn)品的定位、產(chǎn)品的調(diào)性去制定我們的常見的交互規(guī)范就可以了。

比如基礎(chǔ)文字使用規(guī)范、基礎(chǔ)控件庫（輸入框、對(duì)話框、搜索、導(dǎo)航等）、產(chǎn)品全局狀態(tài)（加載、刷新、缺省等），能夠滿足初期的產(chǎn)品設(shè)計(jì)就行。

在產(chǎn)品發(fā)展突破了從0-1的這個(gè)階段時(shí)，產(chǎn)品的交互規(guī)范就要隨著產(chǎn)品的不斷迭代進(jìn)行更新擴(kuò)充，各種復(fù)雜的、較為少見的交互組件都會(huì)慢慢的出現(xiàn)在產(chǎn)品迭代中。

在這時(shí)候我們需要對(duì)這些組件進(jìn)行更加規(guī)范的分組整理，常見的分組有導(dǎo)航、搜索、通知、按鈕、表單、提示信息、信息切換等，比如導(dǎo)航又會(huì)分為頂部導(dǎo)航、側(cè)邊導(dǎo)航、底部導(dǎo)航等，具體的內(nèi)容會(huì)在下文中詳細(xì)說明。

二、怎樣重新開始制作一套自己的交互設(shè)計(jì)規(guī)范

交互規(guī)范主要分為web端和移動(dòng)端以及其他配合產(chǎn)品使用的設(shè)備端，其中移動(dòng)端又分為Android和IOS兩種，其他設(shè)備端如iWatch、車載大屏等，我們?cè)谥谱鲗?duì)應(yīng)的交互設(shè)計(jì)規(guī)范時(shí)，一定要在響應(yīng)平臺(tái)本身的設(shè)計(jì)規(guī)范之上制作。

如果要從零開始設(shè)計(jì)一套屬于自己產(chǎn)品的設(shè)計(jì)規(guī)范，我們不妨看看一些做的非常優(yōu)秀的案例，比如iview、Ant Design，Element、VUX等，這類產(chǎn)品已經(jīng)實(shí)現(xiàn)了端到端的體驗(yàn)一致，交互組件的的豐富度能夠滿足絕大部分交互場(chǎng)景。

并且這些組件的交互、視覺、前端都做的非常優(yōu)秀，這些優(yōu)秀的案例在我們制作交互規(guī)范時(shí)確實(shí)可以作為有效的參考，包括交互組件的類型、每個(gè)組件的交互方式、整體色彩搭配等等，參考這些優(yōu)秀的設(shè)計(jì)規(guī)范產(chǎn)品，對(duì)我們制作交互規(guī)范時(shí)可以起到事半功倍的效果。

一套基礎(chǔ)的交互設(shè)計(jì)規(guī)范體系需要包含哪些內(nèi)容？

上文提到了交互組件的類型、每個(gè)組件的交互方式、色彩文字使用規(guī)范等，其實(shí)比較抽象，在實(shí)際的產(chǎn)品中，這些開發(fā)具體要包含哪些內(nèi)容呢？

首先我們把組件類型分類：頁面布局類、導(dǎo)航類、基礎(chǔ)組件類、表單組件類、數(shù)據(jù)展示類、提示組件類。

每一類常見的內(nèi)容如下：

• 頁面布局：柵格布局、顏色色彩、排版字體等
• 導(dǎo)航：頂部導(dǎo)航、側(cè)邊抽屜導(dǎo)航、頂部導(dǎo)航欄、底部標(biāo)簽欄、分頁器、面包屑、步驟條、tab標(biāo)簽、分段控制器
• 基礎(chǔ)組件：按鈕、加載、單行文本框、多行文本框、搜索框、下拉框、段落文本等
• 表單組件類：輸入框、單選框、復(fù)選框、滑動(dòng)開關(guān)、輸入校驗(yàn)規(guī)則、文件上傳、圖片上傳、圖片查看、日期選擇器、級(jí)聯(lián)選擇器等
• 數(shù)據(jù)展示類：表格、圖表、手風(fēng)琴、走馬燈、列表、步驟條、九宮格等
• 提示組件類：tip、標(biāo)簽、對(duì)話框、吐司提示等
• 業(yè)務(wù)組件：根據(jù)當(dāng)前產(chǎn)品業(yè)務(wù)的需要而設(shè)計(jì)出的一些特殊類型的組件

值得注意的是：我們?cè)谥谱饕惶捉换ピO(shè)計(jì)組件時(shí)，可以把它看成一個(gè)我們?cè)O(shè)計(jì)的一個(gè)產(chǎn)品，它也要有自己的規(guī)范，也會(huì)有優(yōu)先級(jí)，也會(huì)有版本迭代，從零到一；從先滿足對(duì)基礎(chǔ)業(yè)務(wù)的支撐開始，再逐步進(jìn)行迭代。

針對(duì)交互設(shè)計(jì)規(guī)范文檔本身制訂一套規(guī)范，以滿足在不同時(shí)間、不同人員維護(hù)這個(gè)規(guī)范文檔時(shí)都能夠保持整個(gè)文檔的統(tǒng)一性，在我們制作規(guī)范文檔的過程中是一件磨刀不誤砍柴工的事情。

三、交互設(shè)計(jì)規(guī)范制作的的幾個(gè)注意點(diǎn)

交互規(guī)范雖然能夠提高工作效率，維護(hù)產(chǎn)品的體驗(yàn)一致性，也能夠降低團(tuán)隊(duì)的溝通成本。

但是仍然需要我們做好以下幾點(diǎn)才可以：

• 文字不要太多，能讓項(xiàng)目組成員看圖明白的交互方式（多狀態(tài)、極限情況等）就盡量避免文字的累贅描述
• 必要的描述信息不能少，對(duì)于關(guān)鍵的交互信息最好能夠輔以清晰的文字闡述
• 務(wù)必設(shè)計(jì)好組件多狀態(tài)的情況（獲取焦點(diǎn)前、獲取焦點(diǎn)、失去焦點(diǎn)）和在極限等情況下的交互形式
• 文案表達(dá)形清晰一致，好的交互規(guī)范不需要太多的文字說明，團(tuán)隊(duì)成員直接看圖即可明白這個(gè)組件的交互方式（點(diǎn)擊前、點(diǎn)擊后、空數(shù)據(jù)、有數(shù)據(jù)、極限情況下等的交互樣式），當(dāng)然有些不好通過圖稿表達(dá)的信息也必須需要文字說明輔助，但相比文字而言，能用圖片傳達(dá)的信息盡量用圖片傳達(dá)。
• 交互規(guī)范后期有一定的維護(hù)成本，需要專門抽出時(shí)間進(jìn)行整理維護(hù)，每一次的維護(hù)內(nèi)容都要記錄在冊(cè)。

設(shè)計(jì)規(guī)范在梳理制作的過程中，主要由設(shè)計(jì)同學(xué)來主導(dǎo)，但是必須要與團(tuán)隊(duì)的產(chǎn)品同學(xué)、前端同學(xué)達(dá)成共識(shí)。對(duì)于因?yàn)閳F(tuán)隊(duì)內(nèi)技術(shù)、業(yè)務(wù)等限制產(chǎn)生的特定情況下的交互產(chǎn)物了然于胸。

當(dāng)然規(guī)范的制定一定要結(jié)合有效的落地執(zhí)行才能夠發(fā)揮真正的作用。在解放設(shè)計(jì)師勞動(dòng)力的同時(shí)，讓我們的設(shè)計(jì)工作變成真正的以不變應(yīng)萬變。

不過有一點(diǎn)必須要說明一下：實(shí)際的設(shè)計(jì)工作中也不要產(chǎn)生唯規(guī)范論的態(tài)度，我們真正要做的還是盡量從場(chǎng)景和問題的角度出發(fā)，而不是拿規(guī)范當(dāng)擋箭牌。

規(guī)范是為了實(shí)現(xiàn)業(yè)務(wù)需求而服務(wù)的，如果某種設(shè)計(jì)方案能夠更高效更有質(zhì)量的解決某個(gè)問題，并不帶來新的損失，那是不是可以不那么拘泥在當(dāng)前的規(guī)范中。

規(guī)范不是我們的王牌，不要因?yàn)楫a(chǎn)品有了設(shè)計(jì)規(guī)范而讓自己變成規(guī)范的奴隸，喪失了更多好設(shè)計(jì)和好靈感。

附1：自己整理制作的一套交互組件庫

• 鏈接：https://pan.baidu.com/s/1PQ9mEaMnJqWAhHvqErwHBg
• 密碼：z8xg

附2：我常做參考的web交互設(shè)計(jì)規(guī)范

Ant Design：https://ant.design/index-cn

餓了么 Element ：http://element-cn.eleme.io/#/zh-CN

附3：我常做參考的移動(dòng)端交互設(shè)計(jì)規(guī)范

VUX UI：https://vux.li/demos/v2/#/demo

滴滴Cube UI：https://didi.github.io/cube-ui/example/#/

Ant Design Mobile：https://mobile.ant.design/index-cn

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

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