I. 定義

1. 模態(tài)（modal）彈窗：很容易打斷用戶的操作行為，強(qiáng)制用戶必須回應(yīng)操作硝桩，否則不能進(jìn)行其他操作沿猜。

2. 非模態(tài)（nonmodal）彈窗：不會(huì)影響用戶的操作，用戶可以不回應(yīng)碗脊，非模態(tài)彈窗通常都有時(shí)間限制啼肩，出現(xiàn)一段時(shí)間后就會(huì)自動(dòng)消失。

二者區(qū)別：非模態(tài)彈窗通知用戶信息衙伶，而模態(tài)彈窗除了傳達(dá)信息外還可進(jìn)行功能操作祈坠。

II. 優(yōu)缺點(diǎn)

優(yōu)：

1.讓用戶感知未離開(kāi)當(dāng)前頁(yè)面，沒(méi)有丟失正在瀏覽或填寫的內(nèi)容矢劲，又能夠清晰地預(yù)見(jiàn)接下來(lái)要去向哪里赦拘，給用戶引導(dǎo)的同時(shí)讓用戶對(duì)操作有掌控感；

2.相對(duì)獨(dú)立芬沉，不影響頁(yè)面布局躺同；

3.一次性操作，解決簡(jiǎn)單丸逸，較頁(yè)面輕蹋艺，易返回，不需要刷新整個(gè)頁(yè)面黄刚，展開(kāi)/收回速度快捎谨，整個(gè)過(guò)程流暢。

缺：

1.不在用戶預(yù)期之內(nèi)出現(xiàn)的憔维、無(wú)用的涛救、打斷用戶操作的提示、告警信息业扒；

2.不斷疊加的彈窗检吆，在彈窗內(nèi)啟動(dòng)彈窗。

III. 類型

i. 模態(tài)彈窗3種：Alerts／Dialogs凶赁、Action bar/Activity View/Action Sheets咧栗、Popovers/Popup

1. Alerts（iOS）/Dialogs（Android）：警告框/提示框

一般由標(biāo)題逆甜、描述信息*虱肄、輸入框、功能按鈕*組成交煞，用戶點(diǎn)擊某個(gè)功能按鈕后彈窗消失咏窿，App執(zhí)行該功能操作，進(jìn)入相應(yīng)流程素征。

Dialog包含了一個(gè)標(biāo)題(可選)集嵌，內(nèi)容 萝挤，事件。

標(biāo)題：主要是用于簡(jiǎn)單描述下選擇類型根欧。它是可選的怜珍，要需要的時(shí)候賦值即可。

內(nèi)容：主要是描述要作出一個(gè)什么樣的決定 凤粗。

事件：主要是允許用戶通過(guò)確認(rèn)一個(gè)具體操作來(lái)繼續(xù)下一步活動(dòng)酥泛。

作用：用戶進(jìn)行了敏感操作或狀態(tài)改變，在該結(jié)果發(fā)生前以對(duì)話框形式傳達(dá)重要信息嫌拣，告知用戶當(dāng)前狀況柔袁，讓用戶主動(dòng)選擇回應(yīng)，適用于結(jié)果影響性較大的重要操作异逐，如退出（APP/當(dāng)前賬號(hào)）捶索、離開(kāi)流程（確認(rèn)訂單/編輯地址）、刪除灰瞻、清空腥例、開(kāi)啟消息通知等

Alerts

Dialogs

2. Action bar/Action Sheets（iOS）/Activity View（iOS）：操作欄/工具欄、操作列表箩祥、活動(dòng)視圖

Actionbar比Dialog提供更多功能按鈕選擇院崇，默認(rèn)有“取消”功能按鈕，點(diǎn)擊該按鈕或彈窗以外的區(qū)域關(guān)閉彈窗袍祖。

在iOS中常見(jiàn)樣式是頁(yè)面底部的文字列表框底瓣，以簡(jiǎn)潔的功能描述性文字展示功能按鈕。形式為文字蕉陋、文字+圖標(biāo)捐凭、圖標(biāo)（較少見(jiàn)）。

作用：提供一系列在當(dāng)前情景下可以完成的任務(wù)操作凳鬓，適用于分享功能

Action Sheets

Activity View

3. Popovers(iPad) / Popup(Android)：彈出框/浮出框/浮層彈窗

提示工具Tooltip的插件茁肠，當(dāng)用戶輕點(diǎn)某個(gè)控件或頁(yè)面中的某一區(qū)域時(shí)浮出的臨時(shí)視圖，大多浮動(dòng)于頂層缩举，彈出解釋或操作氣泡垦梆。

