上一期給大家講解了《最全面的移動端UI組件設(shè)計詳解：上篇》，主要分享了：布局組件和導(dǎo)航組件2個部分啥箭；這次給大家?guī)恚?strong>基礎(chǔ)組件付枫、表單組件和反饋組件
詳解莱找，希望你在設(shè)計APP诞丽、小程序踊跟、H5頁面中覆醇，能熟練使用和理解各種的 UI組件捆姜，今天給大家總結(jié)了關(guān)于移動端UI組件妆够，希望可以在工作中幫到你识啦。
Web端UI組件設(shè)計詳解：
一、基礎(chǔ)組件?Basis
1神妹、狀態(tài)欄 StatusBar
用于顯示當前設(shè)備的時間颓哮、電池電量、藍牙鸵荠、信號冕茅、定位等各種狀態(tài)。
2腰鬼、按鈕 Button
按鈕用于點擊后出發(fā)一個即時操作嵌赠。
用法指南：
標記了一個操作命令，響應(yīng)用戶點擊行為熄赡，觸發(fā)相應(yīng)的業(yè)務(wù)邏輯姜挺。
在設(shè)計中，基本有以下四種按鈕類型：
主要按鈕：用于主行動點彼硫，一個操作區(qū)域只能有一個主按鈕炊豪。
默認按鈕：用于沒有主次之分的一組行動點。
線性按鈕：常用于添加操作拧篮。
鏈接按鈕：用于次要或外鏈的行動點词渤。
以及四種狀態(tài)屬性與上面配合使用。
危險：刪除/移動/修改權(quán)限等危險操作串绩，一般需要二次確認缺虐。
幽靈：用于背景色比較復(fù)雜的地方，常用在首頁/產(chǎn)品頁等展示場景礁凡。
禁用：行動點不可用的時候高氮，一般需要文案解釋。
加載中：用于異步操作等待反饋的時候顷牌，也可以避免多次提交剪芍。
3、單元格?Cell
一個單元格窟蓝，通常用于數(shù)據(jù)輸入
4罪裹、圖標??Icon
圖標設(shè)計，保持一致性和統(tǒng)一性的原則，視覺統(tǒng)一状共，大小比例統(tǒng)一套耕。
A. 線性圖標
B. 面性圖標
C. 線面結(jié)合圖標
5、圖片?Image
有多種圖片填充模式口芍，支持圖片懶加載箍铲、加載中提示、加載失敗提示鬓椭。
6、彈出層? Popup
彈出層容器关划，用于展示彈窗小染、信息提示等內(nèi)容，支持多個彈出層疊加展示
二贮折、表單組件??Form
1裤翩、單選框? Radio
在一組備選項中進行單選
2、復(fù)選框?Checkbox
一組備選項中進行多選
3调榄、日歷??Calendar
按照日歷形式展示數(shù)據(jù)的容器踊赠。
4、輸入框?Field
表單中的輸入框組件
5每庆、步進器??Stepper
步進器由增加按鈕筐带、減少按鈕和輸入框組成，用于在一定范圍內(nèi)輸入缤灵、調(diào)整數(shù)字
6伦籍、選擇器??Picker
選擇器組件通常與彈出層組件配合使用
7、表單??Form
用于數(shù)據(jù)錄入腮出、校驗帖鸦，支持輸入框、單選框胚嘲、復(fù)選框作儿、選擇器、文件上傳等類型組成馋劈。用以收集攻锰、校驗、提交數(shù)據(jù)
8侣滩、日期選擇器??DatePicker
用于選擇時間口注，支持日期、時分等時間維度君珠，通常與彈出層組件配合使用寝志。
9、時間選擇器??TimePicker
輸入或選擇日期的控件，用于選擇時間材部，支持日期毫缆、時分等時間維度，通常與彈出層組件配合使用乐导。
10苦丁、日期時間選擇器??DateTimePicker
在同一個選擇器里選擇日期和時間，iOS推薦組件
11物臂、圖片選擇器??ImagePicker
只是圖片選擇器旺拉，一般用于上傳圖片前的文件選擇操作，但不包括圖片上傳的功能
12棵磷、滑動開關(guān) Switch
在兩個互斥對象進行選擇蛾狗，如：選擇開或關(guān)。
用法指南：
A. 只在 List 中使用仪媒。
B. 避免增加額外的文案來描述當前 Switch 的值
13沉桌、滑塊??Slider
通過拖動滑塊在一個固定區(qū)間內(nèi)進行選擇，多用于控制屏幕的顯示亮度算吩。
14留凭、上傳??Upload
通過點擊上傳文件
用法指南：
A. 上傳是將信息（文件、文字偎巢、圖片蔼夜、視頻等）通過手機或者上傳工具發(fā)布到遠程服務(wù)器上的過程。
B. 當需要上傳一個或一些文件時艘狭。
C. 當需要展現(xiàn)上傳的進度時挎扰。
15、評分?Rate
評分組件
16巢音、數(shù)字鍵盤??NumberKeyboard
數(shù)字虛擬鍵盤遵倦，可以配合密碼輸入框組件或自定義的輸入框組件使用
一般常見的有：身份證號鍵盤（輸入身份證號使用）、帶有右側(cè)欄按鈕的鍵盤（自定義的鍵盤按鈕）官撼、帶有標題的鍵盤（如支付寶輸入金額時的鍵盤）梧躺、多個按鍵的鍵盤等（多見于00按鈕）；
17傲绣、密碼輸入框? ?PasswordInput
帶網(wǎng)格的輸入框組件掠哥，可以用于輸入支付密碼、短信驗證碼等秃诵，通常與數(shù)字鍵盤組件配合使用
用法指南：
A. 多用于賬號的支付密碼/交易密碼設(shè)計续搀。
B. 用于對輸入的數(shù)據(jù)類型進行校驗，如短信驗證碼菠净。
C. 用戶登錄注冊時的密碼設(shè)置和輸入禁舷。
18彪杉、文本輸入?InputItem
用于接受單行文本。
用法指南：
A. 支持通過鍵盤或者剪切板輸入文本牵咙。
B. 通過光標可以在水平方向進行移動派近。
C. 對特定格式的文本進行處理，如：隱藏密碼洁桌。
19渴丸、搜索欄?SearchBar
一般可位于導(dǎo)航欄或 NavBar 下方，通過『取消按鈕』退出激活狀態(tài)另凌。
三谱轨、反饋組件??Feedback
1、遮罩層?OverLay
創(chuàng)建一個遮罩層途茫，用于強調(diào)特定的頁面元素碟嘴，并阻止用戶進行其他操作
用法指南：
A. 多用于彈框操作應(yīng)用。
B. 引導(dǎo)用戶進行操作囊卜，常見于APP夢層引導(dǎo)頁。
2错沃、下拉菜單?DropdownMenu
將動作或菜單折疊到下拉菜單中栅组。
用法指南：
當頁面上的操作命令過多時，用此組件可以收納操作元素枢析。點擊或移入觸點玉掸，會出現(xiàn)一個下拉菜單⌒讶可在列表中進行選擇司浪，并執(zhí)行相應(yīng)的命令。
3把沼、動作面板??ActionSheet
底部彈起的模態(tài)面板啊易，包含與當前情境相關(guān)的多個選項。
4饮睬、活動指示器?ActivityIndicator
活動指示器租谈。表明某個任務(wù)正在進行中。
用法指南：
A. 不要讓活動指示器靜止捆愁，用戶會以為該任務(wù)停滯了割去。
B. 在某些特定場景下，提供有意義的文案昼丑，幫助用戶明白哪個任務(wù)正在進行中呻逆，如：正在上傳照片。
C.?如果能知道用戶的等待時間菩帝，可以使用組件 Progress 來替代咖城。
5茬腿、加載?Loading
加載數(shù)據(jù)時顯示動效
6、消息通知??Notify
常用于消息通知提示酒繁。更多用于系統(tǒng)級通知的被動提醒滓彰。
7、對話框??Modal
用作顯示系統(tǒng)的重要信息州袒，并請求用戶進行操作反饋揭绑，如：進行內(nèi)容刪除操作時，彈出 Modal 進行二次確認郎哭。
用法指南：
A.?盡可能少用他匪。Modal 會打斷用戶操作，只用在重要的時候夸研。
B.?標題應(yīng)該簡明邦蜜，不能超過 1 行；描述內(nèi)容應(yīng)該簡明亥至、完整悼沈，一般不多于 2 行。
C.?操作按鈕最多到 3 個（豎排）姐扮，一般為 1-2 個（橫排）絮供；3 個以上建議使用組件 ActionSheet 來完成。
D. 一般將用戶最可能點擊的按鈕茶敏，放在右側(cè)壤靶。另外，取消按鈕應(yīng)當始終放在左側(cè)惊搏。
8贮乳、彈出框??Dialog
彈出模態(tài)框，常用于消息提示恬惯、消息確認向拆、在當前頁面內(nèi)完成特定的交互操作
9、輕提示?Toast
常用于提示系統(tǒng)消息時使用宿崭。
10亲铡、下拉刷新??PullRefresh
通過下拉手勢觸發(fā)，立刻重新加載內(nèi)容葡兑。
11奖蔓、分享面板??ShareSheet
底部彈起的分享面板，用于展示各社交平臺分享渠道對應(yīng)的操作按鈕
用法指南：
最常見的是分享到微信讹堤、朋友圈吆鹤、QQ、QQ空間洲守、微博疑务、支付寶沾凄、復(fù)制連接、生成海報知允、圖片等信息撒蟀；
12、滑動單元格??SwipeCell
向左滑動特定單元格温鸽，對其單元格可進行相關(guān)操作
用法指南：
A. iOS特有滑動方向是向左滑動的交互方式保屯；
B. 多用于消息/信息列表的已讀、未讀涤垫、刪除操作等姑尺。
C. 在電商APP-購物車頁面的使用場景也很高頻。
寫在最后
工欲善其事,必先利其器蝠猬，充分了解每個組件所具備的功能和設(shè)計用法切蟋，能讓你的設(shè)計效率提升，這次的關(guān)于移動端UI組件：基礎(chǔ)組件榆芦、表單組件和反饋組件的分享就到此結(jié)束了柄粹，下一期會繼續(xù)給大家?guī)?strong>《最全移動端UI組件設(shè)計詳解：下篇》的講解，我們下期精彩繼續(xù)匆绣！
