15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 微信H5页面制作流程,大家有哪些经验分享?

微信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大神以及脑图工具的主场。

2、确定设计表现

恩,当你做了一个华丽的PPT并且有细分的脑图细节后,会上你的方案让甲方或者老板眼前一亮,领导决定这个作品交给你来执行,这时候你需要进一步细化,并制定执行计划,设计活动流程。

接下来将进入产品原型设计环节,最重要的就是确定美术风格。

例如我们想做一个仿朋友圈的形式,那么就需要还原微信内部的UI细节,如果是要做个走心故事,那么插画型的风格是最合适的。

除了美术风格外,设计师还需要确定什么样的主题故事,寻找什么样合适的配乐和声效,搭配何种设计元素等等

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

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

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

创意设计网站
字体
图标
画面设计
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等软件来压缩。作为无限循环的背景音乐,截取时一定要注意头尾得连接得上。

关键词:经验,流程

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