案例|做H5没头绪？这有一份完整的H5案例思路思路|适配|ip|h5|案例|头绪

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

文章插图
大纲：

活动概述
主题构思
视觉风格设计
交互动效设计
关于适配
数据复盘总结

一、活动概述：OVERVIEW为什么做H5活动？
本活动由平安银行对公业务中台联合Planet B举办，以IT对公派驻全新设计的IP形象灯泡仔及家族成员为载体。
活动旨在推广对公业务中台产品，由wowdesign团队设计的IT对公派驻IP-灯泡仔及其家族品牌形象结合灯泡仔快闪打卡活动，线上线下联合运营推广对公业务中台。

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

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

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

文章插图
4. 综合分析结论

结合疫情下用户心理状态，疫情对他们生活、工作、经济的影响。
通过刷屏因素中的”共鸣“，再结合熟悉的网络流行语作为标签关键词，精准的贴合了用户表达自我、分享自我现状的诉求。
选用测试类玩法，让用户去测试pick自己的2020生活状态，了解自我，分享现状。

所以希望用户通过关键词选择，测试生成2020生活状态报告，由此击中了用户内心，引起共鸣，使其能参与转发此活动。并选定主题《pick你的2020戳心话》
三、UI风格设计：H5 STYLE

文章插图
【 案例|做H5没头绪？这有一份完整的H5案例思路】通过网易等平台过往H5案例分析，设计风格多为孟菲斯风格、蒸汽波故障风、插画风等较为年轻活泼富有表现力的风格。结合我们IP形象的线描风格和主题，最终敲定了孟菲斯风格设计风格。
该风格能表现各种富于个性化的文化内涵，从天真滑稽到怪诞、离奇等不同情趣。在色彩上运用一些明快、风趣、饱和度高的明亮色调，给用户极强的感官刺激和丰富的情感，贴合本次活动戳心话的各种话语场景。
设计展示：

文章插图

文章插图
四、交互动效设计：DYNAMIC EFFECT对于H5而言，简单不需思考的交互操作是基本的要求，炫酷好玩的交互动效是必不可少的加分项，我们把交互动效拆解为三个方面：
1. 操作指引动效首页的h5主题交代清楚之后，首要的就是引导用户去下一步的标签选择页面，所以按钮一定要在最舒适的点击位置，且有最强的操作提示，所以按钮呼吸缩放动画提示是一个不错的选择。