作為一名UI設(shè)計(jì)師，PC端設(shè)計(jì)也是我們的主要工作職責(zé)赐劣，尤其在中后臺(tái)設(shè)計(jì)、官網(wǎng)設(shè)計(jì)哩都、網(wǎng)站設(shè)計(jì)中魁兼，我們要熟知所有的web UI組件，今天給大家總結(jié)了關(guān)于web端UI組件漠嵌，希望可以幫到你咐汞。

一、什么是UI組件

UI 設(shè)計(jì)組件（UI KIT）儒鹿，直譯過來就是用戶界面成套元件化撕，是界面設(shè)計(jì)常用控件或元件，「組」是設(shè)計(jì)元素的組合方式约炎，「件」由不同的元件組成植阴。

二、組件的優(yōu)勢

1圾浅、保證一致性 Consistency

與現(xiàn)實(shí)生活一致：與現(xiàn)實(shí)生活的流程掠手、邏輯保持一致，遵循用戶習(xí)慣的語言和概念贱傀；

在界面中一致：所有的元素和結(jié)構(gòu)需保持一致惨撇，比如：設(shè)計(jì)樣式、圖標(biāo)和文本府寒、元素的位置等。

2报腔、反饋用戶 Feedback

控制反饋：通過界面樣式和交互動(dòng)效讓用戶可以清晰的感知自己的操作株搔；

頁面反饋：操作后，通過頁面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)纯蛾。

3纤房、提高效率，減少成本 Efficiency

簡化流程：設(shè)計(jì)簡潔直觀的操作流程翻诉；

清晰明確：語言表達(dá)清晰且表意明確炮姨，讓用戶快速理解進(jìn)而作出決策；

幫助用戶識(shí)別：界面簡單直白碰煌，讓用戶快速識(shí)別而非回憶舒岸，減少用戶記憶負(fù)擔(dān)。

二芦圾、組件詳解

1蛾派、布局?Layout?

A. 頂部-側(cè)邊布局-通欄布局，多用于應(yīng)用型的網(wǎng)站

B. 側(cè)邊欄布局，采用側(cè)邊欄的頁面洪乍，多用于展示類網(wǎng)站

2眯杏、導(dǎo)航菜單 NavMenu

導(dǎo)航可以解決用戶在訪問頁面時(shí)：在哪里，去哪里壳澳，怎樣去的問題岂贩。一般導(dǎo)航分為“側(cè)邊欄導(dǎo)航”和“頂部導(dǎo)航”2 種類型。

選擇合適的導(dǎo)航可以讓用戶在產(chǎn)品的使用過程中非常流暢巷波，相反若是不合適就會(huì)引起用戶操作不適（方向不明確）河闰，以下是「側(cè)欄導(dǎo)航」和 「頂部導(dǎo)航」的區(qū)別。

A. 側(cè)邊欄導(dǎo)航

可將導(dǎo)航欄固定在左側(cè)褥紫，提高導(dǎo)航可見性姜性，方便頁面之間切換；頂部可放置常用工具髓考，如搜索條部念、幫助按鈕、通知按鈕等氨菇。適用于中后臺(tái)的管理型儡炼、工具型網(wǎng)站。

B. 頂部導(dǎo)航

順應(yīng)了從上至下的正常瀏覽順序查蓉，方便瀏覽信息乌询；頂部寬度限制了導(dǎo)航的數(shù)量和文本長度。

3豌研、面包屑?Breadcrumb

面包屑妹田，顯示當(dāng)前頁面在系統(tǒng)層級(jí)結(jié)構(gòu)中的位置，并能向上返回鹃共，提供一個(gè)有層次的導(dǎo)航結(jié)構(gòu), 并標(biāo)明當(dāng)前位置鬼佣。

用法指南：

A. 當(dāng)系統(tǒng)擁有超過兩級(jí)以上的層級(jí)結(jié)構(gòu)時(shí)；

B. 當(dāng)需要告知用戶『你在哪里』時(shí)霜浴；

C. 當(dāng)需要向上導(dǎo)航的功能時(shí)晶衷。

4、按鈕 Button

按鈕用于開始一個(gè)即時(shí)操作阴孟。

用法指南：

標(biāo)記了一個(gè)操作命令晌纫，響應(yīng)用戶點(diǎn)擊行為，觸發(fā)相應(yīng)的業(yè)務(wù)邏輯永丝。

