从实战案例看如何做一个简约风H5

随着H5交互形式的增加，H5活动设计时可以选择的方向越来越多，也让许多H5活动出现了参与门槛高、活动规则复杂等问题，大大影响了用户的参与积极性。特别是在无奖励的活动中，缺少了利益驱动后，这些复杂活动更是让人没有参与的欲望。相反，一些交互简单、信息传达直接的“简约风”H5却更受人们欢迎。下面，蓝橙互动就通过实战案例和大家聊聊，如何如何做一个“简约风”H5。

一、项目背景

本次项目是给黑龙江卫视“一起读书吧”全媒体阅读节目做的线上宣传H5活动，项目名称为森林书屋，结合世界读书日节日背景，针对看书的年轻人（年龄阶段主要为大学生到青年职场人），做一次好书分享推荐。

二、创意策划

本次活动的核心目的是分享出品方精选推荐的几本好书，H5通过独特的视觉效果、脑洞大开的切入点将用户引入到这场读书之旅中。

故事叙述则是采用了横版长图的形式，开头以名人名言引入，中间以排布式现代诗描述各个画面，并在画面中巧妙融入好书推荐的视频，用户可点击查看视频中的年度推荐书单，最后进行总结，呼吁大家多读书、读好书。

三、视觉设计

1、人物风格设定

确定故事流程后，进入视觉设计阶段。在人物的刻画上，视觉是有很多表现形式的，需要根据整体方案的气质去选择合适的视觉呈现。由于这次的活动是针对爱看书的年轻人，年龄阶段主要为18-30岁，为了使整体效果更自然，让用户更有代入感。尽管这是一个童话风的故事，我们海报摒弃了低龄卡通的设计方向，在人物设计上选择了更加成熟的青年向设计风格，更符合对用户年龄阶段的刻画。

2、故事场景设计

结合名称“森林书屋”，故事场景毫无疑问地设计成了一片森林，主人公背着书包行走在森林中，进入一本书的魔法之门，开启了他的读书之旅。

在书的世界里好似进入了小人国，主人公放下书包拿出书，在鹿身边安静的看书，岁月静好。

河边篝火旁弹吉他，有松鼠作伴，森林里大大小小的镜子里折射的是主人公脸的国王、猫、摩登女郎，表示在书中体会不同人生美好。

在巨大的书上弹着钢琴，远处看到故乡暖暖的灯光，一家人围坐吃饭的场景，体验家的感觉。

书变成帐篷一样，在书里面邂逅无形的舞。

最后看完书的主人公背起书包，拿着书，从森林回到城市。读完书获得了力量的人，高昂着头，笑容满面。

3、视频设计

视频内容方面相对简单，主要是将书籍样式、书籍名称、作者、初版单位等基础信息展示出来，并通过转场动画进行切换展示。

四、程序开发

相比于视觉设计来说，这类展示型H5的制作相当简单，核心在于前端页面的展示，控制好H5一屏的显示尺寸尤为重要。由于H5为横版长图，且是假横屏形式，所以页面宽1280px*高870px，主要内容控制在宽1280px*高630px，以确保页面显示完整。

五、结语

“简约风”H5不是说H5的页面设计风格为简约风，而是指整体体验流程的简约，让用户通过简单的活动规则、简单的操作方式来参与活动，重拾H5只占用用户零碎时间，轻量小巧的特点。欢迎大家扫码体验一下这个休闲简单的H5活动。