筆者從設(shè)計原理、分類和使用場景角度入手，結(jié)合實際案例梳理分析了彈窗中的交互體驗設(shè)計。

工作越久，越會感覺到于細微處更見學(xué)問，但是，這個前提是我們能夠不斷總結(jié)自己做過的每一個案例，形成自己的知識體系，從而為我所用。這也就是人們常說的，工作中真正自己能夠帶走的是什么 。

?今天小胖就針對性的總結(jié)一下“彈窗”這個高頻的設(shè)計模塊，自己梳理總結(jié)，也希望對大家有用。

一、彈窗的定義、分類、使用場景

1. 彈窗的定義

定義：中斷用戶當(dāng)前操作并對其作出補充，或中斷用戶當(dāng)前操作并對其作出反饋。

這是很官方的一個說法，其實就是我們?nèi)粘Ｖ薪?jīng)?？吹降?，諸如“確認(rèn)要關(guān)閉這個頁面嗎？”、“送你10000元大禮包”、“主人，頁面加載中，請耐心等待”，等等。

2. 彈窗的分類

彈窗一般分為“模態(tài)彈窗”和“非模態(tài)彈窗”。

模態(tài)彈窗就像剛剛提到的“送你10000元大禮包”，帶有一定的強制性、打擾性，需要你點擊或者關(guān)閉；

非模態(tài)彈窗一般是對我們的某一處點擊做的系統(tǒng)回應(yīng)，如“您的私人助手已上線，有事情可以找她哦”，這種一般是不用點擊的。

彈窗種類：Dialog（Alerts）

彈窗種類：Actionbar

彈窗種類：Popover

彈窗種類：Toast/HUD

彈窗種類：Snackbar

3. 彈窗的使用場景

彈窗的使用場景，小胖這里總結(jié)了6點，大家可以作為參考。

（1）重要功能/信息提示

如功能更新小紅點、優(yōu)惠券彈窗。這一類一般是強制你看到的。

（2）信息反饋

已支付成功、已下載完畢。這一類是告訴你某個動作結(jié)束了，舉個栗子，比如你買東西付錢或者銀行轉(zhuǎn)賬，系統(tǒng)告訴你你自己操作完了，后邊有問題不要來找我哦。

（3）錯誤反饋

404、系統(tǒng)開小差兒等。人的耐心是有限的，出問題了趕緊認(rèn)錯，還能博得片刻同情。

（4）顯示快捷菜單

智能指引。隨著人工智能的普及，一些交互上也增加了智能的指引，這種一般是正常操作過程中給的一些快捷操作指示，可以減少你查找和重復(fù)工作，也是智能推薦的一個慣用場景。

（5）進度條（數(shù)據(jù)加載、登陸中）

這個很好理解，不解釋了。

（6）退出

我們的許多產(chǎn)品都需要我們登錄賬號，這樣一方面可以同步信息，一方面也可以形成用戶對產(chǎn)品的依賴感。所以，當(dāng)我們要推出一個產(chǎn)品的時候，系統(tǒng)就會問你“您確定要退出此賬號么？”。

另外一個經(jīng)典案例就是360清理大師這些PC桌面軟件，當(dāng)你要卸載他的時候，你會一遍遍的問你、跪求你“是不是確定要卸載他”，我就呵呵。

二、彈窗的設(shè)計理念及規(guī)范建議

彈窗雖然看似一個簡單、常見的功能，但是其承載的作用也是很重要的，因此，我們對于彈窗的設(shè)計仍然要從彈窗的本身價值出發(fā)，然后結(jié)合用戶體驗，達到體驗和價值的完美平衡。

彈窗的價值就是提示重點內(nèi)容，給與用戶一個實時的反饋，當(dāng)然也有部分是用來做運營的強關(guān)聯(lián)操作，大概有如下幾條規(guī)則可以遵守和靈活運用。

第一不要打擾用戶：控制好頻率、節(jié)點（如只有節(jié)日可以彈大的全屏彈窗，平常盡量不要彈）；控制好彈出的位置和大小，不要給用戶太多的交互負擔(dān)。

第二要清晰直接：文案要簡短明了、配合一定的示意圖、重點內(nèi)容要突出；雖然有些產(chǎn)品經(jīng)常忽悠用戶，如送1000元這種可能分解了20個券，但是請不要赤裸裸的欺騙。

第三交互：按鈕有主次之分，雖然有些產(chǎn)品故意把取消按鈕置灰使之不明顯，但是要適度，因人、因產(chǎn)品而不同。

第四要客觀設(shè)計：要有關(guān)掉彈窗的入口，不要讓用戶懵逼，當(dāng)然，如果你要強推、強彈，你的地盤你做主。

第五，如果有多種內(nèi)容同時需要在一個彈窗彈出，怎么辦？一是要做好多種內(nèi)容的排序，二是不同類的內(nèi)容盡量分開場景彈，不然會顯得不倫不類；還有一種情況，多個彈窗同時出現(xiàn)的時候，頁面的彈窗疊加在一起，無論是視覺還是感受都會非常差，建議慎重使用。

三、一個提升1000%效果的實操案例

若干年前，小胖做過一個H5銷售轉(zhuǎn)化的業(yè)務(wù)，用戶點擊短信中的推送鏈接，可以進入一個銷售轉(zhuǎn)化頁面，因為賣的是付費音頻課程，所以有過一次大的關(guān)鍵路徑修改，并且?guī)砹?0倍轉(zhuǎn)化的提升。

在初稿設(shè)計中，我們只是簡單的提示了用戶課程課程可以免費聽，經(jīng)過對數(shù)據(jù)的分析后，我們將頁面直接做成送紅包的形式，并且將試聽按鈕提前，整個數(shù)據(jù)便得到了極大的提升。

參考資料：

1. hhttps://www.uisdc.com/popup-window-design
2. https://www.jianshu.com/p/bca5b25c2dde
3. https://www.iamue.com/28481

#專欄作家#

小胖子奮斗，微信公眾號：夜來妖，人人都是產(chǎn)品經(jīng)理專欄作家。做了幾年產(chǎn)品。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議