導語：B端產品是由分子級的組件組成的，包括了基礎組件和業(yè)務組件。從本文開始，本文作者將陸續(xù)分享四篇關于B端產品基礎組件的使用法則。本文主要內容是關于“基礎和表單”類組件，快來一起學習吧~

一、基礎

基礎類組件為設計者提供了設計規(guī)范原子級的設計指南，從布局、顏色、圖標等層面規(guī)范了產品的界面語言，指導設計者從0開始搭建產品界面。

1. 設計原則

• 整體性：在組件使用上要考慮整體，例如相同類型的目標對象用同一種顏色表達。
• 合理性：根據(jù)業(yè)務場景合理選用組件，例如使用虛線按鈕用于界面直接添加操作內容。
• 協(xié)調性：在界面排版上，要保證界面的協(xié)調性，比如圖標使用需要保持視覺一致和協(xié)調。

2. 圖標

圖標是B端產品界面中不可缺少的組成部分，圖標品質的優(yōu)劣，直接影響到界面整體的美觀度和識別度。

線型圖標：頁面操作區(qū)，建議使用線型圖標。

面型圖標：導航區(qū)可考慮使用面型圖標。

3. 顏色

色彩可以影響我們對物體的感受，可以幫助物體傳達更為形象的含義。

在B端產品界面中，色彩的使用可以讓界面更生動，同時可以輔助界面相關要素的含義傳達，相比用戶通過閱讀文字來理解界面信息，色彩可以幫助用戶更快速地理解信息。B端產品色彩體系可為了主色、功能色、中性色和其他色。

• 主色：主色可以傳播產品的特性，及確定產品的主基調。主色的應用場景包括主要按鈕、重要信息提示、操作狀態(tài)等。
• 功能色：功能色通常使用在產品內的信息狀態(tài)中，例如成功、失敗、警告、提醒等。
• 中性色：中性色被大量使用在產品界面的文字、邊框、分割線等場景中。中性色可以保持產品界面整體的穩(wěn)定和專業(yè)。
• 其他色：除了主色、功能色、中性色，在產品界面上還會需要使用到其他顏色來支持產品界面的設計。

4. 按鈕

召喚用戶在頁面上進行操作：

• 主要按鈕：用于主行動點，推薦一個操作區(qū)域只有一個主按鈕。
• 次要按鈕：常規(guī)按鈕，用于非主要動作。如果不確定選擇哪種按鈕，次按鈕永遠是最安全的選擇。
• 虛線按鈕：常用于界面直接添加操作內容。
• 文本按鈕：用于最次級的行動點，或在需要使用文字按鈕的地方，如表格中的操作列。
• 鏈接按鈕：用于作為外鏈的行動點。
• 圖標按鈕：圖標提供視覺線索，避免逐字閱讀按鈕文案，更高效地使用界面，如表格右上方的導入、導出按鈕。
• 圖標+文字按鈕：圖標并不能完全表達清楚含義的時候，可使用圖標+文字的方式，提高按鈕識別效率。
• 組合按鈕：當兩個按鈕是互斥的時候，如界面視圖的不同展現(xiàn)“樹視圖、拓撲視圖”。
• 下拉按鈕：當按鈕的數(shù)量過多，且動作屬于一類，可將其形成一組按鈕。
• Block按鈕：在引導性場景中，可將按鈕適當放寬。

二、表單

表單類組件是用戶錄入數(shù)據(jù)和系統(tǒng)獲取數(shù)據(jù)的重要方式。多種多樣的表單組件類型，可以幫助設計者能找到符合業(yè)務場景的數(shù)據(jù)錄入方式，同時幫助用戶高效的完成數(shù)據(jù)錄入。

1. 設計原則

• 明確：不同的表單組件實現(xiàn)不同的設計目的，在組件使用上要保持明確，例如數(shù)據(jù)是用戶輸入還是選擇，要從組件上讓用戶一眼知曉。
• 友好：友好性可以提升用戶操作的愉悅感，針對不同場景任務提供返回、重置、取消、清空等友好性的操作。
• 高效：通過合理的使用組件和組織表單信息，使用戶高效的完成表單填寫。

2. 輸入框

輸入較少的字符總數(shù)，使用單行的文本框。

3. 文本框

輸入較多的字符總數(shù)，或一段長篇文本，但不允許用戶調整高度，使用多行的文本框。

4. 文本域

輸入較多的字符總數(shù)，或一段長篇文本，但允許用戶調整高度，使用多行的文本域。

5. 復合輸入框

