天貓雙11是一場全民剁手節(jié)，本文作者親身參與了這場活動的策劃與完整設(shè)計，以下是他對活動的復(fù)盤總結(jié)，立刻學(xué)起來！

一、項目概況

「我的雙11-戰(zhàn)績」-移動媒體屏項目，是2017年阿里巴巴集團(tuán)，淘寶&天貓&研發(fā)效能等 BU 一起設(shè)計推出的雙11大促營銷活動；為吸引更多媒體和用戶來參與，分享和傳播阿里的雙11，力達(dá)制作引爆全民共嗨的營銷效果 。

二、項目背景&目標(biāo)

項目背景

往年雙11 PR 都是通過大屏對外傳播，用戶只是了解這件事情，但是參與度和熱情不足，大屏展示針對用戶的互動性也相對較弱。

項目目標(biāo)

• 分享：通過去中心的方式傳播雙11。
• 回流：分享提升站內(nèi)流量和回訪率。

三、產(chǎn)品方案

1. 如何刺激用戶分享？

通過去中心的方式傳播雙11：

精神驅(qū)動

• 對比：榮譽(yù)稱號；競爭排名
• 機(jī)制：對朋友有幫助的信息

利益驅(qū)動

• 獎勵：紅包
• 特權(quán)：折扣，例如全場8.8折卡

2. 如何引導(dǎo)用戶回流？

分享站內(nèi)提升流量和用戶回訪率/驅(qū)動力：

• 從眾心理：別人有的我也要有，提升點(diǎn)擊和購買力。
• 好奇心：誰在買，誰在推薦。
• 利益驅(qū)動：紅包、優(yōu)惠券等，特權(quán)碼等。

四、競品分析

理解和定義了項目以后，我們已經(jīng)清晰的知道自己接下來要做什么，如何去做，如何精準(zhǔn)的定位發(fā)力點(diǎn)。梳理清楚了項目和設(shè)計目標(biāo)后，為了避免「閉門造車」，也為了更加明晰的了解市場上已有的「熱梗」和流行趨勢元素，我首先對市場上比較火的 H5 頁面進(jìn)行了體驗(yàn)和分析，以下是給我體感比較豐富的幾個案例：

體驗(yàn)完以上的營銷活動，我發(fā)現(xiàn)這些優(yōu)秀的案例都具備3個特點(diǎn)：

• 數(shù)據(jù)以用戶為中心?；径家杂脩魝€人緯度展示，因?yàn)槊總€用戶的確都只關(guān)心和自己相關(guān)的數(shù)據(jù)信息。
• 強(qiáng)故事封裝數(shù)據(jù)。每一個產(chǎn)品的營銷活動都有一個相關(guān)的故事封裝，例如淘寶的「淘寶造物節(jié)」、杜蕾斯的「愛的密碼」，都充分利用用戶的好奇心和產(chǎn)品特性，做足了文章。
• 用戶分層，針對不同用戶給出不同利益點(diǎn)刺激。這些營銷案例的最終分享頁都與用戶的利益點(diǎn)進(jìn)行結(jié)偶，滿足不同層次用戶的生理/心理需求，例如網(wǎng)易云音樂的營銷/活動報告，總以親友口吻敘述用戶使用產(chǎn)品的歷程，引起用戶內(nèi)心深處最柔軟的情感部分，用戶感覺到自己被產(chǎn)品關(guān)注/關(guān)心，從而愿意付出更多情感和精力，幫助產(chǎn)品一起成長。

所以，從體驗(yàn)競品和競品分析中，我分析了使用/傳播我們頁面活動的用戶需求，針對不同層次的用戶，深挖了他們內(nèi)心深處的需求點(diǎn)，給出引導(dǎo)其引流的刺激點(diǎn)。

五、用戶分層&需求定位

從體驗(yàn)競品&競品分析中，我分析了使用/傳播我們頁面活動的用戶真實(shí)訴求，針對不同層次的用戶，深挖了他們內(nèi)心深處的需求點(diǎn)，給出引導(dǎo)其分享&引流的不同刺激點(diǎn)：

六、交互設(shè)計方案輸出

1. 交互稿1.0

針對以上定向的項目理解和定義，橫向的競品分析和用戶調(diào)研，對 PD 提供的數(shù)據(jù)和文檔進(jìn)行交互設(shè)計方案的輸出。整個交互方案從產(chǎn)出到定稿，共調(diào)整了9個版本，其中設(shè)計過程的價值對我來說甚超最終結(jié)果，因?yàn)檫^程中的查漏補(bǔ)缺，讓我真真實(shí)實(shí)感受到自己的成長和進(jìn)步，廢話不說，先從第一版的交互稿1.0說起。

