h5怎么制作手把手教你制作H5的教程来了？
睡姿比赛
在各种活动中，H5不一定是首选，但绝对是经常被选中的成员。每逢节假日、朋友圈等活动高峰，不时被刷屏，高流量、高传播使得H5在国内的地位逐渐上升。
经常会有一些线下店铺需要H5来推广自己的形象。面对这样的需求，应该怎么做？跟数码一君一起来看看吧。
案例:翻页H5-线下实体店案例
今天数码一君就以一家线下店铺为例，讲解一下H5的制作过程。我们先来看看最终的项目案例。
项目材料(模拟案例)
卓一是一家位于北京胡同的文创茶馆。店铺开业以来，在当地获得了非常好的口碑和影响力。但一直以来，门店的线上曝光度不足，小店想借助H5更多的在网上展示自己的品牌。关于店铺的信息很多，我拿到了十几页之多。如图所示，H5公司不可能展示这么多内容。所以在前期策划阶段，主要要做的就是“减法”，把店铺的主要品牌优势和特色进行归纳和精简，把冗长的描述概括成可以用简单的图文解释清楚的东西。
商店的一些文件和图片资料
项目主题和内容框架
在梳理内容的时候，我们发现有三条信息需要突出，分别是品牌、功能、位置。
品牌方面，要具体介绍店铺，让用户知道你是谁；在功能上，要说明店铺服务，让用户知道你能做什么；在位置方面，需要说明店铺的位置和运营情况，让用户知道你在哪里，什么时候可以找到你。
三个关键信息
品牌方面，“一傻”的品牌文化主要围绕茶展开。品牌的座右铭是“用好东西，喝好茶，活出现代品质”，给人的概念感更像是“现代都市中一个有文化情怀的独立休闲空房”。这是一个人们可以放松、沉思和交朋友的地方。在功能方面，围绕品牌特征，我们发现小店有以下三个主要经营特征:
(2)提供设计师原创设计器皿(主要是茶品)；
(3)为主题创意活动和沙龙提供场地。
通过对品牌和功能的分析，基本梳理出《H5》的内容原型。
(品牌)品牌展示:
屏幕1:封面-主页和副标题
画面2:品牌店介绍
(功能)产品展示:
画面三:品茶(茶产品)
画面四:好东西(神器)
屏幕5:展览(活动产品)
屏幕6:媒体(活动产品)
(位置)店铺位置:
屏幕7:地址(商店位置展示)
画面八:邀请(邀请大家到店体验)
8屏的数量不会出现太多的内容，也不会让用户看起来太累。也正好说明了品牌、功能、位置这三个信息点。
从主题出发，我们可以在许多方向上产生分歧。比如喝茶可以让人静下心来，放松心情；比如在这里喝茶可以交友聊天；比如这里可以看到很多创意展。发散后，我们得到以下主题:
①不要错过一个能让你放松的空房间；
②“卓一”是个交友的好地方；
③这是一间空能让你在城市中放松的房间。
相比之下，项目选择(3)作为主题，是因为独立空房间既能暗示喝茶、冥想、会友的特点，又有“放松”的含义，与品牌调性颇为吻合。为了让文案更生动更吸引人，最后用的标题是“你在《一傻》做过路人吗？”
使用疑问句会让你感觉更轻松，也容易让人继续读下面的内容，避免说教和过于直白。确定主题和内容后，接下来就是画草图了。
H5原型和设计理念
文化文创品牌更适合优雅简约的风格，没有太多的色彩和太强的对比。H5的颜色以标志的金色为主。整个H5的页面风格要追求简洁大气的感觉，就像国画一样，会注重留白和视觉氛围。本项目原型由Illustrator(AI)绘制，具体风格如图。
H5的原型图
H5制造流程
在制作方面，使用了Photoshop和MAKA(如图)。Photoshop主要用于内容版面设计，动态效果在H5工具MAKA中完成。实际上，该项目可以在MAKA完成，但为了演示更多的工具操作，这里选择了两个工具相互配合。
MAKA的主页
制作之前，要建立Photoshop大小的文件。画布设置为640px宽，1008px高，如图所示。这是为了方便后期将设计文件导入H5工具，这是目前H5工具常用的页面尺寸。下面开始详细讲解。
详细的设计说明
(1)图片设计
图片是这个设计的关键。因为文字内容整体简单，文字只起到点缀作用，突出了图片的重要性。从品牌提供的图片中选择合适的图片，分别放在八页，但很快就出现了一个难题。
因为整个版面是页面中最漂亮的，所以计划将图片设计成8整张图片，8段文字。但是在产品展示部分，品牌方并没有可以包含所有产品的全貌，只有单个产品的展示图片。
如果将不同的产品图纸直接拼凑在一页上，会非常不美观，但如果将产品图纸分散到其他页面，则会造成H5页面过多。
Photoshop维度创建页面
为了解决这个问题，我们使用了一个交互式的carouselchart插件，可以在一个页面上显示多个图表，并保证图表板块的全屏效果。这个交互式插件是H5工具的一个功能组件。为了让页面更加美观，我们还找了一张宣纸的背景作为背景图片，会比白色背景显示更多的细节。设计过程如图所示。
一页展示多个产品图纸的设计过程。
(2)文字和标题设计
H5头条采用方正大标宋体，页面文字主要采用方正仿宋简体，如图所示。
为设计选择的H5字体
前面我们已经明确告诉过你尽量不要用辨识度差的宋体，但是这个项目是个例外，因为H5文字的字数很少，文字的排版可以很松懈。在这种情况下，使用宋体不会影响阅读时的识别。为了更好的突出文化味，版式以竖排为主，更像古文字的书写风格，更能突出文化味，所以用宋体更合适。与标题文字字体的排版对比效果如图。
标题和正文的字体
你也要注意，《H5》第2页的文字描述依然是粗体，这是因为字数太大，所以我们在具体设计上做了选择。不管你用什么字体，设计目的都是一样的，就是让H5把内容清晰地呈现出来。文字中粗体和宋体的效果如图。
黑色字体主体
(更好的识别)
宋体文本
(辨识度不如黑体字)
(3)地图设计
从卫星地图到更直观的手绘地图
(4)页面布局
为了让页面有更好的视觉效果，版面设计采用了三阶排版方式，尤其是产品部分的页面。在图片中，图片、文字描述和页脚形成三层关系，使页面的视觉效果更加美观，如图。
三阶排版法，结合三阶足迹，视觉效果更丰富。
在第二屏的品牌介绍部分，为了让文字更清晰，弱化了背景图像，专门为文字增加了一个金色的底纹图像，增强文字的辨识度。这与第八屏形成对比，第八屏文字弱化，图片突出，如图。
画面2——以文字为主，图片为辅
画面8——文字为辅，图片为主
无论是文字还是图片，都要有一个作为主要部分，一个作为辅助部分。这是设计页面时的一个重要意识，始终以主要内容为导向。
(5)书页的节奏
设计第一块屏幕的时候，一开始设计了几种风格，如图。最后，选择了最简单和最不显眼的组(组3)，因为考虑到了整个H5的节奏。
屏幕1的3个备选项
这样，把第一屏的内容简单到只需一个问题，就可以让观看节奏有一个由低到高的过渡，让内容的呈现有一个由简单到复杂的趋势。前面几章已经具体介绍了节奏的概念，读者可以查看前面的内容。
(6)H5工具制造
打开MAKA，点击界面中的“Ps”按钮。会提示你上传PSD文件，如图。你需要看懂这里的上传说明。
MAKA后台PSD文件上传教程
上传后，你需要添加H5屏幕元素的动态效果。优雅的H5也不适合加入太炫的动态效果，所以这里加入的主要动态效果是“淡入”和“飞起”。
因为大部分图片都是场景，图片不适合加动画。动态效果的应用主要在文字上，每个屏幕的文字都可以添加动态效果。具体操作如下:
①首屏文字动态效果采用左右翻转(2秒)；
③屏幕3至6采用相同的动态效果，即“飞起”。思路和Screen2差不多，让三组元素的动作不一样。设置为:片速1秒，延时0.5秒；文字速度1秒，延时0.6秒；图标的速度是1秒，延迟是2秒。在这里，画面的运动是最大的亮点，这种旋转木马的运动在H5内部也很容易实现，如图所示。
H5动态选择和转盘地图设置
④7屏的动态设计思路与2屏类似，元素也采用了“飞起”的动态效果，使元素以不同的顺序出现在屏幕中。
⑤屏幕8上的文字动态效果和按钮动态效果也是“飞起”。
步骤大致如文字描述，但文字很难描述清楚动态效果。如果你真的想学习这种动态效果制作方法，也请观看本节的配套教学视频，里面有清晰的操作步骤。
(7)添加音效
最后一步是找到H5的背景音。虽然这个H5的整体氛围很简单，但内容却很现代。所以纯古典的音效和纯现代的音效都不适合这个H5，这些音乐配上画面会很奇怪。
结合了古筝和现代这两个特点，经过一番思考，我们锁定了“现代古筝”和“流行民乐”这两个热搜关键词，这样查找音效的范围就小了很多。通过音乐素材网站的歌单搜索，选择了音乐的前奏——安静——“空”作为背景音效，整体音效氛围优雅、现代，又具有古典特色。
在制作过程中，我们可以通过预览功能在手机上观看页面效果。这时候别忘了用不同的手机进行测试，同时别忘了上传封面图片，加上H5的头条和副标题。至此，H5算是完了。图为the8屏平面效果，整体风格基本一致。通过扫描本节案例的二维码，您可以看到H5的最终效果。
H5全尺寸平面效应
为了让读者更深入地了解H5的制作过程，案件的具体制作步骤被剪辑成了视频。扫描下方二维码可以看到详细的制作过程。