微信H5页面制作流程，大家有哪些经验分享？
时间：2024-02-14 03:55:01 | 来源：网站运营
时间：2024-02-14 03:55:01 来源：网站运营
微信H5页面制作流程，大家有哪些经验分享？：H5 现在已经成了企业的常用微信营销方式。我们能在各种微信朋友圈广告植入、各路商家的促销优惠，甚至是公司的宣传文案中看到H5作品的出现。
H5由于动画效果丰富，非常适合电脑屏幕操作，因此受到很多人关注。
早期的H5作品制作成本非常高昂，一些广告主的优秀H5作品动辄百万的制作费用，如今则由于一些第三方平台的出现，制作变得越来越简单，今天也主要跟大家分享下H5的制作流程。
首先大家要有一个概念，那就是H5更多的是为微信制作网页，设计师只需要考虑怎么为手机屏幕进行页面设计，而不需要考虑桌面端打开的效果。
所以对于H5作品而言，网页足够细致、足够小、让人印象深刻，反而对传播更有利。
那么常见的H5制作流程包括下面几个方向：
1、了解需求并确定表现形式不管是为自家企业做产品宣传，还是为客户制作H5，一定要先搞清楚为什么要做这个H5。因为每个项目追求的目的都不同。
比如有的是为了新品发布，也有的是为了品牌传播。这里更多的是策划层面上的话题，但一个H5能否成功，了解项目的真实需求是最重要的一步。
当我们了解的需求后，剩下的就是确定H5的表现形式，比如采用什么样的动效，是否需要结合人脸融合、重力感应等高大上的功能等等。
因此这个环节更多的需要策划人员和技术人员多沟通交流，也需要更多的头脑风暴，所以这里是PPT大神以及脑图工具的主场。
- MindManager
- 在线脑图 百度脑图
- 在线脑图 MindPin
- freemind
2、确定设计表现恩，当你做了一个华丽的PPT并且有细分的脑图细节后，会上你的方案让甲方或者老板眼前一亮，领导决定这个作品交给你来执行，这时候你需要进一步细化，并制定执行计划，设计活动流程。
接下来将进入产品原型设计环节，最重要的就是确定美术风格。
例如我们想做一个仿朋友圈的形式，那么就需要还原微信内部的UI细节，如果是要做个走心故事，那么插画型的风格是最合适的。
除了美术风格外，设计师还需要确定什么样的主题故事，寻找什么样合适的配乐和声效，搭配何种设计元素等等
在这个环节就需要设计师及团队成员使用大量的工具来完成工作。
①首先，你需要跟产品去沟通活动页面，为了让产品理解自己的需求，你需要撰写文档然后设计原型。
- Axure
- Sketch
- 在线原型 墨刀
- 原型设计 摩客 mockplus
②下面就是进行字体设计、图标设计、创意设计、文案设计、画面设计等等细节。
创意设计网站
字体
图标
- Easyicon
- 阿里巴巴矢量图标库
- Findicons
画面设计
Photoshop
Adobe Illustrator
人人秀
创客贴
图好快：在线批量图片压缩
音效制作
Cubase
Pro Tools
Adobe Audition
FL STUDIO
动画制作
草稿分镜用 SAI
原画用 PS 或者 SAI
逐帧绘画用 PS 、SAI 或 Retas
艺术类电脑绘画用 Painter
动背用 PS 、SAI 或者3D转2D
后期合成用 AE
3、开发执行前端后端：撰写JavaScript／CSS／HTML代码
后端代码：PHP、Node.JS等
这么一来，一个标准的H5页面制作流程就完成了，剩下的就是简单的页面测试，确保内容没有BUG.
4、一键生成制作工具当然现在市场上还有很多第三方的H5制作工具，他们的原理和上述内容流程大同小异，区别只是 在于，网上生成的最终只是把这些步骤通过页面自动帮你实现了。
包括人人秀、易企秀、MAKA、兔展等H5平台都可以实现这些过程。
5、H5制作中的注意事项1、前期跟前端设计师进行沟通，讨论页面中元素的动效呈现。例如一些元素的位移，旋转，翻转，缩放，逐桢，淡入淡出，粒子效果，照片处理等等，还有3D展示效果。 (
http://fffNaNiscm.com 这个网站里有h5所能实现的效果)
2 、背景动效其实比较推荐缓动效果，如“京东管培生招聘”的例子里星空中一闪而过的流星，间歇性出现不抢主角风头再好不过了.
3、复杂多变的动效不一定是好的，要考虑到加载速度等用户体验问题。
4、考虑到用户使用场景的多样性，那种介绍类的如果要加背景音乐，尽量不要太粗暴。有一点循序渐进最好，给用户留时间在骚扰别人之前可以关闭。
或者可以在开始时是关闭状态。但做游戏h5页面的时候，音乐可以没有关闭开启按钮，因为用户对接下来发生的事是有预知的。
5、考虑每一页音乐按钮放置的明显性。如果能用其他页面元素去替代音乐符号作为按钮也是极好的。
6、给前端设计师的音乐文件：格式为mp3等 ，单轨，最好30秒以内 。为了加载速度，文件大小尽量控制在：100k以内最佳，可以用Adobe Audition等软件来压缩。作为无限循环的背景音乐，截取时一定要注意头尾得连接得上。
在线咨询