作用：可在當(dāng)前頁(yè)面進(jìn)行更多操作，常用來(lái)顯示/隱藏頁(yè)面中折疊的額外信息仅孩，或呈現(xiàn)一些常用操作的快速入口托猩。

Popovers(iPad)

iPhones避免使用popovers，所以在iOS端popovers的樣式為iPads專用

ii. 非模態(tài)彈窗 2種：Toasts/HUD辽慕、Snackbars

1. Toasts/HUD：提示框

1）Toasts吐司提示（Android）

Toasts

輕量級(jí)彈窗京腥，給予用戶及時(shí)提醒或消息反饋，一般用來(lái)顯示操作結(jié)果或應(yīng)用狀態(tài)的改變溅蛉，確保用戶知曉自己所處的狀態(tài)公浪。

常見(jiàn)Toasts為一句簡(jiǎn)短的描述性文字他宛，可在頁(yè)面頂部、中部或者在底部出現(xiàn)（通常在頁(yè)面的中軸線上）欠气，具體的顯示位置根據(jù)頁(yè)面的整體設(shè)計(jì)進(jìn)行設(shè)置厅各，同一款產(chǎn)品盡量使用相同位置，讓用戶產(chǎn)生統(tǒng)一認(rèn)知预柒。

優(yōu)點(diǎn)：

1.占用屏幕空間小; 2.不會(huì)打斷用戶操作; 3.使用簡(jiǎn)單適用范圍廣

缺點(diǎn)：

1.顯示停留時(shí)間短讯检，占用區(qū)域不大，易被用戶忽略卫旱，不適合承載過(guò)多的文字和重要信息人灼，尤其在碎片化時(shí)代注意力不集中容易錯(cuò)過(guò)提示

2.被濫用于加載、表單提示顾翼、狀態(tài)變更反饋投放、斷網(wǎng)消息等，不斷出現(xiàn)的黑乎乎矩形樣式上給人一種模態(tài)的錯(cuò)覺(jué)适贸，阻塞感會(huì)打斷心流灸芳。

3.遮蓋其他控件，但不能對(duì)Toasts進(jìn)行交互拜姿。

在Android規(guī)范中Toasts：

出現(xiàn)在屏幕底部烙样；

只能放文字不能帶圖標(biāo)，文字要精簡(jiǎn)蕊肥；

短時(shí)間后會(huì)自動(dòng)消失谒获，系統(tǒng)默認(rèn)停留時(shí)長(zhǎng)2s（短）和3.5s（長(zhǎng)）；

不可進(jìn)行交互壁却。

| 在iOS 將Toasts的位置由屏幕底部和中間改到頂部的嘗試

好處：1.出現(xiàn)位置穩(wěn)定：不會(huì)因?yàn)檐涙I盤出現(xiàn)導(dǎo)致原本在屏幕底部或中間的Toast被遮蓋或浮動(dòng)到其他位置批狱。2.更容易引起用戶注意：iOS持續(xù)錄音、GPS被使用展东、正在通話狀態(tài)赔硫、活動(dòng)指示器和系統(tǒng)推送通知都在屏幕頂部，符合用戶在頂部感知反饋信息的習(xí)慣盐肃。3.不會(huì)遮擋主體內(nèi)容爪膊，不干擾瀏覽。

2）HUD透明指示層（iOS官方無(wú)Toasts砸王，只有HUD）

HUD可能來(lái)源于 平視顯示器（Head Up Display）推盛，最初是運(yùn)用在航空器上的飛行輔助儀器，飛行員不需要低頭就能夠看到需要的重要資訊处硬。

Toasts和HUD不同之處：

1>Toasts一般出現(xiàn)在屏幕底部小槐，HUD出現(xiàn)在屏幕中間拇派。

2>Toasts一般是灰黑或黑色半透明荷辕，HUD一般是毛玻璃半透明凿跳。

3>每次產(chǎn)生的Toasts內(nèi)容不可改變，HUD內(nèi)容可以改變（比如調(diào)節(jié)音量時(shí)出現(xiàn)的HUD）

2. Snackbars（Android）：底部彈窗

Snackbars

Google MD規(guī)范中Toasts和Snackbars為一類疮方。

由信息內(nèi)容和一個(gè)功能按鈕組成控嗜，位于屏幕最上層，可在屏幕上滑動(dòng)關(guān)閉骡显，或觸控其他屏幕區(qū)域自動(dòng)消失疆栏。

