小寶：騰訊游戲HTML 5實戰案例！在這次朋友圈廣告的設計過程中，遇到了好多攔路虎，有驚喜有郁悶，但在這個過程中我收獲到了很多關于設計的經驗和對項目的理解。下面，我以設計師的角度來分享一下在這次朋友圈廣告中的一些過程和感悟，附設計流程圖喲。

前言：

最近有好多好多的優秀的朋友圈廣告出現在我們的眼前，得到了好多人的關注。

小寶也很期待能夠做一個有意思的朋友圈廣告給大家玩玩，沒想到夢想成真了！

這篇有趣的文章呢，我會分3大部分來和大家講述，請屏幕前的你耐心的聽我“墨跡”唄：

1. 一個前所未有的挑戰；
2. 《全民突擊》朋友圈廣告的設計回顧；
3. 就是很有震撼力的總結了；

接下來我就開始了呀！

一、前所未有的挑戰（空降了一個大大大需求）

聽說一款3D槍擊手游《全民突擊》要上微信朋友圈廣告了呀。項目組的同學們和我們設計師們都驚呆了，手忙腳輪的趕緊的展開籌劃和討論。

1.01項目背景

隨著槍擊手游的競爭越來越兇，玩家對《全民突擊》的認知還是不夠，需要做一次品牌的曝光宣傳，讓玩家對《全民突擊》的認知更深入做到拉新的一個宣傳效果，也借助微信朋友圈廣告的渠道，打造一個《全民突擊》是第一個上微信朋友圈廣告的槍擊游戲品類的游戲。小伙伴們都“雞凍濕”了！

1.02需求目的

《全民突擊》要在這個階段進行一次拉新，品牌曝光，提升產品知名度，還要保持老玩家活躍度和拉回流的目的，轉化新進，提升市場占有率，做一次品牌的整合傳播推廣，圍繞整個初始想法策劃了一個H5對其進行傳播。

隨后也制定了這次朋友圈廣告的定位人群的投放機制：

投放機制的目的也就是拉新進，就要針對目標用戶來刺激，觸發傳播和曝光。打準目標玩家，信息才有效的提高到達率。

對于前期的項目目標的挖掘和制定方向，我們與項目組也討論了很久，最后也很謝謝大家的相互積極的配合，有效率的做出了一些決定，讓我們繼續的往下走。

二、《全民突擊》微信朋友圈廣告的設計回顧

2.01前期構思

這個環節是最要人抓狂糾結也是最能學到東西的環節。我們對這次的設計創意進行了頭腦風暴，針對微信朋友圈廣告的緯度，圍繞著：

a.情感的表達是不是會更適合？

b.游戲的元素要不要也要在里面有所體現？

c.哪些內容會對玩家有排斥或者反感？

d.表述的故事情節會不會過于簡單了，玩家根本不在乎？

e.拉取微信與游戲信息會不會有隱私的風險？

..........（無止境的在思考和拋出所有想到的問題，只因為我們的腦汁太多了）

經過反復的糾結與考量，我們選出了2個方向進行設計：

方向1：

情感化：從小愛玩槍-愛槍的天性，講述一個從小到大，玩具槍的演變，呼喚天性—關聯全民突擊的游戲特性：槍在手隨時戰。（洞察：男人都喜歡玩槍，這個是天性，我們的目的就是想讓喜歡玩槍的男性用戶都來玩我們的《全民突擊》，來體驗拿槍來征服世界的快感！所以我們用槍的這個媒介做一個情懷的故事，想觸發每個男人心中的愛槍夢，從而達到拉新進的核心目的）；

方向2：

社交化：運用游戲的故事+社交（強關系鏈），千人千面的社交化表現，敘述一個號召你加入戰斗的故事；（洞察：玩游戲最好玩的是什么？是能和朋友一起玩，一起吐槽...所以我們運用朋友的這個關系，做一個強關系鏈的互動，表達出“我們那么多人都來玩了，你怎么還不來玩呢？”的一個拉人的情景，激發他也加入游戲，從而達到拉新進的目的。這就是人人都玩，我也要玩的心理打法）。

下面就開始介紹一下讓人緊張刺激的設計過程：

2.02設計過程（糾糾結結，反反復復，日日夜夜）

