最近几年H5迅速风靡,并且快速进入了大众的视野,提供给我们有趣的页面和内容!H5逐渐占据了自己的营销地位,越来越多的品牌开始制作H5。
《睡姿大比拼》
在各式各样的活动中,H5绝对是常被选择的一员,每到节假日等活动高峰期,朋友圈被刷屏时有发生,高流量和高传播度使得H5在国内的地位逐渐上升。经常会有一些线下店铺需要用H5来推广形象。面对这样的需求,我们应该如何制作?接下来,跟随小艺一起来看看。
从零开始学做一支H5
01
H5的制作与分工
很多人疑惑H5 到底是怎么做出来的?为什么有些H5 看起来非常酷炫,而有一些却像翻页PPT 一样简单?答案是这与你选择制作的方式有关。
H5 的制作方式多样,大体上可分为两种:工具制作和代码制作。
工具制作的H5 简单易上手,工期短,制作成本也相对较低。对于某些小白工具,甚至可以在十分钟内就玩懂。你若对交互、玩法要求较高,想做带感的游戏或精美的视频H5,工具制作的H5 就不能满足你了,这需要通过前端写代码来实现。
下面就来展开讲讲用工具制作H5。
02
工具制作
市场上的H5 制作工具繁多,进入2018 年以来,已形成低阶、中阶和高阶3 个梯队。可以根据工期,时间和金钱预算以及成品质量等进行选择。
低阶H5 制作工具
(1)初页
初页是目前最简单的“类PPT 式”H5 制作工具,无技术基础的普通用户可在10 分钟内就通晓其制作方法,并可在App 中完成制作。它的交互方式通常是滑动翻页,有时会适当加入点击、滑动、长按等操作。其最大的优势是可以在网页中直接调试和修改。
如果想做生日贺卡、婚礼邀请函、生活图志之类的简单H5 就可以选择它。在初页中制作H5,可以选择手动或自动排版。手动模式需要用户上传1~20 张图片,可挑选模板或自由组合图片。点击页面右上角的“换音乐”或“换动画”按钮,即可更换适合场景的配乐与动效。图文排版完成后,可点击“下一步”按钮跳转到发布页面,设置标题。H5 发布后,可在“我”的主页中看到并管理H5。
自动模式需要先给H5 确定一个标题,随后挑选并上传1~50 张图片,确定封面图片和文字内容后,初页会对H5 进行排版设计,并添加动效和背景音乐。如果不满意,则可以手动更换模板。
(2)易企秀
易企秀是公众认知度较高的H5 制作工具。很多人以为易企秀就是H5,其实不然,它只是制作H5 众多软件中的一个,并且门槛较低。它主打企业办公和日常运维的H5 制作,提供数据统计功能,App 及PC 端皆可操作。
易企秀适用于企业介绍、招聘启事、产品宣传、预约报名等。在使用易企秀创建画板时,可以选择“模板创建”或“空白创建”。套用模板制作相对简单,选择“模板创建”即可进入易企秀模板库。
在画板页面中,包含文本、图片、背景等基础功能,除了自由创作,还可以套用单页模板。
易企秀提供视频、链接、图集等常用组件,以及画中画、画板、投票等高级组件,非常适合在营销活动中进行传播。
(3)兔展
兔展除了具备初页、易企秀的所有功能,还增添了小程序生成功能。与此同时,其视频和长图文功能与同级别工具相比,用户体验感较好。2018 年,小程序成为传播和用户沉淀的重要阵地,对制作H5、小程序感兴趣的用户可尝试这款产品。
兔展的H5 制作页面与易企秀左右相反,样式模板隐藏在各个栏目下,基础画布看起来更简洁一些。
点击右侧的“添加图片背景”字样,可选择图案和文字特效模板。图片素材库中的动图较多,很多都需要付费使用,免费素材较少,设计比较简单。
文字、形状素材可免费使用,互动组件下还有“生成海报”功能,用户可对海报进行设计。
中阶H5 制作工具
(1)凡科
凡科除了具有低阶制作工具的功能,还可以实现伪装朋友圈、接电话、发红包等功能。但别看功能升级了,操作依旧很简单,套用模板就可以实现。凡科的另一大优势是功能性网站搭建,如果你有设计PC 网站、手机网站的需求,那么可以考虑试试这款产品。
凡科互动提供了很多素材模板,并且功能性较强,即使是使用免费版的用户,也可以使用很多素材来制作H5。
凡科的H5 制作页面呈左右非对称分布,工具栏与画板分布比例不可调节。在页面右侧可以对文字、特效进行设置,在左侧工具栏中可看到每页添加的功能,如图片生成、活动说明、分享效果等。
用户可对画板进行自由编辑,添加微信聊天、手机来电显示等场景化背景。
(2)720 云
720 云主打全景H5 制作,在其网站上可以找到大量好看的全景素材图片,算是H5 制作工具中,做全景H5 最专业的门户。用户可以在平台上提前购买全景图片,上传到制作页面进行编辑。
在编辑页面中,工具栏在画面最左侧,其中包含视角、沙盘、遮罩、足迹等功能,方便用户制作全景H5。
高阶H5 制作工具
iH5
iH5 适用于专职设计人员,学习门槛较高,但可以实现相对多样的高级效果,功能涵盖品牌展示,动画、游戏制作,建站等,同时也支持红包、支付、录音、拍照上传、获取用户个人信息等微信功能,缺点是没有制图和图标功能。
iH5 相对前几种工具,更加专业。不过即使用户是初学者也不用担心,iH5 在进入页面时,会以弹窗形式向用户提供素材和特效模板。用户可以在模板基础上进行二次创作,添加文字、图片等信息。
除此之外,iH5 也提供视频教学功能,点击“摄像机”按钮,即可打开相应的视频观看学习。视频播放时间大多在10 分钟以内,按照H5 功能可分为数据、变量、动画等课程。
iH5 的界面与Photoshop 的界面类似,中间为画布,左侧为工具栏,右侧显示制作步骤。相比其他几种制作工具,iH5 的自由度更高。
iH5 作为一款高阶制作工具,制作难度体现在组件设计上。除了图文、形状等基础组件,iH5 还有容器、动画、数据、素材等组件。用户可任意搭配,设计自己的H5。
如果想用iH5 制作一个简单的画面,可以先建立一个画布。首先,将准备好的素材拖进白色画布,上传到后台。
接下来,单击工具栏右上角的“文字”按钮,在编辑框内输入文字。
调整文字颜色、大小和位置,一个简单的页面就做好了。
更多阅读
《制造爆款:H5营销策划一本通(全彩)》
本书是由网易哒哒团队出品的一本如何打造爆款H5的教程书。全书共分为7章,通过对H5多角度的分析,以“创意 内容”为切入点,深度剖析行业是如何制作爆款H5作品的。全书围绕网易团队制作的1000万PV 实战案例展开,对用户和营销者喜爱的H5进行细节特征分析,讲述制作爆款H5的实操方法,通过对文案选题、交互视觉设计的梳理,*后来复盘H5作品获得现象级流量背后的原因。全书理论与实际紧密结合,不论是小白还是资深从业人员,都能从中获得启发。