在第一個版本里，提出最突出的亮點(diǎn)功能板塊有兩個。

亮點(diǎn)功能1：「時光機(jī)」的概念，第一板塊中的「轉(zhuǎn)動神秘羅盤，查看我的過去現(xiàn)在和未來」

把經(jīng)過的地方、喜歡過的品牌、買過的商品、個人標(biāo)簽稱號封裝在一個「時光機(jī)」的故事里，提煉成「走過」、「愛過」、「買過」、「有過」四個節(jié)點(diǎn)：

• 關(guān)于現(xiàn)在和過去：最初的愿望是希望用戶，在我們的頁面里看到自己的成長和蛻變，不同時期購買的商品和喜歡的品牌，代表了用戶特定時期的品味和回憶，這些產(chǎn)品/品牌從某些程度上也見證了用戶從「丑小鴨」到「男/女神」的蛻變，用戶可以查看自己歷年雙11的「剁手」記錄，查看購買的物件的同時，也感嘆一把自己的逝水年華，最終愿意把自己蛻變的/有趣的故事進(jìn)行分享。
• 關(guān)于未來：針對用戶曾經(jīng)和現(xiàn)在的購物記錄/瀏覽軌跡，對用戶明年雙11即將剁手的方向和典型物品進(jìn)行預(yù)測，挑起用戶好奇心和購買欲的同時，也為后續(xù)雙11力推的產(chǎn)品做出宣傳和推廣，最終引導(dǎo)用戶進(jìn)行分享傳播。

后來由于采集數(shù)據(jù)的成本太大，關(guān)于未來商品預(yù)測的算法邏輯過于復(fù)雜，項目的時間有限，設(shè)計輸出的時間太趕，此板塊延展性的功能被砍掉，只保留了當(dāng)前雙11實(shí)時的數(shù)據(jù)和信息。

亮點(diǎn)功能2：「查看我與身邊土豪距離有多遠(yuǎn)」

此功能板塊從三個維度去詮釋：

• 剁手排行
• 購買件數(shù)
• 區(qū)域貢獻(xiàn)

從這三個緯度詮釋信息的原因是，很多人可能消費(fèi)金額不多，可是購買件數(shù)很多，因此還是非常樂意去分享引流。

后來，還是因?yàn)橥梁?人均消費(fèi)數(shù)據(jù)的敏感性，也處于對用戶隱私數(shù)據(jù)的保護(hù)，我們只保留個人消費(fèi)的數(shù)據(jù)，和土豪的排名。

2. 交互稿 2.0 -8.0

在交互稿2.0–8.0的版本里面，主要做出的調(diào)整和亮點(diǎn)主要有以下幾點(diǎn)：

產(chǎn)品的整體封裝

優(yōu)化前的導(dǎo)航大標(biāo)題是非常正式的「雙11交易額」文案，優(yōu)化后是「我和雙11的那些江湖事兒～」，一部分是考慮到阿里的江湖文化，把整個雙11活動比喻成一場江湖大事；另一部分是用戶在雙11會場購買的行為也像是在此江湖中發(fā)生的奇聞逸事。

確定好主題后，進(jìn)而對頁面功能劃分為三個模塊：「江湖剁主」、「剁手神功榜」、「剁主浪跡」，把整體的功能數(shù)據(jù)封裝成一個故事，故事中不同的環(huán)節(jié)即是產(chǎn)品的核心功能，此操作既提升產(chǎn)品數(shù)據(jù)可讀性，又降低無趣，增加分享概率。

增加自定義分享板塊

最初的設(shè)定是分享整個頁面，包括個人頭銜/標(biāo)簽，購買數(shù)量，附近熱門商品等，但后續(xù)評審中考慮到用戶分享的欲望和分享次數(shù)都會被限制，有些數(shù)據(jù)不便曝光在朋友圈，最終確定支持用戶自定義分享，讓分享彈力、次數(shù)和機(jī)會也更多，最主要的是用戶的隱私數(shù)據(jù)得到了較好的處理。

增加土豪距離我的實(shí)際物理距離通知

調(diào)整前是用戶和上一名剁手黨進(jìn)行對比，例如通知用戶：「您距離上一名用戶剁手值相差300塊」，考慮到此信息對用戶刺激點(diǎn)太低，同時又要保護(hù)土豪用戶的數(shù)據(jù)隱私，另一方面也為了線上線下可以進(jìn)行互動趣味，我們最終確定添加土豪距離用戶的物理距離。

