建立(li)規范的要素：

明確自己(ji)產品定位和目(mu)標 ；

規劃交互規范的內容范圍；

化簡(jian)為繁，簡(jian)潔易懂。

一、明白自己產品定位和目(mu)標我(wo)們的(de)產品是定位于服務于外(wai)(wai)貿(mao)(mao)(mao)企業用戶的(de)工具，主要(yao)目(mu)標是幫助客(ke)戶建(jian)立自己的(de)外(wai)(wai)貿(mao)(mao)(mao)網站/尋(xun)找外(wai)(wai)貿(mao)(mao)(mao)客(ke)戶/客(ke)戶管理/外(wai)(wai)貿(mao)(mao)(mao)營(ying)銷(xiao)，簡單來說就是建(jian)站-獲(huo)客(ke)-管客(ke)-營(ying)銷(xiao)-轉(zhuan)化。

所(suo)以(yi)我們(men)的(de)產品中需要(yao)最多的(de)就是控(kong)件(jian)就是輸入/搜索控(kong)件(jian)和(he)各類表單圖表，而且在(zai)控(kong)件(jian)的(de)設計上不(bu)能設計操作(zuo)(zuo)性太復雜的(de)控(kong)件(jian)（千萬不(bu)要(yao)為了追(zhui)求新奇炫酷而去(qu)設計比較(jiao)少見的(de)控(kong)件(jian)，否則不(bu)僅(jin)加(jia)大前(qian)端同學工作(zuo)(zuo)量(liang)，用(yong)戶也不(bu)一定用(yong)的(de)明白），不(bu)然就違背了快速操作(zuo)(zuo)反應的(de)原則，在(zai)這里建議大家可以(yi)參考阿里的(de)Ant

design交互規范。

二、交互規(gui)范(fan)(fan)的內容(rong)范(fan)(fan)圍(wei)交互規(gui)范(fan)(fan)內容(rong)包括什么？

不同的產品的交互(hu)規范(fan)范(fan)圍內容不同，一般(ban)來說網(wang)頁(ye)端產品的相(xiang)對移動端產品內容更多，這是因為(wei)網(wang)頁(ye)端產品的頁(ye)面布(bu)局(ju)多樣(yang)，交互(hu)控件(jian)和(he)方式更為(wei)復雜；To

C網頁產品比(bi)To B網頁產品內(nei)容更(geng)多，因為To B產品目(mu)標明確(que)，更(geng)注重使用效率，不會采(cai)用過(guo)于復雜和新穎的頁面布(bu)局和交互方式。

而針對我(wo)們的產(chan)品(pin)，交互規范內容總結(jie)主要包括以下幾個(ge)部分：1. 設計(ji)(ji)規范說明(ming)(ming)設計(ji)(ji)規范說明(ming)(ming)主要描述(shu)該設計(ji)(ji)規范的基本信息(xi)：

2. 設(she)計更新(xin)記錄因為交互規范是需要根據項(xiang)目不斷(duan)完善更新(xin)的，所以會有很多(duo)迭代的記錄，及時記錄更新(xin)可以方便其他設(she)計師(shi)、前(qian)端(duan)工程師(shi)知(zhi)道我(wo)們(men)更新(xin)了什么內容，及時同步給整個(ge)團隊。

3. 設計規范(fan)主(zhu)體主(zhu)要包括(kuo)字體規范(fan)、色彩規范(fan)（這兩個建議和UI設計師共同制定(ding)）、頁(ye)面布(bu)局、工具、控件庫、圖表，在這里我的做法是先匯(hui)總出當前產品版本所具有(you)的所有(you)規范(fan)內容，再(zai)參照(zhao)Ant design、Material Design、element等設計平臺(tai)。

部分(fen)已有的(de)規范內(nei)容進(jin)行升級(ji)再(zai)整(zheng)理，同(tong)時根據使用場景和優使用頻率，將控(kong)件分(fen)類和調整(zheng)排序，這樣基本上交(jiao)互規范的(de)框架(jia)就可(ke)以建立起來。

最終(zhong)我為(wei)我們產品確(que)定的交互規范內容展(zhan)示(shi)如下：

三、化繁為(wei)簡(jian)，簡(jian)潔易懂如果大(da)家通過上(shang)述方法來(lai)進行設計(ji)(ji)規范整理，勢必會得到一份體(ti)量更(geng)加(jia)龐大(da)的(de)(de)交互設計(ji)(ji)規范文(wen)件，這個時候，設計(ji)(ji)師(shi)更(geng)多(duo)的(de)(de)需要(yao)根據(ju)自(zi)己(ji)的(de)(de)經驗(yan)來(lai)進行刪減(jian)(jian)（會合理刪減(jian)(jian)的(de)(de)設計(ji)(ji)師(shi)才是優秀的(de)(de)設計(ji)(ji)師(shi)）。

哪些可(ke)以(yi)(yi)刪減？哪些不能(neng)刪減？1. 可(ke)以(yi)(yi)刪減舉(ju)例來說(shuo)：下(xia)面(mian)兩個(ge)時間范(fan)圍篩(shai)(shai)選器(qi)，能(neng)達成的篩(shai)(shai)選目(mu)的和作用是一(yi)致的，但由于長(chang)度不一(yi)樣，上面(mian)的篩(shai)(shai)選器(qi)能(neng)適配(pei)的頁面(mian)場景更(geng)多，所以(yi)(yi)可(ke)以(yi)(yi)直接把下(xia)方的時間篩(shai)(shai)選器(qi)刪減。

2. 不可以(yi)刪減(jian)舉例來說：下面兩個(ge)選擇(ze)(ze)(ze)(ze)器，兩個(ge)表面上目的(de)看(kan)起來都是進(jin)(jin)行(xing)(xing)選擇(ze)(ze)(ze)(ze)項選擇(ze)(ze)(ze)(ze)，但右邊(bian)的(de)選擇(ze)(ze)(ze)(ze)器帶有搜索(suo)框(kuang)，適合選擇(ze)(ze)(ze)(ze)項數據龐大(da)時的(de)進(jin)(jin)行(xing)(xing)搜索(suo)選擇(ze)(ze)(ze)(ze)，左(zuo)邊(bian)的(de)適合選擇(ze)(ze)(ze)(ze)項數據量不大(da)時進(jin)(jin)行(xing)(xing)直接選擇(ze)(ze)(ze)(ze)，所使用的(de)場景并(bing)不相同，所以(yi)不能進(jin)(jin)行(xing)(xing)刪減(jian)。

好的(de)交(jiao)互(hu)規范不需(xu)要(yao)(yao)太(tai)多的(de)文(wen)字(zi)說(shuo)明(ming)(ming)，團(tuan)隊成員直(zhi)接看圖即可(ke)明(ming)(ming)白這個組件的(de)交(jiao)互(hu)方式（點擊前、點擊后、空(kong)數據、有數據、極限情況下等的(de)交(jiao)互(hu)樣(yang)式），當(dang)然(ran)有些不好通過(guo)圖稿表(biao)達的(de)信(xin)息也必(bi)須需(xu)要(yao)(yao)文(wen)字(zi)說(shuo)明(ming)(ming)輔助(zhu)，但相比文(wen)字(zi)而言，大(da)家更喜歡(huan)看的(de)肯定是圖片。