作爲一名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
最基礎的列表展示,可承載文字、列表、圖片、段落,常用於後臺數據展示頁面
寫在最後
工欲善其事,必先利其器,充分了解每個組件所具備的功能和設計用法,能讓你的設計效率提升,看完這篇文章,希望你可以在設計網站、中後後臺界面時,不會再被各種各樣錯綜繁雜的組件弄得暈頭轉向,可以幫助你更好的選擇所需要的組件。