上一期給大家講解了《最全面的移動端UI組件設(shè)計(jì)詳解：上篇》，主要分享了：布局組件和導(dǎo)航組件2個部分；這次給大家?guī)恚?strong>基礎(chǔ)組件、表單組件和反饋組件詳解，希望你在設(shè)計(jì)APP、小程序、H5頁面中，能熟練使用和理解各種的 UI組件，今天給大家總結(jié)了關(guān)于移動端UI組件，希望可以在工作中幫到你。

Web端UI組件設(shè)計(jì)詳解：《最全Web端UI組件設(shè)計(jì)詳解》

一、基礎(chǔ)組件 Basis

1、狀態(tài)欄 StatusBar

用于顯示當(dāng)前設(shè)備的時間、電池電量、藍(lán)牙、信號、定位等各種狀態(tài)。

2、按鈕 Button

按鈕用于點(diǎn)擊后出發(fā)一個即時操作。

用法指南：

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

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

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

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

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

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

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

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

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

禁用：行動點(diǎn)不可用的時候，一般需要文案解釋。

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

3、單元格 Cell

一個單元格，通常用于數(shù)據(jù)輸入

4、圖標(biāo) Icon

圖標(biāo)設(shè)計(jì)，保持一致性和統(tǒng)一性的原則，視覺統(tǒng)一，大小比例統(tǒng)一。

A. 線性圖標(biāo)

B. 面性圖標(biāo)

C. 線面結(jié)合圖標(biāo)

5、圖片 Image

有多種圖片填充模式，支持圖片懶加載、加載中提示、加載失敗提示。

6、彈出層 Popup

彈出層容器，用于展示彈窗、信息提示等內(nèi)容，支持多個彈出層疊加展示

二、表單組件 Form

1、單選框 Radio

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

2、復(fù)選框 Checkbox

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

3、日歷 Calendar

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

4、輸入框 Field

表單中的輸入框組件

5、步進(jìn)器 Stepper

步進(jìn)器由增加按鈕、減少按鈕和輸入框組成，用于在一定范圍內(nèi)輸入、調(diào)整數(shù)字

6、選擇器 Picker

選擇器組件通常與彈出層組件配合使用

7、表單 Form

用于數(shù)據(jù)錄入、校驗(yàn)，支持輸入框、單選框、復(fù)選框、選擇器、文件上傳等類型組成。用以收集、校驗(yàn)、提交數(shù)據(jù)

8、日期選擇器 DatePicker

用于選擇時間，支持日期、時分等時間維度，通常與彈出層組件配合使用。

9、時間選擇器 TimePicker

輸入或選擇日期的控件，用于選擇時間，支持日期、時分等時間維度，通常與彈出層組件配合使用。

10、日期時間選擇器 DateTimePicker

在同一個選擇器里選擇日期和時間，iOS推薦組件

11、圖片選擇器 ImagePicker

只是圖片選擇器，一般用于上傳圖片前的文件選擇操作，但不包括圖片上傳的功能

12、滑動開關(guān) Switch

在兩個互斥對象進(jìn)行選擇，如：選擇開或關(guān)。

用法指南：

A. 只在 List 中使用。

B. 避免增加額外的文案來描述當(dāng)前 Switch 的值

13、滑塊 Slider

通過拖動滑塊在一個固定區(qū)間內(nèi)進(jìn)行選擇，多用于控制屏幕的顯示亮度。

14、上傳 Upload

通過點(diǎn)擊上傳文件

用法指南：

A. 上傳是將信息（文件、文字、圖片、視頻等）通過手機(jī)或者上傳工具發(fā)布到遠(yuǎn)程服務(wù)器上的過程。

B. 當(dāng)需要上傳一個或一些文件時。

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

15、評分 Rate

評分組件

16、數(shù)字鍵盤 NumberKeyboard

數(shù)字虛擬鍵盤，可以配合密碼輸入框組件或自定義的輸入框組件使用

一般常見的有：身份證號鍵盤（輸入身份證號使用）、帶有右側(cè)欄按鈕的鍵盤（自定義的鍵盤按鈕）、帶有標(biāo)題的鍵盤（如支付寶輸入金額時的鍵盤）、多個按鍵的鍵盤等（多見于00按鈕）；

17、密碼輸入框 PasswordInput

帶網(wǎng)格的輸入框組件，可以用于輸入支付密碼、短信驗(yàn)證碼等，通常與數(shù)字鍵盤組件配合使用、

用法指南：

