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

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

本篇先談談設計規(guī)范制作的指導思想–設計原則，后續(xù)文章再展開講一下常見各種組件的設計規(guī)范。

一、設計規(guī)范作用

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

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

二、設計原則

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

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

(一) 清晰

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

1.對比

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

2.親密

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

3.對齊

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

4.重復

重復是指相同的元素在項目中重復引用，作用是可以有效降低用戶的學習成本，同時提高這些元素之間的關聯(lián)性。

(二) 高效

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

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

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

2.盡量減少不必要的跳轉–便捷、輕量

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

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

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

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

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

5.折疊次要功能–簡化

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

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

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

(三) 友好

友好原則應貫穿用戶操作前，操作中及操作后三個階段，給予用戶及時反饋與幫助。

1.操作前

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

2.操作中

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

3.操作后

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

(四) 可控

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

1.自由

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

2.導航

導航是指用戶隨時知曉當前所在位置，而且可以利用導航隨意到達目標頁面。

最后

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