建立規(guī)范的要素：

1. 明確自己產(chǎn)品定位和目標 ；
2. 規(guī)劃交互規(guī)范的內(nèi)容范圍；
3. 化繁為簡，簡潔易懂。

一、明白自己產(chǎn)品定位和目標

我們的產(chǎn)品是定位于服務于外貿(mào)企業(yè)用戶的工具，主要目標是幫助客戶建立自己的外貿(mào)網(wǎng)站/尋找外貿(mào)客戶/客戶管理/外貿(mào)營銷，簡單來說就是建站-獲客-管客-營銷-轉(zhuǎn)化。

所以我們的產(chǎn)品中需要最多的就是控件就是輸入/搜索控件和各類表單圖表，而且在控件的設計上不能設計操作性太復雜的控件（千萬不要為了追求新奇炫酷而去設計比較少見的控件，否則不僅加大前端同學工作量，用戶也不一定用的明白），不然就違背了快速操作反應的原則，在這里建議大家可以參考阿里的Ant design交互規(guī)范。

二、交互規(guī)范的內(nèi)容范圍

交互規(guī)范內(nèi)容包括什么？

不同的產(chǎn)品的交互規(guī)范范圍內(nèi)容不同，一般來說網(wǎng)頁端產(chǎn)品的相對移動端產(chǎn)品內(nèi)容更多，這是因為網(wǎng)頁端產(chǎn)品的頁面布局多樣，交互控件和方式更為復雜；To C網(wǎng)頁產(chǎn)品比To B網(wǎng)頁產(chǎn)品內(nèi)容更多，因為To B產(chǎn)品目標明確，更注重使用效率，不會采用過于復雜和新穎的頁面布局和交互方式。

而針對我們的產(chǎn)品，交互規(guī)范內(nèi)容總結(jié)主要包括以下幾個部分：

1. 設計規(guī)范說明

設計規(guī)范說明主要描述該設計規(guī)范的基本信息：

2. 設計更新記錄

因為交互規(guī)范是需要根據(jù)項目不斷完善更新的，所以會有很多迭代的記錄，及時記錄更新可以方便其他設計師、前端工程師知道我們更新了什么內(nèi)容，及時同步給整個團隊。

3. 設計規(guī)范主體

主要包括字體規(guī)范、色彩規(guī)范（這兩個建議和UI設計師共同制定）、頁面布局、工具、控件庫、圖表，在這里我的做法是先匯總出當前產(chǎn)品版本所具有的所有規(guī)范內(nèi)容，再參照Ant design、Material Design、element等設計平臺。

部分已有的規(guī)范內(nèi)容進行升級再整理，同時根據(jù)使用場景和優(yōu)使用頻率，將控件分類和調(diào)整排序，這樣基本上交互規(guī)范的框架就可以建立起來。

三、化繁為簡，簡潔易懂

如果大家通過上述方法來進行設計規(guī)范整理，勢必會得到一份體量更加龐大的交互設計規(guī)范文件，這個時候，設計師更多的需要根據(jù)自己的經(jīng)驗來進行刪減（會合理刪減的設計師才是優(yōu)秀的設計師）。

哪些可以刪減？哪些不能刪減？

1. 可以刪減

舉例來說：下面兩個時間范圍篩選器，能達成的篩選目的和作用是一致的，但由于長度不一樣，上面的篩選器能適配的頁面場景更多，所以可以直接把下方的時間篩選器刪減。

2. 不可以刪減

舉例來說：下面兩個選擇器，兩個表面上目的看起來都是進行選擇項選擇，但右邊的選擇器帶有搜索框，適合選擇項數(shù)據(jù)龐大時的進行搜索選擇，左邊的適合選擇項數(shù)據(jù)量不大時進行直接選擇，所使用的場景并不相同，所以不能進行刪減。

好的交互規(guī)范不需要太多的文字說明，團隊成員直接看圖即可明白這個組件的交互方式（點擊前、點擊后、空數(shù)據(jù)、有數(shù)據(jù)、極限情況下等的交互樣式），當然有些不好通過圖稿表達的信息也必須需要文字說明輔助，但相比文字而言，大家更喜歡看的肯定是圖片。

分享名稱：千萬不要為了追求新奇炫酷而去設計比較少見的控件
當前地址：http://www.rwnh.cn/news/43494.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、全網(wǎng)營銷推廣、響應式網(wǎng)站、手機網(wǎng)站建設、微信小程序、App設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)