編輯導(dǎo)語(yǔ)：在產(chǎn)品設(shè)計(jì)中，彈窗也是重要設(shè)計(jì)對(duì)象之一，因?yàn)樗P(guān)系到用戶的產(chǎn)品體驗(yàn)，進(jìn)而影響到產(chǎn)品的用戶留存。如何畫出一個(gè)符合客戶和平臺(tái)要求的彈窗設(shè)計(jì)？本篇文章里，作者就對(duì)運(yùn)營(yíng)彈窗設(shè)計(jì)做了要點(diǎn)拆解，讓我們一起來(lái)看一下吧。

簽到提醒、會(huì)員購(gòu)買引導(dǎo)、福利發(fā)放等場(chǎng)景都需要依托于彈窗為載體進(jìn)行展示。分類并拆解設(shè)計(jì)細(xì)節(jié)，是畫好運(yùn)營(yíng)彈窗的先決條件。

一、彈窗屬性介紹

彈窗是一種典型的模態(tài)視圖。所謂“模態(tài)”是指，暫時(shí)中斷用戶操作，以確保用戶接收到重要通知，或?qū)Ｗ⒆龀瞿稠?xiàng)決策，半透明蒙版起到隔絕內(nèi)容層與浮出層的效果。當(dāng)用戶點(diǎn)擊彈窗中的按鈕時(shí)，才能退出模態(tài)視圖。

由于彈窗的阻斷感極強(qiáng)，彈窗的出現(xiàn)必然伴隨體驗(yàn)的犧牲，因此，除非有足夠的理由，不然慎用彈窗。

彈窗大分類：

1. 基礎(chǔ)彈窗：通知類、決策類；
2. 運(yùn)營(yíng)彈窗。

基礎(chǔ)類型彈窗承載著重要功能，且與流程緊密相關(guān)，不容易引起用戶抵觸。

而運(yùn)營(yíng)類彈窗，往往背負(fù)著明確的運(yùn)營(yíng)指標(biāo)，以商業(yè)為導(dǎo)向，需要合理布局和策劃，提供足夠的利益點(diǎn)或趣味性，才能避免引起用戶反感。

二、運(yùn)營(yíng)彈窗的作用

運(yùn)營(yíng)彈窗的出現(xiàn)勢(shì)必對(duì)應(yīng)著一個(gè)明確而關(guān)鍵的目的，不同的運(yùn)營(yíng)目標(biāo)影響視覺(jué)呈現(xiàn)的方式。

運(yùn)營(yíng)彈窗的目標(biāo)有3大類：

1. 為了轉(zhuǎn)化：刺激用戶消費(fèi)，不管是發(fā)放折價(jià)券或者聯(lián)合會(huì)員，都是用利益引導(dǎo)用戶購(gòu)買，從而實(shí)現(xiàn)轉(zhuǎn)化。
2. 為了活躍：引導(dǎo)簽到或參與時(shí)效性活動(dòng)，以利益為驅(qū)動(dòng)，增加用戶打開產(chǎn)品的動(dòng)力。
3. 為了拉新：以拼多多為代表，用現(xiàn)金的形式吸引用戶大量分享，依附微信強(qiáng)大的社交網(wǎng)絡(luò)，力求達(dá)到指數(shù)型裂變。

三、運(yùn)營(yíng)彈窗在用戶行為路徑中的出現(xiàn)節(jié)點(diǎn)

彈窗本身帶有一定的強(qiáng)迫性，用戶沒(méi)有辦法禁止彈窗出現(xiàn)。糟糕的彈窗設(shè)計(jì)不僅達(dá)不到運(yùn)營(yíng)目標(biāo)，反而會(huì)讓用戶對(duì)產(chǎn)品整體的觀感直線下降。不妨以彈窗出現(xiàn)為起點(diǎn)，梳理用戶使用路徑。

四、運(yùn)營(yíng)彈窗的8種細(xì)分

基于以上分解的目標(biāo)維度和行為路徑維度，我們可以將運(yùn)營(yíng)彈窗細(xì)分為以下8類：利益發(fā)放、開卡彈窗、簽到彈窗、活動(dòng)彈窗、分享彈窗、反饋彈窗、挽留彈窗、回歸彈窗。

五、運(yùn)營(yíng)彈窗的設(shè)計(jì)邏輯拆解

1. 利益發(fā)放彈窗

利益發(fā)放彈窗的核心是：給用戶一個(gè)能激發(fā)消費(fèi)的理由，這個(gè)理由可以是具體的折扣優(yōu)惠、也可以是拼手氣抽獎(jiǎng)或者其他福利形式。

當(dāng)利益足夠吸引時(shí)，用戶越傾向沖動(dòng)消費(fèi)，而當(dāng)利益吸引不夠時(shí)，可以通過(guò)增加形式感或趣味性的玩法進(jìn)行補(bǔ)充。

2. 開卡彈窗

開卡彈窗，顧名思義，是為了引導(dǎo)用戶購(gòu)買會(huì)員。核心是突出會(huì)員的優(yōu)越性，常見(jiàn)的具體手法是，計(jì)算節(jié)省金額、展示專屬功能、制造緊迫感、提供免費(fèi)體驗(yàn)機(jī)會(huì)等。

