芯片|专访莉莉丝《Dislyte》用户体验设计负责人：何谓「潮流」？( 三 ) 三星|裁员|台积电|it芯片

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