根本没预算!但还要做一支不错的H5？这可咋办呀？

好多朋友，应该都遇到过类似情况，兜里就100快，还硬要缠着你，让你给他做设计，做H5？？？

客户聊天截图

这世上为什么总有想占便宜的主呀？这不是缺心眼、厚脸皮么，再遇到这样的主，你就直接别搭理了！

但如果说，你也是甲方，尤其是运营岗位，那估计就一点都笑不出来了。因为，沙雕客户好歹兜里还有个150，你兜里连1块5都没有，做H5还不是领导一句话，预算？你做梦吧！就是通知你后天要，然后？就没有然后了。。。

坐在电脑前，两眼一抹黑

免费，好看，快，有气质，这些好难！

-

到这个时候了，朋友！

能救你的，只有自己了，

遇到这样H5，我该怎么做？

-

正式讲解方法前

先来看下完成效果，如下图二维码：

怎么样？

对于无预算，并且一天完成

的自制H5，效果还可以吧！

那么，这支H5是怎么制作出来的？

具体步骤如下：

 1.梳理资料  

拿到资料，是一大堆门店素材、图片，内容多达十几页，对于一支H5，不可能展现这么多内容。所以，策划阶段要做减法，将门店信息精简，把大段概括成用简单图文就能讲清楚的内容。

门店资料+图包

梳理时，发现了三个要重点展示信息，它们分别是：品牌、功能和区位。

品牌方面：店铺具体介绍，让用户知道你是谁

功能方面：店铺服务说明，让用户知道你能干什么

区位方面：店铺位置、经营说明，让用户知道你在哪里

-

你是谁、你能干嘛、你在哪里，可以说是消费者最关注3个信息点，用这个思路去对H5进行设计，方向就比较清晰了。

提炼过程中，发现品牌文化围绕茶，品牌座右铭是 “用好物，喝好茶，现代品质生活” 给人的理念感，比较像“现代城市中，一个带有文化情怀的独立休闲空间。”是一个可放松、静心、会友的精神角落。

功能方面，围绕品牌特征，发现小店有3个主要经营特色，它们分别是：

1.茶相关饮品和食品的提供

2.设计师原创设计器物的提供（以茶类产品为主）

3.主题创意活动和沙龙的场地提供（种类繁多）

-

通过品牌、功能分析，内容基本被梳理出，如下描述：

H5的内容框架

8屏不会显得内容太多，让用户看的疲惫，也正好交代品牌、功能和区位这三个信息点。

而从主题可发散出多方向，比如：茶可让人静心，喝茶可会友，在这里喝茶能看创意展览，在发散中，我们得到了如下主题：

1.   不要错过一个能让你放松身心的空间

2.   一拙 - 一个会友的好去处

3.   这是一个在城市中，能让你放松下来的空间

-

对比下，选择-主题3，因为独立空间不仅可以喝茶、静心、会友，它有“放松”的含义，这与品牌调性一致。

但为让文案更生动，最后使用的是：“这是一个，能让你放松身心的现代城市空间”

2.原型和设计构思 

因是文创品牌，所以，页面气氛适合清雅简约风格，内容需要有文化气息，色彩不需要太多，对比也不应太强。色调上，H5准备沿用logo主色金色，整支H5页面设计风格和色彩一致，要追求简单、大气的感觉。

像中国画，注意留白和简约视觉氛围。原型图采用illustrator （AI）绘制，具体样式如下图：

H5的原型图设计

3.具体制作过程 

制作前，先建立一个PS尺寸文件，因为后期要方便导入H5工具，所以要把画布设置为（宽640px、高1008 px），这是目前H5工具普遍采用页面尺寸。

PS尺寸生成界面

至于H5工具选择，其实常规工具功能都差不多，你可根据自己使用习惯选择，像MAKA、兔展、易企秀、秀堂等工具，都可通用，不会影响咱们教程的讲解。

下面，咱们来讲一些具体的设计方法，来帮助你理解H5的制作：

-图片设计技巧

因文字内容简单，这就凸显出图的重要性。从提供图片中，我们将图片分别安插在8个页面，但很快就出现了难题。

在页面中，整版图是最美观的，但在产品展示部分，品牌没有可包含所有产品的整图。如直接将不同产品图拼在一个页面会很不美观，但如果将产品图分散到别的页面，又会使得H5页数太多。

H5页面的图版设计演变过程

为解决问题，我们使用了一个轮播图插件，通过插件，可到在一个页面展示多张图，还能保证图版整屏效果。

H5轮播插件效果

而其它页面则采用的整版图搭配文字的设计方法，这个插件是在，H5生成工具中直接进行使用的。

-文字设计技巧

标题：方正大标宋体，页面正文主要：方正仿宋简体。

宋体识别性差，一般不作正文，但此次例外。因为，正文文字量少，文字排版又非常稀松，在这种情况下，宋体字的使用不会影响阅读，而为更好凸显文化气息，文字排版方式也以竖版为主，这样更像古体字书写方式，能凸显文化气息。