根據定好的設計方向的思路，我們開始了對我們的概念和想法方向進行了交互設計——想法平面化，深有體會的是，我的交互設計（高進度交互稿）有效的提高了我們和微信團隊，還有與老大匯報的工作效率和熱情。很多的體驗和細節都可以直接在交互稿體現和直接搜集建議優化修改，促進了跨部門合作的效率。

方向1創意過程：

情感化——不變的玩具，男人永遠的游戲

推導思路：

《全民突擊》的?玩家比例是9：1（男性玩家占據了所有），所以我們在探究為什么大多數都是男生喜愛玩槍擊類游戲，槍的吸引怎么那么吸引人？難道這就是男生的天性嗎？天生愛槍？

經過討論和糾結，我們決定以不同槍的玩具形式為載體，承載“樂趣”到“熱血”的情緒過渡和變化，最后以“重拾樂趣和熱血”反轉落到全民突擊，點題“不變的玩具，男人永遠的游戲！”喚起他內心的沖動，下載游戲玩一把。

交互圖：

文案&交互流程：

1.一擊命中的樂趣——自制彈弓

小時候，槐樹下，擦干鼻涕，握緊彈弓，誰是百步穿楊，彈無虛發的那個神槍手。

2.英姿颯爽的榮耀——木頭手槍

拼爹的年代，傳說中的木頭槍，誰把它別在腰間，成為了院子里的小將軍。

3.橫掃一切的勇氣——無敵水槍

小時烈日硝煙里的“嗷嗷”聲，濕透了褲衩背心，誰的水量最足，誰的射程最遠，誰就征服了一整個夏天。

4.集結戰斗的決心——BB彈槍

放學后，操場見，球臺上擺出裝備，籃筐下排好陣形，無數個小馬哥躍身戰場，誰能帶領大家走向人生巔峰。

5.過度頁

熱血、刺激是槍的奧義。勇敢沖鋒是戰斗中不敗的法寶。

6.落版頁（交代主題，提供下載）

整個H5的感覺就像是回憶，一個一個槍的呈現與文案的相互配合，再有相應的環境襯托，營造整體的過去到現在的回憶的氛圍感。

風格推導：

在整體的風格上我們使用了繪畫的方式進行表達，在整體的畫面會相對好把控和設計，如果是實體照片，相對在素材上需要很高的標準才能找到想要的效果，為了提高效率和質量，我們進行了繪畫和字體排版設計。

視覺稿展示：

方向2創意過程：

社交化——集結號（一封戰場來信，邀你一起并肩作戰）

推導思路：

對于微信朋友圈廣告的特性，除了打情感化的方向，還有一個方向就是打社交化互動方式的傳播，打造千人千面的信息傳播相對玩家來說是有吸引力的，玩家看到的是我和自己息息相關的內容，還有朋友的關系鏈的召喚，從而激發玩家有興趣進行傳播和推廣。

以“征兵”與“集結”為核心話題，構造一個劇情為導火線，與社交關系結合引出我們需要你與我并肩作戰的故事情節。

文案&交互流程：

在一個交互的邏輯梳理上，主要的就是針對3種人群做不同的表現（在文案上，在禮品發放上，在最后的銘牌上），千人千面的社交關系竟可能的做到足。

