先丢个二维码看看成品

然后我们切入设计流程的正题

1.思考

1）需求

其实蛙游戏的界面和层级关系都非常简单。抛去院子里的场景h5里不用，主界面其实很简单，四角几个icon，一个形象，一个房间内部背景图，几个弹窗完事。

2）风格

因为这次有特定明确的目标要求还算比较简单，但一个小经验分享下，制作前一定要和负责人敲定风格，甚至你可以多给他看几种可能符合他需求的作品，双方都明确了在开工，不然很容易出现改改改的情况。

3）时间

一个追热点的h5周期本身就短，融合过年回家的话题，一个字要快。

2.制作

1）背景线稿

仿照原来的房间格局，设计还原一个城市人类居住的温馨房间。

线稿真需要耐心，期间如果什么元素实在想不出来可以找找图，例如扶梯绿植；另外需要活动的元素记得分层，例如人物行李和桌上杂物。

（左图为参考拓印房间布局的线稿，右图为新建层添加元素后完成的效果）

2）背景上色

根据风格需求，上色没有体面/肌理效果，注意整体搭配温馨，加一些细节花纹效果就好了。精进一下，在窗外/猫的旁边/人物的手部分层加入对应场景的两帧的动效。

（左图为平铺颜色后效果，右图为添加花纹和人物颜色效果）

3）制作icon

4）制作弹窗

3.总结

没写过经验分享大家多多包含，这次制作过程中其中遇到的种种问题和解决方法，我在下边叨叨一下。

1）总会有意想不到的问题出现，你要做的是努力去解决它。其实这次本身的目标是做是一个小程序，希望大家玩起来，但到上传审核后才被小程序后台打回来，理由是被划定成游戏，不符合小程序范畴，才改成h5，最终没有辜负大家的劳动成果。

2）作为一个德智体美劳全面发展的设计，除了ps的功夫，可以多方面积累自己的能力用在工作中。例如学习用户体验，对于链接的跳转或者某处的点击反馈能有自己的思考，提出有价值的建议；学习动效设计，增加作品的细节亮点；了解技术知识，实现原理，和产品/前端良好沟通。

3）合理配合，尽量效率的达到目标。设计/技术/编辑/产品同时开工，小组内积极沟通进度，一边自己制作一边和同事配合组装拼接出成品。