> For the complete documentation index, see [llms.txt](https://docs.decentraland.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.decentraland.org/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/kai-fa/ui-best-practices.md).

# UI 最佳实践

为在移动端表现良好的场景 UI 设计提供应做与不应做的事项。

目前还没有一套经过验证、通用的 Decentraland 移动端 UI 方案——这个平台还很新，我们仍在不断迭代。此页上的建议是当前最佳实践，提炼自真实场景中的工作。请把它们当作起点，并在真机上测试。

{% embed url="<https://www.youtube.com/watch?v=5OmTTzpPdDc>" %}

## 推荐做法

* **设计移动端专用 UI**，或者根据屏幕尺寸和平台变化你的 UI。使用 [`isMobile()`](/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/kai-fa/detect-platform.md) 进行分支。
* **将关键 UI 保持在** [**安全区域**](/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/kai-fa/safe-area.md)**.** 设备的硬件边距（刘海、状态栏、Home 指示条）默认会为你清除——只要不要通过 `screenInset: 'none'`来退出即可。客户端自身的控件是一个单独区域，且 `screenInset: 'interactable'` 已经部分承担了这项工作：它会把你的 UI 放在探游器为场景 UI 指定的矩形区域内。在移动端，这会清除左侧控件；右下角的操作按钮是按设计绘制在该区域上的，所以请记住 [这些角落](/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/kai-fa/safe-area.md#where-the-client-controls-live) 。 `'interactable'` 需要移动端客户端 `1.12.1` 或更高版本——旧客户端根本不会报告任何边距，UI 会覆盖整个屏幕。
* **尽量减少选项。** 只显示玩家此刻需要的内容，其余内容逐步揭示。
* **将可操作的对话框放在屏幕中央** ——凡是玩家需要阅读并作出回应的地方都适用。
* **将不可操作的信息放在顶部居中** ——状态、通知和环境信息。

## 不推荐做法

* **不要在不考虑虚拟屏幕的情况下，仅用像素来定义 UI 元素尺寸。** 像素值会相对于 `virtualWidth` / `virtualHeight` 中描述的参考分辨率进行缩放 [屏幕内 UI](/creator/content-creator-zh/chang-jing-sdk7/2d-ui/onscreen-ui.md#screen-virtual-scale) —— `1600x720` 在移动端默认使用， `1920x1080` 在桌面端和网页端。要清楚你的像素值是基于哪个参考分辨率编写的；如果不是默认值，就显式传入，并将其与考虑平台差异的尺寸设置配合使用。只有在你确实想要原始画布像素时，才禁用虚拟屏幕（通过传入大小为 `0`）
* **不要把元素放在安全区域之外。** 它们会与客户端控件冲突。
* **不要依赖过小的按钮。** 过小的目标在触摸屏上很难稳定点按。
* **不要把关键操作绑定到 `IA_ACTION_3`–`IA_ACTION_6`** （桌面端的 `1`/`2`/`3`/`4` 键盘按键上）。在移动端上不容易触及。参见 [移动端输入](/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/kai-fa/input-on-mobile.md).

## 尺寸

旧的经验法则—— *先在桌面端设计，然后将 UI 尺寸放大 3 倍用于移动端* ——早于两次 SDK 变更，已经不应再盲目适用。其中大部分 3× 缩放现在已经由系统替你完成：

* **`devicePixelRatio` 不参与 UI 布局。** 按像素尺寸设置的 UI 现在会渲染为 `devicePixelRatio` 比以前大多少倍——通常为 **在手机上为 2–3 倍**，在视网膜屏笔记本上也是如此。无法关闭。
* **虚拟屏幕在各平台上的默认值为**, `1600x720` 在移动端为 `1920x1080` 在桌面端和网页端，因此相同的像素值在手机上已经能覆盖大约多 1.2 倍的屏幕。

先沿用桌面端的尺寸不变，在真机上测量——参见 [在移动端预览](/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/kai-fa/preview-on-mobile.md) ——只在点击目标或文本确实不够大时再放大。使用 [`isMobile()`](/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/kai-fa/detect-platform.md) 在两者确实需要不同的时候。

## 相关

* [缺失功能](/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/yi-dong-ke-hu-duan/missing-features.md)
* [移动端安全区域](/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/kai-fa/safe-area.md)
* [从代码中检测平台](/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/kai-fa/detect-platform.md)
* [屏幕内 UI](/creator/content-creator-zh/chang-jing-sdk7/2d-ui/onscreen-ui.md)
* [UX 与 UI 指南](/creator/content-creator-zh/chang-jing-sdk7/she-ji-ti-yan/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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.decentraland.org/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/kai-fa/ui-best-practices.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.