所以即使使用 `'interactable'`，也要把这些地方视为拥挤区域：
* **右下角** ——操作按钮和交互按钮会绘制在上层。你放在这里的任何内容仍然可达，但会争抢点击。
* **右上角** ——个人资料和相机控制位于该区域外侧，因此紧贴那个角落的 UI 会被视为客户端 HUD 的一部分。
该区域覆盖哪些内容由各个浏览器自行决定，并且可能在不同版本之间变化。请在运行时读取，切勿硬编码，并在你目标的平台上进行检查。
## 场景 UI 应放在哪里
* **屏幕中央** ——可操作的对话框，以及玩家需要阅读并回应的任何内容。
* **顶部居中** ——不可操作的消息、状态和通知。
* **底部居中，位于交互按钮上方** ——上下文相关提示。
* **不要放在右下角** ——即使在可交互区域内，它也属于操作按钮。
## 改为将你的部分 UI 包起来
如果你通过 `screenInset: 'none'` 并且只想保护部分 UI，请将其包裹在 `ScreenInsetArea` 或者 `InteractableArea` 组件中。每个组件都会读取其对应区域，并将其应用到子元素。请从以下位置导入它们： `@dcl/sdk/react-ecs`:
```tsx
import ReactEcs, { ReactEcsRenderer, UiEntity, ScreenInsetArea } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'
export function setupUi() {
ReactEcsRenderer.setUiRenderer(() => (
{/* 一个尺寸为 100% × 100% 的子元素会正好填满安全内边距区域 */}
), { screenInset: 'none' })
}
```
这两个组件都会使用客户端报告的值进行绝对定位，因此 `positionType` 和 `位置` 它们的 `uiTransform` 字段被保留——你为它们设置的任何值都会被忽略。所有其他 `uiTransform` 属性（`padding`, `flexDirection`, `alignItems`，…）以及 UI 组件（`uiBackground`, `onMouseDown`，…）都会像往常一样工作。当区域变化时，例如在旋转或系统栏出现/隐藏时，它们会自动响应，并会补偿 [UI 缩放因子](/creator/content-creator-zh/chang-jing-sdk7/2d-ui/onscreen-ui.md#screen-virtual-scale)，因此无论你的虚拟屏幕尺寸如何，边距都会正确落位。
{% hint style="warning" %}
**📔 不要重复应用内边距：** 该 `screenInset: 'none'` 上面的片段很重要。若在渲染器已经应用了匹配的内边距时，又把你的 UI 包在一个组件里，会使 UI 向内偏移双倍边距。二者择一即可。
{% endhint %}
{% hint style="info" %}
**📱 仅限移动端：** 设备内边距只有在 **移动客户端**。在 **桌面客户端** 它们是 `(0, 0, 0, 0)`，因此 `screenInset: 'device'` 和 `ScreenInsetArea` 这些组件在那里没有效果，你的 UI 会完全按未使用它们时的方式渲染。与设备内边距不同，可交互区域 *为* 在桌面端不是零。
{% endhint %}
## 为什么这很重要
与客户端控件重叠的场景 UI 会：
* 部分被摇杆、交互按钮或相机控制遮住。
* 与这些控件争夺点击——玩家可能会不小心触发其中一个。
* 让你的场景在移动端看起来像坏掉了一样，这会影响推荐和留存。
请始终使用 [预览二维码](/creator/content-creator-zh/mian-xiang-yi-dong-duan-gou-jian/kai-fa/preview-on-mobile.md).
## 相关
* [屏幕内边距区域](/creator/content-creator-zh/chang-jing-sdk7/2d-ui/onscreen-ui.md#screen-inset-area) ——完整的 `screenInset` 参考文档。
* [移动端 UI 最佳实践](/creator/content-creator-zh/mian-xiang-yi-dong-duan-gou-jian/kai-fa/ui-best-practices.md)
* [从代码中检测平台](/creator/content-creator-zh/mian-xiang-yi-dong-duan-gou-jian/kai-fa/detect-platform.md) ——使用 `isMobile()` 来切换布局。
* [屏幕上的 UI](/creator/content-creator-zh/chang-jing-sdk7/2d-ui/onscreen-ui.md)
* [UX 与 UI 指南](/creator/content-creator-zh/chang-jing-sdk7/ti-yan-she-ji/ux-ui-guide.md)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.decentraland.org/creator/content-creator-zh/mian-xiang-yi-dong-duan-gou-jian/kai-fa/safe-area.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
