作為一名UI設計師，PC端設計也是我們的主要工作職責，尤其在中後臺設計、官網設計、網站設計中，我們要熟知所有的web UI組件，今天給大家總結了關於web端UI組件，希望可以幫到你。
一、什麼是UI組件
UI 設計組件（UI KIT），直譯過來就是用戶界面成套元件，是界面設計常用控件或元件，「組」是設計元素的組合方式，「件」由不同的元件組成。
二、組件的優勢
1、保證一致性 Consistency
與現實生活一致：與現實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；在界面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖標和文本、元素的位置等。
2、反饋用戶 Feedback
控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作；頁面反饋：操作後，通過頁面元素的變化清晰地展現當前狀態。
3、提高效率，減少成本 Efficiency
簡化流程：設計簡潔直觀的操作流程；清晰明確：語言表達清晰且表意明確，讓用戶快速理解進而作出決策；幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負擔。
二、組件詳解
1、佈局 Layout
A. 頂部-側邊佈局-通欄佈局，多用於應用型的網站
B. 側邊欄佈局，採用側邊欄的頁面，多用於展示類網站
2、導航菜單 NavMenu
導航可以解決用戶在訪問頁面時：在哪裡，去哪裡，怎樣去的問題。一般導航分為“側邊欄導航”和“頂部導航”2 種類型。
選擇合適的導航可以讓用戶在產品的使用過程中非常流暢，相反若是不合適就會引起用戶操作不適（方向不明確），以下是「側欄導航」和 「頂部導航」的區別。
A. 側邊欄導航
可將導航欄固定在左側，提高導航可見性，方便頁面之間切換；頂部可放置常用工具，如搜索條、幫助按鈕、通知按鈕等。適用於中後臺的管理型、工具型網站。
B. 頂部導航
順應了從上至下的正常瀏覽順序，方便瀏覽信息；頂部寬度限制了導航的數量和文本長度。
3、麵包屑 Breadcrumb
麵包屑，顯示當前頁面在系統層級結構中的位置，並能向上返回，提供一個有層次的導航結構, 並標明當前位置。
用法指南：
A. 當系統擁有超過兩級以上的層級結構時；B. 當需要告知用戶『你在哪裡』時；C. 當需要向上導航的功能時。
4、按鈕 Button
按鈕用於開始一個即時操作。
用法指南：
標記了一個操作命令，響應用戶點擊行為，觸發相應的業務邏輯。
在設計中，基本有以下四種按鈕類型：
主要按鈕：用於主行動點，一個操作區域只能有一個主按鈕。
默認按鈕：用於沒有主次之分的一組行動點。
線性按鈕：常用於添加操作。
鏈接按鈕：用於次要或外鏈的行動點。
以及四種狀態屬性與上面配合使用。
危險：刪除/移動/修改權限等危險操作，一般需要二次確認。
幽靈：用於背景色比較複雜的地方，常用在首頁/產品頁等展示場景。
禁用：行動點不可用的時候，一般需要文案解釋。
加載中：用於異步操作等待反饋的時候，也可以避免多次提交。
5、下拉菜單 Dropdown
將動作或菜單摺疊到下拉菜單中。
用法指南：
當頁面上的操作命令過多時，用此組件可以收納操作元素。點擊或移入觸點，會出現一個下拉菜單。可在列表中進行選擇，並執行相應的命令。
6、標籤頁 Tabs
選項卡切換組件，常用於平級區域大塊內容的的收納和展現。
基礎樣式
選項卡樣式
卡片式
7、分頁 Pagination
當數據量過多時，使用分頁分解數據。
8、單選框 Radio
在一組備選項中進行單選
9、複選框 Checkbox
一組備選項中進行多選
10、輸入框
通過鼠標或鍵盤輸入內容，是最基礎的表單域的包裝。
11、計數器/數字輸入框 InputNumber
通過鼠標或鍵盤，輸入範圍內的數值。
12、選擇器 Select
當選項過多時，使用下拉菜單展示並選擇內容。
13、級聯選擇器 Cascader
當一個數據集合有清晰的層級結構時，可通過級聯選擇器逐級查看並選擇。
用法指南：
A. 需要從一組相關聯的數據集合進行選擇，例如省市區，公司層級，事物分類等。B. 從一個較大的數據集合中進行選擇時，用多級分類進行分隔，方便選擇。C. 比起 Select 組件，可以在同一個浮層中完成選擇，有較好的體驗。
14、日期選擇器 DatePicker
用於選擇或輸入日期
15、時間選擇器 TimePicker
輸入或選擇日期的控件，當用戶需要輸入一個日期，可以點擊標準輸入框，彈出日期面板進行選擇。
16、日期時間選擇器 DateTimePicker
在同一個選擇器裡選擇日期和時間
17、顏色選擇器 ColorPicker
用於顏色選擇
18、開關 Switch
表示兩種相互對立的狀態間的切換，多用於觸發「開/關」。
19、滑塊 Slider
通過拖動滑塊在一個固定區間內進行選擇
20、上傳 Upload
通過點擊或者拖拽上傳文件
用法指南：
A. 上傳是將信息（網頁、文字、圖片、視頻等）通過網頁或者上傳工具發佈到遠程服務器上的過程。
B. 當需要上傳一個或一些文件時。
C. 當需要展現上傳的進度時。
D. 當需要使用拖拽交互時。
21、評分 Rate
評分組件
22、穿梭框 Transfer
雙欄穿梭選擇框。
用法指南：
A. 需要在多個可選項中進行多選時。B. 比起 Select 和 TreeSelect，穿梭框佔據更大的空間，可以展示可選項的更多信息。
穿梭選擇框用直觀的方式在兩欄中移動元素，完成選擇行為。
23、表單 Form
由輸入框、選擇器、單選框、多選框等控件組成，用以收集、校驗、提交數據
用法指南：
A. 用於創建一個實體或收集信息。B. 需要對輸入的數據類型進行校驗時。
24、表格 Table
用於展示多條結構類似的數據，可對數據進行排序、篩選、對比或其他自定義操作。
25、標籤 Tag
進行標記和分類
26、進度條 Progress
用於展示操作進度，告知用戶當前狀態和預期。
用法指南：
在操作需要較長時間才能完成時，為用戶顯示該操作的當前進度和狀態。
27、樹選擇 TreeSelect
樹型選擇控件，用清晰的層級結構展示信息，可展開或摺疊。
28、頁頭 PageHeader
頁頭位於頁容器中，頁容器頂部，起到了內容概覽和引導頁級操作的作用，包括由麵包屑、標題、頁面內容簡介、頁面級操作等、頁面級導航組成。
29、標記/徽標數 Badge
出現在按鈕、圖標旁的數字或狀態標記
用法指南：
一般出現在通知圖標或頭像的右上角，用於顯示需要處理的消息條數，通過醒目視覺形式吸引用戶處理。
30、頭像 Avatar
用圖標、圖片或者字符的形式展示用戶或事物信息。
31、摺疊面板 Collapse
可以摺疊/展開的內容區域。
32、步驟條 Steps
引導用戶按照流程完成任務的分步導航條，可根據實際應用場景設定步驟，步驟不得少於 2 步。
33、警告提示 Alert
警告提示，展現需要關注的信息。
用法指南：
A. 當某個頁面需要向用戶顯示警告的信息時。B. 非浮層的靜態展現形式，始終展現，不會自動消失，用戶可以點擊關閉。
34、加載 Loading
加載數據時顯示動效
35、加載中 Spin
用於頁面和區塊的加載中狀態。
用法指南：
頁面局部處於等待異步數據或正在渲染過程時，合適的加載動效會有效緩解用戶的焦慮。
36、骨架圖 Spin
在需要等待加載內容的位置提供一個佔位圖形組合。
用法指南：
A. 網絡較慢，需要長時間等待加載處理的情況下。B. 圖文信息內容較多的列表/卡片中。C. 只在第一次加載數據的時候使用。D. 可以被 Spin 完全代替，但是在可用的場景下可以比 Spin 提供更好的視覺效果和用戶體驗。
37、消息提示 Message
常用於主動操作後的反饋提示。與 Notification 的區別是後者更多用於系統級通知的被動提醒。
38、彈框 Messagebox
模擬系統的消息提示框而實現的一套模態對話框組件，用於消息提示、確認消息和提交內容。
39、通知 Notification
懸浮出現在頁面角落，顯示全局的通知提醒消息。
40、對話框 Dialog
在保留當前頁面狀態的情況下，告知用戶並承載相關操作。
41、文字提示 Tooltip
常用於展示鼠標 hover 時的提示信息。
42、氣泡卡片/彈出框 Popver
點擊/鼠標移入元素，彈出氣泡式的卡片浮層。
43、氣泡確認框 Popconfirm
點擊元素，彈出氣泡式的確認框。
44、卡片 Card
將信息聚合在卡片容器中展示。
45、走馬燈 Carousel
在有限空間內，循環播放同一類型的圖片、文字等內容
46、時間軸 Timeline
可視化地呈現時間流信息。
47、分割線 Divider
區隔內容的分割線
48、日曆 Calendar
按照日曆形式展示數據的容器。
49、陳述列表 Descriptions
成組展示多個只讀字段。常見於詳情頁的信息展示。
50、回到頂部 Backtop
返回頁面頂部的操作按鈕
用法指南：
A. 當頁面內容區域比較長時；
B. 當用戶需要頻繁返回頂部查看相關內容時。
51、結果 Result
用於反饋一系列操作任務的處理結果。
52、抽屜 Drawer
屏幕邊緣滑出的浮層面板。
抽屜從父窗體邊緣滑入，覆蓋住部分父窗體內容。用戶在抽屜內操作時不必離開當前任務，操作完成後，可以平滑地回到到原任務。
53、空狀態 Empty
空狀態時的展示佔位圖，當目前沒有數據時，用於顯式的用戶提示。
54、列表 list
最基礎的列表展示，可承載文字、列表、圖片、段落，常用於後臺數據展示頁面
寫在最後
工欲善其事,必先利其器，充分了解每個組件所具備的功能和設計用法，能讓你的設計效率提升，看完這篇文章，希望你可以在設計網站、中後後臺界面時，不會再被各種各樣錯綜繁雜的組件弄得暈頭轉向，可以幫助你更好的選擇所需要的組件。
請私信我回復“666”，為嚴哥打Call~，還有更多驚喜哦~
.............................................................
UI嚴選—越努力，越幸運
閱讀更多 UI嚴選 的文章
