导语:朋友们,是否还记得朋友圈不断刷屏的网易H5活动?作为一位互联网设计师,不争气的眼泪从嘴角流了出来,馋呀、羡慕呀!同样九年义务教育,为啥人家的活动效果那么好?别人一做就爆,而自己一做就废。一款优秀的H5它包含哪些要素呢?下面通过这个踩过无数多坑的H5案例的思路分享,希望能给大家带来启发,避免再次踩坑。

大纲:
- 活动概述
- 主题构思
- 视觉风格设计
- 交互动效设计
- 关于适配
- 数据复盘总结
一、活动概述:OVERVIEW
为什么做H5活动?
本活动由平安银行对公业务中台联合Planet B举办,以IT对公派驻全新设计的IP形象灯泡仔及家族成员为载体。
活动旨在推广对公业务中台产品,由wowdesign团队设计的IT对公派驻IP-灯泡仔及其家族品牌形象结合灯泡仔快闪打卡活动,线上线下联合运营推广对公业务中台。

二、主题构思:H5 THEME
1. H5类型选择
什么样的活动主题能勾起用户的注意力?什么样的内容能引起用户的共鸣?
能让其自愿转发,愿意用这个虚拟的活动向朋友来展现表达自我人设。所以活动的方向选择尤为重要。我们对市场已有的H5活动做了归类,分析他们对应抓住了用户哪些痛点,从中获取方向。

1)测试类
契合了用户低成本有趣了解自我的需求。
2)新闻热点类
以热点话题、事件为素材,特点是时效性高,讲究与用户的距离,参与感、真实感。
3)互动游戏类
以互动性较强,特点多为有趣、简单易上手,愉悦感、成就感。
4)公益类
以社会热点问题为题材,如环保、保护濒危动物、关爱老人等,社会焦点问题出发,彰显社会责任感,给人深刻的教育警醒作用。
5)软文故事类
以独立的经历、故事为引导,多为熟为人知的生活、工作、感情的糗事,侧面达到某种营销目的。
2. 哪些因素影响用户参与并转发
用户的参与度与转发裂变数据,是衡量一个活动的成功与否。那么从用户心理学角度分析,影响因素有以下几点:自恋炫耀心理、共鸣心理、好的视觉效果。

3. 当下热点及用户心理状态
疫情之下,大家的心理和经济都受到不小影响,焦虑失望情绪高涨,希望得以表达情绪。

4. 综合分析结论
- 结合疫情下用户心理状态,疫情对他们生活、工作、经济的影响。
- 通过刷屏因素中的”共鸣“,再结合熟悉的网络流行语作为标签关键词,精准的贴合了用户表达自我、分享自我现状的诉求。
- 选用测试类玩法,让用户去测试pick自己的2020生活状态,了解自我,分享现状。
所以希望用户通过关键词选择,测试生成2020生活状态报告,由此击中了用户内心,引起共鸣,使其能参与转发此活动。并选定主题《pick你的2020戳心话》
三、UI风格设计:H5 STYLE
