千萬(wàn)不要為了追求新奇炫酷而去設(shè)計(jì)比較少見的控件

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

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

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

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

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

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

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

不同的產(chǎn)品的交互規(guī)范范圍內(nèi)容不同，一般來(lái)說(shuō)網(wǎng)頁(yè)端產(chǎn)品的相對(duì)移動(dòng)端產(chǎn)品內(nèi)容更多，這是因?yàn)榫W(wǎng)頁(yè)端產(chǎn)品的頁(yè)面布局多樣，交互控件和方式更為復(fù)雜；To C網(wǎng)頁(yè)產(chǎn)品比To B網(wǎng)頁(yè)產(chǎn)品內(nèi)容更多，因?yàn)門o B產(chǎn)品目標(biāo)明確，更注重使用效率，不會(huì)采用過于復(fù)雜和新穎的頁(yè)面布局和交互方式。

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

1. 設(shè)計(jì)規(guī)范說(shuō)明

設(shè)計(jì)規(guī)范說(shuō)明主要描述該設(shè)計(jì)規(guī)范的基本信息：

2. 設(shè)計(jì)更新記錄

因?yàn)榻换ヒ?guī)范是需要根據(jù)項(xiàng)目不斷完善更新的，所以會(huì)有很多迭代的記錄，及時(shí)記錄更新可以方便其他設(shè)計(jì)師、前端工程師知道我們更新了什么內(nèi)容，及時(shí)同步給整個(gè)團(tuán)隊(duì)。

3. 設(shè)計(jì)規(guī)范主體

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

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

三、化繁為簡(jiǎn)，簡(jiǎn)潔易懂

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

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

1. 可以刪減

舉例來(lái)說(shuō)：下面兩個(gè)時(shí)間范圍篩選器，能達(dá)成的篩選目的和作用是一致的，但由于長(zhǎng)度不一樣，上面的篩選器能適配的頁(yè)面場(chǎng)景更多，所以可以直接把下方的時(shí)間篩選器刪減。

2. 不可以刪減

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

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

分享名稱：千萬(wàn)不要為了追求新奇炫酷而去設(shè)計(jì)比較少見的控件
URL地址：http://www.muchs.cn/news44/43494.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站排名、網(wǎng)頁(yè)設(shè)計(jì)公司、微信小程序、軟件開發(fā)、商城網(wǎng)站

廣告

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