編輯導(dǎo)語：我們?cè)谑褂密浖r(shí)經(jīng)常會(huì)遇到彈窗，指南彈窗、通知彈窗、廣告彈窗等等；這類彈窗的設(shè)計(jì)和運(yùn)營(yíng)要格外注意，會(huì)對(duì)用戶產(chǎn)生一些不好的體驗(yàn)感；本文作者對(duì)運(yùn)營(yíng)類活動(dòng)彈窗進(jìn)行了詳細(xì)的分析和介紹。

一、說明

彈窗常用于中斷用戶當(dāng)前操作對(duì)其作出補(bǔ)充，或中斷用戶當(dāng)前操作對(duì)其作出反饋；其價(jià)值在于提示重點(diǎn)內(nèi)容，完成業(yè)務(wù)流程的簡(jiǎn)單必要操作或給用戶提供實(shí)時(shí)反饋。

彈窗的使用一定要克制，它帶來視覺上的中斷，打擾用戶完成業(yè)務(wù)流程；再加上彈窗視覺面積較小，承載信息有限，應(yīng)當(dāng)盡量減少?gòu)棿笆褂谩?/p>

二、示例

三、設(shè)計(jì)要點(diǎn)

1. 注意通用原則

盡量減少使用：如要使用則一定要控制好頻率、節(jié)點(diǎn)，控制好彈出的位置和大小；思考是否可以使用吸底、吸頂?shù)刃螒B(tài)的通知欄（snackbar）來替代，一定不要多層彈窗堆疊。

信息有效觸達(dá)：信息類型上有文字、插圖等，組織時(shí)從信息關(guān)聯(lián)性、重要性、連續(xù)性等特性出發(fā)；通過背景分塊、字體、字號(hào)、粗細(xì)的區(qū)別來實(shí)現(xiàn)，有時(shí)候甚至可以輔以局部微動(dòng)效。

尊重用戶使用習(xí)慣：比如：提供彈窗關(guān)閉按鈕，作為安全措施；同時(shí)，提供體現(xiàn)便捷的交互手段，比如：點(diǎn)擊蒙層區(qū)域隱藏彈窗、彈窗自動(dòng)隱藏等。

重視氛圍和體驗(yàn)：彈窗有很多中業(yè)務(wù)使用場(chǎng)景，針對(duì)有營(yíng)銷性質(zhì)的彈窗，比如：應(yīng)用歡迎彈窗、應(yīng)用更新引導(dǎo)、重要活動(dòng)通知、營(yíng)銷活動(dòng)節(jié)點(diǎn)等；要通過插圖、局部微動(dòng)效等手段來打造體感。

2. 明確彈窗類型（按照業(yè)務(wù)功能）

1）歡迎彈窗

一般用于用戶首次進(jìn)入應(yīng)用時(shí)的友好提示，這一場(chǎng)景需求當(dāng)前主流應(yīng)用都采用多屏投教模式來實(shí)現(xiàn)。

與歡迎彈窗相比，它可以承載更多信息，但不可避免的阻斷了用戶對(duì)應(yīng)用的探索動(dòng)機(jī)，并不符合各系統(tǒng)的設(shè)計(jì)規(guī)范。

一般當(dāng)應(yīng)用做較大程度的改版時(shí)使用，對(duì)于承載較少信息的歡迎場(chǎng)景，個(gè)人建議使用歡迎彈窗，更為凝練、簡(jiǎn)單、用戶影響較小；只要氛圍營(yíng)造得到可以取得不錯(cuò)的效果。

歡迎彈窗一般只在用戶首次進(jìn)入應(yīng)用時(shí)出現(xiàn)一次，不要與多屏投教一起使用。

2）通知彈窗

一般用于重要的系統(tǒng)公告、與用戶密切相關(guān)的重要信息等內(nèi)容的披露；比如證監(jiān)會(huì)重要通知等、持倉(cāng)個(gè)股的重要風(fēng)險(xiǎn)提示等。

對(duì)于通知彈窗，設(shè)計(jì)師要有心理準(zhǔn)備：幾乎不會(huì)有用戶讀完你在彈窗里羅列的信息內(nèi)容。

在設(shè)計(jì)時(shí)，一方面需要使用信息組織以及排版技巧來盡可能提升閱讀體驗(yàn)；另外一方面，要巧妙平衡業(yè)務(wù)風(fēng)險(xiǎn)與用戶體驗(yàn)的矛盾，比如采用倒計(jì)時(shí)后按鈕可用的交互模式來限制用戶停留時(shí)長(zhǎng)，進(jìn)行合理風(fēng)控。

3）反饋彈窗

用于就用戶操作提供反饋，彈窗相比于其他的輕量級(jí)反饋組件如toast、hub、popover等，對(duì)流程的中斷效應(yīng)要大很多。

