編者按：本文從收納+引導(dǎo)、提示+引導(dǎo)、提示+操作等多個(gè)方面，幫你熟悉常見的交互控件知識。

更多更系統(tǒng)的交互控件知識請看專題 ?? http://www.hx168888.com/zt/interactive-control

交互控件的名稱和定義在學(xué)術(shù)界并沒有統(tǒng)一的標(biāo)準(zhǔn)，也許在說某一個(gè)名字的時(shí)候你并沒有理解它的意思，本文主要是讓大家來見識一下那些常用的交互控件，一起來看看~

一、按照功能劃分

其實(shí)關(guān)于交互控件的名稱和定義在學(xué)術(shù)界并沒有統(tǒng)一的標(biāo)準(zhǔn)，但是目前市場主流的 OS 廠商都有自己的標(biāo)準(zhǔn)定義，分為：Apple 的 Human Interface Guidelines 和 Google 的 Material Design。

可以看到：在 Apple 的 Human Interface Guidelines 中 apple 將交互控件歸入視圖（Views）中，而 Google 的 Material Design 將交互控件歸入組件（Components）中。

在這里我不會嚴(yán)格按照兩家給出的標(biāo)準(zhǔn)對每一個(gè)控件都做詳盡的贅述，我將把工作中常用的組件按照功能來劃分一下并參考 iOS 和 Google 對于這些組件的描述，來向大家簡單梳理一下他們的定義和用法。

二、模態(tài)與非模態(tài)

在正式開始之前，我先簡單介紹一下模態(tài)與非模態(tài)。下面是維基百科關(guān)于模態(tài)窗口（Modal window）的標(biāo)準(zhǔn)解釋。其含義就是：模態(tài)窗口下，用戶被強(qiáng)制必須先與當(dāng)前視窗進(jìn)行交互才能回到主窗口，此時(shí)用戶的行為是線性的。由于其會打斷用戶操作并且強(qiáng)制用戶進(jìn)行交互，因此模態(tài)控件的使用必須謹(jǐn)慎。

反之，非模態(tài)即用戶不被強(qiáng)制先與當(dāng)前視窗進(jìn)行交互也可以與主窗口直接進(jìn)行交互，用戶行為是非線性的，擁有更多主動權(quán)。

三、收納+引導(dǎo)

這類控件包括 Popup（或者叫 Popover）、Action views、Action sheets/ Sheets_bottom、Dropdown menu，其共同特點(diǎn)是由用戶主動觸發(fā)（默認(rèn)隱藏）、輕量化、指向性較強(qiáng)、包含操作、不會自動消失。

這類控件多用于屏幕空間的移動設(shè)備，作為低頻但重要的操作入口（Dropdown menu 在 PC 的應(yīng)用場景同樣很多）。這一類控件既包含模態(tài)又包含非模態(tài)。

1. Popup（Popover）&Dropdown menu

iOS 的 Popup（Popover）與 Android 的 Dropdown menu 的使用場景和展現(xiàn)形式基本類似，主要用于收納一些默認(rèn)不展示的低頻選項(xiàng)， 不過值得注意的是：Popup 和 Dropdown menu 出現(xiàn)的位置和方式與其入口的位置是有很大關(guān)系的，特別當(dāng)入口按鈕是位于屏幕邊緣的時(shí)候尤其需要注意。

此外，Popup（Popover）自帶箭頭的強(qiáng)指示性，同樣適用于展示隱藏操作或新功能上線后的用戶教育。

2. Action views&Action sheets

不同于 Popup（Popover）和 Dropdown menu 幾乎可以出現(xiàn)在屏幕的任何位置，Action views 和 Action sheets/ Sheets_bottom 一般出現(xiàn)在屏幕底部。同樣，他們也是用于容納并展示低頻但重要的操作。

四、提示+引導(dǎo)

這類控件包括 Toast、Snackbars、HUD，其共同特點(diǎn)是：不一定由用戶主動觸發(fā)、輕量化且一般不包含操作，展示時(shí)間較短（一般在 3 秒以內(nèi)）且會自動消失，這類控件多用于系統(tǒng)狀態(tài)或者用戶操作結(jié)果的展示。同樣，這類控件基本都是非模態(tài)的。

1. Toast

根據(jù)維基和 android 開發(fā)者指南的解釋：Toast 是一種小巧的作為操作反饋的信息窗口，并且會自動消失。

有意思的是，據(jù)說一位微軟前員工在開發(fā) MSN Messenger 時(shí)，覺得 MSN 彈出通知方式很像烤面包（Toast）烤熟時(shí)從烤面包機(jī)（Toaster）里彈出來一樣，因此把這種提示方式命名為 Toast，后來這位微軟前員工帶著這一習(xí)慣命名跳槽去了 Google。

其實(shí)，在實(shí)際應(yīng)用中，Toast 的應(yīng)用延伸較多，除了作為操作反饋的信息展示窗口，還常常被用來作為系統(tǒng)狀態(tài)更新時(shí)的提示，并且在出現(xiàn)的位置上，也沒有非常嚴(yán)格的定義。

2. Snackbars

按照使用場景和元素來說，Snackbars 可以簡單理解為 Toast 的升級版本，但根據(jù) Google Material Design 的定義，我們可以發(fā)現(xiàn)：Snackbars 與 Toast 的主要差別在于前者可以包含一個(gè)操作按鈕，而后者不包含。

