📐 王国之泪 的平面设计

2024-11-13

Art

为信息传达服务

在开始讨论王国之泪的平面设计之前，我们先来达成一些关于平面设计的共识。

在平面设计中，大部分平面设计师认为，其最首要任务是高效且清晰地传递信息。平面设计是一门在信息传递、美观这两个主要因素和诸多其它因素中寻找平衡的工作。

王国之泪的平面设计

王国之泪虽然基于幻想世界背景，但其平面设计风格是十分现代的。之所以给人现代的感觉，因为其用了许多现代的设计手法，其中最主要的是风格是扁平化。

不过即使使用的手法或要素现代，并不意味着会和幻想世界的风格冲突。令人喜爱的是，王国之泪将扁平化和幻想世界背景很舒服地结合在了一起。我会在下面介绍王国之泪是如何实现的。

在电子游戏的 UI 中高效且清晰地传递信息

HUD

HUD （Head-up-Display），一般被译作抬头显示

做 HUD 其实是一件并不容易的事。一方面，游戏画面本身很丰富，我们对 HUD 在游戏有这些期待：

  • 大部分时间都能容易地看清
  • 不存在不能看清的情况，即使不容易看清，但也想让玩家失去摄取信息的能力
  • HUD 不会分散玩家注意力
  • HUD 设计也要与游戏渲染画面结合考虑

王国之泪的实现是这样的，其一部分 HUD 采用亮色纯色图标加潜阴影的设计：

  • 王国之泪世界渲染后的画面，亮度控制很严格，绝大部分情况，画面都会比 HUD 的亮色要暗，确保了玩家在大部分时候都可以容易地看清 HUD

    另一部分的 HUD 则采用半透明黑底 + 亮色的方式，这是比较常见的设计方式。（右边的多出的黑圆是我用设计软件尝试验证叠加模式的结果，确认是正常的叠加模式）

  • 另一方面，即使在很白的画面颜色下，因为 HUD 有潜阴影的关系，玩家也能看清其内容

    另一部分的 HUD 则采用半透明黑底 + 亮色的方式，这是比较常见的设计方式。（右边的多出的黑圆是我用设计软件尝试验证叠加模式的结果，确认是正常的叠加模式）

另一部分的 HUD 则采用半透明黑底 + 亮色的方式，这是比较常见的设计方式。（右边的多出的黑圆是我用设计软件尝试验证叠加模式的结果，确认是正常的叠加模式）

25% 纯黑 ≠ 75% 深灰

关于用黑色叠加的话题，值得一题的是，用灰色去叠加和用透明度很低的黑色去叠加的效果是有不小差异的。从正常的透明度叠加的算法上，我们很容易知道这件事。

rust
result = t * up + (1 - t) * down

如右图，为了在这个背景画面下，实现灰度相似的叠加画面，深灰色用了 75% 的透明度，被叠加的画面中的大部分信息都丢失掉了。而黑色只用了 25% 的透明度，保留了更多背景画面的信息。

因此使用黑色的低透明度的叠加更容易给人通透的感觉。

总之，在使用颜色的透明度叠加的时候，需要根据我们想要的效果，来决定要使用的灰度。叠加白色的时候也是类似的原理。

25% #000000 ← → 75% #525252

让扁平化不再无聊

王泪中采用了大量的扁平化设计。虽然扁平化有很好的信息传递优势，但也确实容易让人觉得无聊。我想王泪中这些设计要素让 UI 变得有趣。这些细节往往并不显眼，但他们组合起来的时候，即没有破坏扁平化的简洁性，也让 UI 变得有趣了。

模糊

模糊在王国之泪的 GUI 设计中比较常见，其和半透明的黑色结合能营造很好的通透感。同时可以让玩家专注于 GUI.

在电子游戏中使用模糊是一件比较有限制的效果，越大的模糊效果（卷积核）需要越大的开销。对于王国之泪，因为其 GUI 状态下游戏是暂停的，因此只需渲染暂停前的最后一帧的模糊结果即可，并不会带来较大开销。

一篇介绍电子游戏中如何加快渲染模糊效果速度的文章： https://www.gamedeveloper.com/programming/four-tricks-for-fast-blurring-in-software-and-hardware

发光 & 阴影

发光同样是王国之泪的设计主题之一，其本身与游戏设定相契合，也为 UI 增添了趣味性。

冷知识：心心的周围是有光的

一个冷知识是：在夜间或者黑暗环境，部分 HUD 会成发光的样子；在日间，其效果则是阴影。

阴影和发光其实本质是相同的，只是颜色不同。其是通过有向距离场（Signed Distance Field or SDF）来实现的。

对于平面设计中，一个简单的规律是：在亮色背景下，阴影会变得很明显，因此透明度一般很低。反之，在暗色背景下，阴影很难看清，如果你想让其被看清，就要提高阴影的透明度。发光与之类似。

亮色背景下的阴影
暗色下背景下的阴影
暗色背景下的发光

花纹

我认为花纹是王国之泪的设计中很有魅力的部分，其赋予整个王泪的平面设计与游戏主题相关的气质，同时丰富了视觉元素。但因为我没有相关专业知识，缺乏介绍其的能力，在这里仅作展示。

有边距的内描边

王泪的 UI 中会常用很细的描边来突出或丰富 UI 元素

结语

还有很多想说的事，碍于我能力有限，以及撰写这篇分享的时间有限，我没有机会去说了。比如我还喜欢王泪的色彩设计、排版、信息层级设计、UI 的一致性管理、UI 动效、UI 音效等等。我觉得王泪是一个很好的游戏 UI 设计教科书，不如说大部分任天堂的第一方游戏都是如此；类似风格的，《马力欧：奥德赛》的平面设计也倾向于扁平化但又富有乐趣。《星之卡比：探索发现》也是如此。能明显感觉到任天堂的游戏平面设计已经现代化了，而如何让现代审美中的扁平化要素变得有趣，我想大家能在每个任天堂第一方作品中都能有所收获。