《匠神部落》项目总结

项目概述:

  • 项目时间:2017-11-15 

  • 产品经理:罗超           

  • 交互设计:李梅

  • 视觉设计:俞洁、范文超、邵丽丽、阴娟、孙帅、叶琳斐

  • 前端开发:马俊鸿、杨智彤、诸钒

  • 研发测试:李佩

《匠神部落》既宝箱3.0版本迭代,在原先宝箱2.0的内容基础上,改变了春夏秋冬季节换肤的页面形式,重新设计成游戏界面形式。游戏模式是通过收集矿石来锻造钥匙,再使用钥匙开启宝箱,游戏整合了锻造、合成、宝箱、签到、交易、成就、排行等功能,游戏流程如下:

未命名文件.png

主要工作:

  • 拆分项目,分配需求;

  • 负责整体界面UI、锻造大厅、锻造商城、加载页、动效等的设计;

  • 把控设计风格、优化各个页面细节和汇总工作;

项目初期开了两轮需求讨论会,第一轮初步讨论确定大致风格方向和页面逻辑,第二轮就搜集的参考做筛选,最终定下了符合游戏背景的古风石器时代的风格,并对需求进行分配:

签到有礼-kevin 锻造大厅-俞洁 锻造商城-俞洁
神秘宝箱-阴阴 交易大厅-栗子 我的摊位-栗子
排行榜-茶包 成就礼包-孙帅 事件、规则-茶包
宝箱UI-栗子 钥匙UI-kevin 矿石UI-孙帅
loading页-俞洁 界面UI、图标-俞洁

由于项目时间比较紧张,为保质保量保时,在项目中后期与交互、产品、前端实时沟通和修改方案,在第一周整体页面均定稿,第二周着重设计UI图标,第三周设计弹窗以及补充UI和组件。

创新改进:

  • 制定出了一整套的UI,并且标注了尺寸和页面归属,方便了前端切图,并避免了多个页面重复元素重复切图的情况; 

  • 将gif动效转化为Mp4格式,解决了复杂动效卡帧、大文件无法存储以及gif格式画面失真的问题,使动效播放更流畅;

视频效果:

页面汇总:

  • 签到有礼1514182954375826.jpg
  • 锻造大厅1514182750302643.jpg
  • 锻造商城1514182982699575.jpg
  • 神秘宝箱1514183018681854.jpg
  • 交易大厅1514183074979990.jpg
  • 我的摊位1514183090683017.jpg
  • 排行榜1514183122654273.jpg
  • 成就礼包1514183141150846.jpg
  • 规则1514183155929356.jpg
  • 事件1514183171273929.jpg
  • 弹窗1514183186969468.jpg
  • UI组件1514183213806516.jpg

遇到的问题:

  • 项目中同一个元素例如矿石有些带投影有些则没有,因此切了多个尺寸,图片多会影响用户的加载速度;
  • UI是所有页面汇总了之后统一再出的,前期出了按钮的模板,但没有考虑到2个、3个字、大按钮的版本,还有在不同环境中的投影不一的问题,后期对逐个页面的按钮进行了调整,花了时间在重复的工作上;

解决措施:

  • 以后除非设计需要,尽量避免使用样式如投影、外发光等,让前端可以按最大图的百分比来缩放,减少页面加载时间;
  • 项目前期,将所有页面的组件提取出来分门别类,安排一个人在项目中期或者后期统一出各个页面的UI;