編輯導(dǎo)語：如何設(shè)計出爆款H5，在給用戶帶來深刻印象的同時，實現(xiàn)產(chǎn)品拉新？也許，你可以先從觀察調(diào)研入手，進(jìn)而再結(jié)合實際業(yè)務(wù)場景和目標(biāo)人群需求進(jìn)行內(nèi)容策劃。本篇文章里，作者就如何設(shè)計爆款H5一事做了解讀，一起來看一下。

一、前言

每逢節(jié)假日，在朋友圈或聊天群都會看到各式各樣的H5，種類繁多，甚至出現(xiàn)審美疲勞！但每年總會被一兩款H5打動，朋友圈刷屏，成為爆款。你是否有想過這些爆款H5是如何被設(shè)計出來的呢？

從設(shè)計角度看，H5屬于內(nèi)容設(shè)計范疇，不僅要設(shè)計表達(dá)形式，還要策劃內(nèi)容。我們嘗試從內(nèi)容出發(fā)，設(shè)計一款H5，目的是為了提升品牌曝光，給產(chǎn)品端拉新增或活躍。在策劃這次活動前，調(diào)研了一些刷屏H5，希望從中找到靈感。

二、調(diào)研

有了活動目標(biāo)之后，對在朋友圈或聊天群出現(xiàn)頻次高、參與好友多、能夠打動自己的H5進(jìn)行調(diào)研分析：

收集好一定數(shù)量的H5之后，對它們進(jìn)行分類，大致可分為6類：「年度清單」、「年度關(guān)鍵詞」、「邀請答題」、「簽到打卡」、「DIY」、「人格測試」。

再從我們比較關(guān)心的兩個維度進(jìn)行象限劃分：一是實現(xiàn)成本，因為我們本次活動投入預(yù)算低，資源有限；二是對APP的依賴程度，這個怎么理解呢，如年度清單這種H5，需要產(chǎn)品有很大的用戶規(guī)模和粘性才能玩得起來，像支付寶和微信每年推出的年度清單，比較依賴產(chǎn)品自身體量。

定義好兩個維度后，把調(diào)研的H5根據(jù)分類，落在四象限合適的位置，再結(jié)合“企鵝電競APP”產(chǎn)品特點，鎖定本次H5的策劃方向：實現(xiàn)成本低、對APP依賴弱。

從四象限可以看出，「簽到打卡」、「年度關(guān)鍵詞」、「人格測試」、「邀請答題」都比較適合，那具體定什么方向呢？

這又要回到“企鵝電競APP”本身的業(yè)務(wù)，“企鵝電競APP”核心業(yè)務(wù)是做游戲直播，核心用戶群體也是喜歡玩游戲的用戶，那什么是游戲用戶感興趣的，能引起游戲用戶共鳴的呢？

從篩選出來的四個類別來看，我們認(rèn)為「人格測試」更能夠打動“企鵝電競APP”的用戶，于是確定這次內(nèi)容設(shè)計的方向就是：游戲人格測試。

三、設(shè)計過程

設(shè)計過程可分為內(nèi)容策劃和形式設(shè)計，具體拆分為三步：

1. 理論研究：人格測試的實現(xiàn)原理

1）理論基礎(chǔ)

調(diào)研發(fā)現(xiàn)，目前比較成熟且接受度比較高的測試?yán)碚撌荕BTI（Myers-Briggs Type Indicator），中文名叫邁爾斯-布里格斯性格分類指標(biāo)；該理論認(rèn)為人與人之間存在差異，這種差異主要從四個維度產(chǎn)生的：

• 一是動力的來源，分為外向型E和內(nèi)向型I；
• 二是接受信息的方式，分為感覺型S和直覺型N；
• 三是決策的方式，分為思維型T和情感型F；
• 四是對待不確定性的態(tài)度，分為判斷型J和直覺型P。

通過這四個維度組合就得到16種類型人格：

2）測試題目

這16種人格是如何測試出來的呢？

