提及H5，想必大家都不陌生，其形式新颖，传播效果强，在做广告策划、视频营销时被利用的几率更高。
《睡姿大比拼》
在各式各样的活动中，H5不一定是首选，但也绝对是常当选择的一员，每到节假日等活动高峰期，朋友圈被刷屏时有发生，高流量和高传播度使得H5在海内的地位逐渐上升。
常常会有一些线下店铺须要用H5来推广形象。面对这样的需求，我们该当如何制作？跟随数艺君一起来看看。
案例：翻页类H5-线下门店案例
本日，数艺君将会以一个线下文创店铺为例，为大家讲解H5的制作过程，先来看看末了的项目案例。
项目素材（仿照案例）
“一拙”是一家坐落于北京胡同的文创茶社。小店自从开业以来，就在当地得到了非常好的口碑和影响力。但一贯以来，门店在线上的曝光都不敷，小店想借助H5更多地在网络上展现自己的品牌。关于门店的资料有很多，我拿到的内容就多达十几页，如图所示，对付一支H5来说，不可能展现这么多内容。以是，在前期策划阶段要做的紧张是“减法”，将门店的紧张品牌上风和特色进行归纳和精简，把大段的描述概括成用大略的图文就能讲清楚的内容。
门店的部分文件与图片素材
项目主题与内容框架
在梳理内容时，我们创造了3个要重点展示的信息，它们分别是品牌、功能和区位。
在品牌方面，要对店铺有详细先容，让用户知道你是谁；在功能方面，要对店铺做事做解释，让用户知道你能干什么；在区位方面，要对店铺的位置和经营做一定解释，让用户知道你在哪里，什么韶光可以找到你。
“你是谁”“你能干吗”“你在那里”，可以说是普通消费者要关注的3个信息点，如图所示，用这个思路对H5进行设计，方向就比较清晰了。
3个重点信息
在品牌方面，“一拙”的品牌文化紧张环绕茶展开，品牌的座右铭是“用好物，喝好茶，当代品质生活”，这给人的理念感比较像是“当代城市中，一个带有文化情怀的独立休闲空间”，是一个可以让人放松、静心、会友的地方。而功能方面，环绕品牌特色，我们创造小店有以下3个紧张经营特色：
（1）供应茶干系的饮品和食品；
（2）供应设计师原创设计器物（以茶类产品为主）；
（3）供应主题创意活动和沙龙的园地。
通过对品牌与功能的剖析，这支H5的内容原型基本被梳理出来了。
（品牌）品牌展示：
第1屏：封面图-主副标题
第2屏：品牌门店先容
（功能）产品展示：
第3屏：品茶（茶饮产品）
第4屏：好物（器物产品）
第5屏：展览（活动产品）
第6屏：媒体（活动产品）
（区位）门店区位：
第7屏：地址（门店位置展览）
第8屏：约请（约请大家来门店体验）
8屏这个数量，不会显得内容过多，不会让用户看得太怠倦，也恰好交待了品牌、功能和区位这3个信息点。
而从主题来说，我们可以发散出很多方向。比如，喝茶可以让人静心和放松；比如，来这里喝茶可以会友和谈天；再比如，在这里你可以看到很多创意展览。经由发散后，我们得到了如下主题：
①不要错过一个能让你放松身心的空间；
②“一拙”是一个会友的好去处；
③这是一个在城市中能让你放松下来的空间。
比拟下来，项目选择了（3）作为主题，由于独立空间不仅可以隐含喝茶、静心和会友这些特色，还有“放松”的含义，这与品牌调性是比较同等的。为了让文案更加生动和有吸引力，末了利用的标题是“叨教你来“一拙”做过客吗？”
用疑问句会有着更加轻松的觉得，也随意马虎让人乐意连续看下面的内容，避免了说教和太过于直白。确定了主题和内容后，下一步就可以出草图了。
H5原型和设计构思
有文化气息的文创品牌比较适宜清雅、简约的风格，色彩不须要太多，比拟也不应太强。H5的色调以Logo的金色作为主色调，整支H5的页面风格应追求简洁、大气的觉得，就像是中国画，会把稳留白和视觉氛围。这次项目的原型图采取Illustrator（AI）绘制，详细样式如图所示。
H5的原型图
H5制作过程
在制作方面，采取了Photoshop和MAKA（如图所示）。Photoshop紧张用来进行内容布局设计，动态效果则是在H5工具MAKA中完成的。实在项目完备可以在MAKA中完成，但为能演示更多的工具操作，这里选用了两个工具合营进行制作。
MAKA的网站主页
制作前要建立Photoshop尺寸文件，画布设置宽为 640px、高为1008px，如图所示，这是为了后期方便将设计文件导入到H5工具，这是目前H5工具普遍采取的页面尺寸。下面开始详细讲解。
设计的细则讲解
（1）图片设计
图片是这次设计的关键，因笔墨内容整体较大略，以是笔墨只起点缀浸染，这就凸显出图的主要性。从品牌供应的图片中选择得当的图片分别安插在了8个页面当中，但很快就涌现了一个难题。
由于在页面中整版图最为都雅，以是操持用8张整图配8段笔墨来设计画面。但在产品展示部分，品牌方并没有可以包含所有产品的整图，只有单个产品的展示图片。
如果直接将不同产品图拼凑在一个页面，就会很不雅观观，但如果将产品图分散到其他页面，又会使得H5的页数太多。
Photoshop尺寸建立页面
为办理问题，我们利用了一个轮播图的互动插件，通过该插件可以做到在一个页面展示多张图，还能担保图版的整屏效果，而这个互动插件便是H5工具的一个功能组件。为了使页面更为都雅，我们还找到了一张宣纸的背景作为背景图，这样会比白底要有更多的细节展现。设计过程如图所示。
一个页面展示多张产品图的设计过程
（2）笔墨与标题设计
H5大标题采取方正大标宋体，页面正文紧张采取方正仿宋简体，如图所示。
H5设计选用的字体
在前面，我们已明确见告大家只管即便不要利用识别性较差的宋体字，但此项目例外，由于H5正文笔墨量少，笔墨排版可以非常稀松。在这种情形下，宋体字的利用不会影响阅读时的识别。为了更好凸显文化气息，笔墨排版办法因此竖版为主的，这样更像是古体字的书写办法，能够凸显文化气息，以是用宋体字就更得当了。标题与正文的字体的排版比拟效果如图所示。
标题与正文的字体
大家也该当把稳，H5的第2页正文描述部分还是采取了黑体字，这是由于笔墨量太大了，以是在详细设计时做了取舍。不管你用什么字体，设计目的都是同等的，便是让H5清晰地呈现内容。正笔墨体采取黑体和宋体的效果如图所示。
黑字体正文
（识别度更好）
宋体字正文
（识别度不如黑体字）
（3）舆图设计
在设计舆图时，项目采取了手绘舆图的形式，但实际大可不必这样，由于现在的H5天生器内置了定位舆图，在点击这样的舆图后可以直接调取手机中安装的舆图 APP，呈现位置信息。但由于书中的H5仿照案例是要长期利用的案例，以是还是选用了手绘舆图来表现。舆图在配色上沿用金色作为主色，与画面风格保持同等，如图所示。
从卫星舆图转化为更加直不雅观的手绘舆图
（4）页面版式
为了让页面有更好的视觉效果，版式设计中利用了3阶排版法，尤其是产品部分的页面，在画面中，图片、笔墨描述和脚标构成3层关系，这样页面的视觉效果就比较都雅了，如图所示。
3阶排版法，加上第三级脚标后，视觉效果更丰富
在第2屏的品牌先容部分，为了让笔墨更清晰，弱化了背景图，为笔墨专门添加了金色底图来强化笔墨的识别性，这样的做法和第8屏形成了反差，在第8屏是弱化笔墨，凸显图片，如图所示。
第2屏- 笔墨为主，图片为辅
第8屏- 笔墨为辅，图片为主
不管是笔墨，还是图片，一定要有一个为主、一个为辅，这是做页面设计时的一个主要意识，时候以紧张内容为导向。
（5）页面的节奏感
在设计第1屏时，起初设计了好几个样式，如图所示，末了选择了最大略、最不起眼的一组（第3组），缘故原由便是考虑到整支H5的节奏。
第1屏的3个备选方案
这样，让第1屏内容大略到只有一个问句，能够让不雅观看节奏有一个从低到高的过渡，让内容的呈现有一个从大略到繁芜的趋势。关于节奏的观点，在之前的章节已有详细先容了，读者可查看之前内容。
（6）H5工具制作
打开MAKA，在界面中单击“Ps”按钮，会提示上传PSD文件，如图所示，须要不雅观看和理解这里的上传解释。
MAKA后台的PSD文件上传教程
上传后，须要为H5各屏元素添加动效。清雅风格的H5同样不适宜添加太过炫酷的动效，以是这里紧张添加的动态便是“淡入”和“向上飞入”。
由于图片多为场景，以是图片不适宜添加动效。动效的运用紧张放在了笔墨上，每一屏的笔墨都可以添加动态效果。详细的操作如下：
①首屏笔墨动效利用了旁边翻转（2 秒）；
②第2屏笔墨利用了“向上飞入”，为了让3组元素运动时有差异，以是设置了不同的延迟韶光，分别是Logo延迟1.2秒、正文延迟1.4秒、图标延迟1.8秒；
③第3到第6屏采取了相同的动效，即“向上飞入”，思路与第2屏类似，让3组元素的运动有差异。设置分别是：标题的速率1秒，延迟0.5秒；正文的速率1秒，延迟0.6秒；图标的速率1秒，延迟2秒。在这里，图片的运动是最大亮点，这个轮播图运动在H5内是可以轻松实现的，步骤如图所示。
H5的动态选择与轮播图设置
④第7屏的动效设计思路也与第2屏类似，元素同样采取了动效“向上飞入”，让元素有差异地以先后顺序逐渐运动涌如今画面中。
⑤第8屏的笔墨动效和按钮动效同样是“向上飞入”。
大致步骤犹如笔墨描述那样，但笔墨很难描述清楚动效。如果想真正学会这套动效制作方法，还请不雅观看本节配套的传授教化视频，里面有清晰的操作步骤。
（7）添加音效
末了一步便是为H5探求背景音效了。虽然这支H5的整体氛围是偏古朴的，但内容又非常具有当代感。以是纯古典的音效和纯当代的音效都不适宜这支H5，这些音乐搭配画面的话都会非常奇怪。
结合古扑和当代这两个特色，经由一番思考，我们锁定的热搜关键词是“当代古筝”和“盛行民乐”，这样找音效的范围就小多了。通过音乐素材网站的歌单搜索，项目选用了音乐-常静-《空》的前奏部分作为背景音效，音效整体氛围清雅、当代，并且具备古典特色。
由于是非商业的仿照案例，以是直策应用了作者的音乐，如果是大型的商业项目，就须要一定的版权支持。
在制作过程中，我们可以通过预览功能在手机上不雅观看页面效果。这时不要忘却采取不同的手机进行测试，同时不要忘却上传封面图和添加H5的正副标题。到这一步H5就算是制作完成了。如图所示为H5的8屏平面效果，整体风格基本上保持了同等。通过扫描本节案例的二维码，你可以看到H5的终极效果。
H5全图平面效果
为了让读者更深入理解H5的制作过程，已把案例的详细系编制作步骤编辑成了视频，通过扫描下方二维码，你可以看到详细的制作过程。