輸入內容需帶單位，或可以選擇單位，使用復合輸入框。

6. 數(shù)字輸入框

對用戶輸入的內容有規(guī)定，比如是數(shù)字，使用只輸入數(shù)字的數(shù)字輸入框。

7. 卡號

輸入內容為銀行卡卡號。

8. 身份證

輸入內容為身份證號碼。

9. 金額框

輸入內容為金額。

10. 單/多選選擇器

允許用戶從列表中選擇一個或多個選項，且選項數(shù)量多于5項，使用單/多選選擇器。建議選項按照業(yè)務需求進行排序，使用戶可以快速找到，并盡量讓內容顯示完整。

11. 自定義多選選擇器

允許用戶自定義添加選項。

12. 彈框型選擇器

• 列表選項過多，多到幾十條以上，全在下拉面板中展示對用戶不夠友好，可選擇彈框型選擇器的彈框來承載更多的數(shù)據(jù)信息。
• 人的記憶程度不同，一部分用戶可以通過主動搜索獲取選項，一部分用戶可以通過在彈窗中直接選擇獲取選項。

13. 樹選擇器

• 樹形結構層級不深，在2-3級之間。
• 一級節(jié)點在5個節(jié)點左右，二、三級節(jié)點個數(shù)相對較少，使用具有樹形結構的樹選擇器。

14. 表格選擇器

單一維度信息無法讓用戶做出選擇，需要為用戶呈現(xiàn)更多的數(shù)據(jù)信息才能讓用戶做出合理判斷時，使用可以展示更多數(shù)據(jù)信息的表格選擇器。

15. 級聯(lián)選擇器

• 樹形結構層級不深，在2-3級之間。
• 一、二、三級節(jié)點個數(shù)都相對較多，使用樹選擇器縱向展示不利于用戶查找，建議使用一、二、三級節(jié)點分開展示的級聯(lián)選擇器。

16. 日期/時間/日期時間選擇器

為用戶提供了一種可視化的方式去瀏覽和選擇一個日期、一個時間、一個日期時間或日期范圍。

17. 單選框

Radio所有選項默認可見，方便用戶在比較中選擇，選項不宜過多，一般在2-5個之間，同時會有一個選項處于選中狀態(tài)。

18. 多選框

Checkbox用于在一組選項可以多選時使用。單個復選框可以表示在兩種狀態(tài)間切換。

19. 滑動輸入條

滑動輸入條可以在連續(xù)或間斷的區(qū)間內，通過滑動錨點來選擇一個合適的數(shù)值?？梢栽谡{節(jié)音量，電腦屏幕亮度，色彩飽和度等方面使用。

20. 帶數(shù)字框滑動輸入條

在用戶需要精確數(shù)值時，使用帶數(shù)字框的滑動輸入條。

21. 開關

用于切換單個選項的狀態(tài)。在配合上字段，開關本身可以表達清晰狀態(tài)的情況下，可以不在開關上加文字。在字段無法表達清晰的情況下，建議在開關內加入例如“禁用/啟用”等說明狀態(tài)的文字。

22. 穿梭框

穿梭框左邊為待選元素區(qū)，右邊為已選元素區(qū)，用戶點擊穿梭按鈕，完成元素在兩個區(qū)域內的移動。

23. 帶排序穿梭框

允許用戶將常用或者重要的元素靠前排序，自由調整元素順序。

24. 直接上傳

一般用于不需要預覽效果的文件上傳，同時選擇文件后直接完成上傳動作。文件上傳需要提供明確的文件大小和文件格式。

25. 手動上傳

一般用于不需要預覽效果的文件上傳，同時選擇文件后需要手動點擊頁面上的上傳按鈕才能完成上傳動作。文件上傳需要提供明確的文件大小和文件格式。

26. 顯示縮略圖上傳

一般用于需要顯示預覽效果的文件上傳，同時選擇文件后直接完成上傳動作。文件上傳需要提供明確的文件大小和文件格式。

27. 拖拽上傳

把文件拖入指定區(qū)域，完成上傳，同樣支持點擊上傳。文件上傳需要提供明確的文件大小和文件格式。

28. 頭像上傳

一般為圖片上傳。圖片上傳需要提供明確的圖片大小和圖片格式。

29. 評分

當需要為內容進行評分時使用。

接下來將陸續(xù)送出（連載喲）：

• B端通用組件使用法則（二）-表格、樹形控件
• B端通用組件使用法則（三）-導航、反饋
• B端通用組件使用法則（四）-數(shù)據(jù)展示、其他

作者：知果；公眾號：知果日記

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

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