本文作者從實戰(zhàn)經(jīng)驗的角度切入，找到適用“企業(yè)級B端產(chǎn)品一致性設(shè)計規(guī)范和度量標(biāo)準(zhǔn)”的方案思路，并且給正在建立或?qū)⒁⑵髽I(yè)級設(shè)計規(guī)范及度量標(biāo)準(zhǔn)的小伙伴們一些參考和建議。

說到B端產(chǎn)品的設(shè)計規(guī)范，大家并不陌生，尤其是設(shè)計師們。B端產(chǎn)品的規(guī)范主要包括視覺設(shè)計規(guī)范、交互設(shè)計規(guī)范、一致性設(shè)計規(guī)范、易用性設(shè)計規(guī)范等。本篇文章我們討論的是企業(yè)級產(chǎn)品的“一致性設(shè)計規(guī)范”及“一致性度量標(biāo)準(zhǔn)”的建立。規(guī)范在前，度量標(biāo)準(zhǔn)在后，兩者之間并不是完全等同的關(guān)系。

本篇文章主要的幾個關(guān)鍵詞：企業(yè)級B端產(chǎn)品、一致性設(shè)計規(guī)范、一致性度量標(biāo)準(zhǔn)

一、通用性的一致性設(shè)計規(guī)范及其范圍

在尼爾森十大可用性原則中，闡述了什么是一致性及一致性涵蓋的范圍。一致性是指：在同一個產(chǎn)品中，產(chǎn)品內(nèi)部的導(dǎo)航方式、相同功能的命名方式、類似元素的視覺呈現(xiàn)、操作行為的交互準(zhǔn)則等方面要保持一致性。一致性可以降低用戶在使用產(chǎn)品中的學(xué)習(xí)成本，保持相關(guān)認(rèn)知和記憶可以被沿用，預(yù)期操作結(jié)果。下面我們來看看具體案例（不僅限于以下5點）：

1. 導(dǎo)航方式一致性

阿里云官網(wǎng)菜單導(dǎo)航模式均為鼠標(biāo)移上去浮出面板，且面板內(nèi)菜單均為平鋪狀展示，點擊菜單會跳轉(zhuǎn)到相應(yīng)頁面。

2. 相同功能命名一致性

在按鈕的命名上，比如都是新增含義的，盡量不要取名成很多種，如下這樣子不合適。

3. 類似元素視覺呈現(xiàn)一致性

在工作臺的卡片設(shè)計上，將卡片分割成三個模塊，保證工作臺頁面導(dǎo)覽的一致性。

4. 操作行為的交互準(zhǔn)則一致性

同樣是“點擊購買”按鈕，不要一個“點擊購買”按鈕是通過鼠標(biāo)移上去觸發(fā)的 ，一個是直接展示的，應(yīng)該保持一致。

5. 與業(yè)內(nèi)標(biāo)準(zhǔn)及產(chǎn)品內(nèi)部保持一致性

快捷鍵使用要遵循用戶使用習(xí)慣，比如Ctrl+A全選、Ctrl+C是復(fù)制、Ctrl+V是粘貼，那么我們產(chǎn)品在引入快捷鍵的時候，就不要去打破它。同時，有些行業(yè)具有特殊快捷鍵的使用習(xí)慣，比如左右鍵切換選擇器選項，那即便不符合我們的認(rèn)知，也不要去隨意打破它，需要用戶調(diào)研后再去做判斷。最后，快捷鍵使用需要保持產(chǎn)品內(nèi)部一致。

二、一致性設(shè)計規(guī)范的重要性

建立產(chǎn)品一致性設(shè)計規(guī)范在一定程度上體現(xiàn)了公司對產(chǎn)品成熟度的要求、設(shè)計者的專業(yè)度、產(chǎn)品用戶體驗的質(zhì)量。一致性不僅僅體現(xiàn)在界面視覺和交互上的標(biāo)準(zhǔn)是統(tǒng)一的，在其他方面，同樣占據(jù)了很重要的位置：