想象你在商場購物，手機(jī)突然通知你：余杭最大的土豪距離你200M，前方高能預(yù)警，你是否會立刻警惕興奮起來，從此擦肩的人都長了一張土豪的臉？還因?yàn)槭痔源蟛糠钟脩羰桥杂脩簦?jīng)調(diào)研驗(yàn)證，此功能點(diǎn)更能讓她們嗨起來，因此我們保留并做了深化處理。

除去上面的功能調(diào)整，其他的優(yōu)化點(diǎn)里面，我還強(qiáng)化了「我」和「土豪」 PK 的場景和氛圍，讓節(jié)日和剁手大賽的味道更濃更直觀，在這種「廝殺」的氛圍中，用戶的購買欲也更容易得到釋放。

經(jīng)過了版本1.0-8.0的調(diào)整，終于交互定稿了，在最終確定的交互稿中，可進(jìn)行完整頁面的分享，也可進(jìn)行自定義板塊的分享，單個頁面主要包括三個部分：

• 剁主浪跡
• 剁主排名&土豪大戰(zhàn)
• 街坊鄰居都在買什么

3. 交互定稿-主頁面分享

在交互定稿中，其實(shí)相比之前的版本，也做了很多細(xì)節(jié)的調(diào)整和優(yōu)化，這里我主要分 4個點(diǎn)給大家：

新增和明確剁手等級

個人分享頁中，相比之前只有區(qū)域稱號，此處增加購買力 LV 等級的概念和數(shù)據(jù)圖標(biāo)，目的是為了讓用戶只管明確感知自己的剁手段位和頂配消費(fèi)者的差距，希望高消費(fèi)用戶更愿意去曬；低消費(fèi)用戶更愿意自娛自樂，達(dá)到分享引流效果。

虛擬霧化用戶和土豪的真實(shí)物理距離

考慮到土豪自身的身心安全，直接透漏土豪的真實(shí)距離會讓土豪們感覺惶恐不安，所以對于土豪和用戶之間真實(shí)距離文案進(jìn)行重新設(shè)計。例如和土豪在同一個商場距離200M時候，表述為「距離兩畝地兒/一站公交車」，這種抽象又不失趣味性的表述，讓抽象距離更容易被用戶感知。

刺激用戶購買，新增商品人氣

在街坊鄰居都在買什么板塊里面，增加了購買人氣，目前已有 X 人進(jìn)行購買，增加產(chǎn)品的可信任度和購買用戶的從眾心理，相比之前只顯示商品信息更容易引導(dǎo)獲得用戶認(rèn)同和購買。

低頻但重要的信息不能砍掉，會流失重要類型群體

當(dāng)時在信息層級中，區(qū)域鄙視鏈中因?yàn)槠渌麉^(qū)域排名的操作低頻，用戶關(guān)注度也不高，如果從普通淘寶用戶角度，此信息是沒必要展示的；但是對于媒體用戶，此板塊的信息關(guān)注度非常高，非常容易引發(fā)熱點(diǎn)討論。

在這一點(diǎn)上，在做對外設(shè)計的時候還是需要非常關(guān)注特殊人群的介入，媒體人群在整體的分享受眾中所占比例的確不大，但是他們所發(fā)揮的輿論和傳播價值是對產(chǎn)品影響非常大的。

六、視覺設(shè)計方案輸出

七、設(shè)計驗(yàn)證 & 運(yùn)營成果

八、經(jīng)驗(yàn)總結(jié)

此項目從開始到結(jié)束，項目周期為45個工作日。從產(chǎn)品提出想法，到最終開發(fā)落地，測試推廣上線，時間非常緊迫，但是在有限的時間內(nèi)，大家還是非常用心的完成了全部工作，盡管效果不錯，但是其中也有些現(xiàn)在看來可以做得更好的地方。

首先針對項目的時間給出一些自己的建議：

其次，在不同的時間節(jié)點(diǎn)和不同的項目角色進(jìn)行溝通時，需注意的點(diǎn)如下：

對于異常狀態(tài)的設(shè)計，需注意事項有：

作為一個交互設(shè)計師，其實(shí)很多時候?qū)τ诮换ポ敵龅馁|(zhì)量驗(yàn)證中，是否對異常場景考慮全面，能否給出合適的解決方案，這是一個比較重要的指標(biāo)，但是在做對外產(chǎn)品的時候因?yàn)楸旧碛脩舻膶傩院蛯哟尾煌?，就會出現(xiàn)很多異常狀態(tài)。

