大家好，我暑假在一家设计公司实习，有幸参与了公司产品推广的一次完整h5制作，学到了很多东西，想在这里分享给大家。
大家好，我暑假在一家设计公司实习，有幸参与了公司产品推广的一次完整h5制作，学到了很多东西，想在这里分享给大家。
以下是h5的部分展示：
我想大致分五个阶段来做一下分享，其中前期创意是非常重要的，而制作过程中遇到的问题是最多的，我也把这些都一一总结出来，希望可以帮助到新手。
一、前期创意
目的：此前，团队已经拍摄并制作了宣传视频，我们需要在此基础上加大对片方收集的推广力度，让更多人能够看到我们拍摄的趣味小视频。
目标人群：主要是设计师人群。
h5创意：由于h5针对的主要目标人群是设计师，我们决定在h5中设置一个门槛以便区分设计师和普通人群。通过直白和便捷的方式，在引导设计师观看趣味视频的同时，展现片方产品的体验理念。
风格选择：考虑到传播的可能性，我们决定采用较为魔性和情绪化的风格以给人带来强烈的视觉冲击。
二、制作原型&&
根据前期的创意，制定的初稿h5流程是：
制定了流程之后马上就开始确定视觉风格&
在讨论过程中，我们得出一个结论：图形与文字相结合远比单调的文字更富感染力。
为了能够快速的确定方案，我在纸上绘制出了一个简单的草稿。
根据简单的草稿，用ps快速地处理出了一个大概雏型，主角就是我们公司领导。领导也许觉得自己被处理的还还挺酷，于是便拍板了这个想法。
接下来就是根据封面的风格继续制作之前流程图中的其它页面，同时，在sketch中切图，在手机上制作简单的原型。
在这里，给大家推荐一款快速原型app：POP
只需要简单的操作就可以迅速的制作出用以示意的原型。
三、视觉迭代
可以看出，原型的设计确实十分的潦草。
再分析之后得出了以下几点原因。
1.缺乏设计师的专有元素，难以让设计师们产生共鸣。
2.视觉缺乏冲击力，不够符合之前的定调。
3.主角的选定可能也有待商榷
下面是迭代的过程
加入了一些ps中的元素（例如ps里的工具窗口，还有设计师们一看就懂的白灰画布）（例如ps里的工具窗口，还有设计师们一看就懂的白灰画布）
在字体上稍作改动（加入一些小元素，让视觉聚焦）（加入一些小元素，使之变成黑白斑）
这样，就制作出了1.0版本
尽管作出了一些改动，画面看起来还是不尽人意。思前想后，我才发现人物选择出了问题，1.0采用的是我们公司领导作为主角，视觉冲击有余，而吸引力不足。
于是，就在当天下午，我们联系了一位美女进行拍摄，将其作为2.0版本的主角。
拍摄完后就开始处理人物。
我使用的软件是美图秀秀和prisma。个人认为，在进行一些简单且精度略低的人像与图像的处理时，可以考虑使用手机软件进行处理，更加方便快捷。
接着把字体处理的更有冲击力
将ps中提取的一些元素排列整齐
最后，在人物的额头上添加了一根红色飘带“随便搞个logo”
我相信这句让大多数设计师深恶痛绝的标语足够引起他们的共鸣。
这就是2.0版本
2.0版本做成之后，对其进行反复测试。通过与其他优秀h5的比对，我们发现我们所做成的画面缺少了“动”的元素。于是，在2.0的基础上，我们添加了一些微小的特效，制作成了gif形式。
四、h5制作
第一次制作h5，程序员和我都想着用最省事的办法把h5做出来。再切图的时候，我选择的是直接导出整张gif图，只有需要点击的按钮才分别导出。这样程序员操作起来也很简单。
这是当时导出的图片。
但是想要出效果的东西，一般都不是随随便便就能够弄出来的。
果然，给领导看过之后，领导对最后的效果非常的不满意。总觉得少了点什么东西。其实我自己也感受到了，切换太硬。&
把设计稿中的元素一个个导出
在ae中制作并演示效果。（这一步很重要，动效这种东西不适合纸上谈兵，语言描述得再清楚也不如直接演示来得直观，通过这一步，接下来程序员制作会轻松很多，能够有效减少后期的改动，避免成本增长。）
在这里多说一句，在实现的过程中，为了能及时看到效果，我们是直接在微信中查看。因为没有弄清楚传播规则，在我们还没有发布出去，内部查看时，就导致了域名被封。被封的原因就是浮层诱导分享。
这里大家需要格外注意：
能在微信中发布h5不需要跳转的域名需要备案，与公众号绑定。用香港的可不行哦。
我询问了几个未参与制作的设计系朋友对于我们所制作的h5的看法，他们纷纷表示，逻辑存在一定问题，点开之后跳出的界面让人摸不着头脑。于是，我们在第二版的基础上加入了一个引导页面。以下便是引导页面的候选，我们最终选定了第三个作为引导页面。
五、搭配音效 &
对于h5来说，搭配音效也很重要。
不论回答正确与否，音效需要给人一种响应的感觉，增强感染力。为了符合定调，我们花费了许多时间找到了魔性版的超级玛丽配音，大家可以认真听一下，看看是否还有熟悉的感觉。
最后，把图片进行压缩，提高h5的性能
到这里，h5基本上就做完了。
值得一提的是，在不断的测试中会发现很多bug，这是在程序实现过程中不可避免的，这个时候，设计师应该耐心的配合程序员，一起想办法解决问题，而不是去一味地催促程序员。
说了这么多，不如来看看 & &
扫码查看哦& &&&
最后附上本司美女程序媛工作照。点个赞呗。
可以记录推荐数据哦！
收录收藏夹
添加到收藏
没有新消息
创建收藏夹
公开(受欢迎的收藏夹将有可能选入站酷精选)
私密(仅自己可见)
分享给微信好友百度拇指医生
&&&普通咨询
您的网络环境存在异常，
请输入验证码
验证码输入错误，请重新输入还未登录，请先登录一品会员
轻松一点 坐享丰厚佣金
成功推荐会员注册，即可享受2元现金奖励，无上限
成功推荐发布任务，即可享受10%的佣金，无上限
成功推荐中标稿件，即可享受3%的佣金，无上限
二维码海报推广
二维码海报推广是针对移动端推广衍生的一种新的推广方式，把已生成的属于自己特有编码的二维码海报发送给好友或发布在朋友圈，别人通过识别扫描二维码进行有效注册后，便成功推广了一位用户。
推广成功后，一品威客将按规定对其支付应有的报酬。若被发现通过不正当手段获取推广奖励，平台有权冻结推广收益并关闭该账号。
推广员分为两种：一级推广员与二级推广员。不同层级推广员收益有所不同。
一级推广员指：未通过其他一品威客会员链接推广自主注册平台账户的用户。
二级推广员指：通过其他一品威客会员链接注册平台账户的用户。
佣金提成说明
推广任务发布
推广收益=（任务金额×10%）元
* 任务必须圆满完成，任务金额指实际托管消费的任务赏金。
* 推荐注册的会员又成功推荐其他会员注册并发布任务，也可抽佣（任务金额x2%）元。
推广会员注册
推广会员注册
推广收益＝（推荐注册会员数×2）元
* 推荐注册的会员必须且通过实名认证与手机认证。
* 推荐注册的会员又成功推荐其他会员注册，也可额外抽佣（注册会员数x0.4）元。
推广稿件中标
推广稿件中标
推广收益＝（悬赏金额×3%）元
* 任务必须圆满完成，任务金额指实际托管消费的任务赏金。
* 推荐注册的会员又成功推荐其他会员注册并成功中标，也可抽佣（任务金额x0.6%）元。
推广员收益TOP5
常见问题解答
1、如何加入一品威客推广员
答：注册一品威客网会员，就能成为推广员了。进入推广员页面（http://www.epwk.com/prom/）
2、要成为一品威客网推广员有什么要求？
答：推广员基本要求有2点：会上网、会打字。想要获得更丰富的收入就需要通过实践学习掌握更多的推广技巧。
3、加入一品威客推广员需要缴费吗？
答：加入一品威客推广员我们不收取任何费用，推广员与网站属于合作伙伴关系。
4、我做推广员能得到什么？
答：在实践推广过程中不仅可以学习很多有关网络营销的知识，还可以结交许多志同道合的朋友，更重要的一点是在有效推广之后还可以获得非常丰厚的现金报酬。推广下线以及下线推荐注册的会员在平台上完成注册认证、任务发布、任务中标，您都可以获得对应的现金报酬。
5、常用的推广工具有哪些？
答:有最普通的推广链接，还有二维码推广、图片推广代码、文字推广代码、页面推广代码、Flash推广代码等等。
6、推广是否成功在哪里查看具体情况？
答：点击网站右上角"我的一品威客"进入用户中心，"账号设置"中点击"推广赚钱"进行查询。
7、推广员报酬如何支付？
答：推广员基本报酬会打入您在一品威客的账户余额中。
Copyright (C)
www.epwk.com 厦门一品威客网络科技股份有限公司版权所有 备案：闽ICP备号专业网络推广我们做的更好
企业类型：个体经营主营产品：网页营销公司地址：
用户认证：已认证未认证未认证未认证
最新登录：手机：
浙江温州网友一周前在搜索“”访问了本页
湖北襄阳网友一周前在搜索“”访问了本页
湖南常德网友一周前在搜索“”访问了本页
广东湛江网友一周前在搜索“”访问了本页
河南焦作网友一周前在搜索“”访问了本页
专业网络推广我们做的更好介绍Company Introduction
聚优互通创立于2014年7月，旨在帮助更多的客户，推广更好的资源，使用更迅捷的方式，打造更优越的BUZZ，实现更非凡的互联网。
十年是我们最初的起点，未来是我们共同的期待。我们将在这里助你启航，迎风抛锚，铮帆远洋。聚优互通，做资源的搬运工。
我们公关公司专业为客户提供微博营销、微信营销、新闻发布、论坛营销、网络托管、网页优化、网络事件、搜索引擎、网站建设等多项网络整合、网络营销、网络推广服务。网站：
聚优互通www.juyoulink.com 通过我们的网站，您可以寻找您的需要，我们竭诚为您服务，祝您生活愉快，谢谢！
专业网络推广我们做的更好最新产品Latest Product
2018网站/APP推广新注册公司New Company Recommended
VIP企业推荐VIP Company Recommended
专业网络推广我们做的更好相关公司Related Industry Company
联系我们名称：专业网络推广我们做的更好手机：
主营产品网页营销
欢迎来到我们网站社会化媒体
了解更多>>
桂ICP备 号
阅读下一篇
自媒体运营攻略
行业经验交流
Hi，在你登录以后，就可以永久免费的收藏任何您感兴趣的内容，关注感兴趣的作者！
手机注册或邮箱注册
点击按钮进行验证
请输入正确的邮箱
已有帐号请点击
帐号创建成功！
我们刚刚给你发送了一封验证邮件
请在48小时内查收邮件,并按照提示验证邮箱
感谢你对微口网的信任与支持
你输入的邮箱还未注册
还没有帐号请点击
点击按钮进行验证
你输入的邮箱还未注册
又想起来了？
你已成功重置密码，请妥善保管，以后使用新密码登录
邮件发送成功！
我们刚刚给你发送了一封邮件
请在5分钟内查收邮件,并按照提示重置密码
感谢你对微口网的信任与支持
对不起，你的帐号尚未验证
如果你没有收到邮件，请留意垃圾箱 或
意见与建议
请留下您的联系方式
* 留下您正确的联系方式，以便工作人员尽快与你取得联系
转藏至我的藏点}