1. 從產(chǎn)品本身上來說：一致性設(shè)計規(guī)范是基于產(chǎn)品用戶體驗的主流趨勢和標(biāo)準(zhǔn)，以及業(yè)務(wù)本身的屬性去制定的，因此使得產(chǎn)品在銷售過程中更有說服力。
2. 從團隊內(nèi)部協(xié)作上來說：輸出一致性設(shè)計規(guī)范，可以讓設(shè)計團隊的成員都遵循統(tǒng)一專業(yè)的一致性原則，不僅設(shè)計輸出效率更高，也讓產(chǎn)品的一致性更強。同時降低了設(shè)計師以個人喜好和經(jīng)驗的標(biāo)準(zhǔn)輸出設(shè)計物的情況。
3. 從團隊間協(xié)作上來說：可以幫助業(yè)務(wù)和研發(fā)團隊更加清晰的認(rèn)識和理解用戶體驗設(shè)計，了解設(shè)計師在工作中思考的維度和方向，提升雙方間的信任感和合作效率。
4. 從公司品牌維度上來說：相關(guān)產(chǎn)品間，或產(chǎn)品內(nèi)部建立一致性設(shè)計規(guī)范，會讓公司在商業(yè)競爭中取得更加有利的地位。
5. 從客戶的角度來說：可以讓客戶站在產(chǎn)品和設(shè)計師的角度去了解產(chǎn)品設(shè)計的一些問題，進而在后續(xù)用戶溝通環(huán)節(jié)中，增加客戶對產(chǎn)品的理解度。

三、建立一致性設(shè)計規(guī)范

由上述可見，一致性設(shè)計規(guī)范涵蓋了很多方面，小到色彩、文字、間距，大到操作體驗、界面交互等。同時，一致性設(shè)計規(guī)范的重要性不言而喻。

B端產(chǎn)品業(yè)務(wù)復(fù)雜，設(shè)計創(chuàng)新成本高，但B端產(chǎn)品界面類似度很高，大部分都是表單、表格的場景。界面上的操作、交互、通用性文案、導(dǎo)航、排版、組件等都是可以被抽象出來的，而且業(yè)界有成熟的設(shè)計體系已經(jīng)抽象出了一部分（比如Ant Design）。我們要做的就是在了解行業(yè)標(biāo)準(zhǔn)的前提下，分析自家的產(chǎn)品，建立符合我們面臨環(huán)境下的一致性設(shè)計規(guī)范。

在筆者經(jīng)歷了數(shù)個月的企業(yè)級B端產(chǎn)品設(shè)計體系從0到1的建立過程中 ，遇到了很多困難（以下4個困難會在下一篇文章中去闡述如何解決的，本文就不細(xì)細(xì)去說了）：

1. 一致性與用戶需求是相反的，如何將一致性落地到實際的產(chǎn)品中呢？
2. 建立了一致性設(shè)計規(guī)范后，如何有效的迭代升級呢？
3. 如何去推動企業(yè)級一致性設(shè)計規(guī)范讓業(yè)務(wù)部的專家們認(rèn)可呢？而不是你的一致性阻礙了產(chǎn)品本身的發(fā)展。
4. 一套一致性設(shè)計規(guī)范最終如何去產(chǎn)品中驗證 ，并且切實提升了產(chǎn)品的用戶體驗?zāi)兀?/li>

這些困難讓筆者經(jīng)常問自己，我們的一致性設(shè)計規(guī)范邊界到底在哪兒。單個產(chǎn)品的一致性好做，那企業(yè)級產(chǎn)品的一致性從哪些維度去考慮，如何去建立呢？筆者從以下幾個方面去思考和實施的：

1. 原子級

• 顏色（主題色、功能色、中性色等）
• 文字（標(biāo)題、正文、輔助文字等）
• 圖標(biāo)（導(dǎo)航圖標(biāo)、組件圖標(biāo)、表格圖標(biāo)等）
• 分割線（頁面分割線、面板分割線、文字分割線等）

2. 分子級

• 表格（基礎(chǔ)表格、分組表格等）
• 輸入框（基礎(chǔ)輸入框、文本框、文本域等）
• 單選選擇器（基礎(chǔ)單選、雙列單選、圖標(biāo)單選等）
• 樹選擇器（單選樹、多選樹等）

3. 區(qū)塊級

