超全面的B端設(shè)計(jì)規(guī)范指南（一）：設(shè)計(jì)原則

前言

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

本篇先談?wù)勗O(shè)計(jì)規(guī)范制作的指導(dǎo)思想--設(shè)計(jì)原則，后續(xù)文章再展開(kāi)講一下常見(jiàn)各種組件的設(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ī)范體系，其工作效率往往會(huì)得到很好的提升。最后上線的頁(yè)面不用走查還原度。以下是具體工作流程：

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

通過(guò)前面內(nèi)容我們知道了設(shè)計(jì)規(guī)范對(duì)于產(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)容：

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

1. 清晰

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

① 對(duì)比：

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

② 親密：

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

③ 對(duì)齊：

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

④ 重復(fù)：

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

2. 高效

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

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

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

② 盡量減少不必要的跳轉(zhuǎn)--便捷、輕量：

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

③ 放大點(diǎn)擊熱區(qū)--便捷：

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

④ 懸停即現(xiàn)--輕量：

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

⑤ 折疊次要功能--簡(jiǎn)化：

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

⑥ 統(tǒng)一樣式--一致：

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

3. 友好

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

① 操作前：

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

② 操作中：

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

③ 操作后：

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

4. 可控

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

① 自由：

自由即指用戶(hù)可以自由完成一些操作，例如回退，撤銷(xiāo)，終止等。

② 導(dǎo)航：

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

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

部分參考資料：

1. 《B 端產(chǎn)品設(shè)計(jì)-Mia》
2. 《Ant Design》