作用：反饋操作結(jié)果，點(diǎn)擊功能按鈕后彈窗消失惫谤，系統(tǒng)執(zhí)行該操作壁顶，完成相應(yīng)的功能流程。如刪除任務(wù)時(shí)溜歪，屏幕底部出現(xiàn)“任務(wù)成功刪除”并附帶撤銷操作若专，點(diǎn)擊撤銷任務(wù)可恢復(fù)；不進(jìn)行操作Snackbars則消失蝴猪，任務(wù)刪除成功调衰。

Snackbars與Toasts對(duì)比：

相同點(diǎn)：

1.都為小彈窗的形式，會(huì)自動(dòng)消失自阱；

2.顯示停留時(shí)長(zhǎng)可自定義（建議遵循系統(tǒng)標(biāo)準(zhǔn)）嚎莉；

3.屏幕上只能有一個(gè)彈窗

不同點(diǎn)：

1.Snackbars一般都會(huì)有操作按鈕，如撤銷沛豌；Toasts無(wú)操作趋箩；

2.Snackbars一般出現(xiàn)在底部，Toasts一般出現(xiàn)在中部加派；

3.Snackbars可操作關(guān)閉阁簸，Toasts不可交互；

4.Snackbars打擾程度高于Toasts哼丈；

5.Snackbars運(yùn)用未普及启妹，可能造成用戶理解負(fù)擔(dān)

IV. 設(shè)計(jì)指導(dǎo)

1. 在使用彈窗的時(shí)候要盡量克制，要考慮信息內(nèi)容的必要性和目的性（商業(yè)推廣或者增值服務(wù)等目的）醉旦，來(lái)選擇是否使用彈窗和使用彈窗的方式和樣式饶米。

當(dāng)彈窗中的內(nèi)容太多、交互過(guò)于復(fù)雜時(shí)车胡，已違背了彈窗的最初意義檬输，使用跳轉(zhuǎn)新頁(yè)面更合適；業(yè)務(wù)流程是A-B-A時(shí)使用彈窗更好匈棘，A-B-C時(shí)丧慈，使用跳轉(zhuǎn)更為合理膝迎。

2. 根據(jù)反饋優(yōu)先級(jí)，采用不同的樣式：

Alert（強(qiáng)提示性）：提示信息至關(guān)重要的孽椰，要用戶做決定才能繼續(xù)搓彻，非用戶發(fā)起（系統(tǒng)自動(dòng)發(fā)起）一般都用Alert；

Actionbar（次強(qiáng)提示性）：重要程度弱于Alert完域，一般用戶主動(dòng)發(fā)起任務(wù)软吐，需要給用戶更多的功能選擇時(shí)，使用Actionbar吟税；

Toast（弱提示性）：提示信息告知用戶某個(gè)事情發(fā)生了凹耙，用戶不需要對(duì)此做出響應(yīng)時(shí)，使用Toast肠仪。

Snackbar：涉及到刪除操作類的場(chǎng)景肖抱，Snackbar可能是撤銷最好的選擇。

3. Dialogs

1）標(biāo)題和信息內(nèi)容的文字描述都盡可能的簡(jiǎn)潔异旧、表述清晰虐沥、無(wú)異義，也可省略標(biāo)題只保留內(nèi)容描述和功能按鈕（大多數(shù)Dialogs都沒(méi)有標(biāo)題）泽艘；

2）功能按鈕最好只有兩個(gè)欲险，讓用戶選擇“是”或“非”的功能操作（“是”指對(duì)內(nèi)容描述的確認(rèn)操作，比如確認(rèn)刪除匹涮、確認(rèn)付費(fèi)天试；“非”一般指取消操作，然后關(guān)閉彈窗）然低；用清晰的措辭來(lái)準(zhǔn)確表明操作（刪除喜每、撤銷、前往的我個(gè)人信息界面）雳攘，而不是使用模糊的文案带兜，例如“是”或“否”；

3）只保留一個(gè)“確認(rèn)”按鈕吨灭，具有更強(qiáng)提示性刚照，讓用戶閱讀內(nèi)容后，點(diǎn)擊右上角提供的關(guān)閉操作或者點(diǎn)擊非彈層區(qū)域關(guān)閉彈層喧兄，前提要確保信息內(nèi)容非常重要无畔，才打斷用戶的操作進(jìn)行信息內(nèi)容閱讀確認(rèn)（如新手提示）。

Alerts（iOS）

1）最小化使用Alerts吠冤，只應(yīng)用于破壞性操作或通知重要問(wèn)題的使用場(chǎng)景浑彰，避免用戶養(yǎng)成忽略的習(xí)慣并認(rèn)真對(duì)待；