通過收集相關(guān)資料，找到了出題的原理：以上四個維度中，每個維度行為表現(xiàn)不同，同時每個維度又對應(yīng)多種行為表現(xiàn)，每一種行為又有相反的兩種表現(xiàn)形式，只要針對某一種行為進(jìn)行測試，提供兩種不同答案，用戶選擇其中一種答案，就能測試出結(jié)果。

比如我們來測試自己屬于“外傾型E”還是“內(nèi)傾型I”，用社交熱情這一行為來簡單舉例：在出題時，先描述一個場景，在場景中設(shè)置問題，提供相反方向的AB兩個答案，通過用戶的選擇來進(jìn)行判斷。

場景描述：在一次下班回家的地鐵上，你正站在地鐵車廂門口，偶遇一位同事從你身邊擠上地鐵。

提出問題：在他沒有看見你時，你會和他打招呼嗎？

選擇答案：A、會，B、不會。

如果選擇A，說明你表現(xiàn)出社交熱情，是“外傾性E”；如果選擇B，說明你不會表現(xiàn)社交熱情，是“內(nèi)傾型I”。

要測試出完整人格，需要對四個維度都進(jìn)行測試，組合答案后才能得出完整測試結(jié)果；當(dāng)然這只是簡單的、偏娛樂性質(zhì)的測試，并不夠嚴(yán)謹(jǐn)，但在第一印象下進(jìn)行測試，測試結(jié)果還是能觸發(fā)共鳴的。

2. 內(nèi)容策劃：激發(fā)用戶情感共鳴的內(nèi)容策劃

弄懂測試原理之后，就需要策劃測試所需的文本內(nèi)容，包括：

1. 人格測試的題目；
2. 16種人格的名稱；
3. 每種人格對應(yīng)的特點描述；

而策劃這些內(nèi)容之前，需要先弄清楚H5的用戶體驗?zāi)繕?biāo)：根據(jù)產(chǎn)品目標(biāo)制定產(chǎn)品策略，推導(dǎo)用戶體驗?zāi)繕?biāo)。

產(chǎn)品策略是：通過投放社交渠道，產(chǎn)生裂變來實現(xiàn)目標(biāo)——提升曝光和拉新促活。產(chǎn)生裂變的關(guān)鍵是需要用戶有分享行為，而觸發(fā)用戶分享行為的內(nèi)在動力就是情感共鳴，于是用戶體驗的目標(biāo)就是：情感共鳴。

根據(jù)產(chǎn)品的業(yè)務(wù)屬性，用戶群體主要為游戲用戶，內(nèi)容的策劃就需要更偏向游戲，這樣才有更大概率激發(fā)用戶情感共鳴。

在內(nèi)容策劃上，為了內(nèi)容能有更大的拓展空間，我們?yōu)閮?nèi)容設(shè)置了一個世界觀，這個世界觀就是元宇宙。

為什么選擇元宇宙作為世界觀？一是游戲和元宇宙有比較強(qiáng)的關(guān)聯(lián)；二是元宇宙當(dāng)下是個熱點；三是元宇宙足夠包容，有很大的想象空間。

1）人格測試的題目

如上所說，至少需要四道題才能測試出一個完整人格，在策劃題目的時候，我們的思考點是：在元宇宙情景里，什么樣的題目能引發(fā)用戶好奇，并愿意參與回答？我們想還是應(yīng)該從需求出發(fā)，滿足用戶需求的內(nèi)容，才有更大的可能吸引用戶參與。

元宇宙是熱點，但用戶對元宇宙的了解并不多，于是題目的策劃就融入了元宇宙相關(guān)的知識點，比如說第一道題，用戶剛進(jìn)入元宇宙，題目就是告訴用戶，「元宇宙是一個虛擬的世界，可以選擇任意形態(tài)存在」；這樣的題目開啟了用戶想象空間，傳遞知識點的同時激發(fā)用戶好奇心，吸引用戶參與。上線后的數(shù)據(jù)也證實了這一點，整個答題環(huán)節(jié)的完成率非常高。

