拆解拼多多的“每日搖紅包”互動(dòng)玩法

10 評(píng)論 8308 瀏覽 57 收藏 11 分鐘

拼多多作為“異軍突起”的電商平臺(tái),盡管它的“砍一刀”活動(dòng)經(jīng)常被人吐槽,但不可否認(rèn),拼多多在活動(dòng)運(yùn)營(yíng)方面有自己的一套經(jīng)驗(yàn)。本文作者對(duì)拼多多的“每日搖紅包”活動(dòng)進(jìn)行拆解,一起來看看吧。

適合人群:

  • UI/交互設(shè)計(jì)師:通過學(xué)習(xí)互動(dòng)玩法大拿的互動(dòng)玩法設(shè)計(jì),獲取電商類互動(dòng)玩法的設(shè)計(jì)參考。
  • 產(chǎn)品經(jīng)理/運(yùn)營(yíng):通過完整的玩法拆解,獲取類似活動(dòng)的策劃參考。
  • 電商從業(yè)者:獲取競(jìng)品分析。

拆解目標(biāo):通過對(duì)20220905線上“每日搖紅包”的玩法設(shè)計(jì)拆解,積累一份互動(dòng)玩法設(shè)計(jì)。

拆解路徑:

  1. 逐個(gè)環(huán)節(jié)的拆解->串聯(lián)
  2. 倒推設(shè)計(jì)思路
  3. 預(yù)判迭代方向

01 “每日搖紅包”互動(dòng)玩法核心流程拆解

體驗(yàn):為了測(cè)試玩法,我一邊操作一遍錄了視頻,發(fā)現(xiàn)不知不覺間就玩了近7分鐘!

1. 入口

首頁(yè)金剛位第二排,第二個(gè),黃金位置。

名稱:每日搖紅包,言簡(jiǎn)意賅,每天都可以進(jìn)來?yè)u紅包。

橫向比較其他坑位的名字+icon:

在商品名稱里,商品特點(diǎn)、動(dòng)作、激勵(lì)、時(shí)間周期是常用的因素。拼多多的坑位名稱里還有很多和“拼多多”相關(guān)的記憶點(diǎn),很多“多多”,朗朗上口,便于記憶。

icon則是以關(guān)鍵詞為主,再加具象化的呈現(xiàn),比如秒殺就是要搶,所以是鬧鐘形象。充值中心是為手機(jī)充值,所以是手機(jī)形象。免費(fèi)領(lǐng)商品,則是0元帶走商品。

所有icon里每日搖紅包是比較顯眼的綠色,50元也是抓人眼球的金額,再加上玩法加持,這個(gè)icon大概率是所有icon里點(diǎn)擊uv最高的。

2. 首次進(jìn)入活動(dòng)

當(dāng)日首次進(jìn)入活動(dòng),就有一連串的動(dòng)作告訴你:我給你打錢了!

這個(gè)頁(yè)面美中不足的是,立即領(lǐng)現(xiàn)金按鈕沒有任何動(dòng)效,主要是文案和主按鈕的樣式指引。而且主按鈕上的15很難一下子反應(yīng)過來是什么意思,如果主按鈕加上動(dòng)效,就可以去掉這個(gè)角標(biāo)。

在這里有一個(gè)漸變的動(dòng)效。首先這三步原本都是灰色。接下去從第一步開始,由灰變綠,字體從小變大。核心信息很清晰:0.02元,這個(gè)彈窗在做的事情也很清晰,給你打錢。

這就是一種體驗(yàn)感更好的交互,其實(shí)我們生活中常見的交互設(shè)計(jì)是:一個(gè)拆紅包動(dòng)效,拆開告訴你拿到了多少錢,同時(shí)錢到賬。

相比這種交互,拼多多的交互更有漸進(jìn)感,每一秒都和上一秒不同,等待感更弱。

打錢的交互結(jié)束后,就是一個(gè)仿微信式的到賬通知(上方彈層),再加上兩次手機(jī)振動(dòng)提升五感感知,進(jìn)一步提升互動(dòng)感。

并且出現(xiàn)一個(gè)彈窗告訴你,明天還能再來領(lǐng)。

接下去一般的交互會(huì)怎么做?讓你點(diǎn)個(gè)“好的”之類的按鈕。拼多多是怎么做的?

