千萬不要為了追求新奇炫酷而去設計比較少見的控件

建立規范的要素：

1. 明確自己產品定位和目標 ；
2. 規劃交互規范的內容范圍；
3. 化繁為簡，簡潔易懂。

一、明白自己產品定位和目標

我們的產品是定位于服務于外貿企業用戶的工具，主要目標是幫助客戶建立自己的外貿網站/尋找外貿客戶/客戶管理/外貿營銷，簡單來說就是建站-獲客-管客-營銷-轉化。

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

二、交互規范的內容范圍

交互規范內容包括什么？

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

而針對我們的產品，交互規范內容總結主要包括以下幾個部分：

1. 設計規范說明

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

2. 設計更新記錄

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

3. 設計規范主體

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

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

三、化繁為簡，簡潔易懂

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

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

1. 可以刪減

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

2. 不可以刪減

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

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

分享名稱：千萬不要為了追求新奇炫酷而去設計比較少見的控件
URL地址：http://m.kartarina.com/news44/43494.html

成都網站建設公司_創新互聯，為您提供網站導航、網站排名、網頁設計公司、微信小程序、軟件開發、商城網站

廣告

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