人物ip形象设计排版-专访莉莉丝《Dislyte》用户体验设计总监：什么是“趋势”？

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

莉莉丝游戏 Dislyte

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

受访者介绍

Kian，2010年大学毕业，曾就职于Triniti Interactive、网易、游族等公司，参演过《恐龙帽》、《小镇魔法之歌》、《龙争虎斗三国志》、《权力的游戏： 《凛冬将至》等众多各平台游戏项目的制作。 2020年加入Lilith，目前担任Dislyte项目用户体验设计负责人。

Kian 深入参与用户体验设计和开发十余年。 擅长视觉风格设计、标准制定和实施质量控制，以及团队建设和管理，为项目提供专业、组织化的用户体验解决方案。

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

01 Dislyte国际化UI风格设计思路

01 美术风格

问：当您第一次了解 Dislyte 时，您认为是什么吸引您参与这个项目？ 为什么你对此持乐观态度？

Kian：我最初对Dislyte的了解是通过与制作人和主创的交流。 我初步判断这个项目具有一个成功项目应该具备的一些特征。 其次，Dislyte的艺术和合作方式也很吸引我。

首先，Dislyte的美术风格非常醒目、辨识度高，市面上还没有类似的风格。 另外，主打欧美市场的产品中，大多趋于现实，或扁平严谨。 兼具全球市场品味和卡通风格、时尚感十足的Dislyte令人印象深刻。

莉莉丝游戏Dislyte紧随其后的Dislyte项目团队的团队合作和紧密程度，给我留下了深刻的印象。 当然，这不仅仅与Dislyte有关，还与莉莉丝自身的价值观和文化有关——简单和真诚。 这样大家做事、沟通都会更加敏捷、高效。 我想这也是项目成功离不开的因素之一。

Dislyte英雄共鸣动画案例

Q：请Kian简单介绍一下《Dislyte》游戏的世界观，以及在UI设计上是如何体现的？

Kian：Dislyte 的世界观讲述了在不久的将来世界上将出现的奇迹。 有些人类通过接触神圣的声波来唤醒他们的神圣力量。 他们结成“联盟”，击退怪物，开始夺回原本生活的世界。 这是一款近未来都市奇幻题材IP，人物比例逼真卡通形象，略显夸张的回合制卡牌游戏。

与传统卡牌游戏相比，Dislyte的UI设计需要符合国际审美，同时打造IP品牌感。 实现潮流、现代的设计体验，同时体现游戏世界观的独特元素和特点。

问：Dislyte 有自己的 UI 设计流程吗？它是什么样的？

Kian：我们的设计创意思维是多变的。 通过不同渠道的沟通，比如设计师与设计师之间、设计师与策划者之间、设计师与用户之间，相似想法的碰撞往往能产生意想不到的想法。 但我们也有一套设计思维的准则：比如设计前需要分析需求，确认项目的真实需求，明确设计和体验目标等等。

DislyteUI真机录屏

02 设计关键词&情感版

Q：Dislyte的设计是如何找到创新突破点的？

Kian：虽然我们团队有一套标准的设计规范人物ip形象设计排版，但对于设计亮点和创新还远远不够。 仅仅依赖于规范的设计可能趋向于同质化。 结合世界观和游戏目标，得到以下设计关键词。 避免过多的关键词，尽量集中在3个以内，并且至少其中一个是具体的概念。

Dislyte 艺术设计关键词

我们还制作了一个“情绪板”供团队内部使用，以寻找设计方向和灵感，“情绪板”上有各种设计和各种配色方案（这些图像是经过挑选的，并且符合整体的基调）风格）。 当特别需要做出一些亮点和差异的时候，我们就需要跳出框框，需要更多的例子。 “情感版”是一个非常有用的方式。

通过情感板，将“极简轻量化”、“潮流运动”、“神音波”等关键词的抽象概念传达转化为具体的图形传达，避免因文字理解偏差而导致设计方向偏差沟通。

情感版示例（图片来源网络）

03 色彩搭配技巧

Q：为了符合国际审美，做出差异化，Dislyte的界面设计在配色上有什么特别之处吗？

Kian：由于Dislyte的整体风格是“都市时尚”，所以界面设计会强调整体的运动感和前卫的配色。 Dislyte的品牌色确定为紫色+彩虹渐变色，是整体视觉最重要的颜色，将应用到各种场景和界面设计中。

Dislyte的紫色品牌色由于明度不适合用作引导色，所以我们将品牌色与引导色区分开来，这也符合艺术潮流活泼的个性。

“Dislyte”品牌颜色

我们制定调色板的逻辑：品牌色、引导色、人物色是固定的，其他颜色尤其是辅助色的颜色较多。 事实上，随着游戏系统开发的深入，设计师需要主观地处理色彩搭配以适应不同的氛围和情感需求，而不是直接吸收色彩。 同时，我们也会整合常用的颜色，方便重复使用，减少因配色变化过多而导致风格偏差的风险。 配色规范不能是死的，它需要有一定的灵活性，但它不是自由的，需要有搭配逻辑。

分解样本

