在手機app應(yīng)用中各種格式的彈窗效果相信大家都看過，也可能反感過某些彈窗，本文就來談?wù)勱P(guān)于app彈窗設(shè)計以及彈窗的適用情景。

一. 彈窗的定義

1. 彈窗作用

彈窗是為了讓用戶回應(yīng)，需要用戶與之交互的窗口。

非模態(tài)彈窗一般被設(shè)計成用來告訴用戶信息內(nèi)容，而模態(tài)彈窗除了告訴用戶信息內(nèi)容外還需要用戶進(jìn)行功能操作。

2. 模態(tài)彈窗

會打斷用戶的操作行為，強制用戶必須進(jìn)行操作，否則不可以進(jìn)行其他操作。

（Alerts／dialog，Actionbar，Popover）

3. 非模態(tài)彈窗

不會影響用戶操作，用戶可以不與回應(yīng)，通常有時間限制，出現(xiàn)一段時間就會自動消失。

（Toast/HUD，Snackbar）

二. 彈窗分類

以下將以各類彈窗的含義、作用、適用來進(jìn)行淺析。

1. Alerts/Dialog：警告框與對話框

含義：英文意為警告、對話，跟彈窗屬性非常吻合，就是緊急狀況，打擾用戶的行為。

剖析：iOS中警告框稱之為Alerts，作用是用來傳達(dá)重要信息，并伴隨著需要用戶進(jìn)行操作。

iOS規(guī)范中，警告框包含的元素如下：標(biāo)題（必選）、描述信息（可選）、輸入框（可選）、按鈕（必選）。

必須包含標(biāo)題、包含一個或多個按鈕。

Android規(guī)范中，彈窗交互按鈕需結(jié)合實際情況，不用「是/否」原則進(jìn)行設(shè)計。

作用：告知用戶當(dāng)前發(fā)生的狀況，讓用戶主動選擇回應(yīng)。

適用：重要性較高的操作時，如退出、刪除、清空等。

2. Actionbar（Sheets、Acitivity View）：操作欄、操作列表、活動視圖

含義：英譯為工具欄、操作欄。

剖析：當(dāng)用戶激發(fā)一個操作的時候，出現(xiàn)此窗口。

一般會給用戶提供更多的功能選擇，一般可采用官方控件。

一般都設(shè)計有一個默認(rèn)的「取消」按鈕，點擊取消可以關(guān)閉彈窗。

Aciton Sheets和Activity Views是iOS上特有的交互形式。

特性是用戶觸發(fā)、包含兩個或以上的按鈕。

△ 以上為今日頭條、iOS系統(tǒng)相冊

作用：操作列表提供一系列在當(dāng)前情景下可以完成當(dāng)前任務(wù)的操作，而這樣的形式不會永久占用頁面UI的空間。

適用：如分享功能。

3. Popover/Popup：浮出框/浮層彈窗

含義：英意為彈出窗口，浮動于頂層窗口，氣泡。

△ 以上為微博、qq、微信

剖析：當(dāng)用戶點擊某個控件或者某個區(qū)域時浮出的半透明或者不透明的彈窗窗口。

不會對用戶所在位置進(jìn)行跳轉(zhuǎn)。

作用：可以在當(dāng)前頁面進(jìn)行更多的操作行為，顯示/隱藏頁面中的折疊信息。

適用：首頁位置呈現(xiàn)一些常用操作的快捷入口。

4. Toast/HUD：提示框（iOS沒有Toast，只有HUD）

含義：Toast也被稱為吐司提示，Toast是安卓系統(tǒng)的一個控件名詞，現(xiàn)也應(yīng)用于iOS系統(tǒng)中。

剖析：提示框?qū)儆谝环N輕量級的彈窗反饋形式，常以小彈框的形式出現(xiàn)，持續(xù)1-2秒自動消失，可以出現(xiàn)在屏幕任意位置，但是建議同一款產(chǎn)品盡量使用相同位置，讓用戶產(chǎn)生統(tǒng)一認(rèn)知，成為習(xí)慣。

提示信息能給予用戶及時反饋，確保用戶知曉自己所處的狀態(tài)，并可以做出相應(yīng)的措施。

iOS用戶更習(xí)慣于在頂部感知反饋信息，不干擾用戶瀏覽主體內(nèi)容。Toast出現(xiàn)在屏幕頂部不會遮擋主體內(nèi)容。（如花瓣、有道云筆記）

Android正統(tǒng)的規(guī)范中Toast：

• 出現(xiàn)在屏幕底部。
• 只能放文字不能帶圖標(biāo)，文字要精簡不宜太長。
• 不是模態(tài)的，可以通過Toast對其他控件進(jìn)行操作。
• 短時間后會自動消失。
• 不能對Toast進(jìn)行交互。
• 優(yōu)先適用于系統(tǒng)提示，不能手動操作讓Toast主動消失。

△ 以上為今日頭條、微博、即刻

HUD與Toast的區(qū)別：

• HUD只出現(xiàn)在屏幕的中央，Toast則在底部。
• HUD可以包含icon，Toast只能純文字。
• HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明。
• HUD中內(nèi)容可以變化（如調(diào)節(jié)音量時），Toast中內(nèi)容不可變化。

△ iOS音量調(diào)節(jié)

優(yōu)點：

• 占用屏幕空間小。
• 不會打斷用戶操作。
• 使用簡單，適用范圍廣。

缺點：

• 出現(xiàn)時間短，在碎片化時代注意力不集中容易錯過Toast提示。
• 遮蓋其他控件，但不能對Toast進(jìn)行交互。

適用：提示不需要的反饋信息，如刷新后的成功狀態(tài)。

5. Snackbar：底部彈窗

Android特有的交互形式，在Google的MD規(guī)范中，將Toast和Snackbars歸為一類。有些時候也有應(yīng)用在iOS系統(tǒng)中，也可以理解為加強版的Toast。

含義：英譯為快餐、小吃。

剖析：Snackbars與toast一樣是從屏幕底部向上出現(xiàn)，但是Snackbar不同的是可以經(jīng)過用戶進(jìn)行其他操作而消失。

適用：較多適用于撤銷操作。

三. 總結(jié)

通過分析和了解彈窗的類別、適用范圍，才能更好的在設(shè)計中進(jìn)行優(yōu)化與改變。用戶體驗設(shè)計的重點，是一步步了解用戶，然后設(shè)計出適合用戶體驗，滿足用戶心理需求的產(chǎn)品。把握好彈框設(shè)計規(guī)范，避免彈框設(shè)計的誤區(qū)，能更好的幫助你完善產(chǎn)品。

但是，沒有十全十美的產(chǎn)品，所以要根據(jù)設(shè)計趨勢與用戶需求不斷地進(jìn)行更新迭代，通過用戶反饋，不斷地改良產(chǎn)品體驗，才是做出優(yōu)秀產(chǎn)品的前提。