h5新手分享——5步制作一个完整的产品推广界面
大家好，我暑假在一家设计公司实习，有幸参与了公司产品推广的一次完整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版本
3.0版本
2.0版本做成之后，对其进行反复测试。通过与其他优秀h5的比对，我们发现我们所做成的画面缺少了“动”的元素。于是，在2.0的基础上，我们添加了一些微小的特效，制作成了gif形式。
四、h5制作
第一版
第一次制作h5，程序员和我都想着用最省事的办法把h5做出来。再切图的时候，我选择的是直接导出整张gif图，只有需要点击的按钮才分别导出。这样程序员操作起来也很简单。
这是当时导出的图片。
但是想要出效果的东西，一般都不是随随便便就能够弄出来的。
果然，给领导看过之后，领导对最后的效果非常的不满意。总觉得少了点什么东西。其实我自己也感受到了，切换太硬。
第二版
把设计稿中的元素一个个导出
在ae中制作并演示效果。（这一步很重要，动效这种东西不适合纸上谈兵，语言描述得再清楚也不如直接演示来得直观，通过这一步，接下来程序员制作会轻松很多，能够有效减少后期的改动，避免成本增长。）
在这里多说一句，在实现的过程中，为了能及时看到效果，我们是直接在微信中查看。因为没有弄清楚传播规则，在我们还没有发布出去，内部查看时，就导致了域名被封。被封的原因就是浮层诱导分享。
这里大家需要格外注意：
能在微信中发布h5不需要跳转的域名需要备案，与公众号绑定。用香港的可不行哦。
第三版
我询问了几个未参与制作的设计系朋友对于我们所制作的h5的看法，他们纷纷表示，逻辑存在一定问题，点开之后跳出的界面让人摸不着头脑。于是，我们在第二版的基础上加入了一个引导页面。以下便是引导页面的候选，我们最终选定了第三个作为引导页面。
对于h5来说，搭配音效也很重要。
不论回答正确与否，音效需要给人一种响应的感觉，增强感染力。为了符合定调，我们花费了许多时间找到了魔性版的超级玛丽配音，大家可以认真听一下，看看是否还有熟悉的感觉。
最后，把图片进行压缩，提高h5的性能
到这里，h5基本上就做完了。
值得一提的是，在不断的测试中会发现很多bug，这是在程序实现过程中不可避免的，这个时候，设计师应该耐心的配合程序员，一起想办法解决问题，而不是去一味地催促程序员。
扫码查看哦
最后附上本司美女程序媛工作照。点个赞呗。
