B端設(shè)計(jì)規(guī)范如何正確搭建，好的設(shè)計(jì)規(guī)范對設(shè)計(jì)有什么幫助呢？設(shè)計(jì)夾老師在這篇文章中圍繞清晰、高效、友好、可控四個(gè)關(guān)鍵設(shè)計(jì)原則，帶你一步步建立起設(shè)計(jì)規(guī)范，推薦各位設(shè)計(jì)er和對交互產(chǎn)品、B端產(chǎn)品設(shè)計(jì)感興趣的童鞋閱讀。

Halo，這里是設(shè)計(jì)夾，今天為大家分享的是「B端設(shè)計(jì)」。B端設(shè)計(jì)離不開設(shè)計(jì)規(guī)范這個(gè)話題，而做好設(shè)計(jì)規(guī)范是一個(gè)龐大復(fù)雜工程，很多人對這些處于一知半解狀態(tài)。在這個(gè)系列文章里通過結(jié)合平時(shí)的項(xiàng)目案例來談?wù)勛约簩端設(shè)計(jì)規(guī)范的一些理解，希望可以帶來一些啟發(fā)。

本篇先談?wù)勗O(shè)計(jì)規(guī)范制作的指導(dǎo)思想–設(shè)計(jì)原則，后續(xù)文章再展開講一下常見各種組件的設(shè)計(jì)規(guī)范。

一、設(shè)計(jì)規(guī)范作用

設(shè)計(jì)規(guī)范作為B端設(shè)計(jì)中非常重要的一環(huán)，它的作用主要體現(xiàn)在以下三個(gè)方面：

在日常工作中，當(dāng)項(xiàng)目組收到一個(gè)新的需求時(shí)，如果已經(jīng)具備了成熟的設(shè)計(jì)規(guī)范體系，其工作效率往往會得到很好的提升。最后上線的頁面不用走查還原度。以下是具體工作流程：

二、設(shè)計(jì)原則

通過前面內(nèi)容我們知道了設(shè)計(jì)規(guī)范對于產(chǎn)品設(shè)計(jì)意義重大，那么制定設(shè)計(jì)規(guī)范制定依據(jù)又是什么呢？這里就要引出設(shè)計(jì)原則這個(gè)話題，設(shè)計(jì)原則是設(shè)計(jì)規(guī)范的總綱領(lǐng)，所有的設(shè)計(jì)規(guī)范都應(yīng)當(dāng)以設(shè)計(jì)原則為基準(zhǔn)。設(shè)計(jì)原則主要包含以下內(nèi)容：

接下來就圍繞設(shè)計(jì)原則清晰、高效、友好、可控這四個(gè)方面展開講解。

(一) 清晰

清晰原則主要從視覺角度讓界面信息傳達(dá)合理，提高用戶信息獲取效率。主要包含對比，親密，對齊，重復(fù)四個(gè)方面。

1.對比

對比是指界面中為了區(qū)分信息層級，強(qiáng)化元素對比度，使用的很常見的一種手段。例如，下圖中利用大色塊按鈕與線框按鈕形成對比來凸顯關(guān)鍵按鈕；通過對文字字號加大，字體加粗，顏色加深來與弱文案形成對比，凸顯關(guān)鍵文字信息。

2.親密

如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個(gè)視覺單元；反之，距離就應(yīng)該越遠(yuǎn)，也越像多個(gè)視覺單元。親密性的根本目的是實(shí)現(xiàn)組織性，讓用戶對頁面結(jié)構(gòu)和信息層次一目了然。

3.對齊

在界面設(shè)計(jì)中，將元素進(jìn)行對齊，既符合了用戶的認(rèn)知特點(diǎn)(我們往往傾向使知覺對象的直線延續(xù)還是直線，曲線延續(xù)還是曲線)，也能引導(dǎo)用戶視覺流，讓用戶更流暢地接收信息。

4.重復(fù)

重復(fù)是指相同的元素在項(xiàng)目中重復(fù)引用，作用是可以有效降低用戶的學(xué)習(xí)成本，同時(shí)提高這些元素之間的關(guān)聯(lián)性。

(二) 高效

高效原則體現(xiàn)在便捷、輕量、簡化、一致幾個(gè)方面，目的是通過合理的方式讓產(chǎn)品操作更加便捷；交互體驗(yàn)與內(nèi)容更加輕量和簡化；以及產(chǎn)品風(fēng)格保持一致。下面結(jié)合常見案例說明如何應(yīng)用這一原則。

1.合理利用拖拽–便捷、輕量

在涉及到諸如上傳文件，排序，滑動(dòng)輸入，搭建等需求時(shí)，合理采用拖拽交互往往可以打造更加便捷用戶體驗(yàn)。

2.盡量減少不必要的跳轉(zhuǎn)–便捷、輕量

用戶操作過程盡量減少跳轉(zhuǎn)，以實(shí)現(xiàn)交互減步長，從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開收起；能用展開收起就不用氣泡…依次類推(優(yōu)先級從高到低：原位＞展開收起＞氣泡＞彈窗＞抽屜＞新頁面)

3.放大點(diǎn)擊熱區(qū)–便捷

放大可點(diǎn)擊按鈕熱區(qū)，相對于較小點(diǎn)擊熱區(qū)，具備更絲滑操作體驗(yàn)。

4.懸停即現(xiàn)–輕量

利用懸停即現(xiàn)，避免信息過于重復(fù)啰嗦，簡化頁面提高閱讀體驗(yàn)。

5.折疊次要功能–簡化

頁面功能按鈕過多時(shí)，可將次要按鈕收納到一起，點(diǎn)擊時(shí)再展開，外面只展示高頻操作或重要按鈕，保證頁面內(nèi)容簡潔。

6.統(tǒng)一樣式–一致

一致性是指在不同頁面中相同操作應(yīng)保持一致視覺與交互樣式，可有降低用戶學(xué)習(xí)成本與企業(yè)開發(fā)成本。

(三) 友好

友好原則應(yīng)貫穿用戶操作前，操作中及操作后三個(gè)階段，給予用戶及時(shí)反饋與幫助。

1.操作前

在用戶操作前給到合適的引導(dǎo)與幫助，有效減少用戶迷茫感。

2.操作中

通過交互效果及頁面樣式讓用戶可以清晰感知到自己當(dāng)前操作。

3.操作后

利用界面中元素變化清晰直觀展示當(dāng)前的狀態(tài)。

(四) 可控

可控主要體現(xiàn)在自由和導(dǎo)航兩個(gè)方面。

1.自由

自由即指用戶可以自由完成一些操作，例如回退，撤銷，終止等。

2.導(dǎo)航

導(dǎo)航是指用戶隨時(shí)知曉當(dāng)前所在位置，而且可以利用導(dǎo)航隨意到達(dá)目標(biāo)頁面。

最后

通過本篇內(nèi)容我們大概知道了制作設(shè)計(jì)規(guī)范主要方向，那么具體到每個(gè)組件上，我們該如何去設(shè)計(jì)呢？后續(xù)篇章將細(xì)分聊聊如何去設(shè)計(jì)「B端常見組件」。