建立規範的(de)要素：

明(míng)确自己産品定位和(hé)目标 ；

規劃交互規範的(de)内容範圍；

化(huà)簡爲繁，簡潔易懂(dǒng)。

一、明(míng)白自己産品定位和(hé)目标我們的(de)産品是定位于服務于外貿企業用(yòng)戶的(de)工具，主要目标是幫助客戶建立自己的(de)外貿網站/尋找外貿客戶/客戶管理(lǐ)/外貿營銷，簡單來(lái)說就是建站-獲客-管客-營銷-轉化(huà)。

所以我們的(de)産品中需要最多(duō)的(de)就是控件就是輸入/搜索控件和(hé)各類表單圖表，而且在控件的(de)設計上不能設計操作性太複雜(zá)的(de)控件（千萬不要爲了(le)追求新奇炫酷而去設計比較少見的(de)控件，否則不僅加大(dà)前端同學工作量，用(yòng)戶也(yě)不一定用(yòng)的(de)明(míng)白），不然就違背了(le)快(kuài)速操作反應的(de)原則，在這(zhè)裏建議(yì)大(dà)家可(kě)以參考阿裏的(de)Ant

design交互規範。

二、交互規範的(de)内容範圍交互規範内容包括什(shén)麽？

不同的(de)産品的(de)交互規範範圍内容不同，一般來(lái)說網頁端産品的(de)相對(duì)移動端産品内容更多(duō)，這(zhè)是因爲網頁端産品的(de)頁面布局多(duō)樣，交互控件和(hé)方式更爲複雜(zá)；To

C網頁産品比To B網頁産品内容更多(duō)，因爲To B産品目标明(míng)确，更注重使用(yòng)效率，不會采用(yòng)過于複雜(zá)和(hé)新穎的(de)頁面布局和(hé)交互方式。

而針對(duì)我們的(de)産品，交互規範内容總結主要包括以下(xià)幾個(gè)部分(fēn)：1. 設計規範說明(míng)設計規範說明(míng)主要描述該設計規範的(de)基本信息：

2. 設計更新記錄因爲交互規範是需要根據項目不斷完善更新的(de)，所以會有很多(duō)叠代的(de)記錄，及時(shí)記錄更新可(kě)以方便其他(tā)設計師、前端工程師知道我們更新了(le)什(shén)麽内容，及時(shí)同步給整個(gè)團隊。

3. 設計規範主體主要包括字體規範、色彩規範（這(zhè)兩個(gè)建議(yì)和(hé)UI設計師共同制定）、頁面布局、工具、控件庫、圖表，在這(zhè)裏我的(de)做(zuò)法是先彙總出當前産品版本所具有的(de)所有規範内容，再參照(zhào)Ant design、Material Design、element等設計平台。

部分(fēn)已有的(de)規範内容進行升級再整理(lǐ)，同時(shí)根據使用(yòng)場(chǎng)景和(hé)優使用(yòng)頻(pín)率，将控件分(fēn)類和(hé)調整排序，這(zhè)樣基本上交互規範的(de)框架就可(kě)以建立起來(lái)。

最終我爲我們産品确定的(de)交互規範内容展示如下(xià)：

三、化(huà)繁爲簡，簡潔易懂(dǒng)如果大(dà)家通(tōng)過上述方法來(lái)進行設計規範整理(lǐ)，勢必會得(de)到一份體量更加龐大(dà)的(de)交互設計規範文件，這(zhè)個(gè)時(shí)候，設計師更多(duō)的(de)需要根據自己的(de)經驗來(lái)進行删減（會合理(lǐ)删減的(de)設計師才是優秀的(de)設計師）。

哪些可(kě)以删減？哪些不能删減？1. 可(kě)以删減舉例來(lái)說：下(xià)面兩個(gè)時(shí)間範圍篩選器，能達成的(de)篩選目的(de)和(hé)作用(yòng)是一緻的(de)，但由于長(cháng)度不一樣，上面的(de)篩選器能适配的(de)頁面場(chǎng)景更多(duō)，所以可(kě)以直接把下(xià)方的(de)時(shí)間篩選器删減。

2. 不可(kě)以删減舉例來(lái)說：下(xià)面兩個(gè)選擇器，兩個(gè)表面上目的(de)看起來(lái)都是進行選擇項選擇，但右邊的(de)選擇器帶有搜索框，适合選擇項數據龐大(dà)時(shí)的(de)進行搜索選擇，左邊的(de)适合選擇項數據量不大(dà)時(shí)進行直接選擇，所使用(yòng)的(de)場(chǎng)景并不相同，所以不能進行删減。

好的(de)交互規範不需要太多(duō)的(de)文字說明(míng)，團隊成員(yuán)直接看圖即可(kě)明(míng)白這(zhè)個(gè)組件的(de)交互方式（點擊前、點擊後、空數據、有數據、極限情況下(xià)等的(de)交互樣式），當然有些不好通(tōng)過圖稿表達的(de)信息也(yě)必須需要文字說明(míng)輔助，但相比文字而言，大(dà)家更喜歡看的(de)肯定是圖片。