A. 多用于賬號的支付密碼/交易密碼設(shè)計(jì)。

B. 用于對輸入的數(shù)據(jù)類型進(jìn)行校驗(yàn)，如短信驗(yàn)證碼。

C. 用戶登錄注冊時的密碼設(shè)置和輸入。

18、文本輸入 InputItem

用于接受單行文本。

用法指南：

A. 支持通過鍵盤或者剪切板輸入文本。

B. 通過光標(biāo)可以在水平方向進(jìn)行移動。

C. 對特定格式的文本進(jìn)行處理，如：隱藏密碼。

19、搜索欄 SearchBar

一般可位于導(dǎo)航欄或 NavBar 下方，通過『取消按鈕』退出激活狀態(tài)。

三、反饋組件 Feedback

1、遮罩層 OverLay

創(chuàng)建一個遮罩層，用于強(qiáng)調(diào)特定的頁面元素，并阻止用戶進(jìn)行其他操作

用法指南：

A. 多用于彈框操作應(yīng)用。

B. 引導(dǎo)用戶進(jìn)行操作，常見于APP夢層引導(dǎo)頁。

2、下拉菜單 DropdownMenu

將動作或菜單折疊到下拉菜單中。

用法指南：

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

3、動作面板 ActionSheet

底部彈起的模態(tài)面板，包含與當(dāng)前情境相關(guān)的多個選項(xiàng)。

4、活動指示器 ActivityIndicator

活動指示器。表明某個任務(wù)正在進(jìn)行中。

用法指南：

A. 不要讓活動指示器靜止，用戶會以為該任務(wù)停滯了。

B. 在某些特定場景下，提供有意義的文案，幫助用戶明白哪個任務(wù)正在進(jìn)行中，如：正在上傳照片。

C. 如果能知道用戶的等待時間，可以使用組件 Progress 來替代。

5、加載 Loading

加載數(shù)據(jù)時顯示動效

6、消息通知 Notify

常用于消息通知提示。更多用于系統(tǒng)級通知的被動提醒。

7、對話框 Modal

用作顯示系統(tǒng)的重要信息，并請求用戶進(jìn)行操作反饋，如：進(jìn)行內(nèi)容刪除操作時，彈出 Modal 進(jìn)行二次確認(rèn)。

用法指南：

A. 盡可能少用。Modal 會打斷用戶操作，只用在重要的時候。

B. 標(biāo)題應(yīng)該簡明，不能超過 1 行；描述內(nèi)容應(yīng)該簡明、完整，一般不多于 2 行。

C. 操作按鈕最多到 3 個（豎排），一般為 1-2 個（橫排）；3 個以上建議使用組件 ActionSheet 來完成。

D. 一般將用戶最可能點(diǎn)擊的按鈕，放在右側(cè)。另外，取消按鈕應(yīng)當(dāng)始終放在左側(cè)。

8、彈出框 Dialog

彈出模態(tài)框，常用于消息提示、消息確認(rèn)、在當(dāng)前頁面內(nèi)完成特定的交互操作

9、輕提示 Toast

常用于提示系統(tǒng)消息時使用。

10、下拉刷新 PullRefresh

通過下拉手勢觸發(fā)，立刻重新加載內(nèi)容。

11、分享面板 ShareSheet

底部彈起的分享面板，用于展示各社交平臺分享渠道對應(yīng)的操作按鈕

用法指南：

最常見的是分享到微信、朋友圈、QQ、QQ空間、微博、支付寶、復(fù)制連接、生成海報(bào)、圖片等信息；

12、滑動單元格 SwipeCell

向左滑動特定單元格，對其單元格可進(jìn)行相關(guān)操作

用法指南：

A. iOS特有滑動方向是向左滑動的交互方式；

B. 多用于消息/信息列表的已讀、未讀、刪除操作等。

C. 在電商APP-購物車頁面的使用場景也很高頻。

寫在最后

工欲善其事,必先利其器，充分了解每個組件所具備的功能和設(shè)計(jì)用法，能讓你的設(shè)計(jì)效率提升，這次的關(guān)于移動端UI組件：基礎(chǔ)組件、表單組件和反饋組件的分享就到此結(jié)束了，下一期會繼續(xù)給大家?guī)?strong>《最全移動端UI組件設(shè)計(jì)詳解：下篇》的講解，我們下期精彩繼續(xù)！

請私信我回復(fù)“666”，為嚴(yán)哥打Call~，還有更多驚喜哦~

.............................................................

UI嚴(yán)選—越努力，越幸運(yùn)