首先考慮全所有的異常場景，可以對場景進(jìn)行歸類。

例如不同用戶類型的操作異常、網(wǎng)絡(luò)異常、空白頁面等，先從大的板塊梳理下去，具體到每一個異常頁面。自己多總結(jié)歸類的同時還可以發(fā)動小伙伴，因?yàn)轫椖拷M的小伙伴是來自不同的 BU ，關(guān)注的點(diǎn)和設(shè)計關(guān)注的點(diǎn)有所差異，所以可以拉起一場會議發(fā)動小伙伴的力量，盡量在設(shè)計的時候把所有的異常場景都覆蓋到，先總結(jié)，再完成，再完美。

其次，在阿里產(chǎn)品都在往國際化方向進(jìn)軍的時候，營銷設(shè)計必須考慮國際化的因素。

例如外國生活圈街道和人名字基本的顯示規(guī)則和需要考慮的超出寬度的場景等交互問題，具體排名的表述，這關(guān)系到外國友人直接的清晰認(rèn)知，我們在設(shè)計的時候也要考慮他們的生活場景和認(rèn)知習(xí)慣。

最后，在真實(shí)的場景中多體驗(yàn)自己的產(chǎn)品，揣摩用戶的真實(shí)心理。

例如在本次紅包的倒計時的邏輯設(shè)定中，紅包出現(xiàn)的前3秒鐘就開始倒計時，為了讓停留在本頁中的用戶提前感知到接下來會有紅包雨出現(xiàn)，但是到雙11當(dāng)天，我搶東西的時候，因?yàn)榧t包出現(xiàn)的比較頻繁，不停打斷我搶購，而且每次出現(xiàn)都有倒計時3秒鐘，其實(shí)當(dāng)時的體驗(yàn)是這3秒鐘有點(diǎn)像3分鐘，其實(shí)這一點(diǎn)是對真實(shí)場景下用戶的心理把握的還不夠到位，希望后續(xù)大家在做此類設(shè)計師可引以為戒。

九、結(jié)語

其實(shí)本人也是第一次做這種營銷形式的 2C 的產(chǎn)品&交互設(shè)計，因?yàn)槿粘Ｘ?fù)責(zé)的業(yè)務(wù)更多的是集團(tuán)內(nèi)部 2B 產(chǎn)品，發(fā)現(xiàn)在做對外的產(chǎn)品時和內(nèi)部產(chǎn)品，其實(shí)在設(shè)計的時候，有很大的不同，大概先扔個磚頭，后續(xù)再持續(xù)補(bǔ)充：

對于 2B 產(chǎn)品，特別是在集團(tuán)內(nèi)部，更關(guān)注的是產(chǎn)品本身的操作功能和效率、穩(wěn)定性等，好不好看相對沒那么重要，產(chǎn)品最大的競爭力就在于能解決問題，讓用戶更省心省力。

對于 2C 產(chǎn)品來說，用故事對產(chǎn)品和素材數(shù)據(jù)進(jìn)行封裝推送的能力卻非常重要，如何把不同的數(shù)據(jù)和信息通過一個故事讓用戶融入連接進(jìn)來，引起共鳴，get 到用戶的刺激點(diǎn)，讓用戶開心愉悅，為你的故事和情懷買單，從而愿意進(jìn)行分享和引流。

造成如此差異的原因，主要是因?yàn)椴煌漠a(chǎn)品定位、使用場景、用戶需求和使用習(xí)慣，我們在做設(shè)計的時候必須清楚我們的項目目標(biāo)和設(shè)計目標(biāo)是什么，并時刻謹(jǐn)記，才能不偏離產(chǎn)品方向和用戶需求，做出有價值的產(chǎn)品和設(shè)計。

關(guān)注阿里巴巴體驗(yàn)技術(shù)團(tuán)隊公眾號，第一時間了解更多精彩內(nèi)容，還有設(shè)計職位期待你的加入！

圖片素材來源：天貓

「雙11設(shè)計的背后」

• 《雙11干貨！寫給運(yùn)營視覺設(shè)計師的交互小技巧》
• 《今年的雙11品牌設(shè)計，官方首度揭秘背后全過程！》
• 《電商丨雙11期間，阿里巴巴UED的設(shè)計師都在做什么？》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備： http://hao.uisdc.com