建立(li)規范(fan)的要(yao)素(su)：

明確(que)自(zi)己產(chan)品(pin)定位和目(mu)標 ；

規(gui)劃交互(hu)規(gui)范(fan)(fan)的內容(rong)范(fan)(fan)圍(wei)；

化簡為繁，簡潔易懂。

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

所(suo)以我們的(de)(de)產品中(zhong)需要最多(duo)的(de)(de)就(jiu)是控(kong)件就(jiu)是輸(shu)入/搜索控(kong)件和各類(lei)表單圖(tu)表，而且(qie)在(zai)控(kong)件的(de)(de)設計上(shang)不(bu)能設計操(cao)作性(xing)太(tai)復雜(za)的(de)(de)控(kong)件（千萬(wan)不(bu)要為了(le)追求新(xin)奇炫酷而去(qu)設計比(bi)較少見的(de)(de)控(kong)件，否則不(bu)僅(jin)加大前端同學(xue)工作量，用戶(hu)也不(bu)一(yi)定用的(de)(de)明白），不(bu)然就(jiu)違背了(le)快(kuai)速操(cao)作反應的(de)(de)原則，在(zai)這里建議大家可(ke)以參考阿(a)里的(de)(de)Ant

design交互(hu)規范。

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

不同的(de)產(chan)品的(de)交互規范(fan)范(fan)圍內(nei)容(rong)不同，一般來說網頁端(duan)產(chan)品的(de)相(xiang)對移動端(duan)產(chan)品內(nei)容(rong)更多(duo)，這(zhe)是因為網頁端(duan)產(chan)品的(de)頁面布局(ju)多(duo)樣，交互控(kong)件和方式更為復雜；To

C網頁(ye)產(chan)品比To B網頁(ye)產(chan)品內(nei)容(rong)更多，因為To B產(chan)品目標明(ming)確，更注(zhu)重使用(yong)效率，不會采用(yong)過(guo)于復雜和新穎的頁(ye)面布局和交互方(fang)式。

而(er)針對我們(men)的產(chan)品，交互規(gui)(gui)范(fan)內容總結主要包括以下幾(ji)個部分：1. 設計(ji)規(gui)(gui)范(fan)說明設計(ji)規(gui)(gui)范(fan)說明主要描述該設計(ji)規(gui)(gui)范(fan)的基(ji)本信(xin)息：

2. 設(she)計更新(xin)記錄(lu)因(yin)為交互(hu)規范(fan)是(shi)需要根據項目(mu)不斷(duan)完善更新(xin)的(de)，所(suo)以(yi)會有(you)很多(duo)迭代的(de)記錄(lu)，及(ji)(ji)時記錄(lu)更新(xin)可(ke)以(yi)方便其他設(she)計師(shi)(shi)、前端工程師(shi)(shi)知道我們更新(xin)了什么內容，及(ji)(ji)時同步給整(zheng)個(ge)團(tuan)隊(dui)。

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

部(bu)分已有的規范內容進行升(sheng)級再整理，同時(shi)根據使用(yong)場景和優使用(yong)頻率，將控件(jian)分類和調整排序，這樣(yang)基本上(shang)交互規范的框架就可以建立起來。

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

三、化繁為(wei)簡，簡潔(jie)易(yi)懂如果(guo)大家(jia)通(tong)過上述方法(fa)來進行(xing)設(she)(she)計規(gui)(gui)范(fan)(fan)整(zheng)理，勢(shi)必會得(de)到一份體量(liang)更(geng)(geng)加(jia)龐(pang)大的(de)交互設(she)(she)計規(gui)(gui)范(fan)(fan)文件，這個時(shi)候(hou)，設(she)(she)計師更(geng)(geng)多的(de)需(xu)要(yao)根據自己的(de)經(jing)驗來進行(xing)刪減(jian)（會合理刪減(jian)的(de)設(she)(she)計師才是優秀的(de)設(she)(she)計師）。

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

2. 不可以(yi)刪減(jian)(jian)舉(ju)例來(lai)(lai)說：下面兩(liang)(liang)個選(xuan)(xuan)(xuan)(xuan)擇器(qi)，兩(liang)(liang)個表面上目的看起來(lai)(lai)都是進(jin)行(xing)選(xuan)(xuan)(xuan)(xuan)擇項(xiang)選(xuan)(xuan)(xuan)(xuan)擇，但右(you)邊的選(xuan)(xuan)(xuan)(xuan)擇器(qi)帶有搜(sou)索(suo)(suo)框，適(shi)(shi)合選(xuan)(xuan)(xuan)(xuan)擇項(xiang)數據(ju)龐(pang)大(da)時的進(jin)行(xing)搜(sou)索(suo)(suo)選(xuan)(xuan)(xuan)(xuan)擇，左(zuo)邊的適(shi)(shi)合選(xuan)(xuan)(xuan)(xuan)擇項(xiang)數據(ju)量不大(da)時進(jin)行(xing)直(zhi)接選(xuan)(xuan)(xuan)(xuan)擇，所使用(yong)的場景并不相同，所以(yi)不能進(jin)行(xing)刪減(jian)(jian)。

好的交互規范不需要(yao)太多的文(wen)(wen)字(zi)說明，團隊成員(yuan)直接看圖即(ji)可明白(bai)這個組(zu)件的交互方式（點(dian)擊前、點(dian)擊后、空(kong)數據(ju)、有數據(ju)、極限情況下等的交互樣式），當然有些不好通(tong)過圖稿表達的信息也必(bi)須(xu)需要(yao)文(wen)(wen)字(zi)說明輔(fu)助，但(dan)相比文(wen)(wen)字(zi)而(er)言，大家(jia)更喜歡(huan)看的肯定是圖片(pian)。