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

一、项目背景

本（běn）次项目是（shì）给黑龙（lóng）江卫视（shì）“一起读书（shū）吧（ba）”全媒体（tǐ）阅（yuè）读节（jiē）目做的线上（shàng）宣传H5活（huó）动（dòng），项（xiàng）目名称为森林书屋，结合世界读书日节日（rì）背景（jǐng），针对（duì）看（kàn）书的年轻人（年龄阶（jiē）段主要为大（dà）学生到（dào）青（qīng）年职（zhí）场人（rén）），做（zuò）一次好书分享推荐（jiàn）。

二（èr）、创意策划

本次活动的核心目的是分（fèn）享出品（pǐn）方精（jīng）选推荐的几本好书，H5通（tōng）过（guò）独特的视觉效果、脑（nǎo）洞大开的切入点将用户引入到这（zhè）场（chǎng）读书之旅中。

故事叙述则是（shì）采用了（le）横版长（zhǎng）图的形式，开头以名人名言引入，中间以排（pái）布式现（xiàn）代诗（shī）描述（shù）各（gè）个画（huà）面，并在画面（miàn）中（zhōng）巧（qiǎo）妙融入好书推（tuī）荐的视（shì）频，用户（hù）可点击查看视（shì）频中的年度推荐书单，最后进（jìn）行总结，呼吁大家多（duō）读（dú）书、读好书。

三、视（shì）觉设计

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

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

2、故（gù）事场景设计

结（jié）合名称“森林书屋”，故事场景毫无疑问（wèn）地设计成了一片森林，主人公（gōng）背着书包行走在（zài）森（sēn）林中，进入一本书的魔法之门，开启了他的读书之旅。

在书的世界里好似进（jìn）入了（le）小人国（guó），主人（rén）公（gōng）放（fàng）下书（shū）包（bāo）拿出书（shū），在鹿身（shēn）边安静的看书，岁（suì）月静好。

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

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

书变成（chéng）帐（zhàng）篷（péng）一（yī）样，在书里面邂逅无形的（de）舞。

最（zuì）后看完书的主（zhǔ）人公背（bèi）起书包，拿（ná）着书，从森林回到（dào）城市。读完书（shū）获得了（le）力量的人，高（gāo）昂着头，笑容满面。

3、视（shì）频设计

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

四、程序开发

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

五、结（jié）语

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