導語：B端產品是由分子級的組件組成的，包括了基礎組件和業務組件。從本文開始，本文作者將陸續分享四篇關於B端產品基礎組件的使用法則。本文主要內容是關於“基礎和表單”類組件，快來一起學習吧~
基礎類組件為設計者提供了設計規範原子級的設計指南，從佈局、顏色、圖標等層面規範了產品的界面語言，指導設計者從0開始搭建產品界面。
1. 設計原則- 整體性：在組件使用上要考慮整體，例如相同類型的目標對象用同一種顏色表達。
- 合理性：根據業務場景合理選用組件，例如使用虛線按鈕用於界面直接添加操作內容。
- 協調性：在界面排版上，要保證界面的協調性，比如圖標使用需要保持視覺一致和協調。
圖標是B端產品界面中不可缺少的組成部分，圖標品質的優劣，直接影響到界面整體的美觀度和識別度。
線型圖標：頁面操作區，建議使用線型圖標。
面型圖標：導航區可考慮使用面型圖標。
色彩可以影響我們對物體的感受，可以幫助物體傳達更為形象的含義。
在B端產品界面中，色彩的使用可以讓界面更生動，同時可以輔助界面相關要素的含義傳達，相比用户通過閲讀文字來理解界面信息，色彩可以幫助用户更快速地理解信息。B端產品色彩體系可為了主色、功能色、中性色和其他色。
- 主色：主色可以傳播產品的特性，及確定產品的主基調。主色的應用場景包括主要按鈕、重要信息提示、操作狀態等。
- 功能色：功能色通常使用在產品內的信息狀態中，例如成功、失敗、警告、提醒等。
- 中性色：中性色被大量使用在產品界面的文字、邊框、分割線等場景中。中性色可以保持產品界面整體的穩定和專業。
- 其他色：除了主色、功能色、中性色，在產品界面上還會需要使用到其他顏色來支持產品界面的設計。
召喚用户在頁面上進行操作：
- 主要按鈕：用於主行動點，推薦一個操作區域只有一個主按鈕。
- 次要按鈕：常規按鈕，用於非主要動作。如果不確定選擇哪種按鈕，次按鈕永遠是最安全的選擇。
- 虛線按鈕：常用於界面直接添加操作內容。
- 文本按鈕：用於最次級的行動點，或在需要使用文字按鈕的地方，如表格中的操作列。
- 鏈接按鈕：用於作為外鏈的行動點。
- 圖標按鈕：圖標提供視覺線索，避免逐字閲讀按鈕文案，更高效地使用界面，如表格右上方的導入、導出按鈕。
- 圖標+文字按鈕：圖標並不能完全表達清楚含義的時候，可使用圖標+文字的方式，提高按鈕識別效率。
- 組合按鈕：當兩個按鈕是互斥的時候，如界面視圖的不同展現“樹視圖、拓撲視圖”。
- 下拉按鈕：當按鈕的數量過多，且動作屬於一類，可將其形成一組按鈕。
- Block按鈕：在引導性場景中，可將按鈕適當放寬。
表單類組件是用户錄入數據和系統獲取數據的重要方式。多種多樣的表單組件類型，可以幫助設計者能找到符合業務場景的數據錄入方式，同時幫助用户高效的完成數據錄入。
1. 設計原則- 明確：不同的表單組件實現不同的設計目的，在組件使用上要保持明確，例如數據是用户輸入還是選擇，要從組件上讓用户一眼知曉。
- 友好：友好性可以提升用户操作的愉悦感，針對不同場景任務提供返回、重置、取消、清空等友好性的操作。
- 高效：通過合理的使用組件和組織表單信息，使用户高效的完成表單填寫。
輸入較少的字符總數，使用單行的文本框。
3. 文本框輸入較多的字符總數，或一段長篇文本，但不允許用户調整高度，使用多行的文本框。
4. 文本域輸入較多的字符總數，或一段長篇文本，但允許用户調整高度，使用多行的文本域。
5. 複合輸入框輸入內容需帶單位，或可以選擇單位，使用複合輸入框。
6. 數字輸入框對用户輸入的內容有規定，比如是數字，使用只輸入數字的數字輸入框。
7. 卡號輸入內容為銀行卡卡號。
8. 身份證輸入內容為身份證號碼。
9. 金額框輸入內容為金額。
允許用户從列表中選擇一個或多個選項，且選項數量多於5項，使用單/多選選擇器。建議選項按照業務需求進行排序，使用户可以快速找到，並儘量讓內容顯示完整。
11. 自定義多選選擇器允許用户自定義添加選項。
12. 彈框型選擇器- 列表選項過多，多到幾十條以上，全在下拉麪板中展示對用户不夠友好，可選擇彈框型選擇器的彈框來承載更多的數據信息。
- 人的記憶程度不同，一部分用户可以通過主動搜索獲取選項，一部分用户可以通過在彈窗中直接選擇獲取選項。
- 樹形結構層級不深，在2-3級之間。
- 一級節點在5個節點左右，二、三級節點個數相對較少，使用具有樹形結構的樹選擇器。
單一維度信息無法讓用户做出選擇，需要為用户呈現更多的數據信息才能讓用户做出合理判斷時，使用可以展示更多數據信息的表格選擇器。
15. 級聯選擇器- 樹形結構層級不深，在2-3級之間。
- 一、二、三級節點個數都相對較多，使用樹選擇器縱向展示不利於用户查找，建議使用一、二、三級節點分開展示的級聯選擇器。
為用户提供了一種可視化的方式去瀏覽和選擇一個日期、一個時間、一個日期時間或日期範圍。
17. 單選框Radio所有選項默認可見，方便用户在比較中選擇，選項不宜過多，一般在2-5個之間，同時會有一個選項處於選中狀態。
18. 多選框Checkbox用於在一組選項可以多選時使用。單個複選框可以表示在兩種狀態間切換。
19. 滑動輸入條滑動輸入條可以在連續或間斷的區間內，通過滑動錨點來選擇一個合適的數值。可以在調節音量，電腦屏幕亮度，色彩飽和度等方面使用。
20. 帶數字框滑動輸入條在用户需要精確數值時，使用帶數字框的滑動輸入條。
用於切換單個選項的狀態。在配合上字段，開關本身可以表達清晰狀態的情況下，可以不在開關上加文字。在字段無法表達清晰的情況下，建議在開關內加入例如“禁用/啓用”等説明狀態的文字。
22. 穿梭框穿梭框左邊為待選元素區，右邊為已選元素區，用户點擊穿梭按鈕，完成元素在兩個區域內的移動。
23. 帶排序穿梭框允許用户將常用或者重要的元素靠前排序，自由調整元素順序。
24. 直接上傳一般用於不需要預覽效果的文件上傳，同時選擇文件後直接完成上傳動作。文件上傳需要提供明確的文件大小和文件格式。
25. 手動上傳一般用於不需要預覽效果的文件上傳，同時選擇文件後需要手動點擊頁面上的上傳按鈕才能完成上傳動作。文件上傳需要提供明確的文件大小和文件格式。
26. 顯示縮略圖上傳一般用於需要顯示預覽效果的文件上傳，同時選擇文件後直接完成上傳動作。文件上傳需要提供明確的文件大小和文件格式。
27. 拖拽上傳把文件拖入指定區域，完成上傳，同樣支持點擊上傳。文件上傳需要提供明確的文件大小和文件格式。
28. 頭像上傳一般為圖片上傳。圖片上傳需要提供明確的圖片大小和圖片格式。
29. 評分當需要為內容進行評分時使用。
接下來將陸續送出（連載喲）：
- B端通用組件使用法則（二）-表格、樹形控件
- B端通用組件使用法則（三）-導航、反饋
- B端通用組件使用法則（四）-數據展示、其他
作者：知果；公眾號：知果日記
本文由 @知果 原創發佈於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基於CC0協議。