收藏
评论

让小而美更轻——《全民小镇小游戏》UI改版思路分享

《全民小镇》H5游戏是由光子工作室与北京华夏乐游科技股份有限公司合作研发,曾荣获2018金翎奖"玩家最喜欢的H5游戏"。该项目于2018年8月11日正式不删档公测。为了符合当下主流审美及微信小游戏小而美的产品特性,华夏乐游与腾讯小伙伴们在美术风格改版方面做了较为大胆的尝试。本文主要就项目美术设计的改版思路进行分享。


    《全民小镇》微信小游戏版本与APP版本上线时间相隔近五年,玩法也有较大差别。项目研发初期本着展现IP继承性的目的,UI及游戏内美术资源均大量使用了APP版本的原版资源。但上线后从玩家反馈及市场数据显示,初期版本的美术市场接纳度较低。本着提升用户新进及留存的目的,项目组决定对游戏整体美术进行全面优化,并制定了一套流程方案:

问题评估——竞品分析——执行方向——用户调研——方案落地


问题评估


我们从识别性、统一性、易用性和乐趣性出发,针对以下几个维度对最初版本进行了评估——交互、颜色、造型、质感。总结出以下问题:


  1.  主界面 icon 过多,冗余杂乱,层次感差;

  2.  颜色偏暗沉,缺乏轻薄感;

  3.  部分后期新增界面在排版、颜色、造型等方面与主体风格脱节;

  4.  部分界面操作体验较差、缺乏引导




安卓端由于提供了较多活动,即使是新手阶段主界面的 icon 数量也严重过载;ios 端相对情况稍好




UI 界面的主色调偏暗沉,棕黑色描边加深了色彩的沉重感,不符合当前轻薄化的主流趋势





竞品分析


同品类游戏中《海盗来了》近期同样进行了美术的优化改版,优化方向总结为一下几点:


  1.  增强 沉浸感。为轮盘按钮和修理按钮围绕海盗主题绘制了轮船底板;

  2.  调整色彩 层次。降低了背景区域、岛屿等非功能区的色彩饱和度,提升了轮盘、icon、金钱等区域的色彩醒目度。增强了视觉引导力;

  3.  调整 UI 质感。整体风格扁平化,简化了按钮及 icon 造型,使游戏质感更加轻薄。

  4. 重新 安排 icon 布局。活动、每日、分享整合收纳入单独图标,减少了一级界面的icon 数量并统一显示在轮盘界面。分类添加了蓝色底框,增强条理性。






《海盗来了》UI 改版前后对比(左为改版前,右为改版后)


 

《麦兜环游世界》也做了简单的 UI 调整(左为改版前,右为改版后)——重新绘制了投骰按钮,简化了建造按钮,适当缩小了 icon 大小



执行方向


Icon 布局及设计调整

  1. 重新梳理 icon 布局及数量,将平级 icon 规范入统一 icon 下(需和策划进行功能探讨)。主界面 icon 数量尽量压缩至 10 个以下;

  2. 缩小 icon 大小,注意留白空间;

  3. 重新设计 icon 外观, 描边淡化,图案 扁平化、 简化。 底板不透明化


   
(布局参考游戏——损友圈,麦兜环游世界;大小及外观参考——海盗来了,欢乐麻将)


颜色提取


    为在原版色调的基础上做轻量化、年轻化调整。参考色彩效应与风格定位的这张坐标图(图片引用自umili同学的跨团队协作之——我叫MT4的变革之路),往更休闲、温和的方向走,重新定位我们的主视觉色调。





其他要点 :

  1. 删除黑描边;

  2. 降低整体饱和度,提高明度;

  3. 用色规范化,在主色调范围内取色。

  4. 增加 UI 框体边角弧度,增加圆润感。

基于以上几点分析及执行建议,我们制作了三套UI方案:






用户调研


    我们基于以上三款 UI 风格方案,和当前 UI 画面比对设计了用户调查问卷,在玩家群内及微信公众号发放了调研,最终根据得到选票数据及反馈建议敲定了第三版美术风格,并以此作为参照坐标对接下来的改版工作进行铺量。并在每周对后续设计方案进行针对性评估反馈。

改版前后部分画面对比:





总结


    本次美术的整体性改版,由合作研发商与腾讯光子小伙伴共同协作执行。该版本实装后,此方案解决了项目初期的一系列问题,使画面更加轻薄,信息模块层级清晰化,信息可读性增强,整体配色明快舒适。同时减少了美术资源,缓解了性能压力,使整体更加符合微信小游戏的调性。个人也对小游戏的风格把控有了更进一步的认识。


  最后感谢项目组和开发商小伙伴的信任与支持,希望小镇的数据在今后越来越好。


本文仅代表个人的设计心得总结,如有不当之处,欢迎共同探讨!


最后一次编辑于  05-22  (未经腾讯允许,不得转载)
复制链接收藏赞 2