Metlivi 博客

如何在紧凑的游戏界面中保持宠物控件和角色清晰可见

对于围绕宠物角色构建的小屏游戏，若要保持角色可见，可以预留出清晰的游戏区域，仅在其边缘放置基本控件，并根据当前操作自适应次要控件。首先从主要交互所需的最少控件集入手，然后检查角色、触摸目标和重要的状态提示在不同屏幕尺寸及设备安全区域中是否依然清晰可见。

2026年10月15日阅读用时 6 分钟作者：Metlivi Editorial Team
打开产品返回文章库
第 1 节

确定必须保留在屏幕上的内容

列出玩家在核心游戏循环中所需的信息和操作。一个实用的初版方案可以包括：宠物本身、一项主要操作（例如喂食或玩耍），以及一个用于表明该操作是否可用的紧凑指示器。将设置、图鉴收集以及使用频率较低的操作移至二级菜单或简短的上下文面板中。这是一种设计方法，而非通用规则：如果游戏的核心任务就是在多种操作之间进行选择，那么可能需要同时显示更多控件。

在布置控件之前，先为角色确定一个明确的视觉区域。保持其轮廓和表情的关键部分清晰无遮挡，避免在上面放置按钮或标签。如果某项操作需要直接触摸宠物，请保持该交互区域畅通无阻；如果控件浮在游戏场景上方，请确保它们不会遮挡玩家需要看到的角色部位。Apple 的游戏控制设计指南建议，在能直接与游戏对象交互的情况下，应减少使用虚拟控件（Game controls）。

第 2 节

围绕游戏区域放置主要控件

将高频操作组合在易于触及的位置，并将次要操作放置在较远处或菜单后面。在触控屏上，避免将按钮扎堆放置在玩家手部容易遮挡宠物的同一区域。Apple 建议将高频触控控件放置在靠近大拇指的位置，将次要控件放置在靠近屏幕顶部的位置；其指南还指出应考虑舒适的触及范围和设备边界。请将这些建议视为在目标设备和屏幕方向上进行测试的起点，而不是适用于每款游戏的固定布局。

在保持可见图标紧凑的同时，不要缩小实际的触摸目标尺寸。Apple 建议在其平台上，常用控件的尺寸至少应为 44 x 44 点，次要控件至少为 28 x 28 点。Android 建议交互式触摸目标的尺寸至少为 48 x 48 与密度无关的像素 (dp)。这些是特定于平台的度量单位，因此请使用相关平台的单位和指南，而不要将这些数值混为一谈（Apple game controls、Android accessibility guidance）。留出足够的间距以避免误触，特别是当两个操作会产生截然不同的结果时。

第 3 节

确保角色在界面衬托下依然清晰易辨

当控件、标签或装饰性面板产生视觉竞争时，宠物虽然在技术层面上依然显示在屏幕上，却可能很难被注意到。对于次要界面元素，应克制其视觉权重：使用较小的图标、简短的标签，以及仅占用必要空间的面板。在最关键的操作过程中，确保宠物的面部及其他重要细节清晰呈现。如果文字或图标下方的游戏场景会发生变化，可考虑添加微妙的背景衬垫或轮廓线，这样无需添加大块不透明面板即可保证界面的可读性。

在场景明亮和较暗的部分都对文字与图标进行检查。在某种背景下表现良好的对比度，可能会在宠物移动或场景切换时消失。对于文字，W3C 的 WCAG 指南规定普通大小文本的对比度为 4.5:1，大文本的对比度为 3:1。WCAG 虽然是针对 Web 内容的指导原则而非针对游戏的规则，但其对比度阈值可以作为检查可变背景上界面文字的实用参考（W3C contrast guidance）。不要仅依靠颜色来传达操作不可用，还应在视觉上明显改变其标签、形状或状态。

第 4 节

仅在适当时机显示控件

如果常驻控件占用过多空间，可在玩家打开菜单或选中宠物时再显示可选操作。隐藏在当前状态下不可用的操作，并在按下控件时展示明确的状态变化。Apple 明确建议根据游戏上下文动态调整可见的虚拟控件，包括隐藏无关控件并突出显示当前激活的控件。一种实用的设计模式是保持主要操作常驻可用，然后在一个选择后即自动关闭的精简菜单中展开相关选项。

保持状态变化的可预测性。如果某个控件在玩家即将点击时突然消失，容易造成困惑，因此应仅对那些从当前状态就能清晰判断其可用性的操作采用隐藏/显示机制。如果某个按钮变为不可用状态，请标明该状态，并在必要时简要说明发生了什么变化。避免展开的菜单遮挡宠物的面部或玩家下一步需要点击的区域。

第 5 节

自适应安全区域与屏幕形态

应针对可用区域进行设计，而不仅仅是屏幕的外框矩形。刘海屏、前摄开孔、系统栏和手势交互区可能会与边缘附近的重要控件发生重叠。Apple 的布局指南将安全区域定义为有助于防止内容被界面元素和设备特性遮挡的区域。Android 同样建议遵循系统栏、手势和显示屏开孔的边距 (insets)，并让关键控件避开开孔区域（Apple layout guidance、Android edge-to-edge guidance）。背景插画可以延伸至屏幕边缘，而交互元素则应保留内边距。

不要假设一套紧凑的排版可以适应所有宽高比。将控件锚定在可用区域，并在可用宽度发生变化时自适应调整间距或布局组合。Android 针对 Unity 的游戏指南建议使用 safe-area API 并支持不同的显示屏尺寸与宽高比。仅在游戏确实支持的情况下才测试竖屏或横屏布局，并且如果在支持范围内，在发生屏幕旋转、窗口调整大小或设备折叠后重新进行检查（Android guidance for Unity games on large screens）。

第 6 节

在实际游戏过程中检验布局

静态效果图无法呈现玩家在操作时手指会遮挡哪些区域。请在目标物理屏幕尺寸下检查界面，然后在操作主要功能的同时，观察是否有角色细节被遮挡、误触遗漏以及控件与系统特性重叠等情况。在所支持的最小屏幕以及更宽或更高的宽高比下重复此检查。如果可能，请让不熟悉该布局的人尝试完成主要任务，并记录他们在哪里发生了点击、犹豫或视线被宠物遮挡。

为每种支持的布局使用一份简短的通过/失败检查清单：

  • 在执行主要操作期间，宠物依然保持可见，包括其面部或其他关键细节。

  • 主要操作触手可及，具有明确的按下状态，且不与另一个目标重叠。

  • 标签和重要状态提示在多变的场景背景下依然清晰易读。

  • 关键控件未落在屏幕开孔、系统栏或手势区域之下。

  • 打开次要控件不会遮挡下一步操作所需的角色部位或游戏区域。

如果某项检查未通过，请一次只调整一处：移除低优先级元素、在遵循安全边距的前提下将控件移向游戏区域边缘，或者仅在需要时才显示次要操作。调整后对同一交互进行重新测试。这样可以更容易看出该调整是真正解决了可见性问题，还是仅仅将问题转移到了别处。

第 7 节

参考来源

相关阅读

继续探索这个主题

博客资源库浏览 Metlivi 文章库。Metlivi 产品探索 Metlivi 产品家族。Metlivi 常见问题阅读 Metlivi 常见问题解答。