H5案例分析 | 大禹三过家门而不入

一、基本信息

1、主题：大禹三过家门而不入

2、来源：方太

3、类型：展示型（图文+视频）

4、 技术实现：CreateJS + Video

二、内容策划

大禹三过家门而不入的故事我们听了很多遍，在这个H5中，将大禹治水和现代生活结合起来，重新演绎了“大禹治水”的故事。H5共分为了三个部分，分别是大禹第一次、第二次、第三次路过家门为何没进去的场景。

最后一部分设置问题：为何大禹13年不回家，夫妻关系却没有受影响？用户可自行从设定的选项中选出答案，从而带出广告。结尾处点击按钮“点击领取现金优惠券”可跳转至活动页面，进行导流。

三、交互设计

展示类H5主要以浏览为主，下滑手势作为辅助的交互动作。

四、视觉设计

视觉上以黄色等暖色调为主，符合复古泛黄的气息，画面元素的设计也非常富有中国风和传统文化的韵味，配有现代的一些元素，与文案想呼应，诙谐幽默的讲述形式。

五、参考亮点

1、加载页的处理，H5在加载页面显示了观看完整个H5所需要的时间，让用户有个心理预期。

2、每个部分单独来看是视频的形式，上下来看是图文的衔接，在每个部分的过度上，需要用户进行下拉的操作，避免用户单一观看的枯燥。

3、在此 H5中，广告位置的设计很巧妙，是和答题选项结合在一起的，有点“猝不及防”。

点击 大禹三过家门而不入 体验H5，并留下你的观点哦~

---

相关阅读

H5案例分析 | 天下第一快争霸赛

H5案例分析 | 这里有最懂你的一首诗

H5案例分析 | 江小白之这里藏着我的秘密

H5案例分析 | Vivo X 20 星耀红 圣诞读心术

H5案例分析 | 京东救援队