欢迎光临散文网 会员登陆 & 注册

简单分析一下,为什么韭韭的UI给人感觉如此精致

2023-07-27 13:43 作者:princessgig  | 我要投稿

导入 

      先说一下为什么是韭韭,因为最近玩过的游戏就韭韭,碧蓝(你也玩碧蓝?.jpg),忘却前夜,而其中一款游戏的UI让我十分困惑不解。索性挑了其中一个做了点分析,以玩家的角度,尝试去说明为啥人家做得好,好在哪里。与其去说啥没做好,谁又做得垃圾,不如看点好的,学点好的,提高大家的审美,岂不美哉。

        叠个甲,非专业界面交互,仅作为玩家观感,理性交流,分享和写出来的目的最终是为了自我学习。

        整个过程可能会几期?比较碎碎念,尽量写的清晰。周期可能会拉长,使用的素材是韭韭开服的时候花费了接近一小时录制好的视频中的截取,非最新画面。

最后,分析的同时也是自我学习和巩固的一环。

通行证页面分析

正文

我先放个截图,为了不影响观感,我把它们拼在一起;为了篇幅不至于过长,这次只分析图1;

韭韭的通行证界面
  • 一眼下去,最直接的是什么?最直接的是我付费能获得什么;这四个页面无一不在强调,玩家最终能获得【皮肤-镜中幕间】,角色夏利的皮肤;

确立明确的层级关系

为什么会有这种观感?

  1. 首先是它的立绘在画面中的占比较大;

  2. 立绘部分没有被其他东西切割过,十分清晰;

  3. 完整的画面,与旁边细碎的奖励形成对比,视觉会优先看完整的立绘;

画面的切割

       (完整的,看黑白对比最强烈的地方,看圆心黑点,看外圈黑色的圆,看完整的圆心,看完整的圆环;↓)


眼睛会优先看哪里,其实就跟这个图里一样

        人眼看东西默认会看对比很明显的地方,画面中,对比最明显的地方,莫过于黑白关系对比强烈的奖励领取框框,和立绘和整个页面的大小对比;然后领取奖励的地方因为经过多次切割,使其层级下降,那么占比偏大,且画幅完整的立绘,就会直接成为画面中心;

       而一张高质量的角色原画立绘,是非常吸引眼球的东西,整个页面能不能站稳,其实非常依赖原画美术资源;我们可以尝试把左边的立绘去掉,看看效果,如下;

不得不说韭的界面真的很能打,去了立绘之后竟然品质还是在线的


       哇,效果竟然比预期还高出一些,那么就不得不说,界面的排布,格子大小的对比,色彩的时候,还有精致小动效,真的有点超出我意料;那么这里我就拆成2个大部分去分析好了。

  1. 布局的大小疏密;

  2. 高完成度下的精细对比;


布局的大小疏密;

       分析:那么这里看来有必要再展开说说,关于为什么去了立绘,完成度还那么能打;

疏密大小对比

        除了被红框框住的部分,其余部分都统一在一个暗色调中,属于一整个整体,而在整体中,又分割出了大小不一的小块,丰富其内容,属于细节;再再大小不一的小块中,分出用色明度/饱和度的区分,属于层级的调整,一步一步下来,画面的分布就会很舒服;另外可以注意到的是,在做布局的时候,其实还是有意的做了上下错开,没有所有东西的平行的布置,然画面不至于过于呆板;

       结论:整体的高完成度,降低了失去立绘支撑后的未完成感,厉害了;


       在了解到这部分以后我们再去看,游戏内真实的资源;

疏密大小对比,黑白关系对比

从层级上去说,排名越前优先度越高;

  1. 立绘(最终会获取的东西)

  2. 奖励(过程中会获取的东西)

  3. 可以交互的按钮(点哪里会有反应)

  4. LOGO(通行证的包装名称,一般用于降低玩家付费反感用)

  5. 红点(还有可以获取东西的提示)

  6. 奖励进度条(我还差多少完成进度)

  7. 一些说明用的信息(填充内容)

           整个交互层级就很清晰;作为玩家,在通行证界面,我需要获取的信息大概有,我需要获得什么;我有什么奖励;多少钱;我需要点击什么;说明的信息在哪里;

           除此以外,没有别的了,特别是手机游戏,我如果不能在第一时间看懂,到底要传达什么东西给我,那基本就不会去管,也不会去看;

高完成度下的精细对比

       

韭韭的通行证界面

那么说到高完成度,又从哪些地方去体现呢,我分析了一下,如下:

  1. 角色立绘

  2. 完整的美术包装,匹配点唱机的设计点

  3. 点线面的结合

  4. 颜色渐变的使用丰富色彩的关系

  5. 精致的暗纹和小图标

逐条来分析吧。

       角色立绘,天然的就是处于比较高完成度的东西,属于要卖钱的,一定是完成度,对比度,精细度都恰到好处的东西,无论放在哪个页面都非常有助于提高页面的完成度;

       符合年代感的包装设计,整个页面一整套围绕点唱机元素的设计;跳动的绿条,光碟,提示词的分贝,读碟,给人既符合年代感,又有高级感;字体也没有直接使用付费购买的字体摆烂,或者不经设计的艺术字,整体美观高级,毕竟经过设计的东西总是好的;

部分截取

      3-4合在一起讲 点线面的结合,是原本呆板的按钮变成生动,配合精致的小动效,真的太绝了;学画画的同学大概会知道,点线面之间是可以互相转换的,这个讲起来比较费事,不展开讲;

        颜色的使用也比较大胆,除了块面的切割,也采用颜色的过度/渐变结合去丰富和切割画面内容,像是暗色间隔亮色间隔暗色,来突出要表现的内容,也丰富和画面的表现;

部分截取

第五部分,直接上图不分析了。思路跟前面差不多,都是用来丰富画面,增加内容和可读性的;

部分截取

       其实像上面提到的一些小细节小心机的东西太多太多了,真的十分值得拿出来学习,鉴于时间有限,今天的分享大致先到这里,未来有时间会考虑补完,毕竟是花自己业余时间来做的分析和学习,如有错误的地方,评论区留言即可,理性分析。不吵架,顶多就学术问题可以讨论一下,吵架的不回复谢谢

       未来可能会反复编辑,编辑了会标上时间。____20230727

       第一次写文,可能比较啰嗦比较长,感谢看完!以后会尝试更简单明了/直接的,的去做分析。多多包涵 谢谢。

简单分析一下,为什么韭韭的UI给人感觉如此精致的评论 (共 条)

分享到微博请遵守国家法律