朋友圈刷屏H5是如何设计的？

🔗 原文链接：https://mp.weixin.qq.com/s/BnrWqe2z…

导读：详细讲了大厂的人格测试的理论依据，插件类文章，可以放作品集里使用，展现自己的3d或者手绘能力

调研

H5大致可分为6类：「年度清单」、「年度关键词」、「邀请答题」、「签到打卡」、「DIY」、「人格测试」。

认为「人格测试」更能够打动“企鹅电竞APP”的用户，于是确定这次内容设计的方向就是：游戏人格测试。

设计过程

1、理论研究：人格测试的实现原理（MBTI）

2、内容策划：激发用户情感共鸣的内容策划

弄懂测试原理之后，就需要策划测试所需的文本内容，包括：

1. 人格测试的题目；
2. 16种人格的名称；
3. 每种人格对应的特点描述；

H5的用户体验目标：根据产品目标制定产品策略，推导用户体验目标。
产品策略是：通过投放社交渠道，产生裂变来实现目标-提升曝光和拉新促活。
产生裂变的关键是需要用户有分享行为，而触发用户分享行为的内在动力就是情感共鸣。
用户体验的目标就是：情感共鸣。

人格名称是决定用户是否分享的关键因素之一。名称的命名，一是要求对真实人格的描述要准确；二是要扣合游戏人格主题，需要带有游戏属性和人格属性；
将16种人格归类为四类人格，每个人格之下又有四种性格描述

设计：打造具有沉浸感的用户体验

交互设计

交互关键页面：首页和结果页
用户对于H5的第一印象时会有两个顾虑：一是测试对我有什么用？二是测试是否值得信任？
通过在界面上展示人格测试带来的收益和测试来源于权威理论，来减少用户顾虑，提升安全感。

结果页是测试结果的展示页面，也是激发用户分享的场景，起到承上启下的作用，信息的布局就非常关键：
第一是测试结果的展示，人格名称作为测试的首要结果，作为第一优先级展示，增加了标签、稀有度、潜在魅力系数的展示，也是为了最大化激起用户共鸣！
第二是引导分享，结果页最重要的行为引导就是分享；从提升用户分享动机和降低分享门槛，来提升用户分享率。
提升分享动机：测试你和好友的开黑默契度，激起用户的好奇心，提升分享动机。
降低分享门槛：设计了图片和链接两种分享形式，方便用户分享到朋友圈和群。

第三是引导进入APP，联合端内的活动运营，挑选端内活动中，最有吸引力的福利作为钩子，吸引用户去端内参与活动，领取福利。

视觉设计