UI設(shè)計(jì)中的彈窗設(shè)計(jì)技巧有哪些？

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

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

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

模態(tài)阻斷

特點(diǎn)：會打斷用戶的操作行為，強(qiáng)制用戶必須進(jìn)行操作，否則不可以進(jìn)行其他操作。

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

模態(tài)阻斷分為：

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

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

解讀：當(dāng)用戶點(diǎn)擊某個(gè)控件或者某個(gè)區(qū)域時(shí)浮出的半透明或者不透明的彈窗窗口，不會對用戶所在位置進(jìn)行跳轉(zhuǎn)。

作用：可以在當(dāng)前頁面進(jìn)行更多的操作行為或調(diào)整分類時(shí)，顯示/隱藏頁面中的折疊信息。

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

舉個(gè)栗子：

 浮層彈框

 浮出框

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

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

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

iOS規(guī)范中，警告框包含的元素如下：標(biāo)題（必選）、描述信息（可選）、輸入框（可選）、按鈕（必選）必須包含標(biāo)題、包含一個(gè)或多個(gè)按鈕。Android規(guī)范中，彈窗交互按鈕需結(jié)合實(shí)際情況，不用“是/否”原則進(jìn)行設(shè)計(jì)。

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

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

再舉個(gè)栗子：

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

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

解讀：當(dāng)用戶激發(fā)一個(gè)操作命令的時(shí)候，出現(xiàn)此窗口。一般會給用戶提供更多的功能選擇，并可采用官方控件。

一般設(shè)計(jì)有一個(gè)默認(rèn)的“取消”按鈕，點(diǎn)擊取消可以關(guān)閉彈窗。

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

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

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

舉個(gè)栗子：

非模態(tài)阻斷

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

所以非模態(tài)阻斷一般用作信息提示。

（1）Toast/HUD-界面內(nèi)容區(qū)范圍內(nèi)

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

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

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

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

HUD與Toast的區(qū)別：HUD只出現(xiàn)在屏幕的中央，標(biāo)準(zhǔn)Toast則出現(xiàn)在底部；HUD可以包含icon，Toast只能純文字；HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明；HUD可進(jìn)行交互操作（如調(diào)節(jié)音量時(shí)），Toast不可進(jìn)行交互。

舉個(gè)栗子：

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

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

和Snackbars歸為一類。有些時(shí)候也有應(yīng)用在iOS系統(tǒng)中。也可以理解為加強(qiáng)版的Toast。

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

舉個(gè)栗子：

我們做個(gè)彈框設(shè)計(jì)應(yīng)用場景的總結(jié)：

操作警告

操作引導(dǎo)

狀態(tài)提示

操作擴(kuò)展

運(yùn)營推廣