H5文字版是设计思考过程

但也应该注意，H5第二页正文描述，还是采用黑体，这是因为文字量太大，所以，在具体设计时做了取舍。

页面正文字体一般使用黑体，不用宋体

不管用什么字体，设计目的只有一个，让H5更好的呈现清晰的内容。

-地图设计技巧

设计地图时，为让内容更清晰，还是采用了手绘地图形式，但实际大可不必，因为现在H5生成器，内置了定位地图，这样的地图在点击后，可直接调取你手机中安装的地图APP位置信息。

页面地图的设计与简化

因为是演示案例，所以还是选用手绘地图，而地图在配色上，用了金色，与画面保持一致。

-板式设计技巧

为能有更好视觉效果，板式设计中运用了三级排版法，在画面中：图片、文字描述和角标构成三层关系，这样页面视觉效果能保证比较美观。

三级排版法在该案例的应用

同样的，在第二屏品牌介绍部分，为让文字更清晰，H5弱化背景图，为文字专门添加了金色底图，强化文字识别性，这样的做法和H5第8屏形成了反差，在第8屏则是弱化文字，凸显图片。

底图在文字描述时起的作用-第2屏

底图在文字描述时起的作用-第8屏

不管是文字，还是图片，一定要有一个主，一个辅，这是做页面时的重要意识，在针对具体内容进行设计时，根据具体情况来运用。

-节奏感设计技巧

设计第一屏时，设计了好几个样式，但最后选择了最简单，最不起眼的一组（第三组），原因就是考虑到整支H5的体验感。

H5首页设计时的节奏感思考过程

让观看节奏能够有一个从低到高，从简单到复杂的过度，让第一屏内容简单到只有一个问句，来吸引你往下观看。

4.利用H5工具生成

这里以人人秀为例，打开人人秀，在界面处点击PS按钮，工具会提示上传PS文件。

目前，几乎所有H5工具都有一按上传PS功能，不管你用什么工具，都可直接上传，但是，记得看上传说明。

上传后，需要为H5添加动效，清雅风格H5不适合添加太过炫酷动效，所以，H5主要添加的动态就是淡入和向上飞入。

因为图片多为场景，所以图片不适合添加动态，动效的应用主要放在文字上，每一屏文字，都可添加动态效果。

H5采用统一的向上飞入动效-第7屏

文字教程，很难描述清动态效果，这里就不具体说明了，大家可参看H5效果。案例的动态效果，也是任何一款H5工具都可实现的，制作起来非常简单。

H5采用统一的向上飞入动效-第2屏

5.添加音效

最后一步， 加背景音。

H5整体氛围偏古朴，但内容有现代感。所以纯古典音效和纯现代音效都不适合，经过一番思考，锁定热搜关键词“现代古筝”和“流行民乐”，音效范围就小了。

音乐人专辑音乐

通过音乐素材网站歌单搜索，项目选用： 常静-《空》前奏部分作为背景音效，音效整体氛围清雅、现代，并且具备古典特征。

（提示：非商业模拟案例，所以直接使用了作者音乐，如果是商业项目，就需要一定版权支持了。）

6.最后总结

在制作过程中，可通过预览功能在手机上观看效果。这时不要忘记采用不同的手机进行测试，同时不要忘记上传封面图和添加 H5 的正副标题。

下图为H5最后8屏的平面效果，整体风格基本上保持了一致，通过本节的案例二维码，你可以看到H5的最终效果。

H5最后完成的页面效果

看到这里，你是不是发现，其实短时间，想制作一支无预算的高质量H5，其实没想象的难，关键是思路，这次教程中采用了一种从：构思-原型-设计-制作，的制作方法。

如果你想进一步深入了解教程中的方法，看到更多制作细节和详尽步骤，那就要关注小呆的新书《H5+营销设计手册》。

在这本书，你会看到更为翔实的H5制作教程，帮你在无预算的情况下，制作出高质量的H5作品出来。

01

福利时刻

 

为了让大家在即将到来的中秋节

做个出色的营销活动

人人秀

拿出了1000个月卡作为用户福利

欢迎大家扫码领取

领取后登陆人人秀官网激活即可使用

快来做一个你自己的刷屏中秋H5吧

限量1000个

数量有限

先到先得哦

热门推荐阅读：

把联合国的H5玩刷屏,领英究竟放了什么大招？

38种结局+240个剧情分支，脉脉《蓝月》刷屏!

能把一镜到底H5玩出百万刷屏，也只有网易！

当林志玲遇上张爱玲?盘点七夕刷屏H5案例

现在登录注册人人秀官网

即可免费领取10000个精品H5模板！

猛戳阅读原文即刻制作

网址：www.rrx.cn

猛戳下图定制刷屏H5

猛戳下图浏览更多创意H5案例

 

更多创意H5解析

请关注H5创意汇

每周为你解析最热门H5案例

---

点击阅读原文，进入作者的书店！㊋㊋