凭借都市神话题材、潮酷的3D美术风格，莉莉丝的《Dislyte》不仅获得了大量海外玩家认可，还被评为了GooglePlay 2022年度最佳多人对战游戏。

莉莉丝游戏Dislyte

那么，这款游戏是如何做出深受全球玩家喜爱的UI视觉风格设计？莉莉丝Dislyte项目用户体验设计负责人Kian最近接受了采访。

受访者介绍

Kian，于2010年大学毕业，先后就职于Triniti lnteractive、网易、游族等公司，参与过《Dino Cap》《镇魔曲》《三国如龙传》《权力的游戏·凛冬将至》等多款各平台游戏项目制作。2020年加入莉莉丝，现为Dislyte项目用户体验设计负责人。

Kian深耕用户体验设计和开发十余年，擅长视觉风格设计，规范标准的制定和落地品控，以及团队的搭建和管理，为项目提供专业向与组织向的用户体验解决方案。

展开全文

本文将从多个设计维度出发，以Dislyte项目为例为大家分享设计思路。以下是经过整理的采访实录：

01

Dislyte国际化UI风格设计思路

01 美术风格

Q：最开始了解到Dislyte的时候，您觉得这个项目哪里吸引您？为什么看好它呢?

Kian：我最开始对于Dislyte的了解是通过和制作人以及主美沟通，初步判断这个项目具备了一个成功项目该有的一些特质，其次Dislyte的美术以及合作方式也非常吸引我。

首先Dislyte的美术风格非常抢眼、具有辨识度，在市面上也没有同类型的风格。另外在主打欧美市场的产品中，更多是偏向写实，或者扁平、严谨的风格。像Dislyte这样同时兼具全球市场品味和卡通风格，且潮流感十足的，非常打动人。

莉莉丝游戏Dislyte

其次Dislyte项目组展现出来的团队协作性以及合作的密切程度，都让我印象深刻。当然，这不仅仅是在Dislyte，也和莉莉丝本身的价值观和文化有关——简单真诚。这样大家做事和沟通都会比较敏捷和高效，我认为这也是项目成功离不开的因素之一。

Dislyte英雄觉醒动效案例

Dislyte英雄共鸣动效案例

Q：请Kian和我们简单介绍下Dislyte这个游戏的世界观，在UI设计上又是如何体现的？

Kian：Dislyte的世界观讲的是神迹降临近未来的世界，一部分人类通过接触神性声波觉醒神力，他们组成的“联盟"击退怪物，开始夺回原本生活的世界。是一款近未来都市奇幻题材IP，人物造型偏写实比例，稍微夸张风格的回合制卡牌游戏。

和传统卡牌游戏相比，Dislyte在UI设计上需要符合国际审美的同时做出IP品牌感。达成潮流现代的设计感受，同时体现游戏世界观特有元素与特征的目标。

Dislyte主要流程演示

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级页签&内容区→内容展示区→高频操作区→页面切换操作区。分区遵循阅读习惯和操作习惯以及聚焦内容的逻辑进行。

竖屏的交互框架设计与横屏不同，竖屏布局设计的tips：

1、遵守自上而下的阅读习惯，可参考书籍海报的排版布局，尽量接近用户获取信息的习惯。

2、高频操作区需要放在用户手指容易触及的区域，提高易用性。非高频操作的控件可以合理布局在上方。

3、与横屏不同，一个横向区域尽量只显示一个信息，避免叠加造成的布局混乱和多语言适配的问题。

4、界面布局避免一刀切，可以根据不同的需要保留一定的布局灵活度。

5、竖屏的布局在信息展示上比较有优势，更容易做出平面设计构成感，可以多参考海报与书籍排版方式，增加设计感。但在同一空间内没有横屏这么容易展示内容叠加的信息，例如宽广的画面环境与氛围，硬做易造成信息呈现的混乱。

UX在开始设计时，要先确定好界面框架。以上是以Dislyte项目为案例进行说明，不同类型和特点的游戏需要根据自身情况设计符合项目需要的交互框架，深入了解游戏类型和核心玩法能帮助快速确定一种合适的框架结构。

切忌设计过程中不断调整框架结构，如前期只有少量界面需求，率先根据内容设计了一个框架，但是随着内容量的增多、功能的完善觉得之前的框架不合适了又重新改一个框架或者新增一个类型的面板，如此反复造成大量的人力成本浪费，因此在项目开始设计之初就必须优先确定一个合适的框架结构，就算需求内容还不完善，根据设定好的框架结构后期的变动也不会太大。

黄金比例有三个常见的用法，分别为：黄金分割、斐波那契螺旋、三分法，Dislyte采用了更为简单实用的三分法。

需要注意的是，黄金比例仅作为设计师的辅助工具，切忌生搬硬套。如果一开始就去想着我一定要在设计中运用黄金比例的话，思维容易受限。黄金比例最好是用在最后设计的修正上，我们可以根据黄金比例去调整元素的位置。

在排版上，有四大排版原则：亲密、对齐、对比、重复。

1、亲密性：将相关项组织在一起。在一个页面上，位置接近就意味存在着关联。因此相关的项应当靠近，归组在一起。

