测试类H5一直是非常受用户欢迎的一种形式，甭管是否能够测试准确，大家总会乐此不疲的参与其中，并且能够主动将活动分享出去，形成二次的传播裂变。那么，测试类H5该如何制作呢？我们可以通过下面这个H5案例来了解一下。

1、活动背景

案例品牌：积目，国内一款聚集90-00后的社交平台；案例名称：我们都是困住的人；活动目的：通过几个问题的测试，引导用户下载APP，同时增加用户活跃度；活动形式：测试H5 

2、活动流程

（1）加载页：一只不断闪烁滚动着眼珠的眼睛藏在全黑的暗夜里，纯白的加载进度数字迅速增加，加载完毕后自动进入漫画页；

（2）漫画页：黑色的格纹背景墙上出现了一幅幅人物宫格漫画图，男孩因在购物节疯狂“买买买”而懊悔不已，决心冲破消费陷阱与互联网困局，逃离去新的地方肆意流浪，鲜明色彩搭配着简要自白营造了一种亦幻亦真的飘渺感，漫画中动效的配合使氛围有缓有急，更加具有剧情感，使用户沉浸在故事情节中，最后打开的大门引导用户下滑进入答题页；

（3）答题页：用户下滑回答6个与流浪相关的问题，配合着赛博朋克风的插图及契合场景的动效使用户跟随着男孩的步伐最终到达困局的出口，点击交互提示进入海报页；

（4）海报页：以黑色+主题色的过渡色为背景色，由你的流浪人格+人格解析+最合拍的流浪伙伴组成海报主要内容，既新奇又温情，使用户有强烈的被理解感与分享欲，长按图片保存人格海报，点击“寻找流浪伙伴”将用户引流至积目APP；点击“一键分享好友”分享给好友；

3、页面设计

首先整支H5以黑色为主题色，营造了一种逃离互联网困局的紧张感和急迫氛围，同时也配合主题与画面元素形成了一种荒诞不真实的感觉；而紫色的在插画中及人物动漫背景的运用，为整体风格糅合进重金属的赛博朋克风，也会使用户萌生一种出逃去流浪的浪漫的冲动；用白色勾勒填充人物形象，与画面及背景色形成鲜明对比，使用户的视觉体验更具有层次感；最后动效及转场的颜色设计主要采取黑、白和灰色三种主色调，与出逃的紧张氛围相契合，转场时的色彩连接也更顺畅。

4、活动体验

交互简单，操作简洁，以“点击”和“向上滑动”为交互方式，降低用户的认知成本及操作成本； 提示清晰，通过文案、交互手势与交互按钮的搭配引导用户完成操作，在用户回答完单个题目后即出现交互提示。

 5、活动总结

作为一款引导用户下载APP的H5案例，采用了测试问答的形式，题目全部与流浪有关，能够极好的引起大家的共鸣。而最后的人格分析结果，除了告知用户测试答案之外，也鼓励用户分享给好友，或者是引导用户下载AAP，这样就达到了此次活动的目的。