2）16種人格的名稱

人格名稱是決定用戶是否分享的關(guān)鍵因素之一。名稱的命名，一是要求對真實人格的描述要準(zhǔn)確；二是要扣合游戲人格主題，需要帶有游戲?qū)傩院腿烁駥傩浴?/p>

這里我們的思考邏輯是這樣：在MBTI理論中，每種人格都有其擅長的職位，根據(jù)這些職位描述，在幾款游戲中尋找英雄與其對應(yīng)，而后根據(jù)游戲英雄來編輯人格名稱，延續(xù)測試準(zhǔn)確性的同時引起用戶共鳴。

3）每種人格對應(yīng)的特點描述

在MBTI理論中，每一種人格都有基本描述，結(jié)合游戲?qū)傩栽賹γ枋鲞M(jìn)行重新編輯，提取關(guān)鍵性格標(biāo)簽，當(dāng)用戶測試完成之后，通過醒目的標(biāo)簽來擊中用戶，喚起共鳴情感。

3. 設(shè)計：打造具有沉浸感的用戶體驗

整個設(shè)計環(huán)節(jié)分為：交互設(shè)計和視覺設(shè)計。

1）交互設(shè)計

① 交互框架和流程

基于用戶體驗的目標(biāo)-情感共鳴；交互設(shè)計上的思考是：如何使內(nèi)容在呈現(xiàn)和交互形式上服務(wù)于情感共鳴的用戶體驗?zāi)繕?biāo)。

內(nèi)容上設(shè)置了元宇宙世界觀，于是在交互框架和交互流程上也延續(xù)這樣的設(shè)定：“用戶進(jìn)入元宇宙中，出現(xiàn)一位元宇宙原住民（小方鵝）與用戶進(jìn)行對話，通過對話帶出題目和答案，用戶選擇答案即是回復(fù)，對話結(jié)束生成測試結(jié)果”。

設(shè)計成用聊天對話的交互方式，這種交互方式很有代入感，容易把用戶帶入元宇宙情景中，達(dá)到沉浸體驗的目的。

② 交互關(guān)鍵頁面：首頁和結(jié)果頁

首頁是用戶對整個H5的第一印象，決定了用戶是否愿意繼續(xù)往下玩下去，信息的傳遞非常關(guān)鍵；該場景會給用戶造成兩個顧慮：一是測試對我有什么用？二是測試是否值得信任？通過在界面上展示人格測試帶來的收益和測試來源于權(quán)威理論，來減少用戶顧慮，提升安全感。

結(jié)果頁是測試結(jié)果的展示頁面，也是激發(fā)用戶分享的場景，起到承上啟下的作用，信息的布局就非常關(guān)鍵：

第一是測試結(jié)果的展示，人格名稱作為測試的首要結(jié)果，作為第一優(yōu)先級展示，增加了標(biāo)簽、稀有度、潛在魅力系數(shù)的展示，也是為了最大化激起用戶共鳴！

第二是引導(dǎo)分享，結(jié)果頁最重要的行為引導(dǎo)就是分享；從提升用戶分享動機(jī)和降低分享門檻，來提升用戶分享率。

提升分享動機(jī)：測試你和好友的開黑默契度，激起用戶的好奇心，提升分享動機(jī)。

降低分享門檻：設(shè)計了圖片和鏈接兩種分享形式，方便用戶分享到朋友圈和群。

第三是引導(dǎo)進(jìn)入APP，聯(lián)合端內(nèi)的活動運營，挑選端內(nèi)活動中，最有吸引力的福利作為鉤子，吸引用戶去端內(nèi)參與活動，領(lǐng)取福利。

2）視覺設(shè)計

① 概念

前面提到我們?yōu)镠5定義了一個“元宇宙”的世界觀，我們要讓用戶在視覺感官上有代入感，而什么是元宇宙呢？

