起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識朋友圈刷屏H5是如何設計的？
編輯導語：如何設計出爆款H5，在給用戶帶來深刻印象的同時，實現產品拉新？也許，你可以先從觀察調研入手，進而再結合實際業務場景和目標人群需求進行內容策劃。本篇文章里，作者就如何設計爆款H5一事做了解讀，一起來看一下。
一、前言
每逢節假日，在朋友圈或聊天群都會看到各式各樣的H5，種類繁多，甚至出現審美疲勞！但每年總會被一兩款H5打動，朋友圈刷屏，成為爆款。你是否有想過這些爆款H5是如何被設計出來的呢？
從設計角度看，H5屬于內容設計范疇，不僅要設計表達形式，還要策劃內容。我們嘗試從內容出發，設計一款H5，目的是為了提升品牌曝光，給產品端拉新增或活躍。在策劃這次活動前，調研了一些刷屏H5，希望從中找到靈感。
二、調研
有了活動目標之后，對在朋友圈或聊天群出現頻次高、參與好友多、能夠打動自己的H5進行調研分析：
收集好一定數量的H5之后，對它們進行分類，大致可分為6類：「年度清單」、「年度關鍵詞」、「邀請答題」、「簽到打卡」、「DIY」、「人格測試」。
再從我們比較關心的兩個維度進行象限劃分：一是實現成本，因為我們本次活動投入預算低，資源有限；二是對APP的依賴程度，這個怎么理解呢，如年度清單這種H5，需要產品有很大的用戶規模和粘性才能玩得起來，像支付寶和微信每年推出的年度清單，比較依賴產品自身體量。
定義好兩個維度后，把調研的H5根據分類，落在四象限合適的位置，再結合“企鵝電競APP”產品特點，鎖定本次H5的策劃方向：實現成本低、對APP依賴弱。
從四象限可以看出，「簽到打卡」、「年度關鍵詞」、「人格測試」、「邀請答題」都比較適合，那具體定什么方向呢？
這又要回到“企鵝電競APP”本身的業務，“企鵝電競APP”核心業務是做游戲直播，核心用戶群體也是喜歡玩游戲的用戶，那什么是游戲用戶感興趣的，能引起游戲用戶共鳴的呢？
從篩選出來的四個類別來看，我們認為「人格測試」更能夠打動“企鵝電競APP”的用戶，于是確定這次內容設計的方向就是：游戲人格測試。
三、設計過程
設計過程可分為內容策劃和形式設計，具體拆分為三步：
1. 理論研究：人格測試的實現原理
1）理論基礎
調研發現，目前比較成熟且接受度比較高的測試理論是MBTI（Myers-Briggs Type Indicator），中文名叫邁爾斯-布里格斯性格分類指標；該理論認為人與人之間存在差異，這種差異主要從四個維度產生的：
- 一是動力的來源，分為外向型E和內向型I；
- 二是接受信息的方式，分為感覺型S和直覺型N；
- 三是決策的方式，分為思維型T和情感型F；
- 四是對待不確定性的態度，分為判斷型J和直覺型P。
通過這四個維度組合就得到16種類型人格：
2）測試題目
這16種人格是如何測試出來的呢？
通過收集相關資料，找到了出題的原理：以上四個維度中，每個維度行為表現不同，同時每個維度又對應多種行為表現，每一種行為又有相反的兩種表現形式，只要針對某一種行為進行測試，提供兩種不同答案，用戶選擇其中一種答案，就能測試出結果。
比如我們來測試自己屬于“外傾型E”還是“內傾型I”，用社交熱情這一行為來簡單舉例：在出題時，先描述一個場景，在場景中設置問題，提供相反方向的AB兩個答案，通過用戶的選擇來進行判斷。
場景描述：在一次下班回家的地鐵上，你正站在地鐵車廂門口，偶遇一位同事從你身邊擠上地鐵。
提出問題：在他沒有看見你時，你會和他打招呼嗎？
選擇答案：A、會，B、不會。
如果選擇A，說明你表現出社交熱情，是“外傾性E”；如果選擇B，說明你不會表現社交熱情，是“內傾型I”。
要測試出完整人格，需要對四個維度都進行測試，組合答案后才能得出完整測試結果；當然這只是簡單的、偏娛樂性質的測試，并不夠嚴謹，但在第一印象下進行測試，測試結果還是能觸發共鳴的。
2. 內容策劃：激發用戶情感共鳴的內容策劃
弄懂測試原理之后，就需要策劃測試所需的文本內容，包括：
- 人格測試的題目；
- 16種人格的名稱；
- 每種人格對應的特點描述；
而策劃這些內容之前，需要先弄清楚H5的用戶體驗目標：根據產品目標制定產品策略，推導用戶體驗目標。
產品策略是：通過投放社交渠道，產生裂變來實現目標——提升曝光和拉新促活。產生裂變的關鍵是需要用戶有分享行為，而觸發用戶分享行為的內在動力就是情感共鳴，于是用戶體驗的目標就是：情感共鳴。
根據產品的業務屬性，用戶群體主要為游戲用戶，內容的策劃就需要更偏向游戲，這樣才有更大概率激發用戶情感共鳴。
在內容策劃上，為了內容能有更大的拓展空間，我們為內容設置了一個世界觀，這個世界觀就是元宇宙。
為什么選擇元宇宙作為世界觀？一是游戲和元宇宙有比較強的關聯；二是元宇宙當下是個熱點；三是元宇宙足夠包容，有很大的想象空間。
1）人格測試的題目
如上所說，至少需要四道題才能測試出一個完整人格，在策劃題目的時候，我們的思考點是：在元宇宙情景里，什么樣的題目能引發用戶好奇，并愿意參與回答？我們想還是應該從需求出發，滿足用戶需求的內容，才有更大的可能吸引用戶參與。
元宇宙是熱點，但用戶對元宇宙的了解并不多，于是題目的策劃就融入了元宇宙相關的知識點，比如說第一道題，用戶剛進入元宇宙，題目就是告訴用戶，「元宇宙是一個虛擬的世界，可以選擇任意形態存在」；這樣的題目開啟了用戶想象空間，傳遞知識點的同時激發用戶好奇心，吸引用戶參與。上線后的數據也證實了這一點，整個答題環節的完成率非常高。
2）16種人格的名稱
人格名稱是決定用戶是否分享的關鍵因素之一。名稱的命名，一是要求對真實人格的描述要準確；二是要扣合游戲人格主題，需要帶有游戲屬性和人格屬性。
這里我們的思考邏輯是這樣：在MBTI理論中，每種人格都有其擅長的職位，根據這些職位描述，在幾款游戲中尋找英雄與其對應，而后根據游戲英雄來編輯人格名稱，延續測試準確性的同時引起用戶共鳴。
3）每種人格對應的特點描述
在MBTI理論中，每一種人格都有基本描述，結合游戲屬性再對描述進行重新編輯，提取關鍵性格標簽，當用戶測試完成之后，通過醒目的標簽來擊中用戶，喚起共鳴情感。
3. 設計：打造具有沉浸感的用戶體驗
整個設計環節分為：交互設計和視覺設計。
1）交互設計
① 交互框架和流程
基于用戶體驗的目標-情感共鳴；交互設計上的思考是：如何使內容在呈現和交互形式上服務于情感共鳴的用戶體驗目標。
內容上設置了元宇宙世界觀，于是在交互框架和交互流程上也延續這樣的設定：“用戶進入元宇宙中，出現一位元宇宙原住民（小方鵝）與用戶進行對話，通過對話帶出題目和答案，用戶選擇答案即是回復，對話結束生成測試結果”。
設計成用聊天對話的交互方式，這種交互方式很有代入感，容易把用戶帶入元宇宙情景中，達到沉浸體驗的目的。
② 交互關鍵頁面：首頁和結果頁
首頁是用戶對整個H5的第一印象，決定了用戶是否愿意繼續往下玩下去，信息的傳遞非常關鍵；該場景會給用戶造成兩個顧慮：一是測試對我有什么用？二是測試是否值得信任？通過在界面上展示人格測試帶來的收益和測試來源于權威理論，來減少用戶顧慮，提升安全感。
結果頁是測試結果的展示頁面，也是激發用戶分享的場景，起到承上啟下的作用，信息的布局就非常關鍵：
第一是測試結果的展示，人格名稱作為測試的首要結果，作為第一優先級展示，增加了標簽、稀有度、潛在魅力系數的展示，也是為了最大化激起用戶共鳴！
第二是引導分享，結果頁最重要的行為引導就是分享；從提升用戶分享動機和降低分享門檻，來提升用戶分享率。
提升分享動機：測試你和好友的開黑默契度，激起用戶的好奇心，提升分享動機。
降低分享門檻：設計了圖片和鏈接兩種分享形式，方便用戶分享到朋友圈和群。
第三是引導進入APP，聯合端內的活動運營，挑選端內活動中，最有吸引力的福利作為鉤子，吸引用戶去端內參與活動，領取福利。
2）視覺設計
① 概念
前面提到我們為H5定義了一個“元宇宙”的世界觀，我們要讓用戶在視覺感官上有代入感，而什么是元宇宙呢？
我們認為，元宇宙是不同于現實世界中的事物，是充滿想象的未知時空，是神秘而又科幻的！要充滿想象力，則一定不能是太過真實和具象，是概念和抽象的，因此我們定義了三個關鍵詞：“科幻、神秘、抽象”，將這三個關鍵詞貫穿到整個視覺設計中去。
而答題測試是一系列復雜繁重的交互操作，為了讓用戶在感官上提升安全感，減少負擔，進而降低用戶流失率，提升用戶完成率，我們必須遵循簡單，輕松的情感設計理念。
“元宇宙”是一個時空的概念，那承載這16種測試結果則需要一個具體的時空載體與之對應。
根據我們前面所依據的MBTI人格模型，可以大致將這16種測試結果歸納到4類性格模型中去，即教條型、探索型、友善型、堅定型這四個性格分類，再根據這四個性格去細化四個不同細分的結果。因此我們拓展“元宇宙”概念，在結果頁上添加四個“平行時空”對應四種性格。
在經過反復討論后，確定了“秩序都市”、“熱帶雨林”、“沙漠綠洲”、“神秘極地”這四個平行時空概念，然后再根據細分結果來提煉抽象元素與平行時空進行搭配出最終結果頁。
② 顏色提取
我們要讓用戶感覺到簡單、可信，才能讓用戶輕松參與測試并樂于分享，所以輕量化的設計能夠更具有親和力。
在顏色的提取中，我們盡量選擇明快且簡單的色彩，在設計心理學中，天空藍色是具有平和、輕松特征的顏色，往藍色里加入些許科幻神秘的紫色，成為我們選擇的主色調，應用在按鈕與元素中。
白色同樣是簡單，舒適的用色，選擇大量的白色作為大部分文字承載的底色，盡量保留用戶最熟悉的閱讀環境，提升安全感。
元素的顏色遵循“科幻、神秘、抽象”的原則，搭配簡單、輕松的情感設計理念，在答題頁中使用白色鐳射材質。
結果頁的色彩則更需個性化。由于結果頁需要最大限度的去幫助測試結果釋放出不同性格特征，進而幫助用戶產生情感共鳴，讓用戶產生獨特性和認同感，調動用戶的情緒，提升分享概率，所以結果頁根據不同的平行時空進行色彩的搭配，元素則根據平行時空的環境顏色來搭配不同顏色傾向的玻璃材質。
③ 設計執行
有了上述的概念提取，我們要來具體制作設計。在執行之前，我們要將概念通過包裝來形成有趣的整體，從而帶動用戶進入到情境中。
我們采用時空穿梭的概念包裝整體的設計，封面是時空穿梭的入口，因此封面有旋轉的蟲洞；答題過程則是時空走廊，因此會產生空間感，漂浮不同的元素；結果頁則是到達相應的平行時空獲得結果，因此會有不同地貌特征。
④ 封面設計
封面要承載標題以及字數繁多的推介文案，因此需要考慮標題與文案的美觀性。
從文字的優先級來看，標題一定是優先級最高的，因此標題使用對比度最高且最顯眼的黑色大字；推介文案則搭配黑洞的裝飾線條，采用立體圓弧形轉動展示，使用白色與背景更好地融合，即可達到美觀又有效的信息承載方式。
⑤ 答題頁設計
點擊“開始答題”按鈕之后，就會立馬進入答題對話框，為了快速讓用戶沉入到情景中，同時達到IP品牌推廣的目的，我們在動畫設計的時候讓我們的IP-小方鵝CUBIE與用戶“打招呼”，這樣可以讓用戶充滿驚喜并期待接下來的探索。
在答題對話框的設計上，出題框為白色底，黑色字的設計，與常用的聊天軟件對話框保持視覺上的一致，讓用戶更加熟悉增添用戶安全感，再加上科技線條作為裝飾，讓用戶感受到元宇宙的科幻的概念。
答題框則使用與答題按鈕相同的顏色，并在動畫上柔和過度，讓用戶清晰感知答案的呈上，提升答題整體觀感的流暢度。
答題頁的整體設計，我們想給用戶營造一個時空穿梭的概念，題目主圖元素采用鐳射材質，抽象的簡單幾何3D動態模形，讓用戶充滿想象空間。
其次為了營造空間感概念，背景我們也制作了簡單圖形的漂浮動畫，并且在向上滾動時，動畫會產生前后的速度差，營造出強烈的空間關系，給用戶感官上的沖擊。
⑥ 結果頁設計
四個平行時空，我們制作了四個不同環境的地形和顏色；分別制作了“神秘極地”、“沙漠綠洲”、“秩序都市”、“神秘極地”初稿，但在使用過程中發現，地形太過寫實，結合在整體畫面中不夠具有想象力，與虛擬的元宇宙概念不符。
在經過反復嘗試后決定用lowpoly的風格將地形進行進一步抽象，再使用3S材質將畫面與現實環境拉開差距，這樣既富有想象力又能提升整體品質，看上去也會更加獨特。
平行時空中的不同性格元素，我們采用水晶寶石來進行搭配，因為水晶、寶石屬于較為稀有的物品，而結果頁也是用戶看到自己性格的直觀視覺體現，因此我們想要讓用戶知道，你的性格非常珍貴，值得珍藏，讓用戶有分享欲。
將他們組合在一起，形成整體，再配合運營文案，形成整體的結果頁，小方鵝品牌logo做成印章，突出了品牌屬性，也讓品牌與結果的權威性進行了掛鉤，用戶在看到自己性格結果之后的認同感會為品牌帶來進一步的好感。
四、總結
內容型產品的核心體驗就是打動用戶，包括內容傳遞的信息和交互形式。
在做工具型產品體驗設計時，在乎產品如何給用戶確定性，關注產品流程要如何設計；做內容體驗設計時，除了關注內容本身的體驗流程之外，執行流程也非常重要。
隨著內容運營越來越精細化，設計不僅要關注內容的表現形式，還需思考內容本身，也就是形式追隨內容。
來自騰訊GLDesign
推薦關注公眾號 “騰訊設計”（ 微信ID：TencentDesign ），第一時間獲取騰訊官方的設計方法論
本文由 @騰訊設計 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
最喜歡的h5就是做各種測試啦，感覺是一次對自己的探索，基本上在朋友圈看到了轉發就會去測，是很好的互動方式
內容型產品的核心體驗就是打動用戶，包括內容傳遞的信息和交互形式；網易云偶爾推出的小測試真的很戳我
在去年的時候，我的朋友圈被網易云給刷屏了，云村，確實是抓住了用戶的心。
確實有時候在某一段時期朋友圈確實會被同一樣東西刷屏，原來是這個原因，了解了