因此首先考慮其它輕量級(jí)反饋組件，只有當(dāng)反饋需要引起用戶更多情感共鳴或者反饋信息較多且重要；需要用戶做出決策操作時(shí)再使用反饋彈窗，比如破壞性操作的二次確認(rèn)等場(chǎng)景。

4）操作彈窗

當(dāng)業(yè)務(wù)流程需要用戶授權(quán)或作出決策、甚至輸入簡(jiǎn)單、必要字段輔助業(yè)務(wù)時(shí)，常使用操作彈窗；比如業(yè)務(wù)需要系統(tǒng)授權(quán)調(diào)用位置信息，或簽署必要的免責(zé)協(xié)議、完成抽獎(jiǎng)等場(chǎng)景。

在設(shè)計(jì)時(shí)一定要先考慮業(yè)務(wù)場(chǎng)景需求，綜合彈窗出現(xiàn)的流程節(jié)點(diǎn)以及信息承載能力，合理設(shè)計(jì)；避免彈窗承載超量信息帶來操作困難，或出現(xiàn)在不必要的節(jié)點(diǎn)阻斷流程；同時(shí)，一定要提供退出操作選項(xiàng)，給用戶充足的掌控感。

重點(diǎn)說一下用戶在彈窗中輸入信息時(shí)需要注意的內(nèi)容：

• 要明確彈窗只能承載輕量的信息輸入，多內(nèi)容的建議用表單頁面。
• 考慮軟鍵盤與彈窗一并出現(xiàn)，并使光標(biāo)自動(dòng)聚焦到第一個(gè)輸入項(xiàng)。
• 軟鍵盤類型根據(jù)輸入內(nèi)容做匹配。
• 考慮是否需要操作按鈕，操作邏輯是否通過軟鍵盤操作按鈕實(shí)現(xiàn)。

這里舉個(gè)簡(jiǎn)單的例子，用戶輸入手機(jī)號(hào)獲取登陸短信前為避免機(jī)器人惡意操作，需要輸入驗(yàn)證碼，驗(yàn)證碼何時(shí)出現(xiàn)最為合適？

還有一類擬物化的運(yùn)營(yíng)類操作彈窗，只是對(duì)彈窗皮膚進(jìn)行了設(shè)計(jì)，營(yíng)造了一定的氛圍和體感，這里不做說明。

5）挽留彈窗

一般用于在用戶離開某些業(yè)務(wù)流程時(shí)提示風(fēng)險(xiǎn)并挽留用戶；比如，某些離開表單輸入頁面時(shí)，常用彈窗提示用戶保存，并希望用戶完成輸入。

這樣的設(shè)計(jì)打破了用戶退出業(yè)務(wù)流程的路徑預(yù)期，容易給用戶帶來產(chǎn)品不可控的體驗(yàn)，使用時(shí)要克制。

尤其不要在挽留彈窗中設(shè)置其它的流程觸發(fā)按鈕，用戶點(diǎn)擊后喚起一個(gè)莫名其妙的流程，被欺騙、戲弄的感覺會(huì)很強(qiáng)烈，不要為了短期數(shù)據(jù)帶來用戶流失。

6）投教彈窗

投教彈窗一般用來用戶教育，比如：系統(tǒng)改版后，提示用戶新功能；或在用戶離開某項(xiàng)業(yè)務(wù)時(shí)，提示業(yè)務(wù)固定入口位置。

設(shè)計(jì)時(shí)第一要根據(jù)需求靈活排布文案、插圖等信息，可以在彈窗內(nèi)做左右滑動(dòng)操作；其次要注意彈窗出現(xiàn)的時(shí)機(jī)。

7）營(yíng)銷彈窗

營(yíng)銷彈窗的使用場(chǎng)景有明顯的營(yíng)銷特質(zhì)，比如引導(dǎo)用戶發(fā)現(xiàn)新功能，引導(dǎo)用戶評(píng)價(jià)應(yīng)用或者用戶的某一操作（訂閱）有了重要的新反饋。

設(shè)計(jì)時(shí)，要注意策略化，只有與用戶關(guān)聯(lián)性、重要性很高的內(nèi)容才能引導(dǎo)用戶進(jìn)入營(yíng)銷的業(yè)務(wù)功能中；而且在彈窗出現(xiàn)的時(shí)機(jī)也要有一定的設(shè)計(jì)，比如在用戶查看某一只個(gè)股而投顧直播說到該股票時(shí)，用彈窗引導(dǎo)就能提升直播轉(zhuǎn)化。

在周期性營(yíng)銷活動(dòng)中，比如大獎(jiǎng)結(jié)果公布，也可以在應(yīng)用全局用彈窗形式通知用戶、召回用戶訪問。