我們認(rèn)為，元宇宙是不同于現(xiàn)實世界中的事物，是充滿想象的未知時空，是神秘而又科幻的！要充滿想象力，則一定不能是太過真實和具象，是概念和抽象的，因此我們定義了三個關(guān)鍵詞：“科幻、神秘、抽象”，將這三個關(guān)鍵詞貫穿到整個視覺設(shè)計中去。

而答題測試是一系列復(fù)雜繁重的交互操作，為了讓用戶在感官上提升安全感，減少負(fù)擔(dān)，進(jìn)而降低用戶流失率，提升用戶完成率，我們必須遵循簡單，輕松的情感設(shè)計理念。

“元宇宙”是一個時空的概念，那承載這16種測試結(jié)果則需要一個具體的時空載體與之對應(yīng)。

根據(jù)我們前面所依據(jù)的MBTI人格模型，可以大致將這16種測試結(jié)果歸納到4類性格模型中去，即教條型、探索型、友善型、堅定型這四個性格分類，再根據(jù)這四個性格去細(xì)化四個不同細(xì)分的結(jié)果。因此我們拓展“元宇宙”概念，在結(jié)果頁上添加四個“平行時空”對應(yīng)四種性格。

在經(jīng)過反復(fù)討論后，確定了“秩序都市”、“熱帶雨林”、“沙漠綠洲”、“神秘極地”這四個平行時空概念，然后再根據(jù)細(xì)分結(jié)果來提煉抽象元素與平行時空進(jìn)行搭配出最終結(jié)果頁。

② 顏色提取

我們要讓用戶感覺到簡單、可信，才能讓用戶輕松參與測試并樂于分享，所以輕量化的設(shè)計能夠更具有親和力。

在顏色的提取中，我們盡量選擇明快且簡單的色彩，在設(shè)計心理學(xué)中，天空藍(lán)色是具有平和、輕松特征的顏色，往藍(lán)色里加入些許科幻神秘的紫色，成為我們選擇的主色調(diào)，應(yīng)用在按鈕與元素中。

白色同樣是簡單，舒適的用色，選擇大量的白色作為大部分文字承載的底色，盡量保留用戶最熟悉的閱讀環(huán)境，提升安全感。

元素的顏色遵循“科幻、神秘、抽象”的原則，搭配簡單、輕松的情感設(shè)計理念，在答題頁中使用白色鐳射材質(zhì)。

結(jié)果頁的色彩則更需個性化。由于結(jié)果頁需要最大限度的去幫助測試結(jié)果釋放出不同性格特征，進(jìn)而幫助用戶產(chǎn)生情感共鳴，讓用戶產(chǎn)生獨特性和認(rèn)同感，調(diào)動用戶的情緒，提升分享概率，所以結(jié)果頁根據(jù)不同的平行時空進(jìn)行色彩的搭配，元素則根據(jù)平行時空的環(huán)境顏色來搭配不同顏色傾向的玻璃材質(zhì)。

③ 設(shè)計執(zhí)行

有了上述的概念提取，我們要來具體制作設(shè)計。在執(zhí)行之前，我們要將概念通過包裝來形成有趣的整體，從而帶動用戶進(jìn)入到情境中。

我們采用時空穿梭的概念包裝整體的設(shè)計，封面是時空穿梭的入口，因此封面有旋轉(zhuǎn)的蟲洞；答題過程則是時空走廊，因此會產(chǎn)生空間感，漂浮不同的元素；結(jié)果頁則是到達(dá)相應(yīng)的平行時空獲得結(jié)果，因此會有不同地貌特征。

④ 封面設(shè)計

封面要承載標(biāo)題以及字?jǐn)?shù)繁多的推介文案，因此需要考慮標(biāo)題與文案的美觀性。

