浙江龙网

  1. 首页 > 生活百科 > >

翻页类H5-线下门店案例 怎么做h5？

小知识怎么做h5

说起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中完成， 但为能演示更多的工具操作， 这里选用了两个工具配合进行制作 。

推荐阅读


上一篇：分析用研的一些核心 什么是用研？

下一篇：用微信-ASO/关键词数据举例 如何做好aso关键词优化？