霸占App Store免费榜一周的《山海镜花》是如何做UI设计的?

来自 杨曦UEDC 2020-05-07
专栏

[ 转载自 杨曦UEDC ]

霸占App Store免费榜一周的《山海镜花》是如何做UI设计的?

本文由游族网络UEDC杨曦投稿,授权游戏葡萄发布。

《山海镜花》是游族网络以山海经为世界观的一款回合制手游,作为UEDC设计团队,非常荣幸能够与众多顶级画师一起合作,在视觉体验上为玩家呈现这一幅奇幻妖异的山海画卷。

如何理解其宏大的世界观?符合产品独特调性的设计语言又是什么?

我们在探索UI设计的过程中经历了特别多的挑战,虽然现在的成果还远不及优秀完美,但也想作为复盘与大家一同分享。

世界观与初代设计

大荒,一个科技与巫术并存的山海异世。

“ 煌犼创世,集天地之灵气造出一面镜花镜,镜中灵气聚集,塑造了大荒中的异妖万物。在这个奇幻世界的中,主人公“黄龙”正处于千年恩怨的中心,他将与镜中所召唤的伙伴们一起,乘坐蜥蜴列车周游山海诸国,开启了属于他的冒险…… ”

“幻想世界的冒险”,这是产品希望带给玩家的第一印象。初始阶段,由世界观归纳了 “异、妖、镜、械” 4个视觉联想词,然后围绕这些方向进行素材收集。

s2.png

确立联想方向,最大的益处在于清晰定义了视觉范围,帮助设计师更聚焦的网罗参考素材。

我们开始整合了一些中国古代各个时期的装饰物件,通过找寻这些物件的廓形、纹样、色彩以及材质,来判断我们要做的控件形式。

s3.png

同时还找到可以表现能量传动的一些装饰物件,其中还包括偏蒸汽朋克的元素。

通过对齿轮、灯和各类小金属物件的搭扣来进行图形提炼,最终也应用到了UI界面设计中。

s4.png

例如,将《山海镜花》的“花”定义为符号源,与游戏原画中高频出现的机械齿轮元素做结合,形成了一系列控件风格。

s5.png

色调上结合了概念原画的氛围设计,采用比较偏暖的色系。棕红色提炼来源于蒸汽朋克中的经典用色,同时结合一些光效来营造出神秘、幻想之感。

s6.png

整体风格中也添加了一些二次元类型中的常用图形元素,希望结合之下,营造出属于《山海镜花》的独特风格。

s7.jpg

但回顾初代UI,我们还仅仅是在追求设计原子的风格独特,属于产品的设计语言还很模糊。

设计语言的进化

到了研发中期,随着游戏系统与美术资源愈发完善,世界观也开始脱离文字感受,在游戏中逐渐形成一幅幅画面。

s8.png

这个时候再看产品本身,记忆点最强烈的内容来自“蜥蜴列车”,它是贯穿了整个世界观的一个装置,所以在视觉体验上可以将列车概念作为顶层设计语言,进而迭代了一版新的UI风格。

s9.jpg

这一次的迭代增加了更多“列车”氛围。

在制作前期,设计师查找了许多列车图片与电影素材,通过提炼应用在了新版风格中。

s10.png

对比上一代设计,加入了许多创意细节,例如左边页签加入点亮效果,让交互辨识度更具指向性。背景中加入了主光源,想法来源于火车里诡异、神秘的灯光,忽明忽暗更具异世界代入感。

s11.png

除此之外,颜色方面也做了优化,饱和度提升帮助画面看起来更有故事感。

在冷暖配置上使用了深蓝色作为辅色,同时加以橙色点缀丰富色调。

s12.png

当UI明确了以蜥蜴列车作为顶层设计语言之后,核心脉络也随之清晰,登录界面由列车启动到车内选角,再到站台主界面,顺畅的视觉体验一气呵成。

s13.gif

后续,我们又将这版稍显厚重的蒸汽朋克风格做了一次轻薄化的处理。

s14.png

在减轻UI的视觉重量后,显著提升了界面的信息阅读层级。

s15.png

工作过程中,信息阅读层级最容易被忽视,设计师犯了很多视觉优先的错误。

当UI轻薄化之后,设计师的关注点也能相对聚焦,毕竟信息内容才是游戏体验中最主要的部分。

s16.gif

制作人大圣在这方面也有着极致的追求,他经常会在UI评审时提醒我们注意“信息层级”“列车元素”的结合,例如形式感统一的车票样式:

s17.png

产品设计语言的明确,使得UI视觉更加规范统一,同时也引导了宣发设计以及线下活动,形成了极为一致的品牌调性。

s18_meitu_1.jpg

s19.png

s20.png

虚与实的镜花设计

在游戏整体UI规划中,我们重新定义了设计元素的使用情景: 

  • 将冒险旅途的蜥蜴列车定义为 “列车”元素,应用在核心系统;

  • 将融合天地灵气的镜花镜定义为“镜”元素,应用在与镜灵(英雄)相关的系统;

镜子自带神秘、虚幻的属性,它就像是两个空间之间穿梭的时空门。

电影《爱丽丝梦游仙境》,爱丽丝也是通过镜面去到一个带有梦幻色彩的世界中冒险。

s21.png

因此我们也使用了镜子为一个基本元素,通过提炼它特殊的质感、状态属性来丰富我们的视觉体系。

s22.png

在之后所有与镜灵相关的系统里,都刻意加入了破碎镜片的设计元素,让“镜“的概念贯穿其中,也更符合游戏世界观背景。

例如“异闻秘录”系统,设计师把挑战进度用“破镜重圆”的概念进行包装。

每过一关点亮一个镜片,当全部完成后变成一个完整镜子,目标感十足。

s23.png

镜为实,灵为虚。

对于抽卡系统,产品希望强调镜灵(英雄)是由镜花镜的灵气所召唤,这虚实结合对于UI设计而言是最大的挑战,好在主美苍月白龙为我们提出了万花筒般华丽的创意。

由此,从镜子碎片到镜中世界的抽卡界面也应运而生。

为UI设计元素定义使用情景,这是一个很好的设计方法。

极大提高了团队的产出效能,即便是新人,也能确保快速、准确的完成系统需求。

s25.png

结语

“ 对于《山海镜花》的UI,我最大的感受是 “核心设计主脉络的清晰化” 和 “视觉设计在产品内外的高度统一化” 。—— 天之虹 ”
列车设计语言的树立,引出车票等与之相关的元素;镜子,作为一个空间媒介,虚实之间打通了系统的核心视觉。

两者与宣发设计的相互结合,使产品内外形成了高度的一致性,帮助在市场中取得令人印象深刻的表现。

s26.jpg

s27.png

不过当前版本的用户体验还有很多不尽如人意的地方,我们也在积极收集玩家反馈,近期展开更多专项优化。

以上是对《山海镜花》UI设计语言的一些复盘,其中由散碎到集中的过程值得被记录、沉淀。

s28.jpg

文章评论
游戏葡萄订阅号