起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識企業級B端產品：如何建立一致性設計規范和度量標準？
本文作者從實戰經驗的角度切入，找到適用“企業級B端產品一致性設計規范和度量標準”的方案思路，并且給正在建立或將要建立企業級設計規范及度量標準的小伙伴們一些參考和建議。
說到B端產品的設計規范，大家并不陌生，尤其是設計師們。B端產品的規范主要包括視覺設計規范、交互設計規范、一致性設計規范、易用性設計規范等。本篇文章我們討論的是企業級產品的“一致性設計規范”及“一致性度量標準”的建立。規范在前，度量標準在后，兩者之間并不是完全等同的關系。
本篇文章主要的幾個關鍵詞：企業級B端產品、一致性設計規范、一致性度量標準
一、通用性的一致性設計規范及其范圍
在尼爾森十大可用性原則中，闡述了什么是一致性及一致性涵蓋的范圍。一致性是指：在同一個產品中，產品內部的導航方式、相同功能的命名方式、類似元素的視覺呈現、操作行為的交互準則等方面要保持一致性。一致性可以降低用戶在使用產品中的學習成本，保持相關認知和記憶可以被沿用，預期操作結果。下面我們來看看具體案例（不僅限于以下5點）：
1. 導航方式一致性
阿里云官網菜單導航模式均為鼠標移上去浮出面板，且面板內菜單均為平鋪狀展示，點擊菜單會跳轉到相應頁面。
2. 相同功能命名一致性
在按鈕的命名上，比如都是新增含義的，盡量不要取名成很多種，如下這樣子不合適。
3. 類似元素視覺呈現一致性
在工作臺的卡片設計上，將卡片分割成三個模塊，保證工作臺頁面導覽的一致性。
4. 操作行為的交互準則一致性
同樣是“點擊購買”按鈕，不要一個“點擊購買”按鈕是通過鼠標移上去觸發的 ，一個是直接展示的，應該保持一致。
5. 與業內標準及產品內部保持一致性
快捷鍵使用要遵循用戶使用習慣，比如Ctrl+A全選、Ctrl+C是復制、Ctrl+V是粘貼，那么我們產品在引入快捷鍵的時候，就不要去打破它。同時，有些行業具有特殊快捷鍵的使用習慣，比如左右鍵切換選擇器選項，那即便不符合我們的認知，也不要去隨意打破它，需要用戶調研后再去做判斷。最后，快捷鍵使用需要保持產品內部一致。
二、一致性設計規范的重要性
建立產品一致性設計規范在一定程度上體現了公司對產品成熟度的要求、設計者的專業度、產品用戶體驗的質量。一致性不僅僅體現在界面視覺和交互上的標準是統一的，在其他方面，同樣占據了很重要的位置：
- 從產品本身上來說：一致性設計規范是基于產品用戶體驗的主流趨勢和標準，以及業務本身的屬性去制定的，因此使得產品在銷售過程中更有說服力。
- 從團隊內部協作上來說：輸出一致性設計規范，可以讓設計團隊的成員都遵循統一專業的一致性原則，不僅設計輸出效率更高，也讓產品的一致性更強。同時降低了設計師以個人喜好和經驗的標準輸出設計物的情況。
- 從團隊間協作上來說：可以幫助業務和研發團隊更加清晰的認識和理解用戶體驗設計，了解設計師在工作中思考的維度和方向，提升雙方間的信任感和合作效率。
- 從公司品牌維度上來說：相關產品間，或產品內部建立一致性設計規范，會讓公司在商業競爭中取得更加有利的地位。
- 從客戶的角度來說：可以讓客戶站在產品和設計師的角度去了解產品設計的一些問題，進而在后續用戶溝通環節中，增加客戶對產品的理解度。
三、建立一致性設計規范
由上述可見，一致性設計規范涵蓋了很多方面，小到色彩、文字、間距，大到操作體驗、界面交互等。同時，一致性設計規范的重要性不言而喻。
B端產品業務復雜，設計創新成本高，但B端產品界面類似度很高，大部分都是表單、表格的場景。界面上的操作、交互、通用性文案、導航、排版、組件等都是可以被抽象出來的，而且業界有成熟的設計體系已經抽象出了一部分（比如Ant Design）。我們要做的就是在了解行業標準的前提下，分析自家的產品，建立符合我們面臨環境下的一致性設計規范。
在筆者經歷了數個月的企業級B端產品設計體系從0到1的建立過程中 ，遇到了很多困難（以下4個困難會在下一篇文章中去闡述如何解決的，本文就不細細去說了）：
- 一致性與用戶需求是相反的，如何將一致性落地到實際的產品中呢？
- 建立了一致性設計規范后，如何有效的迭代升級呢？
- 如何去推動企業級一致性設計規范讓業務部的專家們認可呢？而不是你的一致性阻礙了產品本身的發展。
- 一套一致性設計規范最終如何去產品中驗證 ，并且切實提升了產品的用戶體驗呢？
這些困難讓筆者經常問自己，我們的一致性設計規范邊界到底在哪兒。單個產品的一致性好做，那企業級產品的一致性從哪些維度去考慮，如何去建立呢？筆者從以下幾個方面去思考和實施的：
1. 原子級
- 顏色（主題色、功能色、中性色等）
- 文字（標題、正文、輔助文字等）
- 圖標（導航圖標、組件圖標、表格圖標等）
- 分割線（頁面分割線、面板分割線、文字分割線等）
2. 分子級
- 表格（基礎表格、分組表格等）
- 輸入框（基礎輸入框、文本框、文本域等）
- 單選選擇器（基礎單選、雙列單選、圖標單選等）
- 樹選擇器（單選樹、多選樹等）
3. 區塊級
- 卡片列表（橫向、縱向等）
- 浮層菜單（瀑布流、平鋪等）
- 折疊面板列表（文字域、表格域等）
4. 頁面級
- 表格頁（全局表、導航表等）
- 詳情頁（基礎詳情頁、高級詳情頁等）
- 監控頁（監控頁、工作臺等）
5. 導航級
- 頂部導航條、左側導航欄
6. 間距級
- 模塊間間距、組件間間距、橫向間距、縱向間距等
7. 交互級
反饋提示交互一致、頁面操作交互一致等
除了以上羅列出來的，還有很多，這里就不去說了?？傊诮⒁恢滦栽O計規范的時候，內容覆蓋越全越好，規則設計越簡單越好，設計擴展性越強越好，業務了解越深越好。
四、抽取一致性度量標準
我們傳統意義上一般認為，設計規范=度量標準。因為規范都有了，不按照規范度量不是有問題么。而實際上不是的，規范是由“強制要求+設計原則”兩部分組成的，“強制要求”是必須要執行的部分，要是產品不按照此部分執行，會導致一致性出現明顯的問題；而“設計原則”部分，是對產品的設計的一種建議，即便沒有執行也不存在大面上的不一致。這么說有點抽象是吧，那筆者來具體舉兩個例子吧：
不一致的案例：
要求界面上帶圖標的按鈕的設計規則如下（左），但是設計成了（右）：
一致的案例：
要求表單的設計規則如下（左），但是設計成了（右）：
有些小伙伴會有疑問，以上“一致”和“不一致”的案例，看起來都不一致，為啥下面的案例就是符合一致性度量標準的呢？
我們來仔細看看，在B端產品中，如果帶圖標的按鈕將按鈕隨意改變大小，組件顏色隨意更改，是不是已經不在設計規范里面了，而是重新創造了一種新的按鈕規范（且不論丑不丑）。而右側表單label和輸入框的排列組合雖然與左側不同，但是符合整齊原則、臨近原則，這種設計是對原本規范的補充和擴展，同時當表單項少的時候，右側設計方式符合場景需求，所以后期說不定還會在一致性設計規范中添加進去的呢。
由此可見，“度量標準”是在以公司整體產品情況（橫向）和設計標準（縱向）的前提下，提取出來的一部分共識性強制性約束條目，它沒有完完全全的標準答案。
前面介紹了一致性度量標準的基本情況，下面筆者大致說說我們的一致性度量標準是建立在哪些方面的（由于此屬于商業項目，因此不方面詳細公開哈），提供給大家一些思路，如下圖：
五、總結
在建立企業級B端產品一致性設計規范及度量標準的道路上 ，我們還有很長的路要走。筆者也在不斷思考，如何可以讓一致性設計規范更符合設計原則、設計審美和業務場景，而不是設計師拍腦袋的想法。
后續筆者還會更新“企業級B端產品設計體系的點滴和分享”，歡迎小伙伴們關注呀~
作者：知果；公眾號：果有料
本文由 @知果 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
- 目前還沒評論，等你發揮！
