布局
将信息组织到布局中
原文地址
翻译： @Liuyuxuan(liuyuxuan-sptf8)
审校：

设计UI菜单的主要目标之一是将信息组织为视觉效果、导航、以及交互布局，各自可以容纳不同数量和种类的信息。熟练地应用列网格、黄金比例、和长宽比的原理有助于实现此目标。

:::tips 提示：设计可以在整个游戏中重复使用的模板。这将减少花费在迭代，开发和设计上的时间。此外，这将有助于整个产品建立一致的视觉语言。 :::

列网格

设计遵循列网格的模板。可以制作任何喜欢的网格，但保持网格一致。这是 20×30 网格的示例：

20列网格

使用列网格建立层级结构，导航流程，一致性，易用性和内存负载。如果页面或菜单的内容过于广泛而影响了设计，请考虑提供页面间快捷方式。

将这些原理应用于前端菜单和 HUD 菜单的设计。

前端菜单和 HUD 为了适应呈现信息的上下文的不同，需要不同的方法来布局网格。前端菜单应该基于导航和信息架构，HUD 应该根据游戏环境来提高不同消息的优先级。

黄金比例

黄金比例，即，应用三分法则将元素放置在网格上的线的相交处。在设计网格时使用黄金比例，可能会设计出有趣的布局。

黄金比例

长宽比

设计游戏时，应使其不仅可以在 16:9 的屏幕上使用，还可以在旧屏幕（例如 4:3）上使用。每个组件都必须适应格式并按预期缩放。使用网格还可以有助于提前规划到将来多显示器和 21:9 显示器被广泛使用时。