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

一、前言

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

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

二、調(diào)研

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

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

再?gòu)奈覀儽容^關(guān)心的兩個(gè)維度進(jìn)行象限劃分：一是實(shí)現(xiàn)成本，因?yàn)槲覀儽敬位顒?dòng)投入預(yù)算低，資源有限；二是對(duì)APP的依賴(lài)程度，這個(gè)怎么理解呢，如年度清單這種H5，需要產(chǎn)品有很大的用戶規(guī)模和粘性才能玩得起來(lái)，像支付寶和微信每年推出的年度清單，比較依賴(lài)產(chǎn)品自身體量。

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

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

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

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

三、設(shè)計(jì)過(guò)程

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

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

1）理論基礎(chǔ)

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

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

通過(guò)這四個(gè)維度組合就得到16種類(lèi)型人格：

2）測(cè)試題目

這16種人格是如何測(cè)試出來(lái)的呢？

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

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

場(chǎng)景描述：在一次下班回家的地鐵上，你正站在地鐵車(chē)廂門(mén)口，偶遇一位同事從你身邊擠上地鐵。

提出問(wèn)題：在他沒(méi)有看見(jiàn)你時(shí)，你會(huì)和他打招呼嗎？

選擇答案：A、會(huì)，B、不會(huì)。

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

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

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

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

1. 人格測(cè)試的題目；
2. 16種人格的名稱(chēng)；
3. 每種人格對(duì)應(yīng)的特點(diǎn)描述；

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

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

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

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

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

1）人格測(cè)試的題目

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

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

2）16種人格的名稱(chēng)

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

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

3）每種人格對(duì)應(yīng)的特點(diǎn)描述

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

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

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

1）交互設(shè)計(jì)

① 交互框架和流程

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

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

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

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

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

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

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

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

提升分享動(dòng)機(jī)：測(cè)試你和好友的開(kāi)黑默契度，激起用戶的好奇心，提升分享動(dòng)機(jī)。

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

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

2）視覺(jué)設(shè)計(jì)

① 概念

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

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

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

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

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

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

② 顏色提取

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

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

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

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

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

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

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

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

④ 封面設(shè)計(jì)

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

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

⑤ 答題頁(yè)設(shè)計(jì)

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

在答題對(duì)話框的設(shè)計(jì)上，出題框?yàn)榘咨祝谏值脑O(shè)計(jì)，與常用的聊天軟件對(duì)話框保持視覺(jué)上的一致，讓用戶更加熟悉增添用戶安全感，再加上科技線條作為裝飾，讓用戶感受到元宇宙的科幻的概念。

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

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

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

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

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

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

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

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

四、總結(jié)

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

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

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

來(lái)自騰訊GLDesign

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

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

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