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