編輯導(dǎo)讀：現(xiàn)在流量越來(lái)越貴，越來(lái)越稀有，很多人都希望借助運(yùn)營(yíng)活動(dòng)來(lái)獲得更多的流量。彈窗作為重要的活動(dòng)引導(dǎo)方式，在給用戶強(qiáng)提醒的同時(shí)，也帶來(lái)了一定的干擾性。如何設(shè)計(jì)一個(gè)運(yùn)營(yíng)活動(dòng)的彈窗呢？本文作者根據(jù)自身工作經(jīng)驗(yàn)，對(duì)此展開了分析，與你分享。

當(dāng)下互聯(lián)網(wǎng)電商越來(lái)越注重運(yùn)營(yíng)活動(dòng)，將營(yíng)銷滲透在了用戶各個(gè)行為鏈路中，希望提升用戶的活動(dòng)感知，帶來(lái)更高的轉(zhuǎn)化。彈窗作為重要的活動(dòng)引導(dǎo)方式，在給用戶強(qiáng)提醒的同時(shí)，也帶來(lái)了一定的干擾性。

彈窗交互設(shè)計(jì)層面并不復(fù)雜，核心在于如何將信息有效的傳遞給用戶，激發(fā)用戶的參與熱情。剛好最近在項(xiàng)目中對(duì)彈窗設(shè)計(jì)有了一些感悟，總結(jié)起來(lái)分享給大家。

文章主要的內(nèi)容包括：

• 彈窗的內(nèi)在交互和外在形式
• 彈窗如何做好信息傳遞
• 彈窗中的體驗(yàn)設(shè)計(jì)維度

01 運(yùn)營(yíng)彈窗的交互和展現(xiàn)

1. 彈窗的內(nèi)在交互

彈窗是一種優(yōu)勢(shì)和弊端都非常明顯的交互形式。

1）優(yōu)勢(shì)

彈窗處于信息層級(jí)的最頂端，可以給用戶最強(qiáng)的提醒。通過(guò)增加半透明遮罩，更是牢牢的吸引了用戶視覺(jué)焦點(diǎn)。“模態(tài)形式”的彈窗要求用戶必須作出回饋后，才能繼續(xù)其他操作，強(qiáng)制性讓用戶根本無(wú)法忽略彈窗的存在。

同時(shí)彈窗相對(duì)于其他引導(dǎo)形式尺寸更大，能夠承載更多的活動(dòng)信息，有效的增強(qiáng)氛圍。這些優(yōu)點(diǎn)讓彈窗深受運(yùn)營(yíng)同學(xué)的歡迎。

2）弊端

很多場(chǎng)景下，彈窗并不在用戶的正常操作流程之中，會(huì)中斷用戶行為，增加用戶的理解成本和行為成本。加之電商平臺(tái)運(yùn)營(yíng)中時(shí)不時(shí)出現(xiàn)的夸大宣傳，或者誘導(dǎo)性的表達(dá)，讓用戶對(duì)彈窗有了一定的戒備心理，不少用戶看到彈窗的第一反應(yīng)就是關(guān)閉。

因此彈窗設(shè)計(jì)必須要清晰的展現(xiàn)出活動(dòng)的關(guān)鍵利益點(diǎn)，戳中用戶需求點(diǎn)，引導(dǎo)用戶參與活動(dòng)。

2. 彈窗的外在展現(xiàn)

彈窗設(shè)計(jì)的表現(xiàn)形式多種多樣，從表現(xiàn)形式上可以概括為面形和異形2大類。

1）面形彈窗

面形彈窗通過(guò)背景色將內(nèi)容圈定在一個(gè)比較規(guī)整的區(qū)域中。為了烘托氛圍，增強(qiáng)視覺(jué)沖擊力，彈窗會(huì)采用各種可視化表現(xiàn)形態(tài)。常見的有紅包、寶箱、禮盒等形式。如果處理不當(dāng)?shù)脑?，反而增加了彈窗的信息量，影響核心信息的傳達(dá)。例如下圖中的禮盒彈窗增加了各種細(xì)節(jié)，反而讓主題信息不那么搶眼。

2）異形彈窗

異形彈窗擺脫了背景限制，元素分散在遮罩層上，視覺(jué)層級(jí)更明顯。同時(shí)在深色遮罩上更容易增加特效，有利于突出核心內(nèi)容。不過(guò)當(dāng)彈窗內(nèi)容較多時(shí)，會(huì)造成內(nèi)容過(guò)于散碎。

因此在異形彈窗設(shè)計(jì)時(shí)，一方面要控制元素的數(shù)量，另一方面需要選用簡(jiǎn)單、規(guī)整的元素，避免造成用戶視覺(jué)動(dòng)線凌亂。

