【雷火UX体验设计】让表现力与信息兼顾——游戏的UI信息呈现分析

原创雷火UX体验设计网易雷火UX用户体验中心

游戏UI设计信息层级与表现力

游戏UI界面的信息层级对于用户获取有效信息具有重要的意义。信息层级反映了游戏界面的信息呈现逻辑架构，以怎么样的视觉效果与视觉方法处理这样的信息架构，将会影响到用户完成游戏任务的效果、心理体验的优劣以及信息传达的效率。信息设计是指通过设计使得复杂的信息得到容易理解、清晰的呈现。由于互联网中信息量巨大而用户时间有限，游戏设计师想要一款游戏更加吸引眼球，抓住用户，必然需要探索和完善UI以及信息展现方式。游戏UI的设计逃不开移动端界面这一“容器”的限制，如果信息量太大超出了容器的承受范围，信息架构会变得复杂，用户会需要更长时间理解信息与概念。因此需要设计师进行合理的信息架构设计，缩短用户形成概念的时间。反之，如果信息量较小，容器能够容纳这个信息量，那么信息架构也就越简单，用户形成概念的时间会越短。

那么什么样的信息架构与层级是优秀的、兼顾了表现力与信息的呢？

「优秀的信息层级」主要有这 2 个特点：

重点信息与次级信息对比适中
信息与模块的层级关系清晰。

视觉呈现设计方法

如何设计信息层次，让视觉效果有更好的呈现？

1. 规划界面的元素大小

在初始阶段，设计师需要选择合适的元素和信息，并规划其内部逻辑。通过布置和规划视觉元素的大小和位置，可以直观地反映信息的重要性，引导用户的视线。因此，设计者可以通过梯度大小的变化来构建元素信息层。对于一级标题或关键信息，我们可以适当增加字体大小和粗细，以扩大标题等信息的层次，让人们一目了然地掌握界面的关键点，提高信息的获取效率。在很多时候，可以借助色彩、字重、明暗来进行区分。我们可以让更重要的文本更大、字体更粗、色彩更加鲜明，拉开与背景的颜色对比度。

游戏《鬼泣》中信息层级的排列，尺寸大小进行了合理的、有梯度的区分，很好地降低了阅读难度。

2. 增加图形用于标示重点

有时候页面层比较多或限制于一些设计规范，字号大小和字重的变化不能区分层级时，我们还可以通过增加修饰元素来标示重点。

游戏《原神》中，增加了一些小修饰元素，既丰富了UI，又标示了重点信息。

3. 使用颜色区分信息

好的配色往往依靠设计师的审美，但合理的颜色搭配必定存在合理的配色规律和配色方法论的支撑。

颜色的深浅、冷暖能起到区分信息层次的作用。当界面的信息层次感不够强时，可以考虑如何提高界面的视觉层次感。除了前文提到的大小和距离，颜色作为信息传递的媒介，也能在一定程度上起到调节视觉层次的作用。色彩不仅是划分空间的有效工具，还能有效感染使用者的情绪，暖色如红色能让人兴奋，冷色如蓝色能让用户平静下来。不同的色彩搭配都可以增强UI的信息表现力。因此，色彩的合理运用，在信息层次的建设中，能产生更明显的效果。可以在 UI 元素上放置不同的颜色以形成微妙的层次结构，例如，白色、灰色等无彩色通常可以作为大面积的背景色，与其他有彩色形成对比。颜色还可以在信息组织和个性表达中发挥作用。在特殊元素（如按钮、错误信息或超链接等）中使用醒目的对比色会吸引用户更多的注意力。

下面会介绍一些配色的注意事项。

a. 遵循60% 30% 10%的原则是达到色彩平衡的最佳比例

在60%的空间使用主色；30%的空间使用辅助色，可以平衡过多的主色而造成的视觉疲劳；最后剩下10%的空间为点缀色，可以用在一些不太重要的元素又需要区分的时候。在实际UI设计中，迫于需要可能会使用更多数量的色彩，但不可超过7种色相（注意不是7种色值），每个色相还可以运用其饱和度、明度的变化分解出丰富的色彩搭配。