2024-10-30 藍藍小助手
B端設計組件是企業級應用開發中不可或缺的一部分。通過合理設計和應用基礎組件，可以構建出功能豐富、易用且可維護的用戶界面。同時，組件化設計提高了開發效率、降低了維護成本，并增強了系統的靈活性和可擴展性。因此，在B端設計中，應充分重視組件的作用，并不斷優化和完善組件庫，以適應不斷變化的市場需求和用戶期望。
下面我們根據這個分類框架來逐個聊聊這些組件。
說到基礎組件，我想再將其細分成兩個大類：一類是通用組件；一類是柵格/導航。怎么去更深刻的理解這兩類的區別呢，我們可以打個這樣的形象比方：
通過這個比方我們不難理解，柵格/導航是先給頁面定下了基本框架，而通用組件則是在這個框架基礎上搭建頁面的所用到基本元素。
常見通用組件一般包含：色彩/字體/間距/圓角/分割線/按鈕。需要注意的是，通用組件看起來似乎很簡單，但卻是決定產品品牌調性、界面細節品質的重要因素，在設計過程中需要引起我們的高度重視。
色彩可分為主色，功能色，中性色三類。下面談談這三類顏色如何配置，以及如何定義這些顏色梯度。
a.主色的選取
主色作為產品的主要色調，在選取時應當優先選擇品牌色，但有一點要注意的是B端和C端不一樣，B端一般不適合采用暖色系作為主色，如果品牌色為暖色調，則盡量考慮另選取一個冷色系作為主色，原因有兩點：一是為了避免和警告、錯誤色沖突，產生歧義；二是冷色系帶有商務、專業、冷靜的情感，更符合B端產品調性。
同時主色選取應避免高亮、熒光色、灰調高的顏色。
b.主色的應用
主色在設計中常見的應用包括可交互、選中狀態、可視化、插圖、圖標等場景。
功能色主要用于頁面表征狀態，常見有成功色、警告色、報錯色等。
a.成功色
主要用于操作結果成功提示以及標簽配色等。
b.警告色
主要用于警告提醒功能以及標簽配色等。
c.報錯色
主要用于系統報錯提示、圓點提示、以及標簽配色等。
中性色在頁面設計中應用非常廣泛，從線條到文字再到圖形等等都可以見到它的影子。
Tips：無論我們主色調是什么，中性色在調色時建議可加入適量的藍色調，可讓頁面觀感更清爽。
選取好了顏色后，怎么去更合理的定義每個顏色的梯度呢？（這里主要指對主色以及功能色定義梯度）
我的方法是給顏色加一層半透明黑/白遮罩，當我們需要淺色，通過調整白色遮罩透明度得到合適顏色；而當我們需要深色時，則通過調整黑色遮罩透明度得到合適顏色。
這樣定義顏色梯優點是后續如果需要更改配色，只需一鍵替換全局色即可，大大提高工作效率。
文字規范包含字體、字號、字重、行高等。
B端字體/字重一般按照如下規范即可：
不同于C端，B端在字號選擇上應當盡量保持克制。研究表明，Web端上正文字號為14時，可以帶來最佳閱讀體驗。因此在字號選取上應盡量優先選取14號字。如果想要區分文字層級，優先級從高到低的手法應該是顏色、字重、字號，也就是說一般盡量不采用字號大小區分文字層級。
行高可以參照下面的公式或行高參照表快速獲得，如果通過公式算出行高非整數或非偶數，可就近取偶整數。
關于間距取值，在目前主流屏幕分辨率下，只有4或8被整除率最高，考慮到4的顆粒度偏小，因此可優先考慮8px的倍數作為間距值，在一些特殊場景可采用4px的倍數間距值。
分割線寬度一般統一為1px即可，同時注意顏色不可過深，以免干擾主體信息。如果需要不同層級分割線，可用顏色深淺來區分。
圓角大小一般根據使用場景控制在2-3個梯度即可，既不能全部統一一個圓角值，同時也不適合出現過多圓角值。同時圓角值不要過大，建議控制在2-6px，以符合B端產品嚴謹專業調性。
這里從按鈕的大小/狀態/排放位置幾個緯度來講。
按鈕高度一般情況下可以設置3-4種尺寸按鈕，足以滿足各種使用場景。至于按鈕寬度，我們一般定義一個最小值，當超過最小值時，可設置padding值，按鈕寬度根據內容自適應。
操作按鈕過程中，按鈕會呈現不同的交互狀態。
對于主次按鈕組合，主次按鈕排放位置應該怎么規定呢？可分為兩種場景：一是當為從左到右閱讀順序時，主要按鈕應當排在次要按鈕左側。二是當為從右到左閱讀順序時，主要按鈕應當排在次要按鈕右側。而當一些特殊場景與這個原則沖突時，應權衡優先級做出取舍。
熟悉通用組件后，我們要通柵格/導航來確定產品頁面框架。
柵格可以有效地保證設計的一致性、讓頁面布局更具規律，并提高團隊協作效率。應該如何設計柵格呢？
我們一般習慣將頁面從下到上劃分為背景層、全局控制層、內容層、臨時層，而柵格區應當用在內容層。以下為常見幾種頁面布局柵格區的劃定。
隨著頁面寬度變化，一般來說是通過欄寬變化實現自適應。
根據頁面內容豐富程度，柵格欄數一般定12或者24欄，考慮到B端產品功能往往比較復雜，建議采用24欄即可。
導航可分為全局導航與局部導航。
全局導航包含頂部導航、側邊導航、混合導航。
這三種導航樣式各具特點，應結合產品特性選擇合適的導航樣式。這里要注意的一點是，當產品可用性和用戶體驗產生沖突時，應優先保證產品可用性。
局部導航包含面包屑、標簽頁、步驟條、分頁器。
a.面包屑
面包屑導航的作用是告訴用戶當前頁面在系統層級結構中的位置以及父子級頁面間的關系，并且可以快速回到上幾級導航。
b.標簽頁
標簽頁可以幫助用戶在一個頁面實現快速切換不同內容，提升單個頁面內容擴展性。可分為基本樣式、標簽樣式、卡片樣式。
c.步驟條
當任務復雜或者存在先后關系時，可將其分解成一系列步驟，這里就會用上步驟條。步驟條是引導用戶按照流程完成任務的導航條，作用包含3點：一是讓用戶對操作流程長度和步驟有個預期，二是明確知道自己目前所在步驟，三是可以對用戶的任務完成度有明確的度量。
步驟條一般分為橫向與縱向兩種樣式。
步驟條小Tips：當步驟條中有操作難度偏大的內容時，為了提高用戶操作完成率，我們可以考慮把其放在靠后的步驟中，原因是用戶前面已經完成了大部分簡單操作，后面碰到高難度操作后，出于損失厭惡心理，不會輕易放棄操作。
d.分頁器
當有大量內容需要展現時進行分頁加載處理，分頁器作用是可以讓用戶清楚的知道自己所要瀏覽的內容有多少頁、當前所在頁碼、快捷前往目標頁碼。
分頁器一般分為迷你、簡易、自定義三種樣式。
妙用分頁器小Tips：當表格中需要對數據全選操作時，為了提高操作效率，可將自定義每頁跳數調到最大。例如一共100條數據，默認每頁10條數據，要完成全選需要點擊9次翻頁，10次全選（表格的全選框勾選后一般只選中當前頁面全部數據，而不是所有頁面總數據），當把每頁條數調整為50后，則只需翻頁1次，點擊2次全選即可。
部分參考資料：
《B端產品設計-Mia》
《Ant Design》
