關於提示框的那些事兒
在日常工作中我們經常會看到各種型別的提示框，在官方的規範裡，它們都有各自的叫法以及用法，什麼場景下用什麼樣的提示框，也早已有了定義。只是有些提示框型別極其相似，難免有人會在工作中將其歸錯類別。長此以往，反而會忘記它原本的樣子。
一、提示框的作用
在細分提示框的種類之前，我想先說一下它的作用，提示框作為一個介面中的一個必不可少的元件，肯定是有它存在的獨特的意義，獨一無二，無法取代。提示框主要的作用有三個:
提醒使用者
在使用者操作時，給予提醒，特別是一些操作會影響到使用者的利益的時候，去提醒他們，做二次確認，減少因為誤操作而帶來的損失。
選擇權
進行重要的操作，比如刪除所有訂單，且刪除後不可復原等時，把選擇權給使用者自己，讓他們自己決定當前的操作是否進行下去。
知情權
告知使用者當前所發生的事情，讓他們對當前狀態有一個預估，知道發生什麼事情，有知情權。
二、 提示框的種類
提示框的種類按照不同的緯度劃分的話，特別多。所以我以一個最簡單的緯度，模態和非模態，模態框指的是，當它出現的時候，使用者必須對其進行操作，確定或者取消，才能關閉它，進行下一步。而非模態框則指的是不需要使用者進行操作，它自己會在設定的時間內，自動消失，使用者只能等待它自己默默的消失。
1. 模態對話方塊 —— Dialogs
關於Dialogs，Material Design 是這樣說的：“Dialogs (提示框)用於提示使用者作一些決定，或者是完成某個任務時需要的一些其它額外的資訊。 Dialog可以是用一種 取消/確定 的簡單應答模式，也可以是自定義佈局的複雜模式，比如說一些文字設定或者是文字輸入 ”。
簡單來說，就是 Dialog 主要是去提示使用者當前頁面需要去做選擇，而使用者必須對提示框的內容進行響應，才能進行其他的操作。
Dialog 一般包含標題、內容區域、操作區域
操作區域一般是有兩個功能按鈕，通常是一個肯定的事件和否定(與肯定的事件對立)的按鈕組成。一般積極的、肯定的、或者說產品希望使用者做的選擇，會放在右邊。肯定的事件也可以是具有破壞性的，比如“刪除、放棄”等。
肯定事件和否定事件除了可以使用"確認"/"取消"外，也可以是其它一些動詞或者是動詞短語來代替，比如“升級、點錯了”等。
延展 —— 自定義提示框
當然也有隻包含一個功能按鈕的情況，這個時候需要注意的是彈出的訊息是否重要到非要使用者點選確認，如果是，那就用 Dialog，如下圖微信，就是預設的只有一個功能按鈕的 Dialog，如果不是，可以考慮用其他的，比如 Toast。
由於 Dialog 的強制要求使用者進行操作，多少會讓使用者在體驗上有所不適，所以就在 Dialog 的基礎上延展出了其他的樣式。這種提示框和也有操作按鈕，它和 Dialog 最大的區別就是點選操作按鈕，或者提示框外的任何位置，都可以關閉該提示框，降低了關閉提示框的難度。但它不算嚴格意義上的 Dialog。
現在比較多的用在自定義的提示框上，比如一些運營活動之類的，自定義的提示框能更好的傳達內容，從而吸引使用者點選。
特殊情況
如果 Dialog 出現三個或以上的功能框，會增加使用者的選擇負擔，而且橫向顯示的話在視覺上也顯得擁擠，所以就有了一個由 Dialog 延伸出來的 Actionbar，它比 Dialog 擁有更多的功能按鈕，能夠給使用者提供更多的功能選擇。
Acionbar 一般都有一個預設的“取消”功能按鈕，當然也可以沒有，點選該按鈕後關閉彈框，使用者點選彈窗以外的區域時相當於點選了“取消”按鈕，也會關閉彈框。
當功能按鈕數量過多時，文字列表的形式不適合展示，可以用圖形加文字的形式來展示。
2. 非模態對話方塊 —— Snackbar
關於Snackbar Material Design是這樣說的：“Snackbar 是一種針對操作的輕量級反饋機制，常以一個小的彈出框的形式，出現在手機螢幕下方或者桌面左下方。它們出現在螢幕所有層的最上方，包括浮動操作按鈕。
它們會在超時或者使用者在螢幕其他地方觸控之後自動消失。Snackbar 可以在螢幕上滑動關閉。當它們出現時，不會阻礙使用者在螢幕上的輸入，並且也不支援輸入。螢幕上同時最多隻能顯示一個 Snackbar”。
簡單來說 Snackbar 是介於 Dialog 和 Toast 兩者之間的一種輕量級反饋機制，以文字形式存在，可以包含0-1個操作，不能是取消按鈕 。
當只有文字形式出現的時候，形式和 Toast 一樣，不需要使用者進行操作，等預設時長結束後會自動消失；不過它比 Toast 多的一點是，使用者可以在螢幕上滑動將它關閉。
需要注意的是 Snackbar 不應該持續存在或相互堆疊，也不要阻擋了浮動操作按鈕。
延展 —— 引導浮層
由於 Snackbar 太受限制，不能有圖示，只能以文字形式存在。在現在的 APP 裡用的越來越少，少到都找不到什麼例子。而現實中又需要一種介於 Toast 和 Dialog 之間的一種輕量級的操作提示。所以就延伸出了另外一種樣式，暫且將它歸為“引導浮層”吧。
引導浮層和 Snackbar 最大的區別是，它可以有圖示、圖片，甚至還可以引導使用者去新的頁面，這也是它更有歡迎的原因所在。
3. 非模態對話方塊 —— Toast
關於 Toast Material Design 是這樣說的：“Toast 同 Snackbar 非常相似，但是 Toast 並不包含操作也不能從螢幕上滑動關閉”。
簡單來說 Toast 主要的作用是對使用者當前的操作給予反饋，使用者不需要對彈框的內容進行響應，相對的也無法對它們做出控制，只能等它設定的預設時長結束，自動消失。它可以出現在頁面的任何位置，可以是純文字的，也可以是圖形帶文字的。
三、特別說明
提示框的作用是用來提示資訊的，但不是所有的提示資訊都需要用到提示框的，因為提示框怎麼的都會 “打擾” 到使用者的操作，所以能有別的解決方式的時候，優先考慮別的方式。
提示框存在的有一個原因就是在使用者犯錯之前及時制止他，所以如果有其他的方式能夠在提示框出現之前就規避錯誤，優先使用。比如密碼那一行有一個小眼睛的icon，點選之後顯示密碼，當用戶認為自己沒有輸錯密碼，但卻提醒密碼錯誤時，多次嘗試來找到錯誤所在不如直接點選顯示密碼的 icon 體驗來的好。
再比如像支付寶的這種，把提示資訊放置在按鈕上，這樣就避擴音示框的出現打擾到使用者的操作，而且放置在按鈕上更加明顯，也不會被使用者忽略。
四、總結
1. 提示框的三個作用
提醒使用者，在他們犯錯之前及時制止；
給使用者選擇權，讓他們自己決定當前的操作是否進行；
告知使用者當前所發生的事情，讓他們對當前狀態有一個預估，知道發生什麼事情，有知情權；
2. 提示框的型別以及區別
Dialog —— 模態對話方塊，需要使用者對當前內容進行操作，不會自動消失，會打斷使用者的之前的操作流程；
Snackbar——非模態對話方塊，使用者可以對當前內容進行操作，也可以等它自動消失，不會打斷使用者的當前操作；
Toast —— 非模態對話方塊，使用者無法對當前內容進行操作，只能等它自動消失；
3. 不要濫用提示框
提示框出現的時候怎麼都會打擾到使用者的當前操作，所以能有別的方法時候，優先使用其他的提示方式；
4.視覺統一
同一個 APP 內的不同提示框需要在視覺上保持統一，要有章法可循。
參考連結：
ofollow,noindex" target="_blank">https://wiki.jikexueyuan.com/project/material-design/components/snackbars-and-toasts.html Snackbars 與 Toasts
https://wiki.jikexueyuan.com/project/material-design/components/dialogs.html 提示框(Dialogs)