如何制造一个养蛙思路的h5

发表于:2018-3-06 15:30

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:小玉同学    来源:51Testing软件测试网采编

#
流程
分享:
  年前养蛙的游戏风靡一时,很喜欢那个画风,刚好组里要做一个h5蹭热点,分享一下制作过程,给需要的小伙伴。
  1.思考
  1)需求
  其实蛙游戏的界面和层级关系都非常简单。抛去院子里的场景h5里不用,主界面其实很简单,四角几个icon,一个形象,一个房间内部背景图,几个弹窗完事。
  2)风格
  因为这次有特定明确的目标要求还算比较简单,但一个小经验分享下,制作前一定要和负责人敲定风格,甚至你可以多给他看几种可能符合他需求的作品,双方都明确了在开工,不然很容易出现改改改的情况。
  3)时间
  一个追热点的h5周期本身就短,融合过年回家的话题,一个字要快。
  2.制作
  1)背景线稿
  仿照原来的房间格局,设计还原一个城市人类居住的温馨房间。
  线稿真需要耐心,期间如果什么元素实在想不出来可以找找图,例如扶梯绿植;另外需要活动的元素记得分层,例如人物行李和桌上杂物。
  (左图为参考拓印房间布局的线稿,右图为新建层添加元素后完成的效果)
  2)背景上色
  根据风格需求,上色没有体面/肌理效果,注意整体搭配温馨,加一些细节花纹效果就好了。精进一下,在窗外/猫的旁边/人物的手部分层加入对应场景的两帧的动效。
  (左图为平铺颜色后效果,右图为添加花纹和人物颜色效果)
  3)制作icon
  4)制作弹窗
  3.总结
  没写过经验分享大家多多包含,这次制作过程中其中遇到的种种问题和解决方法,我在下边叨叨一下。
  1)总会有意想不到的问题出现,你要做的是努力去解决它。其实这次本身的目标是做是一个小程序,希望大家玩起来,但到上传审核后才被小程序后台打回来,理由是被划定成游戏,不符合小程序范畴,才改成h5,最终没有辜负大家的劳动成果。
  2)作为一个德智体美劳全面发展的设计,除了ps的功夫,可以多方面积累自己的能力用在工作中。例如学习用户体验,对于链接的跳转或者某处的点击反馈能有自己的思考,提出有价值的建议;学习动效设计,增加作品的细节亮点;了解技术知识,实现原理,和产品/前端良好沟通。
  3)合理配合,尽量效率的达到目标。设计/技术/编辑/产品同时开工,小组内积极沟通进度,一边自己制作一边和同事配合组装拼接出成品。


上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号