2、对齐：每个元素都应当与界面上的另一个元素有某种视觉联系，一个界面建议对齐方式不超过2种。

3、对比：如果界面上的元素不相同，那就干脆让它们截然不同，以吸引用户眼球。如字号的对比，图片大小的对比。

4、重复：让视觉要素在整个作品中重复，包括统一颜色方案、字体字号、文本行距、项目符号、对齐方式、图片风格等等。

亲密性案例

以上从六个维度（1.美术风格/2.设计关键词＆情绪版/3.配色/4.质感/5.图形纹饰/6.构成和排版布局）分享Dislyte如何做一个符合国际审美的现代潮流风格的UI界面。

设计是为了解决问题而存在，游戏UI界面设计亦是如此。希望通过具体的案例和思考能授人以渔，通往终点的方法和道路有多种，在游戏用户体验设计中应以用户为中心，回归游戏本身才是不败的真理。

DislyteUI截图

02

深耕游戏美术设计十余年

Q：聊完项目，我们聊聊您个人吧~能不能给我们说说您是怎样进入游戏行业的?

Kian：我本身就很喜欢画画和做设计，很早开始学美术，大学也选择了设计相关专业，并在2010年进入游戏行业。当时国内的游戏行业的工业化还不够成熟，不区分原画和UI，很多公司也没有专门设立UI岗位。所以我也从事过原画的工作，虽然这并不完全是个人的主观选择。

我在大学期间就开始接触iOS系统的游戏开发，那会儿做了一款陀螺仪拳击游戏，这款游戏最后在App Store顺利上线。从那时起，对游戏美术这个领域开始感兴趣。虽然我还不是很确切的理解游戏UI，更不知道用户体验，但是开始在心里种下了一颗种子。

随后我了解到上海有一家主要做欧美市场的手游公司叫Triniti，并顺利进入这家公司工作。从这里开始奠定我对游戏行业、游戏研发流程、工业化的第一印象。

Triniti时期项目《Dino Cap》

网易时期项目《镇魔曲》

之后在网易有过几年的工作经历，那时的定位是资深设计师，主要工作是在专业上做沉淀和产出。在网易的这几年我在专业能力上得到了很好的锻炼和系统化的设计思考能力。

之后我从网易出来，作为用户体验设计团队leader加入了《权力的游戏》项目，第一次从0-1组建包括视觉设计师、交互设计师、动效设计等岗位的用户体验设计中台。负责整个团队的管理对我来说是机会，也是挑战。过程让我的管理能力得到了很好的锻炼。

《权力的游戏：凌冬将至》

Q：为什么选择加入莉莉丝？

Kian：莉莉丝在过往的项目中取得了很好的成绩，研发实力很强，和很多同行一样我在很多年前大概是2013年就开始关注这家公司和创始人Kenny，对公司的价值观和氛围有一种特殊的好感。

另外，Dislyte这个项目在前期就具备很多成功游戏的要素，这也是我选择加入莉莉丝的重要原因。

当然缘分也很重要，刚好Dislyte需要一个用户体验设计专家和团队leader，对我而言一个成功的项目是能够在行业站稳的基石，同时我的专业能力也需要用成功项目验证。

Dislyte

Q：专家和管理者这两个角色对您来说有没有什么各自明显的优劣势？您更倾向于作为哪种角色？

Kian：现阶段我会更倾向做管理的角色。

专家更加垂直，可以更加专注地设计具体方案以帮项目解决重点困难，这也是专家的价值所在。

我更喜欢管理者的角色，是因为我认为从专家到管理者存在着很重要的转变：把个人能力转化为团队能力。带动整个团队取得成功，对我来说是很有成就感的一件事。所以现阶段对我来说，成为管理角色，带领团队成长实现项目的成功更加重要。

Dislyte英雄系统背景切换实机展示

Q：从加入Dislyte到现在，让你最有成就感的是什么?

Kian：刚加入Dislyte的时候，UI团队有一些职能缺失，还未完全地搭建起来。通过和制作人以及主美的沟通，了解他们对用户体验的品质预期——比如他们需要什么样的交互，什么样的动效，整体期待值怎么样，等等信息来规划团队的搭建。

我最有成就感的事情之一，就是将我刚进项目组时看到的用户体验设计和管理的问题都得到了解决，整体的风格以及交互体验都达到了较好的统一性、规范性。

包括Dislyte最具有辨识度的都市潮流的运动感的视觉表现，以及和整体美术风格的契合度都有明显的提升，整体的美术表现在上线时也得到了玩家的喜爱。

从团队上来说，最开始一些欠缺的职能，和团队能力上的不足，都逐渐解决，开始走向一个协作更加密切、合作更加规范化、思路更加清晰的团队，这也是我觉得非常有成就感的一点。

Dislyte UI截图

游戏葡萄招聘内容编辑，

点击「阅读原文」可了解详情

无期迷途 | 原神抄不得 | 一人之下

漫威卡牌 | MMO不行了？| 暴雪网易

原神音乐 | 仿徨2022 | 专访沐瞳

点击下方公众号名片，获取游戏行业更多信息