火星网校
揭秘朋友圈爆款H5设计背后的故事
发布时间：2024-07-23 15:29:05 浏览量：176次
编辑导语：如何设计出爆款H5，在给用户带来深刻印象的同时，实现产品拉新？也许，你可以先从观察调研入手，进而再结合实际业务场景和目标人群需求进行内容策划。本篇文章里，作者就如何设计爆款H5一事做了解读，一起来看一下。
一、前言
每逢节假日，在朋友圈或聊天群都会看到各式各样的H5，种类繁多，甚至出现审美疲劳！但每年总会被一两款H5打动，朋友圈刷屏，成为爆款。你是否有想过这些爆款H5是如何被设计出来的呢？
从设计角度看，H5属于内容设计范畴，不仅要设计表达形式，还要策划内容。我们尝试从内容出发，设计一款H5，目的是为了提升品牌曝光，给产品端拉新增或活跃。在策划这次活动前，调研了一些刷屏H5，希望从中找到灵感。
二、调研
有了活动目标之后，对在朋友圈或聊天群出现频次高、参与好友多、能够打动自己的H5进行调研分析：
收集好一定数量的H5之后，对它们进行分类，大致可分为6类：「年度清单」、「年度关键词」、「邀请答题」、「签到打卡」、「DIY」、「人格测试」。
再从我们比较关心的两个维度进行象限划分：一是实现成本，因为我们本次活动投入预算低，资源有限；二是对APP的依赖程度，这个怎么理解呢，如年度清单这种H5，需要产品有很大的用户规模和粘性才能玩得起来，像支付宝和微信每年推出的年度清单，比较依赖产品自身体量。
定义好两个维度后，把调研的H5根据分类，落在四象限合适的位置，再结合“火星时代教育”产品特点，锁定本次H5的策划方向：实现成本低、对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的第一印象，决定了用户是否愿意继续往下玩下去，信息的传递非常关键；该场景会给用户造成两个顾虑：一是测试对我有什么用？二是测试是否值得信任？通过在界面上展示人格测试带来的收益和测试来源于权威理论，来减少用户顾虑，提升安全感。
结果页是测试结果的展示页面，也是激发用户分享的场景，起到承上启下的作用，信息的布局就非常关键：
第一是测试结果的展示，人格名称作为测试的首要结果，作为第一优先级展示，增加了标签、稀有度、潜在魅力系数的展示，也是为了最大化激起用户共鸣！
第二是引导分享，结果页最重要的行为引导就是分享；从提升用户分享动机和降低分享门槛，来提升用户分享率。
提升分享动机：测试你和好友的开黑默契度，激起用户的好奇心，提升分享动机。
降低分享门槛：设计了图片和链接两种分享形式，方便用户朋友圈和
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
9. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
大家今天走运了,我就把自己总结出来的学习UI设计的一些经验与大家一起分享吧。想做一个好的UI设计师除了应该具有一定的审美能力,还要了解整个产品的...
