莉莉丝游戏Dislyte
#01
Dislyte国际化UI风格设计思路
Kian，于2010年大学毕业，先后就职于Triniti lnteractive、网易、游族等公司，参与过《Dino Cap》《镇魔曲》《三国如龙传》《权力的游戏·凛冬将至》等多款各平台游戏项目制作。2020年加入莉莉丝，现为Dislyte项目用户体验设计负责人。
Kian深耕用户体验设计和开发十余年，擅长视觉风格设计，规范标准的制定和落地品控，以及团队的搭建和管理，为项目提供专业向与组织向的用户体验解决方案。
#01 美术风格
Kian：很高兴受邀做客7GAME，有这个机会和大家交流！
莉莉丝游戏Dislyte
首先Dislyte的美术风格非常抢眼、具有辨识度，在市面上也没有同类型的风格。另外在主打欧美市场的产品中，更多是偏向写实，或者扁平、严谨的风格。像Dislyte这样同时兼具全球市场品味和卡通风格，且潮流感十足的，非常打动人。
其次Dislyte项目组展现出来的团队协作性以及合作的密切程度，都让我印象深刻。当然，这不仅仅是在Dislyte，也和莉莉丝本身的价值观和文化有关——简单真诚。这样大家做事和沟通都会比较敏捷和高效，我认为这也是项目成功离不开的因素之一。
Dislyte英雄共鸣动效案例
#02 设计关键词＆情绪版
Dislyte国际化UI风格设计思路
#03 配色技巧
我们制定色板的逻辑：品牌色、引导色、字色是固定的，在其他颜色特别是辅助色中颜色比较多。实际是随着游戏系统开发的深入，需要设计师主观处理配色以适应不同的氛围与情绪需要，而非直接吸色。同时我们也会把常用色整合起来方便复用，降低配色变化过大带来的风格偏差风险。配色规范不能是死的，需要有一定的灵活度，但也不是放开的需要有搭配逻辑。
#04 扁平质感
轻量化的控件设计，减少控件设计的厚重感多用透明控件，利用画面黑白灰对比和颜色对比区分信息层级。但层级的区分不是越细越好，画面尽量控制在中高低3个层级，避免层级过多造成画面混乱。
避免细节的过度堆叠，追求极简设计，减少画面的视觉干扰为用户减负，同时更符合全球用户的审美取向。块面化组合同类型控件，减少线条的使用。过多的细线使用会让画面看起来细碎，且容易做出过于科技感的设计，这不是我们想要的方向。
#05 图形纹饰
使用率最高的通用按钮和重要控件（例如卡牌）的设计，我们采用的是带圆角和6度倾斜的矩形。此造型满足较高的通用性和运动潮流感，同时也是整体视觉设计的细节度标准，再细的细节就会导致画面的图形比例失调和失去干净简约的感受。
霓虹灯图像元素的使用遵循圆角倾斜矩形的造型特点，使用在重要的入口和标题处，配合动效能提升画面丰富度，灯的背景使用中灰明度让画面对比比较柔和，整体视觉效果带有一些现代奇幻感，这也符合现代奇幻的世界观属性。同时与赛博朋克的强对比形成区分(赛博朋克与世界观不符是我们需要避免的方向)。
其他辅助的纹饰和图案遵循简洁现代的原则，基本是简单几何图像的结合使用。
#06 构成与排版布局
以Dislyte系统玩法的主流布局为例，基础的排布逻辑是由上到下为：资源展示区→标题区→2级页签&内容区→内容展示区→高频操作区→页面切换操作区。分区遵循阅读习惯和操作习惯以及聚焦内容的逻辑进行。
竖屏的交互框架设计与横屏不同，竖屏布局设计的tips：
1、遵守自上而下的阅读习惯，可参考书籍海报的排版布局，尽量接近用户获取信息的习惯。
2、高频操作区需要放在用户手指容易触及的区域，提高易用性。非高频操作的控件可以合理布局在上方。
3、与横屏不同，一个横向区域尽量只显示一个信息，避免叠加造成的布局混乱和多语言适配的问题。
4、界面布局避免一刀切，可以根据不同的需要保留一定的布局灵活度。
UX在开始设计时，要先确定好界面框架。以上是以Dislyte项目为案例进行说明，不同类型和特点的游戏需要根据自身情况设计符合项目需要的交互框架，深入了解游戏类型和核心玩法能帮助快速确定一种合适的框架结构。
切忌设计过程中不断调整框架结构，如前期只有少量界面需求，率先根据内容设计了一个框架，但是随着内容量的增多、功能的完善觉得之前的框架不合适了又重新改一个框架或者新增一个类型的面板，如此反复造成大量的人力成本浪费，因此在项目开始设计之初就必须优先确定一个合适的框架结构，就算需求内容还不完善，根据设定好的框架结构后期的变动也不会太大。
黄金比例有三个常见的用法，分别为：黄金分割、斐波那契螺旋、三分法，Dislyte采用了更为简单实用的三分法。
需要注意的是，黄金比例仅作为设计师的辅助工具，切忌生搬硬套。如果一开始就去想着我一定要在设计中运用黄金比例的话，思维容易受限。黄金比例最好是用在最后设计的修正上，我们可以根据黄金比例去调整元素的位置。
在排版上，有四大排版原则：亲密、对齐、对比、重复。
1、亲密性：将相关项组织在一起。在一个页面上，位置接近就意味存在着关联。因此相关的项应当靠近，归组在一起。
2、对齐：每个元素都应当与界面上的另一个元素有某种视觉联系，一个界面建议对齐方式不超过2种。
3、对比：如果界面上的元素不相同，那就干脆让它们截然不同，以吸引用户眼球。如字号的对比，图片大小的对比。
亲密性案例
以上从六个维度（1.美术风格/2.设计关键词＆情绪版/3.配色/4.质感/5.图形纹饰/6.构成和排版布局）分享Dislyte如何做一个符合国际审美的现代潮流风格的UI界面。
设计是为了解决问题而存在，游戏UI界面设计亦是如此。希望通过具体的案例和思考能授人以渔，通往终点的方法和道路有多种，在游戏用户体验设计中应以用户为中心，回归游戏本身才是不败的真理。
#02
深耕游戏美术设计十余年
我在大学期间就开始接触iOS系统的游戏开发，那会儿做了一款陀螺仪拳击游戏，这款游戏最后在App Store顺利上线。从那时起，对游戏美术这个领域开始感兴趣。虽然我还不是很确切的理解游戏UI，更不知道用户体验，但是开始在心里种下了一颗种子。随后我了解到上海有一家主要做欧美市场的手游公司叫Triniti，并顺利进入这家公司工作。从这里开始奠定我对游戏行业、游戏研发流程、工业化的第一印象。
Triniti时期项目《Dino Cap》
网易时期项目《镇魔曲》
之后在网易有过几年的工作经历，那时的定位是资深设计师，主要工作是在专业上做沉淀和产出。在网易的这几年我在专业能力上得到了很好的锻炼和系统化的设计思考能力。
之后我从网易出来，作为用户体验设计团队leader加入了《权力的游戏》项目，第一次从0-1组建包括视觉设计师、交互设计师、动效设计等岗位的用户体验设计中台。负责整个团队的管理对我来说是机会，也是挑战。过程让我的管理能力得到了很好的锻炼。
我最有成就感的事情之一，就是将我刚进项目组时看到的用户体验设计和管理的问题都得到了解决，整体的风格以及交互体验都达到了较好的统一性、规范性。包括Dislyte最具有辨识度的都市潮流的运动感的视觉表现，以及和整体美术风格的契合度都有明显的提升，整体的美术表现在上线时也得到了玩家的喜爱。从团队上来说，最开始一些欠缺的职能，和团队能力上的不足，都逐渐解决，开始走向一个协作更加密切、合作更加规范化、思路更加清晰的团队，这也是我觉得非常有成就感的一点。
-END-
本文来自微信公众号“七点GAME”（ID：SEVEN-7GAME）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