從文字的優(yōu)先級來看，標(biāo)題一定是優(yōu)先級最高的，因此標(biāo)題使用對比度最高且最顯眼的黑色大字；推介文案則搭配黑洞的裝飾線條，采用立體圓弧形轉(zhuǎn)動展示，使用白色與背景更好地融合，即可達(dá)到美觀又有效的信息承載方式。

⑤ 答題頁設(shè)計

點擊“開始答題”按鈕之后，就會立馬進(jìn)入答題對話框，為了快速讓用戶沉入到情景中，同時達(dá)到IP品牌推廣的目的，我們在動畫設(shè)計的時候讓我們的IP-小方鵝CUBIE與用戶“打招呼”，這樣可以讓用戶充滿驚喜并期待接下來的探索。

在答題對話框的設(shè)計上，出題框為白色底，黑色字的設(shè)計，與常用的聊天軟件對話框保持視覺上的一致，讓用戶更加熟悉增添用戶安全感，再加上科技線條作為裝飾，讓用戶感受到元宇宙的科幻的概念。

答題框則使用與答題按鈕相同的顏色，并在動畫上柔和過度，讓用戶清晰感知答案的呈上，提升答題整體觀感的流暢度。

答題頁的整體設(shè)計，我們想給用戶營造一個時空穿梭的概念，題目主圖元素采用鐳射材質(zhì)，抽象的簡單幾何3D動態(tài)模形，讓用戶充滿想象空間。

其次為了營造空間感概念，背景我們也制作了簡單圖形的漂浮動畫，并且在向上滾動時，動畫會產(chǎn)生前后的速度差，營造出強(qiáng)烈的空間關(guān)系，給用戶感官上的沖擊。

⑥ 結(jié)果頁設(shè)計

四個平行時空，我們制作了四個不同環(huán)境的地形和顏色；分別制作了“神秘極地”、“沙漠綠洲”、“秩序都市”、“神秘極地”初稿，但在使用過程中發(fā)現(xiàn)，地形太過寫實，結(jié)合在整體畫面中不夠具有想象力，與虛擬的元宇宙概念不符。

在經(jīng)過反復(fù)嘗試后決定用lowpoly的風(fēng)格將地形進(jìn)行進(jìn)一步抽象，再使用3S材質(zhì)將畫面與現(xiàn)實環(huán)境拉開差距，這樣既富有想象力又能提升整體品質(zhì)，看上去也會更加獨特。

平行時空中的不同性格元素，我們采用水晶寶石來進(jìn)行搭配，因為水晶、寶石屬于較為稀有的物品，而結(jié)果頁也是用戶看到自己性格的直觀視覺體現(xiàn)，因此我們想要讓用戶知道，你的性格非常珍貴，值得珍藏，讓用戶有分享欲。

將他們組合在一起，形成整體，再配合運營文案，形成整體的結(jié)果頁，小方鵝品牌logo做成印章，突出了品牌屬性，也讓品牌與結(jié)果的權(quán)威性進(jìn)行了掛鉤，用戶在看到自己性格結(jié)果之后的認(rèn)同感會為品牌帶來進(jìn)一步的好感。

四、總結(jié)

內(nèi)容型產(chǎn)品的核心體驗就是打動用戶，包括內(nèi)容傳遞的信息和交互形式。

在做工具型產(chǎn)品體驗設(shè)計時，在乎產(chǎn)品如何給用戶確定性，關(guān)注產(chǎn)品流程要如何設(shè)計；做內(nèi)容體驗設(shè)計時，除了關(guān)注內(nèi)容本身的體驗流程之外，執(zhí)行流程也非常重要。

隨著內(nèi)容運營越來越精細(xì)化，設(shè)計不僅要關(guān)注內(nèi)容的表現(xiàn)形式，還需思考內(nèi)容本身，也就是形式追隨內(nèi)容。

來自騰訊GLDesign

推薦關(guān)注公眾號 “騰訊設(shè)計”（ 微信ID：TencentDesign ），第一時間獲取騰訊官方的設(shè)計方法論

本文由 @騰訊設(shè)計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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