這一篇你將看到:
1、彈窗的定義
2、不同類型彈窗的特點及使用場景
3、常見使用誤區(qū)
一、彈窗的定義:
彈窗是App中一種常見的交互方式,主要具有“傳遞信息”和“獲取反饋”兩大功能。按類別劃分,可分為“模態(tài)彈窗”和“非模態(tài)彈窗”兩大類。
模態(tài)彈窗:
強制打斷用戶當(dāng)前操作行為,傳遞給用戶信息,同時用戶必須進行操作回應(yīng),否則無法使用其他功能。
包含:Dialog/alerts(警告框、對話框); Actionbar、Action Sheets、Acitivity View(動作欄、操作列表、活動視圖); Popover/Popup(彈出框、浮層)
非模態(tài)彈窗:
不影響用戶當(dāng)前操作行為,傳遞給用戶信息,用戶不用對其進行回應(yīng),一般出現(xiàn)幾秒后消失。
包含:Toast / HUD(提示框);Snackbar(底部彈窗)
二、彈窗介紹:
1.1、Dialog/alerts(警告框、對話框)
顧名思義此類彈窗具有通知、警告的作用,往往會打擾到用戶正常操作。用戶必須對彈窗進行回應(yīng),才能繼續(xù)其他任務(wù)。此類彈窗在安卓中稱為Dialog,在ios中稱為alerts。
(1)樣式:
一般出現(xiàn)在屏幕中間位置,背后有黑色半透明蒙層。主要分為“按鈕樣式”和“圖片樣式“。“按鈕樣式”基本元素必須包含標(biāo)題、1~3個按鈕,此外可以根據(jù)情況添加:描述文案、輸入框等。“圖片樣式”通常用于廣告活動宣傳,圖片形狀不固定,可以是異形。有時也可以圖片和按鈕結(jié)合使用。
(2)使用場景:
此類彈窗通常用于很重要、很緊急、有風(fēng)險的操作,或傳達重要信息。如:退出、刪除、清空、版本升級、廣告宣傳等。由系統(tǒng)發(fā)起的彈窗(非用戶觸發(fā))一般也使用Dialog。
(3)不同按鈕數(shù)量的Dialog使用方法也不同:
單個按鈕:一般用于告知用戶信息,用戶不需要做出選擇,點擊按鈕后彈窗消失或直接執(zhí)行對應(yīng)操作。
兩個按鈕:一般用于告知用戶信息,用戶需要在兩個選項中做出選擇,如果其中涉及到不能恢復(fù)的破壞性操作時,需要在按鈕上添加特殊顏色,來警示用戶謹(jǐn)慎操作。
三個按鈕:用于有3個選項時。通常把最希望用戶點擊的選項,放在第一個按鈕。最不想用戶點擊的選項,放最后一個按鈕。
1.2、Actionbar(Action Sheets、Acitivity View)(動作欄、操作列表、活動視圖)
點擊頁面某個操作區(qū)域,觸發(fā)此彈窗。提供一個臨時操作窗口,可以選擇多個功能選項。一般都有一個默認(rèn)的“取消”按鈕,點擊“取消”或彈窗以外區(qū)域可以關(guān)閉彈窗。Aciton Sheets和Activity View是iOS上特有的交互形式。
Action Sheets
(1)樣式:
動作欄主要位于屏幕底部,背后有黑色半透明蒙層,可以提供多個功能選項,且展示的樣式不固定。“Action Sheets”一般提供至少2個功能選項,頂部提示文案是可選模塊。如果功能選項太多,可以使用“Acitivity View”滾動顯示多個功能,注意需要保留一定的視覺線索。特殊情況下也可自行定義彈窗樣式,來包含多個功能或復(fù)雜操作,以適應(yīng)特殊場景。
Acitivity View
(2)使用場景:
一般由用戶主動觸發(fā),常用于提供更多的功能操作。如:分享功能
(3)優(yōu)點:
這種提示方式可以減少彈窗出現(xiàn)在頁面中間給用戶帶來的干擾,且不會永久占用頁面的空間。
1.3、 Popover/Popup(浮層)
(1)樣式:
用戶點擊頁面某個區(qū)域,浮出的半透明或不透明窗口,包含有多個功能選項。浮層出現(xiàn)的位置不固定,因此使用上更加靈活。
(2)使用場景:
用于折疊頁面中的多余信息,或是作為一些功能的快捷入口。常出現(xiàn)于首頁,具有一定的指向性。
2.1、Toast / HUD(提示框)
此類彈窗在安卓里叫Toast。在iOS里有一個類似的叫HUD,音量調(diào)節(jié)提示是最常見的HUD。
(1)樣式:
此類彈窗尺寸較小,常出現(xiàn)幾秒后消失。一般有一個背景,背景顏色不限制,帶有簡短的文案提示。同時也可以添加icon,icon顏色也不限制,可以是動圖。Toast出現(xiàn)的位置可自定,通常在屏幕中間居多。整個App里,相同類型的Toast出現(xiàn)的位置需要保持一致,形成統(tǒng)一的認(rèn)知習(xí)慣。
(2)使用場景:
用于通知用戶結(jié)果反饋或狀態(tài)變化,用戶不需要對這個彈窗做出回應(yīng)。此類彈窗能給予用戶及時反饋,對用戶的打擾程度較小,用于不是非常重要信息的提示,如:刷新成功、保存成功、等待中。
(3)優(yōu)點:
不打斷用戶當(dāng)前的操作任務(wù),是一種輕量級的反饋提示,對用戶干擾小,占用屏幕空間小。
(4)缺點:
容易被用戶忽視,出現(xiàn)時間短。不適合展示重要信息,以及大量文案,用戶很可能沒讀完文案彈窗就消失了。此類彈窗無法交互操作。
(5)系統(tǒng)規(guī)范里Toast與HUD的區(qū)別:
1、Toast只出現(xiàn)在屏幕底部,HUD則出現(xiàn)在屏幕中央。
2、Toast只能是純文字,HUD則可以帶icon。
3、Toast一般是黑色半透明背景,HUD是毛玻璃透明背景
4、Toast里面的內(nèi)容無法變化,HUD則可以變化內(nèi)容(如音量調(diào)節(jié)時,音量的變化)
我們可以看到很多線上App的Toast,并沒有嚴(yán)格按照系統(tǒng)規(guī)范。所以在實際使用中,完全可以跳出規(guī)范,選擇適合自己產(chǎn)品的Toast樣式。
2.2、Snackbar(底部彈窗)
Snackbar是安卓系統(tǒng)的一種控件,有時也在ios系統(tǒng)中使用。它用于向用戶反饋信息,其打擾程度介于Dialog和Toast之間,是一種輕量級的反饋彈窗。Snackbar出現(xiàn)時,用戶仍然可以在屏幕上操作,屏幕上只能同時出現(xiàn)1個Snackbar。
(1)樣式:
大多數(shù)出現(xiàn)在屏幕底部,由文字和按鈕組成,用戶可以點擊按鈕進行交互。通常展示幾秒鐘后消失,也可以操作彈窗外其他位置而消失。偶爾也有未按照規(guī)范,出現(xiàn)在屏幕頂部的情況,如摩拜單車App。
(2)使用場景:
較多使用于撤銷操作,給予用戶反悔的機會。
(3)Snackbar與Toast的對比:
1、都是小尺寸彈窗,幾秒鐘后自動消失。
2、Snackbar帶有可交互的按鈕,而Toast無法交互。
3、Snackbar一般出現(xiàn)在屏幕底部,Toast位置不固定。
4、Snackbar對用戶的打擾程度,比Toast略高。
5、Snackbar可以觸摸彈窗以外部分消失,而Toast不行,只能等待自動消失。
三、彈窗總結(jié):
1、模態(tài)彈窗
特點:模態(tài)彈窗是一種重量級反饋,常用于重要信息的提示,進行重要操作。
優(yōu)點:能夠容易的獲取用戶視覺焦點,吸引用戶注意力。
缺點:容易打斷用戶當(dāng)前的操作行為,用戶必須回應(yīng)彈窗,否則無法進行其他操作。
Dialog適用于少量選項的判斷操作;動作欄和浮層適用于多個選項的功能操作;浮層具有一定的指向性。
2、非模態(tài)彈框
特點:非模態(tài)彈窗屬于一種輕量級反饋,常用于非重要的信息提示。有一定的時間限制,出現(xiàn)一段時間后自動消失。
優(yōu)點:不強制用戶交互,對用戶的打擾程度較小。
缺點:展示時間較短,不適合展示重要信息。不能承載大量文案。
3、彈窗設(shè)計原則
(1)精簡文案
彈窗的“按鈕文案”和“提示文案”應(yīng)盡量精簡易懂,不產(chǎn)生疑惑和歧義。大量或模糊不清的文案,會導(dǎo)致用戶無法快速做出選擇,導(dǎo)致整個操作流程時間變長、效率低下。
反饋類型的彈窗,應(yīng)盡可能告訴用戶:發(fā)生了什么,應(yīng)該怎么做。(如果不需要用戶去做什么,則不用提示應(yīng)該怎么做)
圖一:過于復(fù)雜的文案看似,能讓用戶完全明白發(fā)生了什么。實際上文案過多,閱讀時間變長,操作效率變低。大量的文案閱讀起來也很累。
圖二:只告訴了用戶發(fā)生了什么,沒有告訴用戶應(yīng)該怎么辦。尤其是對年紀(jì)大的用戶,以及對App不熟悉的用戶,根本不知道接下來應(yīng)該怎么做。
圖三:比較合適。精簡的文案清楚且快速的讓用戶知道發(fā)生了什么,應(yīng)該怎么做。同時按鈕文案變成“重新輸入”,再一次提示用戶接下來如何操作。
(2)直接了當(dāng)
操作按鈕盡可能使用直接表示對應(yīng)操作的文案,避免用戶長時間思考,快速理解選項,高效完成操作。
如果希望用戶點擊按鈕去升級,文案應(yīng)直接表達升級意思,使用“立即升級”文案。而使用“確定”文案,則不能清晰表達升級意思,會使用戶產(chǎn)生疑惑和歧義,不利于理解和高效操作。
使用“刪除”文案,而不是“確定”文案。雖然根據(jù)提示內(nèi)容,一樣可以知道“確定”就是刪除App,但是不如使用“刪除”文案更直接明了。甚至都不用看提示內(nèi)容,也能明白操作按鈕的含義,和點擊后的結(jié)果。直接展示出操作名稱更合適。
四、常見使用誤區(qū):
1、Dialog(警告框) 和 Action Sheets(操作列表)
(1)Dialog側(cè)重于傳達信息,因此文案內(nèi)容的優(yōu)先級較高。Action Sheets側(cè)重于功能選項,因此表示不同功能選項的按鈕優(yōu)先級較高。
(2)按鈕為2個或以內(nèi)時,一般使用Dialog。按鈕超過2個時,一般使用Action Sheets。(僅指一般情況,特殊場景特殊對待)
(3)需要強行打斷的場景,使用Dialog。如:沒有網(wǎng)絡(luò),版本升級。
2、Action Sheets(操作列表) 和 選擇器
(1)Action Sheets用于選擇不同的“操作”,而不是選擇不同的“選項”。
(2)選擇不同的選項時(單選),使用選擇器。選擇器可以容納很多選項。
------------------------------------------------------
以上僅對工作中學(xué)習(xí)到的彈窗知識進行總結(jié),希望可以幫助到大家。
如果喜歡請點個贊吧。聽說點完贊的朋友今年有好運哦~
↓