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