在實(shí)際應(yīng)用中，Snackbars 的應(yīng)用范圍其實(shí)比較廣，我們會發(fā)現(xiàn)：Snackbars 主要被用在展示一些對用戶很重要的操作結(jié)果，比如：刪除文件或者快速引導(dǎo)。

3. HUD

HUD 全稱叫做 UIProgressHUD，其實(shí)在 iOS Human Interface Guidelines 中并沒有 Toast 和 Snackbars 這樣的定義，但是與之對應(yīng)的是 UI Progress HUD（直譯為界面進(jìn)程浮層），這種控件是 iOS 系統(tǒng)私有的，在 App Store 上線的 app 原則上是不能直接獲取的，所以出現(xiàn)了許多模仿的第三方控件（主要是開放者用以與 iOS 的 UI 風(fēng)格保持一致的嵌入式組件）。

4. Toast& Snackbars& HUD 小結(jié)

其實(shí)，我們這樣理解這三者之間的關(guān)系更加簡單明了：Google 的 Toast≈iOS的HUD，Snackbars=Toast+操作按鈕，Toast+Snackbars+HUD都是用來展示App或者系統(tǒng)內(nèi)的狀態(tài)信息。

五、提示+操作

這類控件主要是 Dialogs/ Alerts，嚴(yán)格意義上來說，其實(shí) Alerts（警告型對話框）也是屬于 Dialogs 中的一種。Google 的 Material Design 將 Dialogs 分為：Alert Dialog、Simple Dialog、Communication Dialog 和 Full-screen Dialog，但是在 iOS 中并沒有定義 Dialogs 這種控件，而只是對 Alerts 做了定義。

對話框的精髓在于讓用戶聚焦，它一般有兩種使用場景：

1. 系統(tǒng)的關(guān)鍵狀態(tài)提示，并且如果不處理當(dāng)前狀態(tài)會影響到用戶的下一步操作，如：系統(tǒng)錯(cuò)誤或者電量過低。
2. 需要用戶特別注意的關(guān)鍵信息處理，如：刪除文件、支付確認(rèn) Google Material Design 關(guān)于對話框的定義。

1. Alert Dialog

由于警示型對話框出現(xiàn)的形式非常直接（包含用戶主動觸發(fā)與系統(tǒng)自動觸發(fā)），且常常會打斷用戶當(dāng)前操作行為（強(qiáng)打擾性），因此絕大部分的警示型對話框被用在關(guān)鍵信息處理或者關(guān)鍵狀態(tài)提示上，

如：

1. 文件操作場景 — 刪除文件，放棄編輯；
2. 支付場景 — 支付二次確認(rèn)，余額不足提示；
3. 重要狀態(tài)改變場景 — 手機(jī)電量低，版本更新。

值得注意的是：在警示型對話框中的按鈕文案使用一定要避免歧義，不要讓用戶做選擇變成一道哲學(xué)命題。

Google Material Design 總結(jié)了一些 Alert Dialog 按鈕文案的一些基本規(guī)則：

① 文案要釋義操作行為，比如：當(dāng)問題為“您是否要放棄編輯當(dāng)前的郵件”相比于用簡單的“是”或“否”，使用“放棄編輯”和“繼續(xù)編輯”用戶更能清楚操作后的預(yù)期效果。

② 從用戶習(xí)慣來說，對于當(dāng)前提問的肯定回答應(yīng)置于右側(cè)，而否定回答應(yīng)置于左側(cè) 。

同樣接著上一個(gè)例子，當(dāng)問及“您是否要放棄編輯當(dāng)前的郵件”時(shí)，“放棄編輯”應(yīng)該置于右側(cè)，而“繼續(xù)編輯”應(yīng)該置于左側(cè)。

③ 對于 APP 內(nèi)或系統(tǒng)重要狀態(tài)的提示，不要給多余的按鈕而讓用戶費(fèi)解。

④ 最好不要在警示型對話框中放置諸如“了解更多”等第三個(gè)按鈕，因?yàn)樗鼤⒂脩粢龑?dǎo)至其他內(nèi)容而導(dǎo)致用戶中斷/忘記當(dāng)前對話框的操作。

2. Simple Dialog

簡易對話框用以展示用戶做即時(shí)決斷的選項(xiàng)，選項(xiàng)本身既是信息又是按鈕，不包含單獨(dú)的文案按鈕。

一般用于多選其一且不用二次確認(rèn)的場景，如：地區(qū)選擇、語言選擇、郵箱地址選擇等。

3. Confirmation Dialog

確認(rèn)對話框用于需要用戶進(jìn)行選擇并手動確認(rèn)的場景，不同于簡易對話框，用戶可以選擇一項(xiàng)或者多項(xiàng)，并且包含確認(rèn)和取消按鈕。

4. Full-screen Dialog

全屏對話框包含一些列的操作任務(wù)，這些操作任務(wù)可能需要用到鍵盤輸入并且還可能包含子對話框，典型的使用場景如：填寫表單、設(shè)置日程等。

本文科普到這就結(jié)束了，更多的干貨，建議大家閱讀相關(guān)的文章推薦。