• 卡片列表（橫向、縱向等）
• 浮層菜單（瀑布流、平鋪等）
• 折疊面板列表（文字域、表格域等）

4. 頁面級

• 表格頁（全局表、導(dǎo)航表等）
• 詳情頁（基礎(chǔ)詳情頁、高級詳情頁等）
• 監(jiān)控頁（監(jiān)控頁、工作臺等）

5. 導(dǎo)航級

• 頂部導(dǎo)航條、左側(cè)導(dǎo)航欄

6. 間距級

• 模塊間間距、組件間間距、橫向間距、縱向間距等

7. 交互級

反饋提示交互一致、頁面操作交互一致等

除了以上羅列出來的，還有很多，這里就不去說了?？傊诮⒁恢滦栽O(shè)計規(guī)范的時候，內(nèi)容覆蓋越全越好，規(guī)則設(shè)計越簡單越好，設(shè)計擴展性越強越好，業(yè)務(wù)了解越深越好。

四、抽取一致性度量標(biāo)準(zhǔn)

我們傳統(tǒng)意義上一般認(rèn)為，設(shè)計規(guī)范=度量標(biāo)準(zhǔn)。因為規(guī)范都有了，不按照規(guī)范度量不是有問題么。而實際上不是的，規(guī)范是由“強制要求+設(shè)計原則”兩部分組成的，“強制要求”是必須要執(zhí)行的部分，要是產(chǎn)品不按照此部分執(zhí)行，會導(dǎo)致一致性出現(xiàn)明顯的問題；而“設(shè)計原則”部分，是對產(chǎn)品的設(shè)計的一種建議，即便沒有執(zhí)行也不存在大面上的不一致。這么說有點抽象是吧，那筆者來具體舉兩個例子吧：

不一致的案例：

要求界面上帶圖標(biāo)的按鈕的設(shè)計規(guī)則如下（左），但是設(shè)計成了（右）：

一致的案例：

要求表單的設(shè)計規(guī)則如下（左），但是設(shè)計成了（右）：

有些小伙伴會有疑問，以上“一致”和“不一致”的案例，看起來都不一致，為啥下面的案例就是符合一致性度量標(biāo)準(zhǔn)的呢？

我們來仔細(xì)看看，在B端產(chǎn)品中，如果帶圖標(biāo)的按鈕將按鈕隨意改變大小，組件顏色隨意更改，是不是已經(jīng)不在設(shè)計規(guī)范里面了，而是重新創(chuàng)造了一種新的按鈕規(guī)范（且不論丑不丑）。而右側(cè)表單label和輸入框的排列組合雖然與左側(cè)不同，但是符合整齊原則、臨近原則，這種設(shè)計是對原本規(guī)范的補充和擴展，同時當(dāng)表單項少的時候，右側(cè)設(shè)計方式符合場景需求，所以后期說不定還會在一致性設(shè)計規(guī)范中添加進去的呢。

由此可見，“度量標(biāo)準(zhǔn)”是在以公司整體產(chǎn)品情況（橫向）和設(shè)計標(biāo)準(zhǔn)（縱向）的前提下，提取出來的一部分共識性強制性約束條目，它沒有完完全全的標(biāo)準(zhǔn)答案。

前面介紹了一致性度量標(biāo)準(zhǔn)的基本情況，下面筆者大致說說我們的一致性度量標(biāo)準(zhǔn)是建立在哪些方面的（由于此屬于商業(yè)項目，因此不方面詳細(xì)公開哈），提供給大家一些思路，如下圖：

五、總結(jié)

在建立企業(yè)級B端產(chǎn)品一致性設(shè)計規(guī)范及度量標(biāo)準(zhǔn)的道路上 ，我們還有很長的路要走。筆者也在不斷思考，如何可以讓一致性設(shè)計規(guī)范更符合設(shè)計原則、設(shè)計審美和業(yè)務(wù)場景，而不是設(shè)計師拍腦袋的想法。

后續(xù)筆者還會更新“企業(yè)級B端產(chǎn)品設(shè)計體系的點滴和分享”，歡迎小伙伴們關(guān)注呀~

作者：知果；公眾號：果有料

本文由 @知果 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。