学员自己做的H5项目，厉害死了！（内附H5制作流程）

俗话说得好华清备有才认出啊！这不连平日辣么腼腆的小哥哥在展示自己做的H5时也是辣么...

1.你一定要先了解项目的具体需求

每支 H5 的设计都有具体目的了～

当你拿到甲方、同事的项目需求文档，先要想清楚为什么咱们需要做这支网站？每个项目追求的目的都不同。例如说: 新产品的发布、促销活动、为网站引流、还是说需要传播品牌形象等，这些都是我们常见的设计目的。

2.你要选择合适的表现形式

当方向明确后，下一步就要构思表现形式了，H5的表现方式非常多，并且还在不断创新：

是要讲故事卖情怀?

还是要强调功能，去陈述内容，做陈述?

还是说做个小游戏拼用户粘性?

...

在互联网公司，多数团队会采用头脑风暴来确定主题。 在这里，天马行空的想法固然重要，但能够落地实现的才是有效的，常规来说，这个形式一定是最能发挥内容特征和团队优势的，要去寻找合适的形式表现合适的内容。所以，参与形式的同学对于表现形式的认识和 web 网页技术的了解就必不可少了，他能办给你想出靠谱的形式。

如果你预算充足，项目又需要借助明星效应。

3.最为关键的设计表现

到了具体设计阶段，这就需要确定美术风格了。如果选择伪装朋友圈形式，那么必然你要奔着这个方向去做的更像朋友圈的页面，去研究微信内部的页面和 UI 细节，这样的执行就特别强调临摹和还原。

如果要走心故事，那么美术风格很可能会倾向插画，需要找到相应的参考来设计画面，在调性和内容上要符合主题，并且要寻找合适的配乐以及声效。

在这里，设计师需要判断用那种表现形式、需要什么调性、搭配何种元素、配乐和动效的跟进搭配究竟应该是什么样子?

所以，这个阶段对于设计的整体把控能力要求非常高，不是说你能做平面、能做 UI ，你就是H5设计师了，一个H5设计师需要综合能力，他应该能敏感的意识到多种表象形式，包括音乐、动效、甚至说视听蒙太奇的融合...

现阶段，由设计团队来产出优质H5比较现实。即使有专业动效师和音工团队与你配合作业，最终的所有内容还是需要一个专业H5设计师来统一。所以。对于设计师来说，学好H5相应的知识至关重要。

4.技术上的-开发上线阶段

很多人不清楚 H5 是怎么生成的，主要的方法有 2 种:

(一) 有代码实现

设计师把做好的分层图，这里包含了 psd 文件、png 切图、适量文件、mp3 音频、视频文件等等，一起打包给前端工程师，他会将这些内容放置到服务器，用代码编辑的方式将元素合并成我们平时看到的H5网页，前端也是H5的最终执行者，他们对设计效果的还原至关重要，一个好的前端往往决定了一个作品的最终命运，前端工程师可以说是设计师最好的行业导师。



(二)无代码实现

无代码并不是说不需要前端工程师，而是因为目前互联网上有大量 H5 页面生成工具， 他们以网站形式出现，并且被冠名为第三方平台，专门为没有前端资源的设计师提供辅助。 你可以把设计好的素材上传第三方平台的服务器，自己编辑并发布，这个过程不需要和程序员打交道，可以节省人力成本，并且更为简单快捷!

但弊端是，这类平台功能单一，效果有限，普遍都是幻灯片翻页的形式，而通过工程师生成的H5页面是可以达到定制化效果的，现在在市面上这类平台非常多了。



5.最后的数据总结阶段

数据总结阶段是H5特有的，各类数据会告诉你网站的受欢迎程度和不足之处，我们现在的数据统计已经比较强大了，服务器甚至能够监控到每一个页面各个位置的点击情况，即使数据没有那么详细，通过 pv、 uv 量和跳出率你也会对作品的效果有大概的认识。

【近期文章推荐】

1.长江后浪推前浪年终奖金哪家强

2.这或许是2017年最扎心的消息 还能不能愉快的玩耍了

3.前方高能！2017华清远见北京总部年会闪亮登场
4.做完这25道初级前端面试选择题，离成功入职就不远了！

5.大赞！嵌入式2月薪资高达10500元，均薪稳定在9k以上！

6.程序员的13个日！常！趣！事！

7.【新年豪礼】免费送嵌入式学习必备电子书籍！

回复“0-71”任一数字，即可查看往期文章精选哦

长按二维码关注我们

与10万程序高手做朋友

每天干货享不停 



或微信搜索华清远见，即可关注我们

免费讲座 | 干货分享 | 程序员生活 | 就业招聘

高端IT就业培训专家

m.hqyj.com

    关注 华清远见