h5怎么做从四大角色带你了解H5制作流程？
近年来，H5被广泛应用于节日和一些品牌营销场景。
为什么人们选择H5作为营销传播方式？
- 线上互动，提高品牌曝光率，引导线上平台或专题活动；
- 树立品牌形象，提高用户粘性和关注度；
- 搭建跨平台系统，打破android和iOS的系统壁垒，快速传播。
如果你或你的公司也想做一个H5，怎么做呢？今天，笔者将从角色分工的角度向大家展示H5制作的制作过程。
一个完整的H5制作项目主要包括以下四个角色:项目经理，策划，设计，开发。
△H5生产角色和分工
那么在实际项目中如何扮演好这些角色呢？
一、项目经理
对接需求，控制项目进度。
项目经理是一个总体角色。有生产需求时，项目经理会负责沟通对接。然后将要求传达给负责该项目的成员，同时控制整体项目进度。
先说拆分需求。我们可以从5WH这个维度拆分需求:
△5WH拆分需求
这个维度也适用于策划、设计和开发。
项目经理通过这六个维度，在此基础上了解具体需求，同时规划项目周期，安排时间节点，控制项目。在项目过程中，项目经理应积极与规划、设计和开发沟通，协调上下游，推动项目进展，做好项目管理，完成项目目标。
第二，规划
构思创意方案，制作互动原型。
项目经理沟通完需求后，会传达给计划员，计划员就可以根据需求开始制定计划了。常规项目中，规划可以先提供几个方向给大家选择。选定一个方向后，规划细化方案。
在规划过程中，经常使用以下工具:
△H5常用规划工具
- PPT:Windows中最常用的演示软件，可以用矩形、直线等工具画出基本的原型。同时使用文字工具进行标注，使用超链接和动画进行动画演示。然而，交互式解释大多以文字的形式呈现，因此不便于制作H5触发跳转动画。
- 主题演讲: MAC系统演示软件，类似PPT，但是兼容性是个鸡肋，只支持MAC系统。
- Axure: 专业的原型绘制工具，可以绘制原型，建立H5交互，分享演示。但不方便其他成员批注修改，对初学者有一定的学习成本。
- 墨刀:在线原型设计与协作工具，方便分享和演示。它和axure一样也有一定的学习成本。
- Word: 可以画原型，但是不能做链接跳转。大部分的演示文稿都是以文字为主。
在常规制作中，H5计划使用PPT作为绘制原型的工具，因为H5对原型图的要求并不高，PPT使用简单，便于演示和修改。但当H5设计逻辑复杂，对原型图要求较高时，可以优先使用 axure和墨刀进行绘图，便于演示和与设计开发的沟通。
有些H5是纯动画展示，需要策划分镜脚本。这时候就需要配合设计输出方案。不过如果要求不高，也可以找一些相关的图来代替。把你想表达的想法解释清楚很重要。
在策划创意输出时，需要主动与设计开发沟通，比如场景是如何构思和展示的，技术上能否实现，以保证后续方案的实施。
△原型图配PPT
三。设计
根据方案，进行可视化实现。
方案确定后，设计就要实施了。根据需求，H5设计大致可以分为四个方向:插画、实景合成、视频、3D(个人分类，仅供参考)。
但是很多人在收到需求时不知道如何开始，所以你需要先做两件事:
- 仔细看完方案，整理好跳转逻辑和要设计的内容。如有问题，请分段列出，发给项目经理和方案沟通确认具体内容；
- 确认设计风格方向。在策划方案时，有的方案会提供明确的视觉风格方向，有的则比较模糊。如果比较模糊，可以根据方案提供一个合适的风格方向给大家选择。确认后，就可以开始设计了。
在演示的过程中，一定不要盲目去做，也不要一次做完所有的页面。正确的做法是先沟通确认需求，再示范确认风格，再进行下一步，这样可以提高整体工作效率。Demo可以选择首页或者比较重要的页面优先进行视觉设计。设计风格要符合产品的调性和受众的喜好，也要考虑公司品牌文化展示的一些需求。
除了视觉展示，一个优秀的H5还包含动态效果和音乐。如果动态部分不是视频嵌入，建议一帧一帧的绘制到开发实现，绘制也需要提前和开发沟通，实现效果。如果页面动画的呈现是由设计师自己掌控的，那么在设计完成后，建议把动画页面的展示效果描述写出来，一起交给开发，避免重复沟通。
同时，很多同学对H5设计尺寸还心存疑虑。首先给大家展示一下一年来我自己画图尺寸的变化。
一开始我的制作尺寸是640*1008PX。后来为了适应全面屏设计改为640*1240PX，安全高度为1040PX。安全高度之外的画只是主画的延伸。很多人会想问，UI一般不都是按照iPhone6设计尺寸(750*1334PX)设计的吗？
是的，你也可以用这个尺寸。其实大小并没有定论。很多公司也用iPhone6或者X的尺寸来设计。这些都可以通过和开发的沟通，根据实际情况进行设计。
随着科技的不断发展，智能设备也在不断更新，设计尺寸还是会变化的，所以要与时俱进。
四。开发、测试、在线、数据监控和反馈
设计稿确定后，需要交付给技术进行开发，这里不过多描述开发过程。制作完成后，大家可以一起测试。
测试维度主要在以下三个方面:
- 视觉还原；
- 音效、动态效果协调与实现；
- 体验是否流畅。
这是一个反复确认的过程。当一切准备就绪，H5就完成了，你可以安静地等待发射。
然而，上线就结束了吗？
当然没有，可惜的是，曾经那么努力的H5，就这样结束了。这时候我又要回到我前面提到的5WH中的WHY:你想解决什么问题，平台导流还是品牌营销？
所以上线后，我们需要监控H5数据，了解这个H5的打开率和转化率，分析用户的行为数据。发展时，你需要埋葬H5。一般可以选择CNZZ友盟、厕神等在线工具。当整个活动结束后，可以对数据进行分析，重新列表，是否达到我们一开始说的为什么，是否达到当初计划的预期。
△友盟平台数据分析截图
通过项目经理，规划、设计和开发。
对四个字符进行分析，我们可以得到如下图表:
△H5生产流程
看到这里，相信你对H5的制作流程有了一定的了解，具体的工作流程和职能分工也可以根据你的实际情况进行调整。然而，一切都不会改变。做任何一个项目，都需要梳理制作需求，掌控项目进度，积极沟通反馈，学会总结回顾项目，总结经验。
这是一个完整的H5生产过程的结束。希望你看完能有所收获。
如果是对自己的产品负责，就需要在一开始就规划好整个推广过程。比如是单独推H5还是结合活动推，什么时候推，怎么推广等等。，这些都需要更详细的规划。今天的演讲只是关于在H5制造这个零件的过程。希望你看完能有所收获。
