以下文章来源于GameUE ，作者杨曦UEDC
GameUE
关注游戏的用户体验设计
文丨杨曦UEDC
《山海镜花》是游族网络以山海经为世界观的一款回合制手游大作，作为UEDC设计团队，非常荣幸能够与众多顶级画师一起合作，在视觉体验上为玩家呈现这一幅奇幻妖异的山海画卷。
如何理解其宏大的世界观？符合产品独特调性的设计语言又是什么？
我们在探索UI设计的过程中经历了特别多的挑战，虽然现在的成果还远不及优秀完美，但也想作为复盘与大家一同分享。
世界观与初代设计
大荒，一个科技与巫术并存的山海异世。
煌犼创世，集天地之灵气造出一面镜花镜，镜中灵气聚集，塑造了大荒中的异妖万物。
在这个奇幻世界的中，主人公“黄龙”正处于千年恩怨的中心，他将与镜中所召唤的伙伴们一起，乘坐蜥蜴列车周游山海诸国，开启了属于他的冒险……
“幻想世界的冒险”，这是产品希望带给玩家的第一印象。初始阶段，由世界观归纳了 “异、妖、镜、械” 4个视觉联想词，然后围绕这些方向进行素材收集。
确立联想方向，最大的益处在于清晰定义了视觉范围，帮助设计师更聚焦的网罗参考素材。
我们开始整合了一些中国古代各个时期的装饰物件，通过找寻这些物件的廓形、纹样、色彩以及材质，来判断我们要做的控件形式。
同时还找到可以表现能量传动的一些装饰物件，其中还包括偏蒸汽朋克的元素。
通过对齿轮、灯和各类小金属物件的搭扣来进行图形提炼，最终也应用到了UI界面设计中。
例如，将《山海镜花》的“花”定义为符号源，与游戏原画中高频出现的机械齿轮元素做结合，形成了一系列控件风格。
色调上结合了概念原画的氛围设计，采用比较偏暖的色系。棕红色提炼来源于蒸汽朋克中的经典用色，同时结合一些光效来营造出神秘、幻想之感。
整体风格中也添加了一些二次元类型中的常用图形元素，希望结合之下，营造出属于《山海镜花》的独特风格。
但回顾初代UI，我们还仅仅是在追求设计原子的风格独特，属于产品的设计语言还很模糊。
设计语言的进化
到了研发中期，随着游戏系统与美术资源愈发完善，世界观也开始脱离文字感受，在游戏中逐渐形成一幅幅画面。
这个时候再看产品本身，记忆点最强烈的内容来自“蜥蜴列车”，它是贯穿了整个世界观的一个装置，所以在视觉体验上可以将列车概念作为顶层设计语言，进而迭代了一版新的UI风格。
这一次的迭代增加了更多“列车”氛围。
在制作前期，设计师查找了许多列车图片与电影素材，通过提炼应用在了新版风格中。
对比上一代设计，加入了许多创意细节，例如左边页签加入点亮效果，让交互辨识度更具指向性。背景中加入了主光源，想法来源于火车里诡异、神秘的灯光，忽明忽暗更具异世界代入感。
除此之外，颜色方面也做了优化，饱和度提升帮助画面看起来更有故事感。
在冷暖配置上使用了深蓝色作为辅色，同时加以橙色点缀丰富色调。
当UI明确了以蜥蜴列车作为顶层设计语言之后，核心脉络也随之清晰，登录界面由列车启动到车内选角，再到站台主界面，顺畅的视觉体验一气呵成。
GIF加载较慢
后续，我们又将这版稍显厚重的蒸汽朋克风格做了一次轻薄化的处理。
在减轻UI的视觉重量后，显著提升了界面的信息阅读层级。
工作过程中，信息阅读层级最容易被忽视，设计师犯了很多视觉优先的错误。
当UI轻薄化之后，设计师的关注点也能相对聚焦，毕竟信息内容才是游戏体验中最主要的部分。
制作人大圣在这方面也有着极致的追求，他经常会在UI评审时提醒我们注意“信息层级”与“列车元素”的结合，例如形式感统一的车票样式：
产品设计语言的明确，使得UI视觉更加规范统一，同时也引导了宣发设计以及线下活动，形成了极为一致的品牌调性。
虚与实的镜花设计
在游戏整体UI规划中，我们重新定义了设计元素的使用情景：
- 将冒险旅途的蜥蜴列车定义为 “列车”元素，应用在核心系统；
- 将融合天地灵气的镜花镜定义为“镜”元素，应用在与镜灵（英雄）相关的系统；
镜子自带神秘、虚幻的属性，它就像是两个空间之间穿梭的时空门。
电影《爱丽丝梦游仙境》，爱丽丝也是通过镜面去到一个带有梦幻色彩的世界中冒险。
因此我们也使用了镜子为一个基本元素，通过提炼它特殊的质感、状态属性来丰富我们的视觉体系。
在之后所有与镜灵相关的系统里，都刻意加入了破碎镜片的设计元素，让“镜“的概念贯穿其中，也更符合游戏世界观背景。
例如“异闻秘录”系统，设计师把挑战进度用“破镜重圆”的概念进行包装。
每过一关点亮一个镜片，当全部完成后变成一个完整镜子，目标感十足。
镜为实，灵为虚。
对于抽卡系统，产品希望强调镜灵（英雄）是由镜花镜的灵气所召唤，这虚实结合对于UI设计而言是最大的挑战，好在主美苍月白龙为我们提出了万花筒般华丽的创意。
看下面这段剧情CG，当第一次遇到白泽时，黄龙坠入镜中世界所呈现的效果。
点击播放视频
由此，从镜子碎片到镜中世界的抽卡界面也应运而生。
GIF加载较慢
为UI设计元素定义使用情景，这是一个很好的设计方法。
极大提高了团队的产出效能，即便是新人，也能确保快速、准确的完成系统需求。
结语
对于《山海镜花》的UI，我最大的感受是 “核心设计主脉络的清晰化” 和 “视觉设计在产品内外的高度统一化” 。
—— 天之虹
列车设计语言的树立，引出车票等与之相关的元素；镜子，作为一个空间媒介，虚实之间打通了系统的核心视觉。
两者与宣发设计的相互结合，使产品内外形成了高度的一致性，帮助在市场中取得令人印象深刻的表现。
不过当前版本的用户体验还有很多不尽如人意的地方，我们也在积极收集玩家反馈，近期展开更多专项优化。
以上是对《山海镜花》UI设计语言的一些复盘，其中由散碎到集中的过程值得被记录、沉淀。
在未来，我们会持续对UI设计语言精心呵护，让它成长为一个更加多元发散的体系，为产品各个环节提供一个良好的设计支撑。
同时，还会更加注重由设计元素向情感的延伸。希望最终能让玩家获得一种源自心灵的感知，这也是我们对于优秀UI设计所追求的终极目标。