四、組成元素分析

1. 彈窗標(biāo)簽

彈窗標(biāo)簽可以明確彈窗業(yè)務(wù)主體，常在APP全局展示獨(dú)立業(yè)務(wù)場(chǎng)景的彈窗中使用，用來說明彈窗來自于哪個(gè)相關(guān)業(yè)務(wù)。

標(biāo)簽也有益于品牌投教、氛圍營(yíng)造，視場(chǎng)景需求進(jìn)行設(shè)計(jì)。

常見的有文字標(biāo)簽或Icon圖標(biāo)等。

2. 標(biāo)題及附屬標(biāo)題：主文案、附屬文案、裝飾性文案

彈窗剝奪了用戶對(duì)當(dāng)前狀況的掌控感，產(chǎn)生排斥心理，面積的局限也導(dǎo)致閱讀體驗(yàn)較差，設(shè)計(jì)師要有心理準(zhǔn)備——幾乎不會(huì)有用戶讀完你羅列的內(nèi)容。

因此凝練概括的標(biāo)題文案、簡(jiǎn)短明確、主次有序的內(nèi)容，才能夠讓用戶快速獲取信息、關(guān)閉彈窗、繼續(xù)操作，盡可能降低業(yè)務(wù)跳出率。

根據(jù)閱讀心理學(xué)，這里有幾個(gè)原則需要注意：

• 使用直白表意的語句，不要人為制造詞匯；
• 理解需要知識(shí)儲(chǔ)備，人借助心智模型識(shí)別內(nèi)容；人們偏好短行信息；
• 電子屏幕更難閱讀，高對(duì)比度、大字體能提供幫助。

3. 遮罩

彈窗是一種模態(tài)組件，在用戶和彈窗之間進(jìn)行明確的交互之前，頁面上的其他內(nèi)容不能被點(diǎn)觸操作。

遮罩提高了彈窗的頁面層級(jí)，遮罩背景透明度的選擇由彈窗需要用戶付出的聚焦程度有關(guān)，越需要用戶聚焦，遮罩越暗。

4. 操作按鈕

根據(jù)彈窗場(chǎng)景，操作按鈕可能由主按鈕、輔助按鈕、安全關(guān)閉icon等單獨(dú)或組合使用，在某些營(yíng)銷場(chǎng)景下，也可能出現(xiàn)擬物化的按鈕。

操作按鈕要足夠大且明晰，顏色選擇突出品牌色，且區(qū)別主從按鈕。

按鈕文案要明確易懂或有“煽動(dòng)性”，比如“取消自動(dòng)定投”的彈窗操作文案，設(shè)計(jì)主按鈕“確定”，輔助按鈕“取消”，就容易產(chǎn)生歧義；考慮主按鈕“確認(rèn)取消”，輔助按鈕文案“關(guān)閉”則可以避免。

安全關(guān)閉icon一般放置在彈窗下方，符合‘拇指定律’，容易觸達(dá)。

5. 其它組件

可視情況，在彈窗中加入其它附屬組件，比如：訂閱提醒和操作，可默認(rèn)勾選、投教內(nèi)容、品牌宣傳、氛圍元素。

五、優(yōu)化體驗(yàn)

1. 自動(dòng)收起

減少用戶操作，可以對(duì)彈窗自動(dòng)收起的功能設(shè)計(jì)，比如“3s自動(dòng)收下”，但是一定要用倒計(jì)時(shí)進(jìn)行提示，提供足夠的可見性來保證操控感。

2. 彈窗多級(jí)內(nèi)容演示

某些營(yíng)銷場(chǎng)景下，可以在一個(gè)彈窗中整合多個(gè)內(nèi)容；像Banner一樣，這些內(nèi)容卡片自動(dòng)切換展示，也可以手動(dòng)滑動(dòng)查看。

注意后面的內(nèi)容露出十分有限，只能給人同級(jí)內(nèi)容很多的映像，滑動(dòng)查看的概率很小，最好能有固定位置的入口承接。

3. 彈窗關(guān)閉后的引導(dǎo)

彈窗具有不可回溯的特點(diǎn)，且大概率用戶不會(huì)仔細(xì)研究彈窗內(nèi)容只想盡快關(guān)閉彈窗，進(jìn)行自己的業(yè)務(wù)操作。

這時(shí)候針對(duì)某些場(chǎng)景，比如應(yīng)用升級(jí)，可以設(shè)計(jì)一個(gè)固定位置的通知欄（snackbar）來繼承用戶在完成操作后的應(yīng)用升級(jí)引導(dǎo)；又或者可以在頁面設(shè)置固定位置浮層按鈕，并在收起彈窗時(shí)用動(dòng)效提示映射關(guān)系，方便用戶再次查看。

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

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