為你自動(dòng)關(guān)閉彈窗,然后出現(xiàn)一個(gè)強(qiáng)引導(dǎo)的手勢(shì)按鈕,告訴你:點(diǎn)它!

距離我上次操作已經(jīng)過去了8s,這8s里拼多多就做了一件事:給我打錢。這一套交互下來,不比看個(gè)紅包加載動(dòng)效要強(qiáng)?

再看搖一搖的引導(dǎo)。電商的互動(dòng)痛點(diǎn)在于,頁(yè)面太花,用戶難以關(guān)注到重點(diǎn)。好的,那就用動(dòng)態(tài)的小手告訴你要點(diǎn)什么,然后把其他所有不相關(guān)的信息都灰掉。并且配色用的是橙紅配綠,顏色沖擊也很抓人眼球。

接下去點(diǎn)擊領(lǐng)紅包按鈕,或者搖下手機(jī)后,就會(huì)出現(xiàn)一個(gè)新的動(dòng)效,由拼多多標(biāo)志活動(dòng)icon組成的小煙花,先收縮,后綻放。接下去又是一個(gè)振動(dòng)+彈層提醒,拼多多又塑造了一個(gè)給你打錢的感知。并且彈窗內(nèi)的金額也不是直接展示的,而是數(shù)字輪播動(dòng)效展示出來的。

點(diǎn)擊好的,收下之后,才到活動(dòng)主頁(yè)面。

拼多多用了15s的時(shí)間,抓住第一次點(diǎn)進(jìn)這個(gè)頁(yè)面的用戶的注意力。在此期間,我做了幾次點(diǎn)擊操作?4次,點(diǎn)入口,點(diǎn)領(lǐng)錢,點(diǎn)紅包,點(diǎn)收下。平均每4s一次點(diǎn)擊行為。反思我們平時(shí)的活動(dòng)設(shè)計(jì),是不是恨不得讓用戶每秒點(diǎn)一下?

好的互動(dòng)應(yīng)該是用戶用很少的操作,卻能獲得很不錯(cuò)的體驗(yàn),這才是沉浸式的體驗(yàn)。其實(shí)單機(jī)游戲中的交互也是,通常我們點(diǎn)擊后,人物就會(huì)進(jìn)行一套動(dòng)作,執(zhí)行外這套動(dòng)作,我們才需要再次點(diǎn)擊。電商互動(dòng)和用戶的交互過程就類似于一個(gè)單機(jī)游戲。

3. 活動(dòng)主頁(yè)面

拆解頁(yè)面的核心框架:

  • 用戶資產(chǎn):金額、有效期、提現(xiàn)按鈕
  • 活動(dòng)進(jìn)度條:還需要操作的次數(shù)、目標(biāo)獎(jiǎng)勵(lì)
  • 頁(yè)面中心:搖動(dòng)動(dòng)作(gif,動(dòng)一會(huì),停一下)+微信支付標(biāo)志,表明關(guān)鍵動(dòng)作和活動(dòng)記憶點(diǎn)(微信打錢)
  • 核心按鈕:進(jìn)度、剩余紅包數(shù)量,gif圖片
  • 任務(wù)按鈕:每日抽紅包、逛街得紅包(手指動(dòng)效)、下單返紅包、領(lǐng)紅包(任務(wù)列表)
  • 其他活動(dòng)入口:快速提現(xiàn)、全額返、中秋活動(dòng)
  • 商品流:搜索入口+商品流

4. 逛街的紅包任務(wù)

這個(gè)任務(wù)的目的是為了引導(dǎo)用戶瀏覽商品流,促成轉(zhuǎn)化,在三個(gè)任務(wù)icon中優(yōu)先級(jí)最高。點(diǎn)擊后下面的商品流自動(dòng)吸頂。

  • 搜索框:也在任務(wù)線中,搜索商品可以得到一個(gè)紅包。主動(dòng)的搜索行為成單的概率更大。
  • 瀏覽XX秒可領(lǐng)取X個(gè)紅包:這里拼多多設(shè)置了必須要滑動(dòng)頁(yè)面算瀏覽動(dòng)作,不然時(shí)間是不會(huì)動(dòng)的。
  • 優(yōu)先展示:我看過的/我收藏的/百億補(bǔ)貼。這個(gè)標(biāo)簽欄其實(shí)是挺奇怪的,因?yàn)檫@些邏輯應(yīng)該是融合在算法里,而不是讓用戶告訴你(用戶大概率也不會(huì)點(diǎn)這個(gè)東西),推測(cè)是在做實(shí)驗(yàn),看看點(diǎn)擊率和成單轉(zhuǎn)化。
  • 下面的sku:商品圖、直播標(biāo)識(shí)(動(dòng)態(tài))、商品名稱、商品標(biāo)識(shí)、價(jià)格、銷量

