前言

B 端設計離不開設計規范這個話題，而做好設計規范是一個龐大復雜工程，很多人對這些處于一知半解狀態，在這個系列文章里我通過結合自己平時的項目案例來談談自己對 B 端設計規范的一些理解，希望可以帶來一些啟發。

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

一、設計規范作用

設計規范作為 B 端設計中非常重要的一環，它的作用主要體現在以下三個方面：

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

二、設計原則

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

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

1. 清晰

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

① 對比：

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

② 親密：

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

③ 對齊：

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

④ 重復：

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

2. 高效

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

① 合理利用拖拽--便捷、輕量：

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

② 盡量減少不必要的跳轉--便捷、輕量：

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

③ 放大點擊熱區--便捷：

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

④ 懸停即現--輕量：

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

⑤ 折疊次要功能--簡化：

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

⑥ 統一樣式--一致：

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

3. 友好

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

① 操作前：

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

② 操作中：

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

③ 操作后：

利用界面中元素變化清晰直觀展示當前的狀態

4. 可控

可控主要體現在自由和導航兩個方面。

① 自由：

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

② 導航：

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

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

部分參考資料：

1. 《B 端產品設計-Mia》
2. 《Ant Design》