Q：《Dislyte》的整体美术基调是潮流、现代都市（不是赛博朋克）。 它需要更明亮，同时保持奢华感。 如何让画面更加美观同时又避免过于俗气？

Kian：为了保持多样性，英雄的背景颜色根据不同的地区使用了不同的魔法颜色。 通过颜色选择器，可以看到不同色调的颜色在高亮度、低饱和度范围内的背景配色逻辑，使背景颜色保持明亮透明，不会显得过于跳跃，保证舒适度和高级感感觉。

Q：如何在明亮、多色切换的背景下做好色彩层次处理，突出文字和信息？

Kian：不同色调的背景色应该保持相同的灰阶，这样才能在同屏切换角色时保持视觉的整体感； 同一背景的不同颜色渐变要避免过度的亮度差异和对比，中间灰色的整体亮度应保持区间。 让背景在视觉层次中“后退”，以突出角色并保持信息的可读性。

04 平面纹理

问：Dislyte 强调时尚和轻量化。 视觉界面呈现的平面纹理的制作有什么技巧吗？

Kian：为了减少视觉干扰，减轻用户获取信息的压力，同时与艺术内容形成整体的潮流设计感。 Dislyte使用平面纹理来强调画面的整体感，与人物场景的内容形成整体和谐。 图形的轮廓保持了克制和秩序感，控件的类型得到了概括和减少。 避免过于花哨的 UI 视觉效果。

Dislyte主界面

轻量化的控制设​​计减轻了控制设计的重量。 采用更透明的控件，利用屏幕的黑、白、灰对比度和颜色对比度来区分信息级别。 然而，层次的划分并不是越细越好。 尽量将画面控制在中、高、低3个层次，避免层次过多造成混乱。

Dislyte设备系统界面

避免过多的细节堆砌，追求极简的设计，减少屏幕的视觉干扰，减轻用户的负担，同时也更符合全球用户的审美取向。 将相同类型的控件组合在块中以减少线条的使用。 过多使用细线会让画面显得碎片化，而且很容易做出过于科技感的设计，这不是我们想要的方向。

Dislyte 简化了一般的弹出窗口

05图形装饰

问：平面设计是为信息展示服务的。 看似简单，但需要更全面的考虑。 辛田老师能举个Dislyte的例子讲一下吗？

Kian：图形装饰是核心IP图形的辅助元素，因为它会在不同的界面甚至同一个界面中重复、频繁地使用。 除了考虑图形与世界观美术风格的契合之外，还需要考虑重复使用的舒适度以及它们的搭配。 可能性，因此需要保持简单性和造型克制。

Dislyte控制设计案例

对于最常用的按钮和重要的控件（例如卡片），我们使用圆角和 6 度斜度的矩形。 这样的造型满足了高通用性和运动潮流感，也是整体视觉设计的细节标准。 无论细节多么精细，画面的图形比例都会失去平衡，失去干净简洁的感觉。

霓虹灯图像元素的使用遵循圆角和倾斜矩形的形状特征。 它用于重要的入口和标题。 它可以以动态效果增强画面的丰富度。 灯光背景采用中灰色明度，让画面对比度更加柔和。 现代奇幻，这也符合现代奇幻的世界观属性。 同时区别于赛博朋克的强烈反差（赛博朋克与世界观不符是我们需要避免的方向）。

其他辅助装饰和图案遵循简洁、现代的原则，基本上都是简单的几何图形的组合。

Dislyte活动弹窗设计扩展

06 构图与排版布局 Q：与横屏不同，Dislyte采用的竖屏交互框架，在设计上有什么需要注意的地方吗？

Kian：Dislyte 是一款以内容为导向的纸牌游戏。 没有主场景的概念，全屏界面+弹窗的结构组合有利于传达世界观IP和游戏沉浸感。 这种结构也是目前的主流搭配，具有高度的流派适应性。

以Dislyte系统玩法主流布局为例，基本布局逻辑从上到下为：资源展示区→标题区→二级选项卡&内容区→内容展示区→高频操作区→页面切换操作区域 。 分区遵循阅读习惯和操作习惯以及重点内容的逻辑。

竖屏的交互框架设计与横屏有所不同。 竖屏布局设计Tips：

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

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

3、与横屏不同，尽量在水平区域只显示一条消息人物ip形象设计排版，避免叠加带来的布局混乱和多语言适配问题。

4、界面布局避免一刀切，可根据不同需求预留一定的布局灵活性。

5、竖屏的布局在信息显示方面更有优势，更容易营造平面设计构图感。 可以参考海报和书籍的布局，增加设计感。 但在同一空间内，没有横屏那么容易显示叠加的信息，比如宽屏的环境和氛围，很容易导致信息呈现的混乱。

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

避免在设计过程中不断调整框架结构。 比如前期只有几个接口需求，先根据内容设计一个框架。 但随着内容的增加和功能的完善，发现之前的框架不合适，就更换新的框架或者添加新的框架。 一种面板，如此重复造成大量的人工成本浪费，所以在项目设计之初就必须先确定合适的框架结构，即使需求内容不完善，根据后期的变化进行设置框架结构太大。