在設(shè)計(jì)中锹漱，基本有以下四種按鈕類型：

主要按鈕：用于主行動(dòng)點(diǎn)，一個(gè)操作區(qū)域只能有一個(gè)主按鈕类溢。

默認(rèn)按鈕：用于沒有主次之分的一組行動(dòng)點(diǎn)凌蔬。

線性按鈕：常用于添加操作露懒。

鏈接按鈕：用于次要或外鏈的行動(dòng)點(diǎn)。

以及四種狀態(tài)屬性與上面配合使用砂心。

危險(xiǎn)：刪除/移動(dòng)/修改權(quán)限等危險(xiǎn)操作懈词，一般需要二次確認(rèn)。

幽靈：用于背景色比較復(fù)雜的地方，常用在首頁/產(chǎn)品頁等展示場景。

禁用：行動(dòng)點(diǎn)不可用的時(shí)候工闺，一般需要文案解釋祷嘶。

加載中：用于異步操作等待反饋的時(shí)候仔粥，也可以避免多次提交。

5、下拉菜單?Dropdown

將動(dòng)作或菜單折疊到下拉菜單中。

用法指南：

當(dāng)頁面上的操作命令過多時(shí)崎脉，用此組件可以收納操作元素。點(diǎn)擊或移入觸點(diǎn)伯顶，會(huì)出現(xiàn)一個(gè)下拉菜單囚灼。可在列表中進(jìn)行選擇祭衩，并執(zhí)行相應(yīng)的命令灶体。

6、標(biāo)簽頁??Tabs

選項(xiàng)卡切換組件掐暮，常用于平級(jí)區(qū)域大塊內(nèi)容的的收納和展現(xiàn)蝎抽。

基礎(chǔ)樣式

選項(xiàng)卡樣式

卡片式

7、分頁?Pagination

當(dāng)數(shù)據(jù)量過多時(shí)路克，使用分頁分解數(shù)據(jù)樟结。

8、單選框? Radio

在一組備選項(xiàng)中進(jìn)行單選

9衷戈、復(fù)選框?Checkbox

一組備選項(xiàng)中進(jìn)行多選

10狭吼、輸入框

通過鼠標(biāo)或鍵盤輸入內(nèi)容，是最基礎(chǔ)的表單域的包裝殖妇。

11、計(jì)數(shù)器/數(shù)字輸入框??InputNumber

通過鼠標(biāo)或鍵盤破花，輸入范圍內(nèi)的數(shù)值谦趣。

12、選擇器??Select

當(dāng)選項(xiàng)過多時(shí)座每，使用下拉菜單展示并選擇內(nèi)容前鹅。

13、級(jí)聯(lián)選擇器??Cascader

當(dāng)一個(gè)數(shù)據(jù)集合有清晰的層級(jí)結(jié)構(gòu)時(shí)峭梳，可通過級(jí)聯(lián)選擇器逐級(jí)查看并選擇舰绘。

用法指南：

A. 需要從一組相關(guān)聯(lián)的數(shù)據(jù)集合進(jìn)行選擇蹂喻，例如省市區(qū)，公司層級(jí)捂寿，事物分類等口四。

B. 從一個(gè)較大的數(shù)據(jù)集合中進(jìn)行選擇時(shí)，用多級(jí)分類進(jìn)行分隔秦陋，方便選擇蔓彩。

C. 比起 Select 組件，可以在同一個(gè)浮層中完成選擇驳概，有較好的體驗(yàn)赤嚼。

14、日期選擇器??DatePicker

用于選擇或輸入日期

15顺又、時(shí)間選擇器??TimePicker

輸入或選擇日期的控件更卒，當(dāng)用戶需要輸入一個(gè)日期，可以點(diǎn)擊標(biāo)準(zhǔn)輸入框稚照，彈出日期面板進(jìn)行選擇蹂空。

16、日期時(shí)間選擇器??DateTimePicker

在同一個(gè)選擇器里選擇日期和時(shí)間

17锐锣、顏色選擇器??ColorPicker

用于顏色選擇

18腌闯、開關(guān) Switch

表示兩種相互對(duì)立的狀態(tài)間的切換，多用于觸發(fā)「開/關(guān)」雕憔。

19姿骏、滑塊??Slider

通過拖動(dòng)滑塊在一個(gè)固定區(qū)間內(nèi)進(jìn)行選擇

