Discuz! Board

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 15|回复: 0
打印 上一主题 下一主题

《山海镜花》UI设计语言探索

[复制链接]

2万

主题

2万

帖子

7万

积分

论坛元老

Rank: 8Rank: 8

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













禅语       
着相       
苦海       
梵音       
金刚经       
迦叶       
受持       
四念处       
随喜       
闭关       
妄念       
金刚经       
[/url]       
[url=http://www.nnycjd.com/fxzt/fxi/]梵行
       
化身       
止观       
四众       
念珠       
金刚经       
法相       
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Diablo2 v1.13d

GMT+8, 2020-8-14 07:40 , Processed in 0.040847 second(s), 17 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表