《移动商务基础》教学案例7

山里人家H5营销案例

山里人家成立于2015年，一直专注于陕南土蜂的养殖与土蜂蜜的供应，山

里人家绿色生态园（淘宝企业店）是在淘宝端的官方网店，主营陕南土蜂蜜及山

区特产，包括：土蜂蜜、老树核桃、农家香菇、西乡茶叶等系列商品。小张是山

里人家的新媒体运营，为了更好地传播网店中秋活动信息，小张想利用H5进行

营销，H5营销实施包括了前期策划、页面制作、页面推广三部分，小张也会从

这三方面入手实施本次H5营销。

一、前期策划

1.确定主题

为吸引用户关注，主题需突出产品特点的同时增加创意、避免抄袭，由于

H5是用来宣传公司网店中秋活动的，小张将H5的主题确定为“中秋好礼”来推

广中秋节的活动。

2.确定内容

在确定内容时主要从用户角度考虑，通过图文并茂的方式添加用户互动功能,

促使用户点击，提高粉丝活跃度和忠诚度，根据本身产品定位以及受众的特性设

计H5作品，在文案设计中抓住用户心理，添加用户感兴趣的词汇，同时可根据

用户群的不同特点编写标题。

3.确定形式

H5的形式非常多样，幻灯片式、小游戏、海报等各种形式，可以选择最合

适的形式进行营销。

4.传播

目前比较常用的H5页面推广方式有公众号的图文群发推广、微信群推广、

线下二维码推广，以及KOL（意见领袖、微博达人）转发和投稿等。

二、H5页面制作

小张通过互联网搜索得到许多H5制作的工具，如MAKA、易企秀、equb360

意派等。按照H5工具的自主定制空间及使用方式等可将H5工具分为以下三类,

完全自主定制（如epub360、vxplo互动大师等）、自主定制类、非自主定制类,

不同类型有各自的优缺点。完全自主定制和自主定制类的优势是完全自主定制，

可操作性强，劣势在于功能较多，学习时间成本较大。非自主定制类的优势在于

操作简单、随学随用，劣势为只能选择使用，不能定制功能和交互效果。

经过一番比较，小张选择了易企秀这款目前国内市面上使用最频繁的，功能

上比较齐全H5微场景制作工具进行中秋活动H5页面的制作。

通过互联网搜索“易企秀”或者直接输入网址（）进入易企

秀官网。

秋节”找到了一款比较适合网店活动的中秋H5模板。

推荐“一

进入后台编辑页面，根据自己的需求制作H5页面，可以通过调整H5页面的

文案、图片、特效、背景音乐或者添加组件、表单等方式创作企业所需的H5页

面。

L基础元素编辑

（1）文本：点击制作页面导航栏上的“文本”按钮添加文本信息，使用编

辑器可以对添加的文本进行字体、颜色、大小、方向、边框、阴影等的更改或者

为文本信息添加动画效果，使文本信息更加生动、美观并与H5页面保持统一。

（2）图片：点击制作页面导航栏上的“图片”按钮添加图片，可以直接使

用图片库中的图片（有些需要收费）或者上传本地图片进行使用。对于添加的图

片，可以利用编辑器进行图片翻转、重力感应开关，调整图片大小、位置、边框

样式和阴影，在功能设置模块还以对“点击图片”的效果进行设置，包括有链接

（即点击跳转至链接网站）、页面（点击跳转至H5的第X页）、电话等。

正版图片X

BB片库线皇B9标车通

我的陶英

我的上传三阳’《;，/

k3人

涛0

今夕公飞.7季。

领到】页版

图6-22H5制作页面优化图片

（3）页面背景：点击制作页面导航栏上的“背景”按钮或者制作区右侧快

捷菜单的方块图标调整背景，可以直接使用图片库中的图片（有些需要收费）或

者上传本地图片进行使用。

图6-23H5制作页面添加背景

（4）音乐：点击制作页面导航栏上的“音乐”按钮或者制作区右侧快捷菜

单的音符图标添加背景音乐，选择音乐时也可以通左下角的“添加外链”输入音

乐链接地址添加背景音乐。

图6-24H5制作页面添加背景音乐

2.互动模块

使用易企秀时，可以通过点击制作页面导航栏上的“组件”或者“表单”按

钮选择想要添加互动模块，如视频、链接、电话、倒计时等组件，联系人、输入

框、提交按钮、留言板、单选、多选、下拉列表等表单。

图6-25H5制作页面添加组件

（1）视频

点击“组件”下的视频选项即可为当前H5页面添加视频，添加视频时要注

意粘贴的视频代码需要原视频的通用代码，目前优酷、土豆、腾讯视频在手机端

的体验较好，在选择视频时最好选择此三类网站的视频链接。添加好视频链接后,

可以为视频添加封面图片，封面图片可以通过图片库或者本地上传获得，完成后

可以利用编辑器对视频播放窗口进行背景颜色、大小、位置、边框、阴影的调整

以及动画效果的添加。

.四大名助富万I

□©0©osyt

机看分享给好友1133评论24万播放

I分享到微博卜

把视频贴到Blog或BBS怎么贴?手机扫码分享视频

二维码24时内有效

通用代码:<iframeheight=498width=510src="http://p复制

flashitfeftt：/player.php/sid/XMTC复涛!|

html代码:<embedsrc=*/player复制

已分享V土下载跚用手机看

复制Flash地址/TPout.sv

复制HTML代码<embedsrc="http://static.video.qq

复制通用代码一[

分享xz率1663条评论67.78万次播放

第一步,X

扫一扫，轻松分享贴到论坛或博客

（2）链接

点击“组件”下的链接选项即可为当前H5页面添加链接，链接按钮包括“点

我购买”、“点开链接”、“马上购买”、“关注我们”和自定义图片链接五种，链接

可以是跳转到场景外的外部链接，也可以场景内的内部导航链接。

（3）留言板

点击“表单”下留言板选项即可为当前H5页面添加留言板用以和用户互动，

留言板可以用来展示用户的留言并引导用户留言，成功添加留言板后可以利用编

辑器对留言板的配色风格、按钮文案、大小、位置等进行调整。

3.特效

点击制作页面导航栏上的“特效”按钮选择想要添加的特效，添加的特效是

针对当前页面的页面特效，会在设置界面展示，包括涂抹、指纹、环境、飘雪、

烟花、渐变、重力感应、砸玻璃等特殊效果。

T1ass刀9o千rv

文本图片背耳杳乐形状担件表单特效

4.H5页面预览和设置

H5页面制作完成后可以通过右上角的“预览和设置”按钮预览H5的呈现效

果，发现有不足的地方可以继续编辑优化，在设置页面可以设置H5的标题、描

述，微信分享时显示的标题、描述以及页面翻页方式等。

5.H5页面发布

H5页面制作完成后，点击右上角的发布进入发布页面，在发布页面可以获

取H5的二维码和地址链接用于推广宣传。

WUttitcmcs

三、H5页面的投放推广

H5页面制作完成后，小张就考虑到了H5页面推广的问题，经过查阅书籍和

分析成功的H5营销案例，小张将H5页面推广渠道总结如下。

1.线上线下的结合推广

线下活动推广，扫二维码玩游戏送礼品，通过H5有趣的互动可以引发粉丝

互动转发朋友圈、微博等。H5独特价值在于除了具备传播性以外，它通过用户

的重复使用行为使得H