H5制作流程要怎么理解？
如果你或者你的公司也想做H5，怎么开始？今日本文作者将从角色分工的角度，带您了解H5制作过程。近年来，H5迅速普及，应用于节日和一些品牌活动的营销场景。为何每个人都选择使用H5作为营销传播方式？要怎们着手制作呢？下面就由小编为您介绍一下H5制作流程要怎么理解？一起来看看吧！
H5制作流程要怎么理解？
使用H5作为营销传播方式
1.在线互动，提高品牌曝光率，为在线平台或专题活动导流；
2.树立品牌形象，提高用户粘性和关注度；
3.搭建跨平台系统，打破android和iOS的系统壁垒，快速传播。
在一个完整的H5制作项目中，主要包含以下4个角色：项目经理、策划、设计、开发。
H5制作角色及分工
那么在实际项目中该如何扮演好这些角色呢？
一、项目经理
对接需求，把控项目进度。
项目经理是一个统筹全局的角色，当有制作需求时，项目经理会负责沟通对接。然后将需求传达给负责项目的成员，同时把控整体项目进度。
首先从拆分需求讲起，我们可以从5WH的维度拆分需求：
5WH拆分需求
该维度同时适用于策划、设计、开发。
通过这6个维度，项目经理在此基础上了解到具体需求，同时规划好项目周期，安排好时间节点，对项目进行把控。在项目的过程中，项目经理应积极与策划、设计、开发沟通，协调好上下游，推动项目的进度、做好项目管理、完成项目目标。
二、策划
构思创意方案，产出交互原型。
项目经理沟通好需求后会传达给策划，策划即可根据需求，开始进行方案制作。常规项目中，策划可先提供几个方向供大家选择。选定一个方向后，策划再对方案进行细化。
H5策划常用工具
PPT ：windows最常用的演示软件，可进行利用矩形、线条等工具绘制基础原型。同时利用文本工具进行标注，超链接和动画进行动画演示。但是交互说明大多以文字的形式呈现，制作H5触发跳转动画不方便。
Keynote：Mac系统的演示软件，和PPT类似，但是兼容是鸡肋，仅支持MAC系统。
Axure ：专业的原型绘制工具，可进行原型绘制，建立H5交互，同时可以共享演示。但是不便于其他成员批注及修改，对于新手有一定的学习成本。
墨刀：在线原型设计与协同工具，共享演示便利，同样和axure一样有一定的学习成本。
Word：可绘制原型，无法做链接跳转，大多展示以文字为主。
在常规的制作中，H5策划更多的是以PPT作为工具进行绘制原型，因为H5对原型图的需求并不高，而PPT上手简单、便于演示和修改。但是当H5设计逻辑较为复杂对原型图要求较高时，可优先考虑使用axure、墨刀进行绘制，方便与设计及开发演示及沟通。
还有一些H5是纯动画展示，就需要策划出分镜脚本，这时候就需要和设计配合输出方案，不过如果要求不高，也可以找一些相关的图进行替代，重要还是阐述清楚想表达的思路。
策划在创意输出的时候，需要和设计、开发积极沟通，比如：场景如何构思展示，技术上是否能够实现，这样才能够确保后续方案的落地。
三、设计
根据方案，进行视觉实现。
当方案确认后，就是设计开始执行。一般H5设计根据需求来大致分为插画、真人合成、视频、3D四个方向（个人分类，仅供参考）。
但是很多人接到需求就不知道如何下手了，那么你需要先做2点：
1.认真看完策划，理清跳转逻辑及需要设计的内容，有问题可分条列出发给项目经理和策划沟通并确认具体内容；
2.确认设计风格方向，在策划出方案的时候，有些策划会提供明确的视觉风格方向，有些则是比较模糊的，如果是比较模糊，可以根据策划提供适合的风格方向供大家选择，确认后再开始动手做设计。
在做的过程中一定不要盲目做也不要一次性做完全部的页面，正确的做法是先沟通确认需求，然后出demo确认风格再进行下一步，这样可提高整体的工作效率。demo可以选择首页或较为重要的页面优先进行视觉设计，设计风格上要契合产品调性和受众喜好，同时也需要考虑公司品牌文化展示的一些需求。
除了视觉的展示，一个优秀的H5还包含动效和音乐。动效部分如果非视频植入，建议绘制逐帧给到开发实现，绘制也需和开发提前沟通实现效果。如果页面动画的呈现是由设计师自己把控，那么在设计结束后，建议撰写动画页面展示效果说明，一起交给开发，避免反复的沟通。
同时很多同学对H5设计尺寸还抱有疑惑，首先给大家看看这一年多我自己作图尺寸的变化。
工作复盘：从四大角色带你了解H5制作流程工作复盘：从四大角色带你了解H5制作流程
最开始我的制作尺寸是640*1008PX，后来为了适应全面屏设计尺寸改为640*1240PX，安全高度为1040PX，安全高度之外的画仅为主体画面的延伸。很多人会想问UI一般不是按照iPhone6设计尺寸（750*1334PX）来进行设计吗。
是的，你也可以使用该尺寸，其实对于尺寸没有定论，很多公司也用iPhone6或X的尺寸进行设计，这些可以和开发沟通根据实际情况进行设计。
随着科技不断发展，智能设备不断更新，设计尺寸还是会变的，所以需要与时俱进。
四、开发、测试、上线、数据监控反馈
设计稿确认后就需要交付给技术进行开发，开发过程这里不作过多描述。当制作完成，大家可以一起进行测试。
测试维度主要是以下三个方面：
视觉还原度；
音效、动效配合及实现；
体验是否流畅。
这是一个反复确认的过程，当一切准备完毕，H5就完成了，就可以静静等待上线。不过，上线了就结束了吗？当然不是，费了这么大力气做的H5上线就是结束，那岂不是太可惜。这个时候就要回到我之前提到的5WH中的WHY：想要解决什么问题，平台导流or品牌营销？
因此上线后还要对H5数据进行监控，了解该H5的打开率、转化率等，对用户的行为数据进行分析。需要对H5进行埋设，一般可选择CNZZ友盟、神策等在线工具。在整个活动结束后，可以对数据进行分析复盘，是否最开始我们所说的why，是否达到了最初计划的预期。以上内容就是小编为您介绍的H5制作流程要怎么理解？
[免责声明]
文章标题： H5制作流程要怎么理解？
文章内容为网站编辑整理发布，仅供学习与参考，不代表本网站赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请及时沟通。发送邮件至36dianping@36kr.com，我们会在3个工作日内处理。
