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

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

我們來(lái)理一理UI核心頁(yè)面的一部分——彈框。

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

模態(tài)阻斷

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

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

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

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

含義：英意為彈出窗口，浮動(dòng)于頂層窗口，氣泡

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

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

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

舉個(gè)栗子：

 浮層彈框

 浮出框

（2）對(duì)話框（Dialog/Alerts）-頁(yè)面中間

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

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

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

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

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

再舉個(gè)栗子：

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

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

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

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

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

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

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

舉個(gè)栗子：

非模態(tài)阻斷

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

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

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

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

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

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

iOS用戶(hù)更習(xí)慣于在頂部感知反饋信息，不干擾用戶(hù)瀏覽主體內(nèi)容。Toast出現(xiàn)在屏幕頂部不會(huì)遮擋主體內(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歸為一類(lèi)。有些時(shí)候也有應(yīng)用在iOS系統(tǒng)中。也可以理解為加強(qiáng)版的Toast。

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

舉個(gè)栗子：

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

操作警告

操作引導(dǎo)

狀態(tài)提示

操作擴(kuò)展

運(yùn)營(yíng)推廣