2.2 简单3步快速做出专业级互动H5
在了解了H5的制作平台和常用工具后，接下来我们就可以试着动手做一个H5作品了。本节以人人秀平台为例，介绍H5作品的主要制作流程。
2.2.1 在模板库中挑选H5模板和素材
首先是选择一个商业场景，我们必须对H5做一个定位，也就是说你准备用H5做什么？如图2-18所示，列举了部分商业场景的应用目的。
图2-18 部分商业场景的应用目的
假如我们要做一个摄影的活动宣传H5，则可以打开人人秀的“模板商店”页面，在“行业”菜单中选择“摄影”选项，即可找到所有符合要求的H5模板，如图2-19所示。
图2-19 选择商业场景模板
接下来根据企业营销的目标，选择合适的小游戏或者其他营销目标，进行复制。例如，这里选择了“寻找最美全家福”模板。对于摄影行业的企业来说，拍全家福是非常热门的业务，企业可以经常使用H5展开一系列全家福主题活动，来吸引用户参与。单击模板缩览图后，弹出一个预览窗口，用户可以扫描二维码在手机上查看活动模板，也可以通过电脑查看该模板，如图2-20所示。
图2-20 查看活动模板
单击“使用”按钮，即可在人人秀编辑器中打开该模板，如图2-21所示。
图2-21 打开活动模板
2.2.2 H5模板素材中的替换与活动配置
打开活动模板后，用户可以将H5中的品牌素材、宣传文案以及背景音乐等替换成与营销活动或企业相关的内容。例如，双击其中的文字，即可修改文本内容，如图2-22所示。
图2-22 修改文本内容
如果希望使用自己的素材，可以单击“我的图片”按钮切换至“我的图片”选项卡，然后单击“上传图片”按钮，上传本地图片作为背景。用户也可以单击“我的图片”按钮，上传大小为640像素×1100像素的图片作为背景。在“我的图片”下方选择需要的图片即可插入H5页面中，如企业的Logo等，调整到合适的位置，如图2-23所示。当然，我们也可以在图片库中选择使用合适的图片。
图2-23 添加企业Logo
【专家提醒】
H5图片格式通常为jpg、jpeg、png以及gif等，可以设置其相框、序列帧、样式（包括背景颜色、文字颜色、透明度、圆角、边距以及边框等）、阴影（包括水平阴影、垂直阴影、颜色以及模糊度等）以及位置（包括宽度、高度、X与Y位置、旋转角度以及大小等）等属性。
然后为H5页面补充文字，单击“文字”按钮，系统会自动在H5页面中插入文本框，编辑文本框内的文字，并为其设置合适的字体和颜色，如图2-24所示。
图2-24 为H5页面补充与企业相关的文字
然后切换至活动页面进行活动配置，选择“照片投票”活动插件后，在右侧窗口中单击“投票设置”按钮，如图2-25所示。在弹出的对话框中可以设置相应的活动名称、时间、投票次数、报名方式以及插件样式等，如图2-26所示。
图2-25 单击“投票设置”按钮
图2-26 进行活动配置
2.2.3 一键生成H5作品并进行发布推广
H5作品测试完成后，即可开始发布上线活动，并且做好相关的客服工作，以及对H5作品进行推广。H5作品完成后，单击右上角的“发布”按钮，进入作品发布界面，界面的左侧是发布预览，可以预览分享界面，如图2-27所示。
图2-27 作品发布界面
设置栏的左上角可修改分享头像，在文本框内输入分享标题，选中右侧的“#分享数#”复选框，可以在分享时显示已经分享的人数。下方的文本框可以输入分享详情。分享详情下面可以对翻页效果和作品分类进行设置。
基本设置编辑完成后，单击“下一步”按钮或者“高级设置”标签，切换至“高级设置”选项卡，如图2-28所示。
图2-28 “高级设置”选项卡
在“高级设置”选项卡中可以进行加载页设置和版权设置；在“菜单栏”选项区中可以选择是否显示关注公众号和微信菜单栏，单击右侧的铅笔符号
可以进行相应的设置。
单击下方黄色的“更多设置”按钮，可以进一步对H5作品样式进行设置，设置内容包括翻页进度条、阅读数、弹幕/点赞以及评论审核等，如图2-29所示。
图2-29 更多设置
单击“下一步”按钮，进入“近期活动”界面，显示近期可以参加的活动，如图2-30所示。例如，当前的活动为“申请作为模板”，申请通过可以获得相应数量的秀点，用来在平台中购买相关的模板和服务。
图2-30 “近期活动”界面
全部设置完成后，单击红色的“发布”按钮即可成功发布作品。作品发布成功后，会跳转至“分享推广”界面，显示作品的二维码链接和微信小程序码，如图2-31所示。同时页面下方还会出现作品打分，帮助用户修改和完善H5作品内容。
图2-31 “分享推广”界面
扫描二维码进入作品链接，可以查看H5活动的页面效果，如图2-32所示。
图2-32 预览H5活动页面效果
用户可以选择以下3种方式进行推广。
（1）点击微信右上角的
按钮，在菜单中点击“复制链接”按钮获取作品地址，直接推送H5作品地址，如图2-33所示。
图2-33 获取作品地址
（2）直接将作品转发到朋友圈或者微信群中进行推广，如图2-34所示。
图2-34 朋友圈推广
（3）获取作品地址，将作品链接填入微信公众号的“阅读原文”链接、下拉菜单网址中进行推广。用户也可以在H5后台的“扩展网址”页面选择推广网址，可以添加多个推广网址，分别把每个推广网址置于不同的推广渠道。