2020-11-18 資深UI設(shè)計(jì)者
彈窗是我們平時(shí)在設(shè)計(jì)APP時(shí)候繞不開的一個(gè)元素，選擇合適的彈窗形式，是我們需要多加思考的地方，避免變成只會(huì)完善產(chǎn)品原型的線框美工。
彈窗是我們與機(jī)器界面進(jìn)行互動(dòng)的一扇窗，它是一種用戶與產(chǎn)品直接對(duì)話的方式，它可以傳達(dá)信息，反饋狀態(tài)以及引導(dǎo)用戶操作。彈窗分為兩種類型：模態(tài)彈窗與非模態(tài)彈窗（有些地方可能翻譯為無(wú)模式窗口）。
模態(tài)彈窗
用戶需要先與其進(jìn)行交互，才能繼續(xù)操作。也就是說(shuō)它是強(qiáng)制性的，用戶無(wú)法忽視它的存在。確保人們收到關(guān)鍵信息，并在必要時(shí)采取心動(dòng)。
非模態(tài)彈窗
存在一定的時(shí)間限制，通常用于系統(tǒng)反饋，用戶無(wú)需對(duì)其進(jìn)行回應(yīng)。
1. 對(duì)話框 Dialog / 警告框 Alerts
出現(xiàn)在需要打斷用戶操作的情況下，可以大致分為信息下發(fā)（被動(dòng)）例如：版本更新，消息通知，運(yùn)營(yíng)廣告等。信息提交（主動(dòng)），例如：修改信息，登錄注冊(cè)等。
通過(guò)上面幾個(gè)案例我們還能發(fā)現(xiàn)幾個(gè)特點(diǎn)，按鈕可以通過(guò)差異化設(shè)計(jì)引導(dǎo)用戶去點(diǎn)擊（例如美團(tuán)的版本更新），運(yùn)營(yíng)類彈窗一般更注重視覺(jué)沖擊力，且刻意將關(guān)閉按鈕弱化遠(yuǎn)離彈窗主體，背景蒙版顏色更深一點(diǎn)，營(yíng)造更強(qiáng)的沉浸感。對(duì)于承載輸入功能的彈窗，需要注意鍵盤彈出后的位置。類似系統(tǒng)功能的彈窗，比如清理緩存可以考慮直接調(diào)用平臺(tái)的系統(tǒng)彈窗。
2. 浮層 Popover / Popup
通常在用戶進(jìn)行交互后出現(xiàn)，比如常見(jiàn)的下拉菜單，下拉彈窗等，更加強(qiáng)調(diào)彈窗的從屬關(guān)系。（在騰訊ISUX騰訊文檔的文章中使用了模態(tài)浮層與非模態(tài)浮層的概念，有興趣可以去看看）。
同樣都是下拉彈窗，但是很多產(chǎn)品有著不同的處理方式，微博通過(guò)暗色系彈窗來(lái)明確區(qū)分彈窗內(nèi)容與背景內(nèi)容，釘釘通過(guò)加深背景蒙版來(lái)突出彈窗內(nèi)容，大眾點(diǎn)評(píng)只使用了淡淡的投影，去掉了背景蒙版，使得彈窗內(nèi)容與背景內(nèi)容對(duì)比無(wú)法拉開，在實(shí)際體驗(yàn)中相當(dāng)影響用戶的識(shí)別效率。
3. 操作欄 Action bar / 操作列表 Action Sheets / 操作視圖 Activity Views
跟浮層有點(diǎn)類似，也是通過(guò)用戶的主動(dòng)交互后喚出的功能菜單。通常出現(xiàn)在屏幕下方，占用屏幕比例較高，為了方便用戶使用，底部會(huì)放置取消功能。（Action Sheets和Activity Views是IOS官網(wǎng)規(guī)范中的叫法。）
這種類型的彈窗最常見(jiàn)的場(chǎng)景就是分享模塊，比起其他的模態(tài)彈窗，它能夠承載更多更豐富的功能（多為選擇項(xiàng)功能）。支付寶和微信公眾號(hào)分享算是最標(biāo)準(zhǔn)的Action Sheets，為了減少用戶不必要的記憶負(fù)擔(dān)，彈窗高度限制較低，露出更多的背景內(nèi)容協(xié)助用戶記憶。
4. 卡片 Sheet
Sheet是出現(xiàn)在IOS人機(jī)交互指南中的一種模態(tài)窗口，形式為一張從底圖出現(xiàn)的卡片，幾乎覆蓋了全部的原頁(yè)面。但是未覆蓋的區(qū)域也會(huì)使用暗色蒙版來(lái)幫助用戶記憶暫停的任務(wù)。因?yàn)樗С稚舷峦蟿?dòng)，所以比起浮層，它能夠承載更多的復(fù)雜信息內(nèi)容，常用于一些表格無(wú)法承載的復(fù)雜任務(wù)但又非沉浸式的情況下。
比起Action Sheets，Sheet的屏幕覆蓋率更高，且更多時(shí)候承載的是信息錄入型功能。Sheet需要頂部標(biāo)題告知用戶當(dāng)前所處步驟信息，通過(guò)底部卡片形式的疊加讓用戶感知當(dāng)前處理的任務(wù)流程為主流程的分支任務(wù)。
5. 其他補(bǔ)充
隨著交互體驗(yàn)與產(chǎn)品技術(shù)的不斷發(fā)展，如今的設(shè)備都能承載越來(lái)越多復(fù)雜精細(xì)化的模塊。所以漸漸有越來(lái)越多特殊的彈窗形式。（底層邏輯是互通的）
例如網(wǎng)易云音樂(lè)的分享使用了沉浸式模態(tài)，多個(gè)彈窗組合的形式，還有動(dòng)效引導(dǎo)，以此來(lái)承載自身豐富的分享形式。IOS桌面使用聚焦類型的彈窗菜單，幫助用戶進(jìn)行視覺(jué)聚焦。
1. 提示框 Toast
常見(jiàn)用于反饋用戶的操作結(jié)果，反饋應(yīng)用的狀態(tài)改變，一般持續(xù)2s左右便自動(dòng)消失，可能出現(xiàn)在任何位置。（不能通過(guò)主動(dòng)滑動(dòng)關(guān)閉）
目前最常見(jiàn)的場(chǎng)景就是各種刷新反饋信息，一般來(lái)說(shuō)存在感都比較弱，比如案例中的知乎，B站和INS。比起B(yǎng)站和INS，微博和知乎都在其中融入了自己的品牌特征：主題色點(diǎn)綴，雖然只是個(gè)小細(xì)節(jié)，但是對(duì)用戶的品牌感知能起到潛移默化的作用。
2. 提示對(duì)話框 Snackbar
Snackbar最早是出現(xiàn)在Android的一種彈窗形式，不過(guò)現(xiàn)在很多IOS端產(chǎn)品上也會(huì)出現(xiàn)。它有點(diǎn)類似Dialog和Toast的衍生，很多時(shí)候像Dialog一樣可交互，有時(shí)候又像Toast一樣有時(shí)間限制。通常出現(xiàn)在屏幕底部，由頁(yè)面底部向上滑動(dòng)出現(xiàn)，向下滑動(dòng)消失。
由于目前手頭木有Android手機(jī)，所以截了Material Design的官方說(shuō)明案例來(lái)幫助理解。主要強(qiáng)調(diào)了兩個(gè)點(diǎn)：1.不要加Icon，2.只能有一個(gè)操作項(xiàng)；因?yàn)閟nackbar及時(shí)不操作也會(huì)消失，所以比較常見(jiàn)運(yùn)用與工具類產(chǎn)品，需要保持操作的連貫性。例如郵箱類產(chǎn)品，用戶刪除了郵件，snackbar可以及時(shí)反饋刪除成功的狀態(tài)的同時(shí)提供撤銷的操作。
3. 透明指示層 HUD
HUD是出現(xiàn)在IOS端常用的一種非模態(tài)類型，最早出現(xiàn)在屏幕中間，由于容易影響用戶的沉浸式體驗(yàn)，所以在IOS13版本中對(duì)HUD進(jìn)行了邊緣化調(diào)整。
對(duì)比左側(cè)與右側(cè)的HUD就會(huì)體會(huì)到為什么早期會(huì)被那么多人吐槽，特別是在游戲類的沉浸式應(yīng)用中，很容易破壞用戶的體驗(yàn)。
1. 展現(xiàn)形式
展現(xiàn)形式核心是分場(chǎng)景，一些偏向系統(tǒng)報(bào)錯(cuò)考慮使用最簡(jiǎn)單系統(tǒng)的彈窗展現(xiàn)形式，運(yùn)營(yíng)廣告之類的可以通過(guò)特殊的設(shè)計(jì)手法來(lái)吸引用戶。但是不管怎么做，一定要讓用戶懂得，這是一個(gè)彈窗。非模態(tài)彈窗一般多以最簡(jiǎn)單的形式出現(xiàn)，避免傳遞狀態(tài)信息時(shí)干擾用戶的關(guān)鍵信息獲取。
2. 按鈕模態(tài)彈窗一般情況下只放置1-2個(gè)按鈕，信息告知類型的放個(gè)“確定”，重大決策類型的放個(gè)“確定”“取消”。比較特別的是權(quán)限請(qǐng)求彈窗，可能會(huì)有多個(gè)按鈕?，F(xiàn)在很多運(yùn)營(yíng)廣告為了曝光率會(huì)將關(guān)閉按鈕放在邊邊上，對(duì)于用戶體驗(yàn)上來(lái)說(shuō)相當(dāng)?shù)牟挥押?，但是?duì)于運(yùn)營(yíng)數(shù)據(jù)上來(lái)說(shuō)可能會(huì)很好看。
3. 動(dòng)效因?yàn)閺棿俺休d文本量有限，得利于設(shè)備技術(shù)的發(fā)展，現(xiàn)在越來(lái)越多的產(chǎn)品會(huì)在模態(tài)彈窗中使用動(dòng)態(tài)的形式傳遞信息，例如很多產(chǎn)品的功能引導(dǎo)。對(duì)于非模態(tài)彈窗來(lái)說(shuō)，由于本身存在感較弱，動(dòng)效運(yùn)用于合理順應(yīng)用戶的視覺(jué)動(dòng)線，例如你下拉刷新后，一般刷新反饋彈窗都是出現(xiàn)在用戶當(dāng)前的視覺(jué)聚焦點(diǎn)。
4. 時(shí)機(jī)頻率把握好彈窗出現(xiàn)的時(shí)機(jī)和頻率
模態(tài)彈窗會(huì)直接打斷用戶的操作狀態(tài)，一般只有在不可逆，或者操作會(huì)造成嚴(yán)重后果的情況下出現(xiàn)。但是在一些特殊的商業(yè)需求下，比如運(yùn)營(yíng)廣告，那就得權(quán)衡用戶與商業(yè)利益之間的關(guān)系了。非模態(tài)彈窗的話更注重出現(xiàn)的時(shí)機(jī)，反饋一定要足夠及時(shí)，這樣才能不會(huì)讓用戶在操作中產(chǎn)生疑慮。
5. 文案表述
由于彈窗的信息承載量非常小，所以一定要用最精煉，恰當(dāng)?shù)谋硎鰜?lái)告知用戶信息或者當(dāng)前狀態(tài)，可以考慮使用“動(dòng)詞+名詞”的組合短語(yǔ)，例如“刪除照片”“取消訂單”等等。特別是非模態(tài)彈窗那種會(huì)自動(dòng)消失的，文案字?jǐn)?shù)要更加注意（可以考慮增加一些通用icon顏色輔助表達(dá)，比如正確使用綠色打勾）。
6. 輸入內(nèi)容
很多彈窗承載著表單輸入的任務(wù)，然而彈窗并不適合過(guò)多的表單輸入，特別還有一些多到需要下拉了- -如果需要用戶填寫很多表單，乖乖跳轉(zhuǎn)新頁(yè)面吧。況且彈窗本身出現(xiàn)就已經(jīng)中斷了用戶原有的操作，還要填一大堆東西的話。。（除了IOS的Sheet，它的出現(xiàn)就是IOS官方為了解決常用于一些表格無(wú)法承載的復(fù)雜任務(wù)但又非沉浸式的情況。）
由于目前手頭目前沒(méi)有Android，所以截圖案例都是基于IOS端，下次有機(jī)會(huì)繼續(xù)修改更新。不過(guò)目前來(lái)說(shuō)兩端很多交互形式越來(lái)越趨向共通。
借由這篇文章開了“設(shè)計(jì)控件”系列的坑，接下來(lái)會(huì)繼續(xù)學(xué)習(xí)與分享其他的設(shè)計(jì)控件相關(guān)知識(shí)。包括之前的設(shè)計(jì)原則系列，也會(huì)繼續(xù)分享設(shè)計(jì)心理學(xué)法則等等。最近一直在思考自己的學(xué)習(xí)框架，除了設(shè)計(jì)基礎(chǔ)原則，設(shè)計(jì)控件外，還有設(shè)計(jì)模型以及設(shè)計(jì)工具等等?？右淹诤?，接下來(lái)就靠自己一鏟子一鏟子去填了。
文章來(lái)源：優(yōu)設(shè) 作者：Chinn
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com