凭借都市神话题材、潮酷的3D美术风格，莉莉丝的《Dislyte》不仅获得了大量海外玩家认可，还被评为了GooglePlay 2022年度最佳多人对战游戏。
莉莉丝游戏Dislyte
那么，这款游戏是如何做出深受全球玩家喜爱的UI视觉风格设计？莉莉丝Dislyte项目用户体验设计负责人Kian最近接受了采访。
受访者介绍
Kian，于2010年大学毕业，先后就职于Triniti lnteractive、网易、游族等公司，参与过《Dino Cap》《镇魔曲》《三国如龙传》《权力的游戏·凛冬将至》等多款各平台游戏项目制作。年加入莉莉丝，现为Dislyte项目用户体验设计负责人。
Kian深耕用户体验设计和开发十余年，擅长视觉风格设计，规范标准的制定和落地品控，以及团队的搭建和管理，为项目提供专业向与向的用户体验解决方案。
本文将从多个设计维度出发，以Dislyte项目为例为大家分享设计思路。以下是经过整理的采访实录：
01 Dislyte国际化UI风格设计思路
01 美术风格Q：最开始了解到Dislyte的时候，您觉得这个项目哪里吸引您？为什么看好它呢?
Kian：我最开始对于Dislyte的了解是通过和制作人以及主美沟通，初步判断这个项目具备了一个成功项目该有的一些特质，其次Dislyte的美术以及合作方式也非常吸引我。
首先Dislyte的美术风格非常抢眼、具有辨识度，在市面上也没有同类型的风格。另外在主打欧美市场的产品中，更多是偏向写实，或者扁平、严谨的风格。像Dislyte这样同时兼具全球市场品味和卡通风格，且潮流感十足的，非常打动人。
莉莉丝游戏Dislyte其次Dislyte项目组展现出来的团队协作性以及合作的密切程度，都让我印象深刻。当然，这不仅仅是在Dislyte，也和莉莉丝本身的价值观和文化有关——简单真诚。这样大家做事和沟通都会比较敏捷和高效，我认为这也是项目成功离不开的因素之一。
Dislyte英雄共鸣动效案例
Q：请Kian和我们简单介绍下Dislyte这个游戏的世界观，在UI设计上又是如何体现的？
Kian：Dislyte的世界观讲的是神迹降临近未来的世界，一部分人类通过接触神性声波觉醒神力，他们组成的“联盟"击退怪物，开始夺回原本生活的世界。是一款近未来都市奇幻题材IP，人物造型偏写实比例，稍微夸张风格的回合制卡牌游戏。
和传统卡牌游戏相比，Dislyte在UI设计上需要符合国际审美的同时做出IP品牌感。达成潮流现代的设计感受，同时体现游戏世界观特有元素与特征的目标。
Q：Dislyte的UI设计是否有一套自己的流程，是怎样的？
Kian：我们在设计时的创意思路是多变的，通过不同渠道的沟通，比如设计师与设计师之间，设计师与策划，设计师与用户，类似的想法碰撞往往能产生意想不到的创意。但我们也有一套设计思考的指引流程：例如做设计前需要对需求进行分析，确认项目真正的需求、明确设计与体验目标等等。
DislyteUI实机录屏
02 设计关键词＆情绪版Q：Dislyte的设计是如何找到创新突破点的？
Kian：虽然我们团队有一套标准的设计规范，但要设计出亮点和创新，只有规范是远远不够的。单纯依靠规范做出的设计，很有可能会趋于同质化。结合世界观和游戏目标得出以下设计关键词，关键词避免过多，尽量聚焦到少于3个，且至少有1个是具体的概念。
Dislyte美术设计关键词
我们还建立了一个“情绪版”，供团队内部寻找设计方向和灵感使用，在“情绪版"上有各种各样的设计和各种各样的配色方案(这些图片都是经过挑选，且符合整体风格基调的)。在特别需要去做一些亮点和差异化的时候，我们需要跳出框框，就需要更多的范例，“情绪版”就是个很有用的方式。
通过情绪版把"极简轻量”、“潮流运动"、“神性声波"关键词的抽象化概念传达转换成具象的图形传达，避免因文字传达的理解偏差导致设计方向偏差。
情绪版示例（图片来源网络）
03 配色技巧Q：为了符合国际审美和做出差异化，Dislyte的界面设计在配色上有什么讲究吗？
Kian：由于Dislyte整体风格是"都市、潮流”，在界面设计中会更加强调整体的运动感以及配色的前卫。Dislyte的品牌色确定为紫色 彩虹渐变色，作为整体视觉最重要的颜色会应用到各个场景和界面设计中。
Dislyte的紫色品牌色因为明度的原因并不适合作为引导色使用，所以我们将品牌色与引导色区分开，这也符合美术调性新潮和个性活泼的特点。
《Dislyte》品牌色
我们制定色板的逻辑：品牌色、引导色、字色是固定的，在其他颜色特别是辅助色中颜色比较多。实际是随着游戏系统开发的深入，需要设计师主观处理配色以适应不同的氛围与情绪需要，而非直接吸色。同时我们也会把常用色整合起来方便复用，降低配色变化过大带来的风格偏差风险。配色规范不能是死的，需要有一定的灵活度，但也不是放开的需要有搭配逻辑。
Dislyte色板
Q：Dislyte的整体美术调性是潮流现代的都市感（非赛博朋克)，需要比较明亮的同时保持高级感，如何能让画面比较靓丽的同时避免过于俗气？
Kian：为保持多样性，英雄的背景色根据不同的地域使用不一样的幻彩色。通过取色器可以看到不同色相的颜色都处在高明度低饱和度区间的背景配色逻辑，让背景色保持明亮通透同时不会显得过于跳跃保证舒适度和高级感。
Q：如何在明亮且多颜色切换的背景中，做好色彩层级处理，突出角色和信息？
Kian：不同色相的背景色保持灰度一致，这样在同屏切换角色的时候保持视觉的整体感；同一个背景的不同颜色渐变避免有过大的明度差异和对比，且整体保持中灰的明度区间。使背景能够在视觉层级中“退后”突出角色和保证信息的可读性。
04 扁平质感Q：Dislyte强调潮流和轻量，在界面视觉中呈现出的扁平质感在制作上有什么技巧吗？
Kian：为了减轻视觉干扰，减少用户获取信息的压力，同时能和美术内容形成整体的潮流设计感。Dislyte采用扁平质感强调画面整体感，与角色场景内容形成整体和谐，图形外轮廓保持克制和秩序感，归纳和减少控件类型。避免UI视觉过于花哨。
Dislyte主界面
轻量化的控件设计，减少控件设计的厚重感多用透明控件，利用画面黑白灰对比和颜色对比区分信息层级。但层级的区分不是越细越好，画面尽量控制在中高低3个层级，避免层级过多造成画面混乱。
Dislyte装备系统界面
避免细节的过度堆叠，追求极简设计，减少画面的视觉干扰为用户减负，同时更符合全球用户的审美取向。块面化组合同类型控件，减少线条的使用。过多的细线使用会让画面看起来细碎，且容易做出过于科技感的设计，这不是我们想要的方向。
Dislyte极简化通用型弹窗
05 图形纹饰Q：图形设计服务于信息展示，看似简单但需要考虑得比较全面，心添老师可以举Dislyte的例子聊聊吗？
Kian：图形纹饰作为核心IP图形的辅助元素，因为会在不同界面甚至同一个界面中反复高频使用，除了考虑图形与世界观美术风格契合外，还需要考虑其反复使用的舒适度和搭配使用的可能性，因此需要保持简洁和造型的克制。
Dislyte控件设计案例
使用率最高的通用按钮和重要控件（例如卡牌）的设计，我们采用的是带圆角和6度倾斜的矩形。此造型满足较高的通用性和运动潮流感，同时也是整体视觉设计的细节度标准，再细的细节就会导致画面的图形比例失调和失去干净简约的感受。
霓虹灯图像元素的使用遵循圆角倾斜矩形的造型特点，使用在重要的入口和标题处，配合动效能提升画面丰富度，灯的背景使用中灰明度让画面对比比较柔和，整体视觉效果带有一些现代奇幻感，这也符合现代奇幻的世界观属性。同时与赛博朋克的强对比形成区分(赛博朋克与世界观不符是我们需要避免的方向)。
其他辅助的纹饰和图案遵循简洁现代的原则，基本是简单几何图像的结合使用。
Dislyte活动弹窗设计拓展
06 构成与排版布局Q：与横屏不同，Dislyte采用的竖屏交互框架，在设计上有什么需要注意的吗？Kian：Dislyte作为内容向卡牌游戏，没有主场景概念的情况下，全屏界面 弹窗的结构组合有利于传达世界观IP和游戏沉浸感，这个结构也是目前主流的搭配，类型适配度较高。
以Dislyte系统玩法的主流布局为例，基础的排布逻辑是由上到下为：资源展示区→标题区→2级页签
玩家必看教程“网上麻将神器软件下载”(确实是有挂)_抖音推荐" data-original="http://shijieshida.com/css/1.jpg" />