h5怎么做从四大角色带你了解H5制作流程?

近几年 , H5快速普及 , 应用于节日和一些品牌活动营销场景 。
为什么大家会选择使用H5作为营销传播方式呢?

  1. 在线互动 , 提高品牌曝光率 , 为在线平台或专题活动导流;
  2. 树立品牌形象 , 提高用户粘性和关注度;
  3. 搭建跨平台系统 , 打破android和iOS的系统壁垒 , 快速传播 。
如果你或你的公司也想做一个H5 , 该如何下手呢?今天笔者将从角色分工的角度带你了解H5制作的制作流程 。
在一个完整的H5制作项目中 , 主要包含以下4个角色:项目经理、策划、设计、开发 。
h5怎么做从四大角色带你了解H5制作流程?

文章插图
△H5制作角色及分工
那么在实际项目中该如何扮演好这些角色呢?
一、项目经理对接需求 , 把控项目进度 。
项目经理是一个统筹全局的角色 , 当有制作需求时 , 项目经理会负责沟通对接 。然后将需求传达给负责项目的成员 , 同时把控整体项目进度 。
首先从拆分需求讲起 , 我们可以从5WH的维度拆分需求:
△5WH拆分需求
该维度同时适用于策划、设计、开发 。
通过这6个维度 , 项目经理在此基础上了解到具体需求 , 同时规划好项目周期 , 安排好时间节点 , 对项目进行把控 。在项目的过程中 , 项目经理应积极与策划、设计、开发沟通 , 协调好上下游 , 推动项目的进度、做好项目管理、完成项目目标 。
二、策划构思创意方案 , 产出交互原型 。
项目经理沟通好需求后会传达给策划 , 策划即可根据需求 , 开始进行方案制作 。常规项目中 , 策划可先提供几个方向供大家选择 。选定一个方向后 , 策划再对方案进行细化 。
策划在制作的过程中 , 常使用下列工具:
△H5策划常用工具
  • PPT :windows最常用的演示软件 , 可进行利用矩形、线条等工具绘制基础原型 。同时利用文本工具进行标注 , 超链接和动画进行动画演示 。但是交互说明大多以文字的形式呈现 , 制作H5触发跳转动画不方便 。
  • Keynote:Mac系统的演示软件 , 和PPT类似 , 但是兼容是鸡肋 , 仅支持MAC系统 。
  • Axure :专业的原型绘制工具 , 可进行原型绘制 , 建立H5交互 , 同时可以共享演示 。但是不便于其他成员批注及修改 , 对于新手有一定的学习成本 。
  • 墨刀:在线原型设计与协同工具 , 共享演示便利 , 同样和axure一样有一定的学习成本 。
  • Word:可绘制原型 , 无法做链接跳转 , 大多展示以文字为主 。
在常规的制作中 , H5策划更多的是以PPT作为工具进行绘制原型 , 因为H5对原型图的需求并不高 , 而PPT上手简单、便于演示和修改 。但是当H5设计逻辑较为复杂对原型图要求较高时 , 可优先考虑使用axure、墨刀进行绘制 , 方便与设计及开发演示及沟通 。
还有一些H5是纯动画展示 , 就需要策划出分镜脚本 , 这时候就需要和设计配合输出方案 , 不过如果要求不高 , 也可以找一些相关的图进行替代 , 重要还是阐述清楚想表达的思路 。
策划在创意输出的时候 , 需要和设计、开发积极沟通 , 比如:场景如何构思展示 , 技术上是否能够实现 , 这样才能够确保后续方案的落地 。
△利用PPT进行原型图绘制
三、设计根据方案 , 进行视觉实现 。
当方案确认后 , 就是设计开始执行 。一般H5设计根据需求来大致分为插画、真人合成、视频、3D四个方向(个人分类 , 仅供参考) 。
但是很多人接到需求就不知道如何下手了 , 那么你需要先做2点:
  1. 认真看完策划 , 理清跳转逻辑及需要设计的内容 , 有问题可分条列出发给项目经理和策划沟通并确认具体内容;
  2. 确认设计风格方向 , 在策划出方案的时候 , 有些策划会提供明确的视觉风格方向 , 有些则是比较模糊的 , 如果是比较模糊 , 可以根据策划提供适合的风格方向供大家选择 , 确认后再开始动手做设计 。

    推荐阅读