随（suí）着H5交互（hù）形式的增加，H5活动设计时可以选（xuǎn）择的方向越来（lái）越多，也让许多H5活动（dòng）出现（xiàn）了（le）参与门槛高、活动规（guī）则复杂等问题（tí），大大影响（xiǎng）了（le）用户的参（cān）与积极（jí）性。特别（bié）是在无奖励的活动中，缺少了利益（yì）驱动后（hòu），这些复杂活动更（gèng）是让（ràng）人没有参与的欲望。相（xiàng）反，一些交互简单、信（xìn）息传达直接的“简约风”H5却更（gèng）受（shòu）人们欢迎。下面，BG大游和蓝橙互动（dòng）就通过实战案例和大家聊聊，如何如何做一个“简约风”H5。

一、项目背（bèi）景

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

二、创意（yì）策划（huá）

本次活（huó）动的核心目的是分享出品方精（jīng）选（xuǎn）推荐的几本（běn）好书，H5通过独（dú）特的视觉效果、脑洞（dòng）大（dà）开（kāi）的切入点将用户引入到这场读书之旅中。

故事叙述则是采用了横（héng）版长图（tú）的形（xíng）式，开（kāi）头（tóu）以名（míng）人（rén）名言引入，中（zhōng）间以排布式现（xiàn）代诗（shī）描述各个画面，并在画面中巧妙融（róng）入好书推荐的视频，用户可点击查看视频中的年度推荐书单，最后进行（háng）总结，呼吁大（dà）家多读书、读（dú）好书。

三、视（shì）觉设计（jì）

1、人物风格设（shè）定（dìng）

确定故事（shì）流程（chéng）后，进入视觉设计阶段（duàn）。在人物的刻（kè）画上，视觉（jiào）是（shì）有很多表（biǎo）现（xiàn）形式的，需（xū）要根据整（zhěng）体方案的气质去选择合适（shì）的视觉呈现。由于这次（cì）的活动是针对爱（ài）看书的年（nián）轻人，年龄阶段主要为18-30岁（suì），为了使整体效果更（gèng）自然（rán），让用户（hù）更有代入感。尽管这是一个童话风的故（gù）事，我们海报摒弃了（le）低龄卡通的设（shè）计方向，在人物设计（jì）上选择了更加成（chéng）熟的青年向设计风格（gé），更（gèng）符合（hé）对（duì）用户年龄阶（jiē）段的刻（kè）画。

2、故事（shì）场（chǎng）景设计

结合名称“森林（lín）书（shū）屋”，故事场（chǎng）景毫无（wú）疑问（wèn）地设计成了一片森（sēn）林，主人（rén）公背着书包行（háng）走在森林中，进入（rù）一本书的魔法之门，开（kāi）启了他的读书之旅。

在书（shū）的世（shì）界里好似进入了小（xiǎo）人（rén）国，主人公放下书包拿出书（shū），在鹿（lù）身边安静的（de）看书，岁月静好。

河边篝火旁（páng）弹吉他，有松鼠作伴（bàn），森林里大大小小的镜子里折射的是主（zhǔ）人公脸的国王、猫、摩（mó）登女郎，表示在书中（zhōng）体会（huì）不同人（rén）生美好。

在巨大的（de）书上弹着钢琴，远（yuǎn）处看到故（gù）乡暖暖的灯光，一家人围坐吃（chī）饭的场景（jǐng），体验家的感（gǎn）觉。

书变成帐篷（péng）一样，在书里面邂逅无形的舞。

最后看完书的主人公（gōng）背起书包，拿着书，从森林回到城市。读完书（shū）获得（dé）了力量的人（rén），高昂（áng）着头，笑容满（mǎn）面。

3、视频设计

视频（pín）内容方面（miàn）相对简单，主（zhǔ）要是将书籍样式、书籍（jí）名称、作者、初版单位等基础信息展示出（chū）来，并通过（guò）转场动（dòng）画（huà）进行切（qiē）换展示。

四、程序（xù）开发（fā）

相比于（yú）视觉设计来（lái）说（shuō），这类展示型H5的制作相当（dāng）简单，核心在于（yú）前端页面的展示（shì），控（kòng）制好H5一（yī）屏的显示尺寸尤为重要。由于H5为（wéi）横版长图，且是假横屏形式，所以（yǐ）页面（miàn）宽1280px*高870px，主要内（nèi）容控（kòng）制在宽1280px*高630px，以确保页面显示（shì）完整。

五、结语（yǔ）

“简约（yuē）风”H5不是说H5的（de）页面设计（jì）风（fēng）格为简约风（fēng），而是指整体体验流程的简约，让用户通（tōng）过简单的活动规则（zé）、简单的操作方式来参与活动（dòng），重拾H5只占（zhàn）用用户零（líng）碎时间（jiān），轻量（liàng）小巧的特点。欢迎（yíng）大（dà）家扫（sǎo）码体验（yàn）一下这个休闲简（jiǎn）单（dān）的H5活动（dòng）。