黄金比例有三种常见用法，即：黄金分割、斐波那契螺旋线、三分法则。 Dislyte 使用更简单、更实用的三分法则。

需要注意的是，黄金比例只是作为设计者的辅助工具，不应该生搬硬套。 如果我从一开始就认为设计中必须使用黄金比例吉祥物，我的思维很容易受到限制。 黄金比例最好用在最终的设计修正中，我们可以根据黄金比例调整元素的位置。

在印刷术中，印刷术有四个原则：亲密、对齐、对比和重复。

1. 亲密性：将相关的项目分组在一起。 在页面上，邻近性意味着一种关系。 因此，相关的项目应该靠近在一起，分组在一起。 2.对齐：每个元素都应该与界面上的另一个元素有一定的视觉联系。 建议一个接口的对齐方式不超过两种。 3.对比：如果界面上的元素不一样，那么干脆让它们完全不同，以吸引用户的注意力。 比如字体大小对比、图片大小对比。 4、重复：让视觉元素在整个作品中重复出现，包括统一的配色方案、字体大小、文本行距、项目符号、对齐方式、图片风格等。

亲密案例

从以上六个维度（1.美术风格/2.设计关键词&情感版/3.色彩搭配/4.质感/5.图形装饰/6.构图布局布局）分享Dislyte如何打造现代国际审美潮流用户界面。

设计是为了解决问题而存在的，游戏UI界面设计也是如此。 我希望通过具体的案例和思考，能够授人以渔。 通向终点的方法和路径有很多。 在游戏用户体验设计中，应该以用户为中心，回归游戏本身才是颠扑不破的真理。

DislyteUI 截图

02专注游戏美术设计十余年 Q：说完了项目，再来说说你吧~能介绍一下你是如何进入游戏行业的吗？

Kian：我非常喜欢绘画和设计。 我很早就开始学美术，大学时也选择了设计相关的专业，2010年进入游戏行业。当时国内游戏行业产业化还不够成熟，没有原画之分和UI，很多公司并没有设立UI职位。 所以我也致力于概念艺术，尽管这不完全是个人选择。

我是在大学的时候开始接触iOS系统的游戏开发的。 当时我做了一款陀螺仪拳击游戏，终于在App Store成功上线了。 从那时起，我对游戏艺术领域产生了兴趣。 虽然我对游戏UI还不太了解，更不用说用户体验了，但我开始在心里种下一颗种子。

后来我了解到上海有一家手机游戏公司叫Triniti，主要经营欧美市场，我就顺利进入这家公司工作。 从这里开始，我建立了对游戏行业、游戏开发流程、产业化的第一印象。

Triniti时期项目“恐龙帽”

网易期项目《恶魔之歌》

之后我在网易有过几年的工作经历。 当时我的定位是高级设计师，主要工作是专业沉淀和制作。 在网易的这几年，我在专业能力和系统设计思维能力上都受到了很好的训练。

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

权力的游戏：凛冬将至

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

Kian：莉莉丝在之前的项目中取得了不错的成绩，并且拥有较强的研发能力。 和很多同事一样，我在很多年前，也就是2013年左右就开始关注这家公司和它的创始人Kenny。我对公司的价值观和氛围有一种特殊的美好感。

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

当然，命运也很重要。 Dislyte 只需要一位用户体验设计专家和团队负责人。 对我来说，一个成功的项目是能够在行业站稳脚跟的基石。 同时，我的专业能力也需要通过成功的项目来验证。

迪斯利特

Q：专家和管理者这两个角色有什么明显的优缺点吗？ 你最喜欢扮演哪个角色？ Kian：现阶段我会更倾向于扮演管理角色。

专家更加垂直，能够设计出更专注于帮助项目解决关键难点的具体解决方案，这就是专家的价值所在。

我更喜欢管理者的角色，因为我认为从专家到管理者有一个非常重要的转变：个人能力向团队能力的转变。 带领整个团队走向成功对我来说是一件非常有成就感的事情。 所以现阶段，我更重要的是成为一个管理角色，带领团队成长，以实现项目的成功。

Q：从加入Dislyte到现在，什么给你最大的成就感？

Kian：当我刚加入 Dislyte 时，UI 团队有一些缺失的功能，而且尚未完全建立。 通过与制作人和主美术的沟通，了解他们对用户体验质量的期望——比如需要什么样的交互、什么样的动画、总体期望是什么等信息来规划团队的建设。 对我来说最有成就感的一件事就是解决了刚加入项目组时看到的用户体验设计和管理的问题，并且整体风格和交互体验达到了更好的统一和规范。

包括Dislyte最具辨识度的都市潮流视觉表现，与整体艺术风格的契合度有了显着提升。 整体美术表现在上线时也受到了玩家的喜爱。

从团队来看，一开始一些职能缺失、团队能力不足的问题逐渐得到解决，开始走向协作更紧密、配合更规范、思路更清晰的团队。 这是我觉得非常有成就感的事情。 。

Dislyte UI 的屏幕截图