交互圖：(備注：這個方向的交互稿是微信團隊給出的方向，在這里也感謝微信團隊的小伙伴們的合作支持）

視覺稿呈現與交互敘述：

1.外部圖文的展示，一份征集令想得到吸引，吸引用戶點進“查看詳情”

2.在整體上使用了序列幀動畫的形式來交代了P2的故事情節（想一開始給用戶映入眼簾的就是一個相對有代入感的故事，吸引住用戶繼續往下看）；

3.創意亮點就是在這個拉取社交關系鏈的環節了。

通過全民突擊注冊用戶及微信蜜友的提取及判定邏輯，根據純新用戶/活躍用戶/拉新用戶的判定，借助五位親密微信好友的第一人稱文案，拉動用戶對廣告及游戲的興趣。（在不同的密友中，對用戶所說的文案都是不一樣的，是千人千面的一個重點的表現）；(備注：在這個拉取好友的邏輯技術，也是感謝微信團隊的全力配合，結合我們游戲的數據和微信好友數的篩選機制做了一套拉取邏輯）

拉取邏輯：

在前期與游戲后臺同學、微信游戲數據同學在討論實現的邏輯問題和難點，最終就拍定了推送好友邏輯的方式，以及在文案的語感上我們都做了相對有好的語句來預埋，讓強社交化的特性更為突出，對玩家更有觸動性，更真實。

4.針對3種玩家人群推送禮包（潛在用戶、活躍用戶、流失用戶）

這個也是在這次討論中，考慮到了針對不同的人群采取不同的獎勵機制，刺激玩家！提升拉新進的核心目標。

5.千人前面的徽章呈現

新人的是一個剛加入的狗牌，流失用戶與活躍用戶都是有等級的徽章（等級是拉取到游戲里的數據相互匹配的），為什么會設計這一個徽章的環節呢，因為其實只要是玩家都會對自己的一個數據，又或者是稱號榮譽很是在意，榮譽感對于一個FPS的玩家來說就像是一個真正的士兵得到了嘉獎一樣。所以我們調用了游戲的數據來針對發放玩家相對應的等級稱號。強化游戲特性，體現游戲的真實感，從而觸達玩家繼續喜歡這款游戲。

整個的H5主要流程與體驗就是圍繞著社交化的強關系鏈的緯度來促進拉新進的核心展開的設計，嘗試一些用游戲的數據體現，來促進玩家的興趣和分享率。

經過項目組和微信團隊的討論和糾結，以拉新進為核心目標的方向上，我們把方向2—強關系鏈的這個H5作為了這次上微信朋友圈廣告的H5。（相信也會有很多小伙伴還有印象吧）

三、《全民突擊》微信朋友圈廣告總結與反思

在整個過程中我們設計組和項目組，以及與微信團隊之間的跨團隊協作能力有了很好的提升，提高了相互的信任的友好態度，開闊了我們之后在合作的時候有更好的經驗和心得。這也是我有史以來第一次接到那么大的一個項目需求，受益良多！

在這里感謝在這次項目里付出的小伙伴們！謝謝給我們的信任和支持！

下面給這次的朋友圈廣告做一個小總結，也希望給今后即將要接觸朋友圈廣告的小伙伴一點啟發：

1.高曝光屬性的朋友圈廣告環境更利于品牌的知名度/認知度提升,除非已是知名度很高的大眾類產品，如快消類品牌/汽車品牌等。（建議：可考慮將微信朋友圈廣告做為其中一項廣告觸達渠道，同時，配合市場其他整合立體式的營銷手段多次廣告觸達達成深刻印象度及最終轉化，而非僅單依靠單一投放手段）；

2.朋友圈廣告設計的90%精力應關注外層創意的設計，努力實現外層創意即能概要傳達廣告主旨，而非押寶在點擊詳情

3.H5的頁數建議不超過4頁，盡管這樣，大部分用戶因為種種如網絡卡/沒興趣等原因，在進入H5后的第一頁就選擇了關掉頁面！驗證了：朋友圈廣告，90%的精力應放在外層創意！H5創意中，90%的精力應放在第一頁！第一頁就引起強烈好奇！進入第二頁后崩失率大大減少。

4.全民突擊游戲客戶端300MB，企圖用戶觀看廣告點擊詳情進入觀看完H5再點擊下載游戲，此行為要求過于理想，朋友圈廣告更適于如領取紅包/禮包/代金券等輕互動體驗。

整個的微信朋友圈廣告的項目完成時間是很緊張，但是我們還是噌噌噌的保質保量的完成了這次的項目。附加一個我們這次H5的設計時間流程：

感謝耐心的你，聽我在這里嘮嘮叨叨碎碎念的把這個項目說完了。

這是對我的一個總結，也希望能給你一些有用的經驗！下次見~

?【動效神器Hype零基礎入門教程系列】

先聊一下這個軟件的強大功能，附上簡單教程！
《Sketch神助攻！無代碼做動效神器Hype3入門教程》

中國臺灣設計師叫你用Hype做原型過場！
《無代碼動效神器！教你用HYPE3做APP原型的基礎過場（附神器）》

美丫姐手把手教你用Hype做Path菜單動畫！
《比AE還方便！教你用HYPE無代碼制作PATH扇形菜單動畫》

原文地址：tgideas.qq
作者：小寶

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量102萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com