5. 當(dāng)天再次進(jìn)入活動(dòng)頁(yè)面

進(jìn)入頁(yè)面后,會(huì)有彈窗提示有紅包待打開。并且紅色按鈕會(huì)有動(dòng)效。

這里有個(gè)細(xì)節(jié),彈窗的出現(xiàn)是有動(dòng)效的,從屏幕中間由圓點(diǎn)展開。反思之前我之前的活動(dòng)設(shè)計(jì),都沒有摳過這種細(xì)節(jié)。而拼多多的交互設(shè)計(jì)滲透到了每一個(gè)交互環(huán)節(jié)中。

6. 下單返紅包

這個(gè)功能點(diǎn)開后,就會(huì)出現(xiàn)三個(gè)金蛋,這三個(gè)金蛋先會(huì)自己動(dòng)一會(huì),然后就會(huì)出現(xiàn)一個(gè)錘子敲擊金蛋。接下去就是pdd的老套路,砸開中間的那個(gè),再給你砸開左右各兩個(gè)。你砸開的那個(gè)會(huì)比其他的倆都要大。然后紅包就會(huì)變大,主按鈕就是引導(dǎo)你去下單。

02 總結(jié)

拼多多活動(dòng)交互設(shè)計(jì)要義:

  • 多動(dòng)效:塑造互動(dòng)感,并且銜接各個(gè)環(huán)節(jié)
  • 多指引:讓用戶明確的知道下一步點(diǎn)哪里
  • 多驚喜:讓用戶感到自己是幸運(yùn)的
  • 少點(diǎn)擊:減少需要用戶操作的環(huán)節(jié)

這四點(diǎn)都是為了讓用戶在參與活動(dòng)的過程中,多點(diǎn)“快思考”,少點(diǎn)“慢思考”。再反推這個(gè)活動(dòng)的意義,其實(shí)直接的成單應(yīng)該不高,但用戶停留時(shí)長(zhǎng)一定很高。在這個(gè)搶用戶有限注意力的時(shí)代,花幾分錢買用戶的幾分鐘甚至十幾分鐘,我想這個(gè)買賣對(duì)于拼多多目前來說還是劃算的。

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

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

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 拼多多老是捉弄人性,啥時(shí)候監(jiān)管重錘一下?

    來自廣東 回復(fù)
  2. 反正對(duì)拼多多是非常無語(yǔ)的一個(gè)狀態(tài),每次就跟耍人玩一樣呢、、、

    來自江西 回復(fù)
    1. 你是不是喜歡直接給你發(fā)錢 別整幺蛾子的那種

      來自廣東 回復(fù)
  3. 可愛的拼多多,它搶了我很多的注意力,我卻沒能從它手里搶到很多的紅包(錢)。

    來自中國(guó) 回復(fù)
    1. 動(dòng)效接動(dòng)效確實(shí)很搶注意力哈哈

      來自廣東 回復(fù)
  4. 問題是最終的紅包提現(xiàn)了多少錢

    來自廣東 回復(fù)
    1. 滿50元提現(xiàn),當(dāng)天24點(diǎn)清零

      來自廣東 回復(fù)
    2. 這個(gè)策略可以 ,完美解決產(chǎn)品對(duì)于活動(dòng)的獎(jiǎng)勵(lì)消化.

      來自廣東 回復(fù)
    3. 很早之前我拉了快100多人助力,都沒拿到返現(xiàn);現(xiàn)在他們就搞的簡(jiǎn)單了,今天就可以先發(fā)點(diǎn),爽一爽

      來自廣東 回復(fù)
    4. 了解,謝謝

      來自廣東 回復(fù)