無論是UI設計師還是交互設計師，我們都必須清楚“核心”頁面如何設計，哪些細節是要注意的。一般來說，核心頁面主要有搜索頁、加載頁、彈框、表單頁、缺省頁、引導頁以及啟動頁。

我們來理一理UI核心頁面的一部分——彈框。

了解彈框之前我們先說一個基本的概念——模態。什么是模態？模態就是用必須進行當前操作，不然不能進行到下一步。了解了模態，我們再來具體看彈框設計。在彈框設計中，分為模態阻斷和非模態阻斷兩種。

模態阻斷

特點：會打斷用戶的操作行為，強制用戶必須進行操作，否則不可以進行其他操作。

所以在用戶使用產品的時候，不得已的情況下不要用阻斷式的彈框。如果在使用的過程中，出現一個模態阻斷，那么用戶會覺得非常不順暢，影響用戶使用情緒。但在有逆向不可退的操作中，需要阻斷式告訴用戶“操作了別后悔”。

模態阻斷分為：

（1）浮層彈窗/浮出框（Popover/Popup）-頁面頂部

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

解讀：當用戶點擊某個控件或者某個區域時浮出的半透明或者不透明的彈窗窗口，不會對用戶所在位置進行跳轉。

作用：可以在當前頁面進行更多的操作行為或調整分類時，顯示/隱藏頁面中的折疊信息。

適用：首頁位置呈現一些常用操作的快捷入口或分類切換。

舉個栗子：

 浮層彈框

 浮出框

（2）對話框（Dialog/Alerts）-頁面中間

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

解讀：iOS中警告框稱之為Alerts，作用是用來傳達重要信息，并伴隨著需要用戶進行操作。

iOS規范中，警告框包含的元素如下：標題（必選）、描述信息（可選）、輸入框（可選）、按鈕（必選）必須包含標題、包含一個或多個按鈕。Android規范中，彈窗交互按鈕需結合實際情況，不用“是/否”原則進行設計。

作用：告知用戶當前發生的狀況，讓用戶主動選擇回應。

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

再舉個栗子：

（3）操作列表（action bar/sheets/Acitivity View）-頁面底部

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

解讀：當用戶激發一個操作命令的時候，出現此窗口。一般會給用戶提供更多的功能選擇，并可采用官方控件。

一般設計有一個默認的“取消”按鈕，點擊取消可以關閉彈窗。

Aciton Sheets和Activity Views是iOS上特有的交互形式。特性是用戶觸發、包含兩個或以上的按鈕。

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

適用：行為操作功能的喚醒，如分享功能。

舉個栗子：

非模態阻斷

特點：不會影響用戶操作，用戶可以不與回應，通常有時間限制，出現一段時間就會自動消失。

所以非模態阻斷一般用作信息提示。

（1）Toast/HUD-界面內容區范圍內

含義：Toast也被稱為吐司提示，Toast是安卓系統的一個控件名詞，現也應用于iOS系統中。

剖析：提示框屬于一種輕量級的彈窗反饋形式，常以小彈框的形式出現，持續1-3秒自動消失，可以出現在屏幕任意位置，但是建議同一款產品盡量使用相同位置，保持一致性，讓用戶產生統一認知，成為習慣。

提示信息能給予用戶及時反饋，提醒用戶知曉自己所處的狀態，并可以做出相應的措施。

iOS用戶更習慣于在頂部感知反饋信息，不干擾用戶瀏覽主體內容。Toast出現在屏幕頂部不會遮擋主體內容。

HUD與Toast的區別：HUD只出現在屏幕的中央，標準Toast則出現在底部；HUD可以包含icon，Toast只能純文字；HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明；HUD可進行交互操作（如調節音量時），Toast不可進行交互。

舉個栗子：

（2） snack bar-界面底部，可交互

含義：Android特有的交互形式，在Google的MD規范中，將Toast

和Snackbars歸為一類。有些時候也有應用在iOS系統中。也可以理解為加強版的Toast。

剖析：Snackbars與toast一樣是從屏幕底部向上出現，也同樣會自動消失，但是Snackbar不同的是，用戶可以通過交互讓其關閉。Toast和Snackbar顯示時間都可以修改。（建議遵循系統）

舉個栗子：

我們做個彈框設計應用場景的總結：

操作警告

操作引導

狀態提示

操作擴展

運營推廣