根據(jù)產(chǎn)品不同的核心競(jìng)爭(zhēng)力，選擇合適的利益點(diǎn)，如工具性產(chǎn)品主要以產(chǎn)品性能為核心賣點(diǎn)，如果對(duì)自己產(chǎn)品有信心，不妨提供免費(fèi)會(huì)員體驗(yàn)機(jī)會(huì)。“由奢入儉難”，一旦體驗(yàn)過(guò)流暢高效的會(huì)員服務(wù)之后，升級(jí)服務(wù)的欲望將會(huì)更加強(qiáng)烈。

3. 簽到彈窗

簽到是很好的提升粘性的手段，根據(jù)簽到功能的權(quán)重，分配不同的展示形式。首頁(yè)導(dǎo)航欄、個(gè)人中心都是常見(jiàn)的放置簽到入口的位置。

部分產(chǎn)品著重突出簽到，當(dāng)用戶進(jìn)入首頁(yè)之后，直接跳出簽到彈窗。在流量最大的首頁(yè)跳出簽到彈窗，好處是在總量上提升了進(jìn)入簽到流程的UV，但是壞處也相當(dāng)明顯。對(duì)于沒(méi)有簽到意愿的用戶來(lái)說(shuō)，這無(wú)疑是一種強(qiáng)硬的打斷，影響體驗(yàn)。

4. 活動(dòng)彈窗

活動(dòng)彈窗主要是為了推廣活動(dòng)而存在，活動(dòng)的具體形式不勝枚舉，因此視覺(jué)樣式也多種多樣。

根據(jù)活動(dòng)性質(zhì)、品牌調(diào)性和目標(biāo)人群視覺(jué)偏好，選擇合適的視覺(jué)風(fēng)格進(jìn)行展示。

5. 分享彈窗

在獲客成本越來(lái)越高的當(dāng)下，如何有效拉新成為關(guān)鍵和難點(diǎn)。被拼多多“套路”過(guò)的用戶已然對(duì)分享提現(xiàn)有了防備。清晰明確的門檻和足夠強(qiáng)的利益點(diǎn)，才是撬動(dòng)用戶主動(dòng)分享的關(guān)鍵。

6. 反饋彈窗

反饋彈窗顧名思義，是告知用戶結(jié)果的彈窗，分為正反饋彈窗和負(fù)反饋彈窗兩種。

正反饋彈窗很好理解，告知用戶得到了某些福利，氛圍熱鬧愉悅。

而負(fù)反饋彈窗的設(shè)計(jì)方向有兩種，一種是“以正面姿態(tài)傳遞負(fù)面信息”，如下圖圖3，整體氛圍還是熱鬧喜慶的。另一種設(shè)計(jì)思路是“情感化表達(dá)負(fù)面信息”，將“遺憾”和品牌IP做結(jié)合，通過(guò)IP形象將負(fù)面情緒擬人化、卡通化，減輕用戶的失落感。

7. 挽留彈窗

當(dāng)用戶關(guān)閉某些彈窗后，又會(huì)立即出現(xiàn)一個(gè)祈求用戶回心轉(zhuǎn)意的挽留彈窗。挽留彈窗最需要注意的兩個(gè)重點(diǎn)：

1. 文案突出利益點(diǎn)：表明用戶將要放棄的福利是很可觀的，強(qiáng)化損失厭惡。
2. 按鈕位置：根據(jù)用戶習(xí)慣，右側(cè)按鈕是慣常行動(dòng)點(diǎn)，一般是順應(yīng)用戶意愿的，有“確定”的默認(rèn)內(nèi)涵；而挽留彈窗的行動(dòng)點(diǎn)布局是逆反的，用戶的“確定”實(shí)際上被放置于左側(cè)。

8. 回歸彈窗

回歸彈窗見(jiàn)于用戶在一段時(shí)間內(nèi)都沒(méi)有打開應(yīng)用或界面，用戶本身對(duì)產(chǎn)品的粘性較低。為了爭(zhēng)取用戶，在此機(jī)會(huì)給用戶發(fā)放福利，希望能盡量留住用戶。

六、運(yùn)營(yíng)彈窗的視覺(jué)分析

從視覺(jué)表現(xiàn)的角度拆解利益發(fā)放類彈窗，從簡(jiǎn)約到復(fù)雜的過(guò)程中，信息傳遞的效率逐漸下降，氛圍感逐漸抬升。針對(duì)不同的場(chǎng)景，權(quán)衡信息與氛圍之間的平衡。有些時(shí)候，設(shè)計(jì)師下意識(shí)會(huì)在彈窗上增加許多氛圍裝飾，雖然起到了豐富視覺(jué)的作用，但一定程度上也影響了信息的傳達(dá)。

活動(dòng)彈窗由于主題靈活多變，對(duì)應(yīng)視覺(jué)呈現(xiàn)方式也多種多樣。

常見(jiàn)彈窗有基礎(chǔ)形狀，一般是矩形，而有些彈窗突破了形狀的限制，沒(méi)有底板約束，更加自由。

工具性、金融性產(chǎn)品更加適合規(guī)則彈窗，凸顯專業(yè)克制，而娛樂(lè)性產(chǎn)品，如微博，重視氛圍打造，更加適合無(wú)邊框彈窗。

七、小結(jié)

設(shè)計(jì)運(yùn)營(yíng)彈窗，首先要了解設(shè)計(jì)目標(biāo)，做到心中有數(shù)，根據(jù)信息優(yōu)先級(jí)進(jìn)行視覺(jué)上的突出和弱化，平衡氛圍和信息傳達(dá)效率。整理并歸納優(yōu)秀案例，使設(shè)計(jì)更加有的放矢，有理有據(jù)。

本文由 @doo_W 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自?Unsplash，基于 CC0 協(xié)議