02?彈窗的信息傳遞

1. 信息傳遞方式

運(yùn)營(yíng)彈窗的引導(dǎo)內(nèi)容可以歸為3類。

1）文案引導(dǎo)

文案信息作為彈窗核心，借助可視化的氛圍，簡(jiǎn)單明了的傳達(dá)活動(dòng)內(nèi)容。通常以大額紅包、免費(fèi)得為核心利益點(diǎn)。例如“最高搶XXXX元紅包”、“最高贏XXXX元現(xiàn)金”，或者0元搶、無(wú)門檻券等。

簡(jiǎn)單的信息內(nèi)容，可以最大程度的減少用戶的思考成本，甚至行動(dòng)按鈕文案也簡(jiǎn)化為單字表達(dá)。

2）商品/券引導(dǎo)

這類彈窗更多的用于垂直電商，以具體商品折扣為核心賣點(diǎn)。通過(guò)價(jià)格、活動(dòng)信息吸引用戶進(jìn)入活動(dòng)會(huì)場(chǎng)，增加其他商品曝光和轉(zhuǎn)化幾率。因此彈窗的選品至關(guān)重要，必須能夠激發(fā)出用戶的購(gòu)物需求。

3）融合引導(dǎo)

如果單純的文案缺少賣點(diǎn)或者賣點(diǎn)不足，就需要利用商品更加直觀的展示活動(dòng)的價(jià)值點(diǎn)。例如多多買菜彈窗中通過(guò)商品直降信息，一方面喚醒用戶購(gòu)物需求，另一方面清晰的傳達(dá)了活動(dòng)折扣力度。

2. 文案表達(dá)

在不同的場(chǎng)景下，文案的表達(dá)也不相同。當(dāng)主動(dòng)推送彈窗時(shí)，一般會(huì)采用陳述性語(yǔ)氣，簡(jiǎn)潔有力的傳達(dá)出活動(dòng)主題和價(jià)值。而在用戶退出時(shí)，通常會(huì)采用反問(wèn)句，加重利益點(diǎn)的傳遞。

3. 行動(dòng)按鈕

通常情況下為了激勵(lì)用戶參與活動(dòng)，彈窗主動(dòng)曝光時(shí)，只會(huì)保留一個(gè)行動(dòng)按鈕引導(dǎo)用戶操作，而“關(guān)閉”按鈕則被弱化，甚至不顯示。

而在退出彈窗一般給出兩個(gè)選項(xiàng)按鈕，保證用戶的選擇權(quán)。不過(guò)拼多多在某些場(chǎng)景下，仍然只有一個(gè)行動(dòng)按鈕，更加強(qiáng)調(diào)對(duì)用戶引導(dǎo)。

03 彈窗的體驗(yàn)設(shè)計(jì)

彈窗設(shè)計(jì)并不復(fù)雜，但是想要起到應(yīng)有的效果，確實(shí)需要好好思考一番。我個(gè)人覺(jué)得彈窗體驗(yàn)維度可以分為3個(gè)層面。

1. 注重鏈路匹配

理論上講，任何頁(yè)面都可以增加彈窗。但是由于彈窗的干擾性過(guò)強(qiáng)，為了保證良好的用戶體驗(yàn)，彈窗一般只會(huì)在首頁(yè)、頻道頁(yè)和頁(yè)面退出時(shí)出現(xiàn)。

1）首頁(yè)彈窗

首頁(yè)彈窗無(wú)疑是曝光率最高的，可以說(shuō)是100%。但是首頁(yè)作為流量集合和分發(fā)頁(yè)面，必須要對(duì)彈窗進(jìn)行一定的控制。只有重大的運(yùn)營(yíng)活動(dòng)才可以在首頁(yè)發(fā)布，例如無(wú)門檻券活動(dòng)。

另一方面用戶大都抱著一定的行為目的使用產(chǎn)品。如果剛一打開產(chǎn)品，就出現(xiàn)彈窗，被打斷的感覺(jué)會(huì)更強(qiáng)，彈窗的關(guān)閉率相對(duì)也較高。因此首頁(yè)彈窗內(nèi)容需要與用戶身份有足夠強(qiáng)的關(guān)聯(lián)性，例如新人轉(zhuǎn)化、沉睡用戶喚醒等關(guān)鍵節(jié)點(diǎn)。

2）頻道頁(yè)彈窗

大多數(shù)的主動(dòng)彈窗會(huì)出現(xiàn)在頻道頁(yè)中，主要目的是活動(dòng)曝光，激勵(lì)轉(zhuǎn)化。當(dāng)然頻道頁(yè)的彈窗曝光率可能較低，覆蓋的用戶量也相對(duì)有限，需要其他引導(dǎo)方式配合，才能更好的吸引用戶。例如首頁(yè)Banner 曝光，頻道icon 動(dòng)效引導(dǎo)等等。

