中企高呈：H5页面制作经验分享

H5 现在已经成了企业的常用微信营销方式。我们能在各种微信朋友圈广告植入、各路商家的促销优惠，甚至是公司的宣传文案中看到H5作品的出现。H5由于动画效果丰富，非常适合电脑屏幕操作，因此受到很多人关注。

早期的H5作品制作成本非常高昂，一些广告主的优秀H5作品动辄百万的制作费用，如今则由于一些第三方平台的出现，制作变得越来越简单，今天就跟大家分享下H5页面的制作一些经验。

首先大家要有一个概念，那就是H5更多的是为微信制作网页，设计师只需要考虑怎么为手机屏幕进行页面设计，而不需要考虑桌面端打开的效果。所以对于H5作品而言，网页足够细致、足够小、让人印象深刻，反而对传播更有利。那么常见的H5制作流程包括下面几个方向：

1、了解需求并确定表现形式

企业不论做产品宣传，还是为客户提供服务，一定要先搞清楚为什么要做这个H5。因为每个项目追求的目的都不同。

比如有的是为了新品发布，也有的是为了品牌传播。这里更多的是策划层面上的话题，但一个H5能否成功，了解项目的真实需求是最重要的一步。

当我们了解的需求后，剩下的就是确定H5的表现形式，比如采用什么样的动效，是否需要结合人脸融合、重力感应等高大上的功能等等。

因此这个环节更多的需要策划人员和技术人员多沟通交流，也需要更多的头脑风暴，所以这里是PPT大神以及脑图工具的主场。

2、确定设计表现

当我们做了一个华丽的PPT并且有细分的脑图细节后，还需要进一步细化，并制定执行计划，设计活动流程。因此，接下来将进入产品原型设计环节，最重要的就是确定美术风格。

例如我们想做一个仿朋友圈的形式，那么就需要还原微信内部的UI细节，如果是要做个走心故事，那么插画型的风格是最合适的。除了美术风格外，设计师还需要确定什么样的主题故事，寻找什么样合适的配乐和声效，搭配何种设计元素等等

在这个环节就需要设计师及团队成员使用大量的工具来完成工作。

①首先，需要跟产品去沟通活动页面，为了让产品理解自己的需求，需要撰写文档然后设计原型。

②下面就是进行字体设计、图标设计、创意设计、文案设计、画面设计等等细节。

3、开发执行

前端后端：撰写JavaScript／CSS／HTML代码

后端代码：PHP、Node.JS等

这么一来，一个标准的H5页面制作流程就完成了，剩下的就是简单的页面测试，确保内容没有BUG。

4、H5制作中的注意事项

1、前期跟前端设计师进行沟通，讨论页面中元素的动效呈现。例如一些元素的位移，旋转，翻转，缩放，逐桢，淡入淡出，粒子效果，照片处理等等，还有3D展示效果。

2 、背景动效其实比较推荐缓动效果，如“京东管培生招聘”的例子里星空中一闪而过的流星，间歇性出现不抢主角风头再好不过了.

3、复杂多变的动效不一定是好的，要考虑到加载速度等用户体验问题。

4、考虑到用户使用场景的多样性，那种介绍类的如果要加背景音乐，尽量不要太粗暴。有一点循序渐进最好，给用户留时间在骚扰别人之前可以关闭。

或者可以在开始时是关闭状态。但做游戏h5页面的时候，音乐可以没有关闭开启按钮，因为用户对接下来发生的事是有预知的。

5、考虑每一页音乐按钮放置的明显性。如果能用其他页面元素去替代音乐符号作为按钮也是极好的。

6、给前端设计师的音乐文件：格式为mp3等 ，单轨，最好30秒以内 。为了加载速度，文件大小尽量控制在：100k以内最佳，可以用Adobe Audition等软件来压缩。作为无限循环的背景音乐，截取时一定要注意头尾得连接得上。

中企高呈是中企动力科技股份有限公司的高端子品牌，它区别于单一服务类型公司，兼具策略咨询与数字化服务于一体，分别从企业战略层、业务层、数据层、运营层、以及系统架构层入手，帮助企业制定出符合自身发展的数字化转型方案。

在定制化服务方面，高呈定制化平台实施能力，能够满足客户多终端、多系统平台的定制需求。除此之外，高呈还为客户提供业务调研，实施服务，项目管理服务，安全测试等全链条的服务。服务过程中，轻咨询能力，帮助企业在业务搭建过程中发现建设障碍，专业技术服务能力，有效保证项目落地，降低企业的投资风险。