中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、基礎(chǔ)

基礎(chǔ)類組件為設(shè)計(jì)者提供了設(shè)計(jì)規(guī)范原子級(jí)的設(shè)計(jì)指南，從布局、顏色、圖標(biāo)等層面規(guī)范了產(chǎn)品的界面語(yǔ)言，指導(dǎo)設(shè)計(jì)者從0開(kāi)始搭建產(chǎn)品界面。

1. 設(shè)計(jì)原則

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

2. 圖標(biāo)

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

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

面型圖標(biāo)：導(dǎo)航區(qū)可考慮使用面型圖標(biāo)。

3. 顏色

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

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

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

4. 按鈕

召喚用戶在頁(yè)面上進(jìn)行操作：

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

二、表單

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

1. 設(shè)計(jì)原則

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

2. 輸入框

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

3. 文本框

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

4. 文本域

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

5. 復(fù)合輸入框

輸入內(nèi)容需帶單位，或可以選擇單位，使用復(fù)合輸入框。

6. 數(shù)字輸入框

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

7. 卡號(hào)

輸入內(nèi)容為銀行卡卡號(hào)。

8. 身份證

輸入內(nèi)容為身份證號(hào)碼。

9. 金額框

輸入內(nèi)容為金額。

10. 單/多選選擇器

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

11. 自定義多選選擇器

允許用戶自定義添加選項(xiàng)。

12. 彈框型選擇器

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

13. 樹(shù)選擇器

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

14. 表格選擇器

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

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

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

16. 日期/時(shí)間/日期時(shí)間選擇器

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

17. 單選框

Radio所有選項(xiàng)默認(rèn)可見(jiàn)，方便用戶在比較中選擇，選項(xiàng)不宜過(guò)多，一般在2-5個(gè)之間，同時(shí)會(huì)有一個(gè)選項(xiàng)處于選中狀態(tài)。

18. 多選框

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

19. 滑動(dòng)輸入條

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

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

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

21. 開(kāi)關(guān)

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

22. 穿梭框

穿梭框左邊為待選元素區(qū)，右邊為已選元素區(qū)，用戶點(diǎn)擊穿梭按鈕，完成元素在兩個(gè)區(qū)域內(nèi)的移動(dòng)。

23. 帶排序穿梭框

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

24. 直接上傳

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

25. 手動(dòng)上傳

一般用于不需要預(yù)覽效果的文件上傳，同時(shí)選擇文件后需要手動(dòng)點(diǎn)擊頁(yè)面上的上傳按鈕才能完成上傳動(dòng)作。文件上傳需要提供明確的文件大小和文件格式。

26. 顯示縮略圖上傳

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

27. 拖拽上傳

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

28. 頭像上傳

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

29. 評(píng)分

當(dāng)需要為內(nèi)容進(jìn)行評(píng)分時(shí)使用。

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

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

作者：知果；公眾號(hào)：知果日記

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

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