20、上傳??Upload

通過點(diǎn)擊或者拖拽上傳文件

用法指南：

A. 上傳是將信息（網(wǎng)頁斤彼、文字分瘦、圖片、視頻等）通過網(wǎng)頁或者上傳工具發(fā)布到遠(yuǎn)程服務(wù)器上的過程琉苇。

B. 當(dāng)需要上傳一個(gè)或一些文件時(shí)嘲玫。

C. 當(dāng)需要展現(xiàn)上傳的進(jìn)度時(shí)。

D. 當(dāng)需要使用拖拽交互時(shí)并扇。

21去团、評(píng)分?Rate

評(píng)分組件

22、穿梭框??Transfer

雙欄穿梭選擇框穷蛹。

用法指南：

A. 需要在多個(gè)可選項(xiàng)中進(jìn)行多選時(shí)土陪。

B. 比起 Select 和 TreeSelect，穿梭框占據(jù)更大的空間肴熏，可以展示可選項(xiàng)的更多信息鬼雀。

穿梭選擇框用直觀的方式在兩欄中移動(dòng)元素，完成選擇行為蛙吏。

23源哩、表單?Form

由輸入框鞋吉、選擇器、單選框励烦、多選框等控件組成谓着，用以收集、校驗(yàn)崩侠、提交數(shù)據(jù)

用法指南：

A. 用于創(chuàng)建一個(gè)實(shí)體或收集信息漆魔。

B. 需要對(duì)輸入的數(shù)據(jù)類型進(jìn)行校驗(yàn)時(shí)。

24却音、表格?Table

用于展示多條結(jié)構(gòu)類似的數(shù)據(jù)改抡，可對(duì)數(shù)據(jù)進(jìn)行排序、篩選系瓢、對(duì)比或其他自定義操作阿纤。

25、標(biāo)簽?Tag

進(jìn)行標(biāo)記和分類

26夷陋、進(jìn)度條?Progress

用于展示操作進(jìn)度欠拾，告知用戶當(dāng)前狀態(tài)和預(yù)期。

用法指南：

在操作需要較長時(shí)間才能完成時(shí)骗绕，為用戶顯示該操作的當(dāng)前進(jìn)度和狀態(tài)藐窄。

27、樹選擇?TreeSelect

樹型選擇控件酬土，用清晰的層級(jí)結(jié)構(gòu)展示信息荆忍，可展開或折疊。

28撤缴、頁頭?PageHeader

頁頭位于頁容器中刹枉，頁容器頂部，起到了內(nèi)容概覽和引導(dǎo)頁級(jí)操作的作用屈呕，包括由面包屑微宝、標(biāo)題、頁面內(nèi)容簡介虎眨、頁面級(jí)操作等蟋软、頁面級(jí)導(dǎo)航組成。

29嗽桩、標(biāo)記/徽標(biāo)數(shù)??Badge

出現(xiàn)在按鈕钟鸵、圖標(biāo)旁的數(shù)字或狀態(tài)標(biāo)記

用法指南：

一般出現(xiàn)在通知圖標(biāo)或頭像的右上角，用于顯示需要處理的消息條數(shù)涤躲，通過醒目視覺形式吸引用戶處理。

30贡未、頭像?Avatar

用圖標(biāo)种樱、圖片或者字符的形式展示用戶或事物信息蒙袍。

31、折疊面板??Collapse

可以折疊/展開的內(nèi)容區(qū)域嫩挤。

32害幅、步驟條?Steps

引導(dǎo)用戶按照流程完成任務(wù)的分步導(dǎo)航條，可根據(jù)實(shí)際應(yīng)用場景設(shè)定步驟岂昭，步驟不得少于 2 步以现。

33、警告提示?Alert

警告提示约啊，展現(xiàn)需要關(guān)注的信息邑遏。

用法指南：

A. 當(dāng)某個(gè)頁面需要向用戶顯示警告的信息時(shí)。

B. 非浮層的靜態(tài)展現(xiàn)形式恰矩，始終展現(xiàn)记盒，不會(huì)自動(dòng)消失，用戶可以點(diǎn)擊關(guān)閉外傅。

34纪吮、加載?Loading

加載數(shù)據(jù)時(shí)顯示動(dòng)效

35、加載中??Spin

用于頁面和區(qū)塊的加載中狀態(tài)萎胰。

