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