上一期給大家講解了《最全面的移動端UI組件設計詳解：上篇》，主要分享了：佈局組件和導航組件2個部分；這次給大家帶來：基礎組件、表單組件和反饋組件
詳解，希望你在設計APP、小程序、H5頁面中，能熟練使用和理解各種的 UI組件，今天給大家總結了關於移動端UI組件，希望可以在工作中幫到你。
Web端UI組件設計詳解：
一、基礎組件 Basis
1、狀態欄 StatusBar
用於顯示當前設備的時間、電池電量、藍牙、信號、定位等各種狀態。
2、按鈕 Button
按鈕用於點擊後出發一個即時操作。
用法指南：
標記了一個操作命令，響應用戶點擊行爲，觸發相應的業務邏輯。
在設計中，基本有以下四種按鈕類型：
主要按鈕：用於主行動點，一個操作區域只能有一個主按鈕。
默認按鈕：用於沒有主次之分的一組行動點。
線性按鈕：常用於添加操作。
鏈接按鈕：用於次要或外鏈的行動點。
以及四種狀態屬性與上面配合使用。
危險：刪除/移動/修改權限等危險操作，一般需要二次確認。
幽靈：用於背景色比較複雜的地方，常用在首頁/產品頁等展示場景。
禁用：行動點不可用的時候，一般需要文案解釋。
加載中：用於異步操作等待反饋的時候，也可以避免多次提交。
3、單元格 Cell
一個單元格，通常用於數據輸入
4、圖標 Icon
圖標設計，保持一致性和統一性的原則，視覺統一，大小比例統一。
A. 線性圖標
B. 面性圖標
C. 線面結合圖標
5、圖片 Image
有多種圖片填充模式，支持圖片懶加載、加載中提示、加載失敗提示。
6、彈出層 Popup
彈出層容器，用於展示彈窗、信息提示等內容，支持多個彈出層疊加展示
二、表單組件 Form
1、單選框 Radio
在一組備選項中進行單選
2、複選框 Checkbox
一組備選項中進行多選
3、日曆 Calendar
按照日曆形式展示數據的容器。
4、輸入框 Field
表單中的輸入框組件
5、步進器 Stepper
步進器由增加按鈕、減少按鈕和輸入框組成，用於在一定範圍內輸入、調整數字
6、選擇器 Picker
選擇器組件通常與彈出層組件配合使用
7、表單 Form
用於數據錄入、校驗，支持輸入框、單選框、複選框、選擇器、文件上傳等類型組成。用以收集、校驗、提交數據
8、日期選擇器 DatePicker
用於選擇時間，支持日期、時分等時間維度，通常與彈出層組件配合使用。
9、時間選擇器 TimePicker
輸入或選擇日期的控件，用於選擇時間，支持日期、時分等時間維度，通常與彈出層組件配合使用。
10、日期時間選擇器 DateTimePicker
在同一個選擇器裏選擇日期和時間，iOS推薦組件
11、圖片選擇器 ImagePicker
只是圖片選擇器，一般用於上傳圖片前的文件選擇操作，但不包括圖片上傳的功能
12、滑動開關 Switch
在兩個互斥對象進行選擇，如：選擇開或關。
用法指南：
A. 只在 List 中使用。
B. 避免增加額外的文案來描述當前 Switch 的值
13、滑塊 Slider
通過拖動滑塊在一個固定區間內進行選擇，多用於控制屏幕的顯示亮度。
14、上傳 Upload
通過點擊上傳文件
用法指南：
A. 上傳是將信息（文件、文字、圖片、視頻等）通過手機或者上傳工具發佈到遠程服務器上的過程。
B. 當需要上傳一個或一些文件時。
C. 當需要展現上傳的進度時。
15、評分 Rate
評分組件
16、數字鍵盤 NumberKeyboard
數字虛擬鍵盤，可以配合密碼輸入框組件或自定義的輸入框組件使用
一般常見的有：身份證號鍵盤（輸入身份證號使用）、帶有右側欄按鈕的鍵盤（自定義的鍵盤按鈕）、帶有標題的鍵盤（如支付寶輸入金額時的鍵盤）、多個按鍵的鍵盤等（多見於00按鈕）；
17、密碼輸入框 PasswordInput
帶網格的輸入框組件，可以用於輸入支付密碼、短信驗證碼等，通常與數字鍵盤組件配合使用
用法指南：
A. 多用於賬號的支付密碼/交易密碼設計。
B. 用於對輸入的數據類型進行校驗，如短信驗證碼。
C. 用戶登錄註冊時的密碼設置和輸入。
18、文本輸入 InputItem
用於接受單行文本。
用法指南：
A. 支持通過鍵盤或者剪切板輸入文本。
B. 通過光標可以在水平方向進行移動。
C. 對特定格式的文本進行處理，如：隱藏密碼。
19、搜索欄 SearchBar
一般可位於導航欄或 NavBar 下方，通過『取消按鈕』退出激活狀態。
三、反饋組件 Feedback
1、遮罩層 OverLay
創建一個遮罩層，用於強調特定的頁面元素，並阻止用戶進行其他操作
用法指南：
A. 多用於彈框操作應用。
B. 引導用戶進行操作，常見於APP夢層引導頁。
2、下拉菜單 DropdownMenu
將動作或菜單摺疊到下拉菜單中。
用法指南：
當頁面上的操作命令過多時，用此組件可以收納操作元素。點擊或移入觸點，會出現一個下拉菜單。可在列表中進行選擇，並執行相應的命令。
3、動作面板 ActionSheet
底部彈起的模態面板，包含與當前情境相關的多個選項。
4、活動指示器 ActivityIndicator
活動指示器。表明某個任務正在進行中。
用法指南：
A. 不要讓活動指示器靜止，用戶會以爲該任務停滯了。
B. 在某些特定場景下，提供有意義的文案，幫助用戶明白哪個任務正在進行中，如：正在上傳照片。
C. 如果能知道用戶的等待時間，可以使用組件 Progress 來替代。
5、加載 Loading
加載數據時顯示動效
6、消息通知 Notify
常用於消息通知提示。更多用於系統級通知的被動提醒。
7、對話框 Modal
用作顯示系統的重要信息，並請求用戶進行操作反饋，如：進行內容刪除操作時，彈出 Modal 進行二次確認。
用法指南：
A. 儘可能少用。Modal 會打斷用戶操作，只用在重要的時候。
B. 標題應該簡明，不能超過 1 行；描述內容應該簡明、完整，一般不多於 2 行。
C. 操作按鈕最多到 3 個（豎排），一般爲 1-2 個（橫排）；3 個以上建議使用組件 ActionSheet 來完成。
D. 一般將用戶最可能點擊的按鈕，放在右側。另外，取消按鈕應當始終放在左側。
8、彈出框 Dialog
彈出模態框，常用於消息提示、消息確認、在當前頁面內完成特定的交互操作
9、輕提示 Toast
常用於提示系統消息時使用。
10、下拉刷新 PullRefresh
通過下拉手勢觸發，立刻重新加載內容。
11、分享面板 ShareSheet
底部彈起的分享面板，用於展示各社交平臺分享渠道對應的操作按鈕
用法指南：
最常見的是分享到微信、朋友圈、QQ、QQ空間、微博、支付寶、複製連接、生成海報、圖片等信息；
12、滑動單元格 SwipeCell
向左滑動特定單元格，對其單元格可進行相關操作
用法指南：
A. iOS特有滑動方向是向左滑動的交互方式；
B. 多用於消息/信息列表的已讀、未讀、刪除操作等。
C. 在電商APP-購物車頁面的使用場景也很高頻。
寫在最後
工欲善其事,必先利其器，充分了解每個組件所具備的功能和設計用法，能讓你的設計效率提升，這次的關於移動端UI組件：基礎組件、表單組件和反饋組件的分享就到此結束了，下一期會繼續給大家帶來《最全移動端UI組件設計詳解：下篇》的講解，我們下期精彩繼續！