2）在橫屏和豎屏模式下保證Alerts可讀性良好的自適應(yīng)顯示拯辙；

3）Alerts標(biāo)題和信息盡量簡(jiǎn)短郭变，具有描述性，避免滾動(dòng)；語(yǔ)氣避免指責(zé)和批判诉濒；

4）常見(jiàn)為雙按鈕Alerts周伦，按鈕文案簡(jiǎn)潔有邏輯；用戶習(xí)慣點(diǎn)擊右側(cè)的按鈕循诉，所以取消應(yīng)該在左側(cè)；差異化標(biāo)紅顯示以區(qū)隔破壞性按鈕撇他，取消按鈕標(biāo)記為默認(rèn)以實(shí)現(xiàn)加粗效果茄猫；

5）允許用戶通過(guò)退回主屏幕以取消Alerts

4. Action bars

1）敏感的功能操作用紅色字體或其他顏色按鈕，突出視覺(jué)差異

2）在安卓系統(tǒng)中困肩，Actionbar多為“選擇列表框”（選項(xiàng)代替了功能按鈕）划纽，減少了流程中的頁(yè)面跳轉(zhuǎn)，若選項(xiàng)和描述文字較多锌畸，仍建議跳轉(zhuǎn)選項(xiàng)詳情頁(yè)

3）功能按鈕數(shù)量過(guò)多時(shí)勇劣，文字列表的形式不適合顯示，可用圖形加文字描述的形式來(lái)進(jìn)行展示潭枣，同時(shí)注意彈窗內(nèi)各功能按鈕的ICON設(shè)計(jì)比默、排列布局、按鈕滾動(dòng)顯示等盆犁，留有足夠的視覺(jué)線索命咐。

Action Sheets

1）提供取消按鈕，并始終包含在Action Sheets的底部谐岁；

2）突出顯示破壞性或危險(xiǎn)操作醋奠，警示性選項(xiàng)標(biāo)紅色并置于選項(xiàng)頂端，推薦性選項(xiàng)標(biāo)示藍(lán)色伊佃，通常采用官方控件窜司，也可以自定義設(shè)計(jì)；

3）盡量避免Action Sheets中的滑動(dòng)操作航揉，如果選項(xiàng)過(guò)多塞祈，需要滑動(dòng)才能看到全部選項(xiàng)，增加額外的選擇時(shí)間帅涂，而且很難在滑動(dòng)的同時(shí)不觸碰到其他選項(xiàng)按鈕织咧。

5.Popovers

1）僅用關(guān)閉按鈕（如取消、完成）用來(lái)確認(rèn)和引導(dǎo)操作漠秋；

2）自動(dòng)關(guān)閉非模態(tài)的Popovers時(shí)笙蒙，自動(dòng)保存內(nèi)容；

3）在屏幕的適當(dāng)位置彈出庆锦，箭頭直接指向點(diǎn)擊即展示Popovers的元素（Popovers的來(lái)源地）

4）一次僅顯示一個(gè)Popover捅位，避免在Popover上再?gòu)棾鲆粚覲opover

5）避免Popovers占位過(guò)大，彈窗大小剛好顯示完全內(nèi)容即可

6）改變Popovers大小時(shí)，提供平滑的過(guò)渡動(dòng)效

6. Snackbars

1）通常 Snackbar 的高度應(yīng)該僅僅用于容納所有的文本艇搀，而文本應(yīng)該與執(zhí)行的操作相關(guān)尿扯。Snackbar 中不能包含圖標(biāo)，操作只能以文本的形式存在焰雕。

2）為了保證可用性衷笋，Snackbar 不應(yīng)該成為通往核心操作的唯一方式。Snackbar所有層的上方矩屁，不應(yīng)持續(xù)存在或相互堆疊辟宗。

3）最多包含0-1個(gè)操作，不含取消按鈕

7.減少使用方式：

1）采用多狀態(tài)按鈕吝秕，反饋明顯泊脐，不需要額外用Toast進(jìn)行提示。

2）動(dòng)效烁峭，吸引用戶注意力容客，情感化設(shè)計(jì)給用戶留下深刻印象。事物之間的關(guān)系可以通過(guò)動(dòng)效進(jìn)行隱喻约郁，例如電商App加入購(gòu)物車缩挑，商品飛入購(gòu)物車中，有趣流暢鬓梅。

3）聲音和震動(dòng)调煎，建議作為同步輔助反饋手段。

8. 系統(tǒng)操作引導(dǎo)類可使用插畫等視覺(jué)效果更加友好的彈窗

圖片來(lái)源：https://developer.apple.com/