每逢节假日，在朋友圈或聊天群都会看到各式各样的H5，种类繁多，甚至出现审美疲劳！但每年总会被一两款H5打动，朋友圈刷屏，成为爆款。你是否有想过这些爆款H5是如何被设计出来的呢？
从设计角度看，H5属于内容设计范畴，不仅要设计表达形式，还要策划内容。我们尝试从内容出发，设计一款H5，目的是为了提升品牌曝光，给产品端拉新增或活跃。在策划这次活动前，调研了一些刷屏H5，希望从中找到灵感。
二、调研
有了活动目标之后，对在朋友圈或聊天群出现频次高、参与好友多、能够打动自己的H5进行调研分析：
定义好两个维度后，把调研的H5根据分类，落在四象限合适的位置，再结合“企鹅电竞APP”产品特点，锁定本次H5的策划方向：实现成本低、对APP依赖弱。
这又要回到“企鹅电竞APP”本身的业务，“企鹅电竞APP”核心业务是做游戏直播，核心用户群体也是喜欢玩游戏的用户，那什么是游戏用户感兴趣的，能引起游戏用户共鸣的呢？
从筛选出来的四个类别来看，我们认为「人格测试」更能够打动“企鹅电竞APP”的用户，于是确定这次内容设计的方向就是：游戏人格测试。
三、设计过程
设计过程可分为内容策划和形式设计，具体拆分为三步：
1.理论研究：人格测试的实现原理
1）理论基础
调研发现，目前比较成熟且接受度比较高的测试理论是MBTI（Myers-BriggsTypeIndicator），中文名叫迈尔斯-布里格斯性格分类指标；该理论认为人与人之间存在差异，这种差异主要从四个维度产生的：
通过这四个维度组合就得到16种类型人格：
2）测试题目
这16种人格是如何测试出来的呢？
比如我们来测试自己属于“外倾型E”还是“内倾型I”，用社交热情这一行为来简单举例：在出题时，先描述一个场景，在场景中设置问题，提供相反方向的AB两个答案，通过用户的选择来进行判断。
场景描述：在一次下班回家的地铁上，你正站在地铁车厢门口，偶遇一位同事从你身边挤上地铁。
提出问题：在他没有看见你时，你会和他打招呼吗？
选择答案：A、会，B、不会。
如果选择A，说明你表现出社交热情，是“外倾性E”；如果选择B，说明你不会表现社交热情，是“内倾型I”。
要测试出完整人格，需要对四个维度都进行测试，组合答案后才能得出完整测试结果；当然这只是简单的、偏娱乐性质的测试，并不够严谨，但在第一印象下进行测试，测试结果还是能触发共鸣的。
2.内容策划：激发用户情感共鸣的内容策划
弄懂测试原理之后，就需要策划测试所需的文本内容，包括：
而策划这些内容之前，需要先弄清楚H5的用户体验目标：根据产品目标制定产品策略，推导用户体验目标。
根据产品的业务属性，用户群体主要为游戏用户，内容的策划就需要更偏向游戏，这样才有更大概率激发用户情感共鸣。
在内容策划上，为了内容能有更大的拓展空间，我们为内容设置了一个世界观，这个世界观就是元宇宙。
为什么选择元宇宙作为世界观？一是游戏和元宇宙有比较强的关联；二是元宇宙当下是个热点；三是元宇宙足够包容，有很大的想象空间。
1）人格测试的题目
如上所说，至少需要四道题才能测试出一个完整人格，在策划题目的时候，我们的思考点是：在元宇宙情景里，什么样的题目能引发用户好奇，并愿意参与回答？我们想还是应该从需求出发，满足用户需求的内容，才有更大的可能吸引用户参与。
2）16种人格的名称
这里我们的思考逻辑是这样：在MBTI理论中，每种人格都有其擅长的职位，根据这些职位描述，在几款游戏中寻找英雄与其对应，而后根据游戏英雄来编辑人格名称，延续测试准确性的同时引起用户共鸣。
3）每种人格对应的特点描述
在MBTI理论中，每一种人格都有基本描述，结合游戏属性再对描述进行重新编辑，提取关键性格标签，当用户测试完成之后，通过醒目的标签来击中用户，唤起共鸣情感。
3.设计：打造具有沉浸感的用户体验
整个设计环节分为：交互设计和视觉设计。
1）交互设计
①交互框架和流程
基于用户体验的目标-情感共鸣；交互设计上的思考是：如何使内容在呈现和交互形式上服务于情感共鸣的用户体验目标。
内容上设置了元宇宙世界观，于是在交互框架和交互流程上也延续这样的设定：“用户进入元宇宙中，出现一位元宇宙原住民（小方鹅）与用户进行对话，通过对话带出题目和答案，用户选择答案即是回复，对话结束生成测试结果”。
设计成用聊天对话的交互方式，这种交互方式很有代入感，容易把用户带入元宇宙情景中，达到沉浸体验的目的。
②交互关键页面：首页和结果页
第一是测试结果的展示，人格名称作为测试的首要结果，作为第一优先级展示，增加了标签、稀有度、潜在魅力系数的展示，也是为了最大化激起用户共鸣！
第三是引导进入APP，联合端内的活动运营，挑选端内活动中，最有吸引力的福利作为钩子，吸引用户去端内参与活动，领取福利。
2）视觉设计
①概念
前面提到我们为H5定义了一个“元宇宙”的世界观，我们要让用户在视觉感官上有代入感，而什么是元宇宙呢？
我们认为，元宇宙是不同于现实世界中的事物，是充满想象的未知时空，是神秘而又科幻的！要充满想象力，则一定不能是太过真实和具象，是概念和抽象的，因此我们定义了三个关键词：“科幻、神秘、抽象”，将这三个关键词贯穿到整个视觉设计中去。
而答题测试是一系列复杂繁重的交互操作，为了让用户在感官上提升安全感，减少负担，进而降低用户流失率，提升用户完成率，我们必须遵循简单，轻松的情感设计理念。
“元宇宙”是一个时空的概念，那承载这16种测试结果则需要一个具体的时空载体与之对应。
根据我们前面所依据的MBTI人格模型，可以大致将这16种测试结果归纳到4类性格模型中去，即教条型、探索型、友善型、坚定型这四个性格分类，再根据这四个性格去细化四个不同细分的结果。因此我们拓展“元宇宙”概念，在结果页上添加四个“平行时空”对应四种性格。
在经过反复讨论后，确定了“秩序都市”、“热带雨林”、“沙漠绿洲”、“神秘极地”这四个平行时空概念，然后再根据细分结果来提炼抽象元素与平行时空进行搭配出最终结果页。
②颜色提取
在颜色的提取中，我们尽量选择明快且简单的色彩，在设计心理学中，天空蓝色是具有平和、轻松特征的颜色，往蓝色里加入些许科幻神秘的紫色，成为我们选择的主色调，应用在按钮与元素中。
白色同样是简单，舒适的用色，选择大量的白色作为大部分文字承载的底色，尽量保留用户最熟悉的阅读环境，提升安全感。
元素的颜色遵循“科幻、神秘、抽象”的原则，搭配简单、轻松的情感设计理念，在答题页中使用白色镭射材质。
③设计执行
有了上述的概念提取，我们要来具体制作设计。在执行之前，我们要将概念通过包装来形成有趣的整体，从而带动用户进入到情境中。
我们采用时空穿梭的概念包装整体的设计，封面是时空穿梭的入口，因此封面有旋转的虫洞；答题过程则是时空走廊，因此会产生空间感，漂浮不同的元素；结果页则是到达相应的平行时空获得结果，因此会有不同地貌特征。
④封面设计
封面要承载标题以及字数繁多的推介文案，因此需要考虑标题与文案的美观性。
从文字的优先级来看，标题一定是优先级最高的，因此标题使用对比度最高且最显眼的黑色大字；推介文案则搭配黑洞的装饰线条，采用立体圆弧形转动展示，使用白色与背景更好地融合，即可达到美观又有效的信息承载方式。
⑤答题页设计
点击“开始答题”按钮之后，就会立马进入答题对话框，为了快速让用户沉入到情景中，同时达到IP品牌推广的目的，我们在动画设计的时候让我们的IP-小方鹅CUBIE与用户“打招呼”，这样可以让用户充满惊喜并期待接下来的探索。
在答题对话框的设计上，出题框为白色底，黑色字的设计，与常用的聊天软件对话框保持视觉上的一致，让用户更加熟悉增添用户安全感，再加上科技线条作为装饰，让用户感受到元宇宙的科幻的概念。
答题框则使用与答题按钮相同的颜色，并在动画上柔和过度，让用户清晰感知答案的呈上，提升答题整体观感的流畅度。
答题页的整体设计，我们想给用户营造一个时空穿梭的概念，题目主图元素采用镭射材质，抽象的简单几何3D动态模形，让用户充满想象空间。
其次为了营造空间感概念，背景我们也制作了简单图形的漂浮动画，并且在向上滚动时，动画会产生前后的速度差，营造出强烈的空间关系，给用户感官上的冲击。
⑥结果页设计
四个平行时空，我们制作了四个不同环境的地形和颜色；分别制作了“神秘极地”、“沙漠绿洲”、“秩序都市”、“神秘极地”初稿，但在使用过程中发现，地形太过写实，结合在整体画面中不够具有想象力，与虚拟的元宇宙概念不符。
在经过反复尝试后决定用lowpoly的风格将地形进行进一步抽象，再使用3S材质将画面与现实环境拉开差距，这样既富有想象力又能提升整体品质，看上去也会更加独特。
将他们组合在一起，形成整体，再配合运营文案，形成整体的结果页，小方鹅品牌logo做成印章，突出了品牌属性，也让品牌与结果的权威性进行了挂钩，用户在看到自己性格结果之后的认同感会为品牌带来进一步的好感。
四、总结
内容型产品的核心体验就是打动用户，包括内容传递的信息和交互形式。
来自腾讯GLDesign
本文由@腾讯设计原创发布于人人都是产品经理，未经许可，禁止转载