用法指南：

頁面局部處于等待異步數(shù)據(jù)或正在渲染過程時(shí)碾盟，合適的加載動(dòng)效會(huì)有效緩解用戶的焦慮。

36技竟、骨架圖??Spin

在需要等待加載內(nèi)容的位置提供一個(gè)占位圖形組合冰肴。

用法指南：

A. 網(wǎng)絡(luò)較慢，需要長時(shí)間等待加載處理的情況下灵奖。

B. 圖文信息內(nèi)容較多的列表/卡片中嚼沿。

C. 只在第一次加載數(shù)據(jù)的時(shí)候使用。

D. 可以被 Spin 完全代替瓷患，但是在可用的場景下可以比 Spin 提供更好的視覺效果和用戶體驗(yàn)骡尽。

37、消息提示??Message

常用于主動(dòng)操作后的反饋提示擅编。與 Notification 的區(qū)別是后者更多用于系統(tǒng)級(jí)通知的被動(dòng)提醒攀细。

38、彈框??Messagebox

模擬系統(tǒng)的消息提示框而實(shí)現(xiàn)的一套模態(tài)對(duì)話框組件爱态，用于消息提示谭贪、確認(rèn)消息和提交內(nèi)容。

39锦担、通知??Notification

懸浮出現(xiàn)在頁面角落俭识，顯示全局的通知提醒消息。

40洞渔、對(duì)話框??Dialog

在保留當(dāng)前頁面狀態(tài)的情況下套媚，告知用戶并承載相關(guān)操作缚态。

41、文字提示?Tooltip

常用于展示鼠標(biāo) hover 時(shí)的提示信息堤瘤。

42玫芦、氣泡卡片/彈出框??Popver

點(diǎn)擊/鼠標(biāo)移入元素，彈出氣泡式的卡片浮層本辐。

43桥帆、氣泡確認(rèn)框?Popconfirm

點(diǎn)擊元素，彈出氣泡式的確認(rèn)框慎皱。

44老虫、卡片?Card

將信息聚合在卡片容器中展示。

45宝冕、走馬燈??Carousel

在有限空間內(nèi)张遭，循環(huán)播放同一類型的圖片、文字等內(nèi)容

46地梨、時(shí)間軸? Timeline

可視化地呈現(xiàn)時(shí)間流信息菊卷。

47、分割線?Divider

區(qū)隔內(nèi)容的分割線

48宝剖、日歷??Calendar

按照日歷形式展示數(shù)據(jù)的容器洁闰。

49、陳述列表??Descriptions

成組展示多個(gè)只讀字段万细。常見于詳情頁的信息展示扑眉。

50、回到頂部??Backtop

返回頁面頂部的操作按鈕

用法指南：

A. 當(dāng)頁面內(nèi)容區(qū)域比較長時(shí)赖钞；

B. 當(dāng)用戶需要頻繁返回頂部查看相關(guān)內(nèi)容時(shí)腰素。

51、結(jié)果? Result

用于反饋一系列操作任務(wù)的處理結(jié)果雪营。

52弓千、抽屜?Drawer

屏幕邊緣滑出的浮層面板。

抽屜從父窗體邊緣滑入献起，覆蓋住部分父窗體內(nèi)容洋访。用戶在抽屜內(nèi)操作時(shí)不必離開當(dāng)前任務(wù)，操作完成后谴餐，可以平滑地回到到原任務(wù)姻政。

53、空狀態(tài)??Empty

空狀態(tài)時(shí)的展示占位圖岂嗓，當(dāng)目前沒有數(shù)據(jù)時(shí)汁展，用于顯式的用戶提示。

54、列表??list

最基礎(chǔ)的列表展示善镰，可承載文字妹萨、列表、圖片炫欺、段落，常用于后臺(tái)數(shù)據(jù)展示頁面

寫在最后

工欲善其事,必先利其器熏兄，充分了解每個(gè)組件所具備的功能和設(shè)計(jì)用法品洛，能讓你的設(shè)計(jì)效率提升，看完這篇文章摩桶，希望你可以在設(shè)計(jì)網(wǎng)站桥状、中后后臺(tái)界面時(shí)，不會(huì)再被各種各樣錯(cuò)綜繁雜的組件弄得暈頭轉(zhuǎn)向硝清，可以幫助你更好的選擇所需要的組件辅斟。