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

一、项目背景

本（běn）次项（xiàng）目（mù）是给黑龙江（jiāng）卫（wèi）视“一起（qǐ）读（dú）书吧”全媒体阅读节目做的线上宣传H5活动，项目名称为（wéi）森林书屋，结合世界读（dú）书日节日背景，针（zhēn）对（duì）看书的年轻人（年龄阶（jiē）段主要（yào）为大学（xué）生到青年（nián）职（zhí）场人），做一（yī）次（cì）好书分享推荐。

二、创意策划

本次活动的核心（xīn）目的是（shì）分享出品方（fāng）精选推荐的几本好（hǎo）书，H5通过独（dú）特的视觉效果、脑洞（dòng）大开的切（qiē）入点将用户引入到这场（chǎng）读（dú）书之旅中。

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

三、视觉设计

1、人物（wù）风格设（shè）定

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

2、故事场景设（shè）计

结合名称“森林（lín）书屋”，故事场景毫无疑问地设计成了（le）一片森林，主人公背着书包行（háng）走在森（sēn）林中，进入一本书的（de）魔法（fǎ）之门，开启（qǐ）了他的读书之旅。

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

河边篝（gōu）火（huǒ）旁弹吉他，有松鼠（shǔ）作（zuò）伴，森林里大大小小的镜（jìng）子里折射的（de）是主（zhǔ）人公脸的国王、猫（māo）、摩登女郎，表示在书中体会不同人生美好。

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

书（shū）变成帐篷一样，在书里（lǐ）面邂逅（hòu）无形的舞。

最后看（kàn）完书的主人公背起（qǐ）书包，拿着书，从森林回到城市（shì）。读完书获（huò）得了力量的人，高（gāo）昂着头，笑容满面。

3、视频设计（jì）

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

四（sì）、程序（xù）开发

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

五、结（jié）语（yǔ）

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