彈窗，對于大家來說并不陌生。UI設計師在工作中，乃至日常App使用過程中，經常接觸到形形色色的彈窗設計。今天這篇好文將讓你對彈窗設計的理解更加透徹。

看完本文你會學到：

1. 什么是彈窗，彈窗的定義

2. 彈窗的分類以及他們各自的特征

3. 彈窗設計的思考和優(yōu)化

一. 什么是彈窗

一般來說它的功能意義是：中斷用戶當前操作并對其作出補充，或中斷用戶當前操作并對其作出反饋。作為拉通產品交互與用戶操作的核心樞紐，作為用戶處理「即時任務」的重要載體，它的模樣可謂是千變萬化，但萬變不離其宗。在交互形式上它分為兩種形式，模態(tài)彈窗和非模態(tài)彈窗。

模態(tài)彈窗，它的特征為，當它出現(xiàn)在用戶的操作視野內時，用戶需要對其作出回應，所以它是可交互的。常見的種類有對話框(Dialog)，警示框(Alter)，浮層(Popover/Popup)和操作欄(Actionbar)，由于它的特性，它的層級注定比較高，可以很好的吸引用戶的注意。同時會帶來頓挫感強烈的體驗風險，個人建議慎用。

非模態(tài)彈窗在特征上則與模態(tài)彈窗相反，它從出現(xiàn)到停留消失的時間很短暫，短到用戶不需要對它作出反映，所以它是一種輕量級的反饋機制。常見的種類有Hud/Toast，提示欄和Snackbar。

二. 彈窗的分類

模態(tài)：對話框

對話框類型的彈窗有很多，我把他們劃分為：信息下發(fā)類、信息提交類。

信息下發(fā)類型的對話框通常指代程序運行的過程出現(xiàn)需要用戶決策的「即時任務」。

比較典型的：系統(tǒng)、版本更新、消息通知、警示欄、運營/廣告彈窗等等。

這類彈窗的視覺層級非常高，設計也是多種多樣。通常出現(xiàn)在屏幕中心，伴隨半透明遮罩，讓你想忽略都難。他們通常用來提示重大信息，提醒用戶處理當前任務等等。由于它「引人注目」的特性，用于活動運營，廣告宣發(fā)的頻率非常高。

△ 系統(tǒng)位置提示 / 新版本提示 / 開啟通知提示

△ 系統(tǒng)電量提示 / 活動運營提示 / 廣告彈窗

信息提交類則是需要用戶在彈窗內進行操作，二次提交信息。使用場景有，登錄注冊，改名分組等等，如下圖。

△ 登錄對話框 / 改備注名 / 新建分組名

模態(tài)：浮層

△ 按鍵浮層 / 按鍵浮層 / 下拉菜單浮層

浮層是指，用戶點擊某個功能控件后浮出一個臨時界面對其作出補充，它通常會伴隨半透明的遮罩/陰影襯底，用戶需要點擊臨時界面的功能區(qū)域，或者點擊空白處才能進行下一步操作。它也會有一些其他的名詞，像是「下拉菜單」「下拉彈窗」等等。他們的功能屬性是一樣的，所以我把他們歸類到一起，方便大家歸納。

模態(tài)：操作欄

△ 操作欄 / 操作菜單 / 操作菜單

操作欄實際上和浮層很像，都是通過用戶主動點擊后對某一功能作出補充，只不過浮層通常出現(xiàn)在比較靠上的位置，操作欄通常出現(xiàn)在底部。浮層從形式上更強調它的歸屬，也就是從哪來，為用戶明確操作導向。圖三是讓我感到很迷惑的一個設計，我?guī)缀鯖]法為它歸類，由于它帶有半透明的毛玻璃遮罩，所以我把它歸為操作欄。它是點擊某個分享button出現(xiàn)的，整個界面密封性較高，點擊空白區(qū)域會撤銷當前操作，不過個人感覺如果不是慣性操作，用戶很容易覺得迷茫。建議適當優(yōu)化，例如加個返回鍵，固定操作區(qū)域等等。

非模態(tài)：HUD/Toast

Hud是iOS的控件，Toast則是android的，業(yè)內大部分 App 在 iOS 提示體系內采用了Toast來設計。所以兩個端不管從功能還是形式上來看都有異曲同工之處。

△ 音量Hud / 更新氣泡 / 更新提示條

△ 清理緩存 / 更新氣泡 / 更新氣泡

△ 按鍵引導 / 按鍵引導 / 按鍵引導