3）退出彈窗

退出彈窗更多的用于活動(dòng)頁(yè)面退出時(shí)。主要目標(biāo)是信息的二次曝光，防止用戶因?yàn)椴涣私忭?yè)面內(nèi)容影響轉(zhuǎn)化?；蛘咴黾犹崾拘畔?，引導(dǎo)用戶再次訪問(wèn)。

2. 增強(qiáng)信任感

為了吸引用戶點(diǎn)擊，彈窗中都會(huì)傳遞最大利益點(diǎn)，因此作為重要信息，各種大額或低價(jià)數(shù)字會(huì)被突出展示。然而套路多了，反而會(huì)增加用戶的不信任感。

隨著各大平臺(tái)紛紛推出的“百億補(bǔ)貼”活動(dòng)深入人心，強(qiáng)調(diào)活動(dòng)總價(jià)值或許更容易讓用戶接受。

另一方面彈窗信息需要準(zhǔn)確表達(dá)，避免虛假宣傳。

例如多多買菜推出的下單全額返，比較準(zhǔn)確的表達(dá)了活動(dòng)玩法。雖然是返券，而且單張券有最高金額限制，總的來(lái)說(shuō)套路不深。

但是雙11紅包雨活動(dòng)算是套路滿滿，彈窗顯示獲得了28元紅包，進(jìn)入頁(yè)面后發(fā)現(xiàn)竟然是28個(gè)1元紅包，瞬間感覺(jué)被嚴(yán)重欺騙了感情。

3. 降低干擾性

1）系列式設(shè)計(jì)增加新鮮感

現(xiàn)在很多彈窗的策略是活動(dòng)期間每天彈一次，用戶點(diǎn)擊后則不再?gòu)棾觥Ｋ詮棿翱赡軙?huì)讓用戶煩不勝煩，看到后會(huì)立刻關(guān)閉掉。為了緩解用戶的負(fù)面情緒，可以采用系列式彈窗設(shè)計(jì)。通過(guò)樣式的變化，降低用戶審美疲勞，吸引用戶關(guān)注點(diǎn)擊。

2）增加過(guò)渡緩沖干擾

為了減少?gòu)棿暗耐回＃梢詫棿皟?nèi)容進(jìn)行包裝，形成一個(gè)更有期待的過(guò)渡層，讓用戶更容易接受。例如某些場(chǎng)景下，拼多多增加了“禮包”形式作為中間層過(guò)渡，讓彈窗不那么生硬的出現(xiàn)在用戶面前。

3）融合動(dòng)效增強(qiáng)吸引力

用戶對(duì)動(dòng)效類的形式接受度更高，因此可以在彈窗中融入動(dòng)效，或者通過(guò)動(dòng)效引出彈窗，從而減少?gòu)棿暗母蓴_性。當(dāng)然這種形式更適用于重大的運(yùn)營(yíng)活動(dòng)，畢竟設(shè)計(jì)成本較高。

4）定時(shí)關(guān)閉減少操作成本

部分場(chǎng)景下可以在彈窗中加入定時(shí)關(guān)閉功能，一方面可以增加活動(dòng)緊迫性，激勵(lì)用戶領(lǐng)取，同時(shí)可以減少用戶操作。例如用戶主要在夜間觀看直播，更多的是躺在床上觀看，屬于不愿意或不方便手動(dòng)操作的場(chǎng)景，自動(dòng)關(guān)閉在一定程度上提升了用戶體驗(yàn)（純屬個(gè)人猜測(cè)）。

04 寫在最后

一直以來(lái)彈窗形式深受各種詬病，除了以上總結(jié)的設(shè)計(jì)技巧，還需要注意彈出的頻率、節(jié)點(diǎn)、客群的選擇等等?？偟膩?lái)說(shuō)，只有與用戶關(guān)聯(lián)度強(qiáng)，讓用戶看得懂的彈窗，才有可能激發(fā)用戶的行為動(dòng)機(jī)，帶來(lái)更好的商業(yè)價(jià)值。

#專欄作家#

子牧先生。公眾號(hào)：子牧UXD（HelloDesign），人人都是產(chǎn)品經(jīng)理專欄作家。產(chǎn)品體驗(yàn)設(shè)計(jì)師。8年互聯(lián)網(wǎng)行業(yè)經(jīng)驗(yàn)，擅長(zhǎng)體驗(yàn)設(shè)計(jì)思維、設(shè)計(jì)方法論、交互設(shè)計(jì)研究。

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

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