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

一、项目背景

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

二、创意（yì）策划

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

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

三、视觉设计

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

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

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

结（jié）合名称“森林（lín）书（shū）屋”，故事场景毫无疑问地设计成了一（yī）片（piàn）森林，主人公背着书包（bāo）行走在森林中，进（jìn）入（rù）一本（běn）书（shū）的魔法之（zhī）门，开（kāi）启了（le）他的读书之旅。

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

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

在巨（jù）大的书（shū）上弹着钢琴，远处看到故乡暖暖（nuǎn）的（de）灯（dēng）光，一家人围（wéi）坐吃饭的场景，体验家的感觉。

书（shū）变（biàn）成帐篷一（yī）样，在（zài）书（shū）里（lǐ）面（miàn）邂逅无形的（de）舞。

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

3、视频设计

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

四、程序开发

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

五、结语（yǔ）

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