彈窗

出自 MBA智库百科(https://wiki.mbalib.com/)

彈窗（Pop-up Notification）

　　彈窗又稱為對話框，一般是指打開網頁、軟體、手機APP等的時候自動彈出的視窗。

　　彈窗組件的樣式很多，如浮層、對話框、下拉菜單、toast等，且iOS、Android官方平臺也都根據自身的規範對組件進行命名，不管如何稱呼，其常見的彈窗組件絕大多數都是由以下元素組成：

　　容器：作為承載彈窗的文本、圖片等內容，容器必不可少，有的彈窗直接以蒙層作為容器，如toast；

　　蒙層：為了和底層內容分離，避免信息混淆，通常會在界面上層（容器下層）設置一個不透明度為20%~60%的純黑色蒙層。部分小型彈窗不設蒙層，但會為容器設置投影，例如篩選器的展開、下拉菜單等；

　　文本：文本是彈窗傳達信息主體的必要條件，如標題、按鈕等，即便把文本融入圖片，也能一目瞭然；

　　圖片：用於運營彈窗傳達更多信息內容的方式之一，為了對用戶產生更強的吸引力，還可設計成動態效果；

　　表單：為成功進入下一步做準備，如輸入密碼（iOS設備下載應用前的必要步驟）。也可以是當前頁面流程的分支，例如輸入優惠券等；

　　選項：條件較少的選項可使用彈窗完成，單選、覆選在選項不超過6個的情況下都可使用；

　　圖標：在弱化次要操作的情況下，通常會將關閉彈窗按鈕設計成圖標放在右上角或彈窗下方，目的是突出主操作，鼓勵用戶從彈窗中進入下一步，另外還有單選、覆選、提示等按鈕；

　　按鈕：是進入下一步或回到上一步（去掉彈窗）的操作入口，部分應用也可以點擊彈窗以外的空白區域讓彈窗消失，但同樣會提供按鈕以方便用戶更容易操作。toast等短時間自動消失的彈窗無需設置按鈕。

　　1、普通彈出式：用戶上線時分時段主動推送廣告視窗（網頁、flash、流媒體）。

　　2、定向性彈出式：用戶訪問特定的網址時彈出廣告視窗。

　　彈窗可以按照是否強制打斷用戶操作來分成兩種，模態彈窗和非模態彈窗（也可以叫做阻斷式彈窗和非阻斷式彈窗），兩者的區別在於需不需要用戶對其進行回應。

　　1 模態彈窗

　　模態彈窗：模態提供了一個專註聚焦的環境，用戶只有完成或者關閉當前任務，才能進行其他任務。

　　模態彈窗會打斷用戶的正常操作，要求用戶必須對其進行回應，否則不能繼續其它操作；非模態彈窗則不會影響用戶的操作，用戶可以不對其進行回應，非模態彈窗通常都有時間限制，出現一段時間後就會自動消失。

　　特點：打斷用戶當前的操作流程，屬於強勢的干擾行為，故運用彈窗需要慎重考慮。

　　常用組件：dialog（對話框）/alert(警告框)、popover（浮出層）、action sheet（動作菜單）、activity views（活動視圖）、modal bottom sheet（模態底部菜單）。

　　2 非模態彈窗

　　非模態彈窗：常用於輕量級的操作反饋和信息傳遞，不需要獲取屏幕焦點，用戶可以同時操作屏幕中的其他內容。

　　非模態彈窗一般被設計成用來告訴用戶信息內容，而模態彈窗除了告訴用戶信息內容外還需要用戶進行功能操作。

　　特點：屬於輕量級的反饋，不會對用戶流程產生干擾，但同時又給了用戶反饋和信息。

　　常用組件：Toast（吐司），snackbar，Hud（透明指示層）。

　　1、Toast 提示框

　　Toast提示框是一種非模態彈窗，它彈出一個小信息，作為提醒或消息反饋來用，一般用來顯示操作結果，或者應用狀態的改變。

　　例如你發出了一條簡訊，App彈出一個Toast提示你消息已發出。

　　最常見的Toast提示框為一句簡短的描述性文字。這種樣式的彈窗可以出現在頁面的任何位置，可設置成在頁面頂部、中部或者在底部出現（但一般都是出現在頁面的中軸線上），具體的顯示位置根據頁面的整體設計進行設置。該種Toast在安卓App上十分常見。

　　還有一種Toast彈窗由簡單的圖形和簡短的文字組成，顯示位置一般位於頁面正中央。

　　2、Dialog 對話框

　　Dialog對話框是一種模態彈窗。當用戶進行了敏感操作，或者當App內部發生了較為嚴重性的狀態改變，這種操作和改變會帶來影響性比較大的行為結果，在該結果發生前以Dialog對話框的彈窗形式告知用戶且讓用戶進行功能選擇。比如退出App、進行付費下載等功能操作。

　　一般情況下Dialog由標題、信息內容和功能按鈕組成，只有當用戶點擊了某個功能按鈕後彈窗才會消失，App隨即執行該功能操作，進入相應的功能流程。

　　3、Actionbar 功能框

　　Actionbar功能框可以看成是Dialog的一種延伸設計，兩者都是模態彈窗，用戶必須進行回應，否則彈窗不會消失，用戶無法繼續其它操作。Actoinbar比Dialog擁有更多的功能按鈕，提供給用戶更多的功能選擇，Acionbar一般都設計有一個預設的“取消”功能按鈕，點擊該按鈕後關閉彈窗，用戶點擊彈窗以外的區域時相當於進行了點擊“取消”功能按鈕的預設回應。

　　Actionbar一般被設計用來向用戶展示多個功能按鈕選擇。

　　4、Snackbar 提示對話框

　　Snackbar提示對話框是安卓系統的特色彈窗之一（安卓平臺在開發的時候可以直接調用Snackbar類生成該彈窗，iOS好像也可以進行定製化設計開發），它也是一種非模態彈窗，同時擁有Toast和Dialog的特點，不會打斷用戶正常的操作流程，它除了可以告訴用戶信息內容，還可以與用戶進行對話交互（用戶可以點擊功能按鈕進行回應）。