關於提示框的那些事兒
在日常工作中我們經常會看到各種型別的提示框,在官方的規範裡,它們都有各自的叫法以及用法,什麼場景下用什麼樣的提示框,也早已有了定義。只是有些提示框型別極其相似,難免有人會在工作中將其歸錯類別。長此以往,反而會忘記它原本的樣子。
一、提示框的作用
在細分提示框的種類之前,我想先說一下它的作用,提示框作為一個介面中的一個必不可少的元件,肯定是有它存在的獨特的意義,獨一無二,無法取代。提示框主要的作用有三個:
提醒使用者
在使用者操作時,給予提醒,特別是一些操作會影響到使用者的利益的時候,去提醒他們,做二次確認,減少因為誤操作而帶來的損失。
選擇權
進行重要的操作,比如刪除所有訂單,且刪除後不可復原等時,把選擇權給使用者自己,讓他們自己決定當前的操作是否進行下去。
知情權
告知使用者當前所發生的事情,讓他們對當前狀態有一個預估,知道發生什麼事情,有知情權。
二、 提示框的種類
提示框的種類按照不同的緯度劃分的話,特別多。所以我以一個最簡單的緯度,模態和非模態,模態框指的是,當它出現的時候,使用者必須對其進行操作,確定或者取消,才能關閉它,進行下一步。而非模態框則指的是不需要使用者進行操作,它自己會在設定的時間內,自動消失,使用者只能等待它自己默默的消失。
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)