> 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/chang-jing-sdk7/she-ji-ti-yan/ux-ui-guide.md).

# UX 与 UI 指南

构建让玩家愿意停留并回访的场景的提示与实践！

对于我们来说，Decentraland 内容创作者能够自由地充分发挥他们的创造力，这一点至关重要。这对于 Decentraland 成为一个值得探索、并能带来回报的地方是必不可少的。不过，也要记住，Decentraland 中的场景会被各种各样的用户访问，我们希望让所有人都能访问这些场景。因此，我们不能忽视建立统一设计标准的必要性；这套指南能够保证玩家无论身处哪个场景，都能获得一致、直观且愉快的体验。

在本文档中，我们分享 Decentraland 的设计价值观，旨在推广我们认为用于设计玩家界面和体验的最佳实践。我们希望这些标准可以作为构建和/或改进构成元宇宙的场景的起点。

## 设计价值观

Decentraland 中的所有场景都应当在设计时牢记这些价值观：

* **热情欢迎**：让玩家感受到温暖的欢迎。
* **用户友好**：UI 易于使用且有趣——你应避免重复造轮子
* **易于学习**：玩家会觉得 UI 熟悉且直观。整个场景中应始终一致地使用各种模式。
* **提供引导**：场景会提供帮助。文字、动效、声音和图形会引导并提示玩家朝正确方向前进。
* **响应迅速**：对玩家输入有清晰的动作-反馈对应。
* **极简**：少即是多。玩家可以把注意力集中在最重要的地方。
* **有趣**：场景充分利用了让 Decentraland 独特且值得造访的事物。
* **有目的性**：玩家有强烈的理由再次回来。
* **令人愉悦**：玩家享受事物的外观、声音和感觉

## 用户体验

### 从哪里开始？

你的场景目标是什么？是提供一片美丽的景观供人观赏和探索吗？是一个博物馆吗？是单人游戏吗？是竞技游戏吗？还是遵循线性叙事流程？

在设计过程的每一步都清楚了解这一目标非常重要，它应当指导你做出的所有决定，而这些决定都会深刻影响访客的体验。

对于遵循线性流程的场景，即每一步都依赖于前一步的场景，我们建议用墙体围合场景并设置一个或多个固定入口，以避免玩家以错误顺序遇到内容。顺便说一下，入口点是展示欢迎信息并解释玩家在场景中目标的绝佳位置。

<figure><img src="https://2460066822-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-97ebd53471da877dec44f02a12a433af644d458a%2Fux-instructions.png?alt=media" alt="In-world banner" width="800"><figcaption><p>场景内说明</p></figcaption></figure>

如果玩家在你的场景中的体验并不是线性的，但你仍需要提供一些基本说明以确保他们充分享受，你可以通过弹窗显示说明。无论玩家从哪个方向进入，都可以在他们进入时立即在屏幕上显示弹窗，这样就能确保玩家始终知道最关键的信息。

<figure><img src="https://2460066822-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-8a74df26bf66f63d5d103d0c9ee5a4cd8323ddd1%2Fux-banner.png?alt=media" alt="Pop-up banner" width="800"><figcaption><p>弹窗说明</p></figcaption></figure>

{% hint style="warning" %}
**📔 注意**：确保弹窗不会太过打扰，并且可以通过点击任意位置轻松关闭。
{% endhint %}

欢迎信息应向玩家传达以下内容：

* 场景标题
* 欢迎玩家
* 最终目标与玩家动机
* 说明/下一步
* *（可选）* 控制方式。主要适用于你的场景使用全局按钮事件的情况。否则，当玩家将鼠标悬停在物品上时，物品本身会提示如何使用它们。

### 动机

你很可能希望访客不断回到你的场景，想想你能通过哪些方式激励他们这样做！问问自己：“什么会让玩家想回到我的场景，或者想把它推荐给朋友？”

例如，你可以向他们发起挑战，给他们一些需要完成的目标，而且难度要足以让他们尝试几次。你也可以组织有竞争性的多人活动，这同样是社交的好机会。让你的场景成为一个充满活力的地方，让玩家觉得在这里度过时间很愉快！

### 反馈与声音

声音扮演着双重且关键的角色，不要错过使用它的机会！一方面，声音对于营造沉浸感至关重要，很多事情如果没有声音就不会显得真实。声音的另一个关键作用是为玩家的操作提供反馈。如果你只依赖视觉提示，就无法确定玩家是否会朝正确方向看见其操作效果。通过使用声音，你可以确保他们知道某些事情发生了。如果你将视觉和声音提示结合使用，听到声音会促使玩家四处寻找对应的视觉提示，以防他们没有看到。

请记住，有些玩家可能关闭了声音。如果你把声音作为场景说明或游戏机制中的关键部分，请尽量同时提供一些视觉提示来指向同一含义。例如，你可以在 UI 底部显示文本来配合这些声音，就像电影里的字幕一样。

## 用户界面

本节旨在帮助你通过场景设计构建叙事，引导玩家把注意力集中到最重要的元素上。善用这里描述的工具可以让他们的体验更具沉浸感，也更成功。

我们再怎么强调颜色、图标、动效和比例对于传达正确信息的重要性都不为过：场景中的一切都在传达意义，切记这一点。

### 布局

在将 UI 放置在与默认 Decentraland UI 元素重叠的屏幕区域时要小心。在桌面客户端中，默认的 Decentraland UI（侧边栏、小地图、聊天等）设计为只占据屏幕左侧 25% 的区域（图中以红色高亮）。其余的屏幕空间是内容创作者可以自由使用的安全区域。

<figure><img src="https://2460066822-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-dd66dfc723550792844114dde7e60be4127d5d64%2FUI-Zones.png?alt=media" alt="Screen regions used by UI" width="800"><figcaption></figcaption></figure>

在屏幕左侧 25% 的区域放置 UI 元素没有限制，但请记住，浏览器会持续对其设计进行调整和改进。今天在该区域内未被遮挡的空间，未来版本中可能会被覆盖。

{% hint style="info" %}
**📱 移动端安全区域**： [移动端客户端](/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/yi-dong-ke-hu-duan/overview.md) 会在画布的一部分上方绘制自己的控件—— **左侧** （聊天、搜索、个人资料、摇杆、表情动作）、 **右上角** （个人资料和相机控制），以及 **右下角** （操作和交互按钮）。不要手工测量这些区域：请在客户端报告的区域内渲染，并使用 `screenInset: 'interactable'`。将关键 UI 保留在屏幕中央或上中部，并遵循 [移动端安全区域](/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/kai-fa/safe-area.md)。使用 [`isMobile()`](/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/kai-fa/detect-platform.md) 在桌面端和移动端限制不一致时切换布局。
{% endhint %}

{% hint style="warning" %}
**📔 注意**：场景和智能穿戴设备中的 UI 元素始终显示在默认 Decentraland UI 之后的一层。
{% endhint %}

始终牢记网格，并将其作为空间组织 UI 时的主要标准。如果你正在制作需要 HUD 的场景，可以先把所有消耗品放在一起（例如货币、食物、生命值），而在另一侧放置工具或武器等可储备物品。尽量在网格度量和内边距上保持一致。让每个玩家操作的反馈都清晰明确。

### 颜色

选择一个色彩调色板很重要，因为这能赋予你的场景身份感，也能传达元素之间的关系和层级。

在组合色彩调色板时，先选择主色，必要时再选择一个辅色。然后你应该决定调色板相对于主色是采用类似色、互补色还是三分色等方案。

<figure><img src="https://2460066822-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-90a514428232e163d5b6012aa8ab57371da92782%2Fux-color-wheel2.png?alt=media" alt="Chromatic color palette" width="300"><figcaption><p>有色调色板</p></figcaption></figure>

<figure><img src="https://2460066822-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-a557422ba97313b5ac752e934e90f55206640145%2Fux-color-wheel.png?alt=media" alt="Strategies for combining colors properly" width="300"><figcaption><p>正确组合颜色的策略</p></figcaption></figure>

{% hint style="info" %}
**💡 提示**：我们推荐的免费配色生成器： [Coolors](https://coolors.co), [Adobe Color CC](https://color.adobe.com/), [Colour Lovers](http://www.colourlovers.com), [Color Hunt](http://www.colorhunt.co), [Color by Hailpixel](http://color.hailpixel.com), [Colour Code](http://colourco.de), [Sip](https://sipapp.io/), [Paletton 的 Color Scheme Designer](http://paletton.com), [Cohesive Colors](http://javierbyte.github.io/cohesive-colors), [Colr](http://www.colr.org)
{% endhint %}

主色应在你的 UI 组件中使用最频繁。如果你的调色板没有辅色，你可以通过将主色与黑色或白色搭配来突出元素。辅色并非必需，但它有助于强调和区分你的场景 UI 元素。辅色最适合用于高亮、选择控件（滑块和开关）、链接和标题。

记住，每种颜色都有其独特的表现特质，要善加利用，通过颜色传递信息。例如，红色通常与负面含义相关，而绿色通常与正面含义相关。

<figure><img src="https://2460066822-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-39fa7214733c589571654b3b05067edae03d2353%2Fux-switches.png?alt=media" alt="Colored switches" width="300"><figcaption><p>错误使用颜色会让人困惑</p></figcaption></figure>

你也可以策略性地使用颜色来指示状态变化，例如改变某个元素的颜色来表明它是激活还是未激活。

{% hint style="warning" %}
**📔 注意**：状态用于传达 UI 元素的状态。某个元素的状态应保持一定的连续性，但同时必须具有明确的可供性，并且要能与其他状态以及周围布局清晰区分。
{% endhint %}

<figure><img src="https://2460066822-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-ccb8ecfe2c2b624018c96ecb9317c494c44dbeb9%2Fux-active-button.png?alt=media" alt="Active inactive button" width="300"><figcaption><p>使用颜色表示按钮状态</p></figcaption></figure>

警告！在选择会叠加显示的颜色时，要特别注意确保它们一起使用时仍然清晰可读。这里有一条基本规则：同时显示的元素颜色之间应始终具有足够的对比度。还要注意，有些玩家可能在光线不理想的环境下看屏幕，这会使阅读更困难。

<figure><img src="https://2460066822-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-febc1a60718f42d58120c40515664253cf09a363%2Fux-icons.png?alt=media" alt="Icon contrast" width="300"><figcaption><p>这两个图标都能区分，但第一个对比度更好。它更容易阅读，也更容易理解。</p></figcaption></figure>

### 字体层级

尽量为标题、副标题和正文至少定义 3 个字号层级。注意颜色和字体大小的使用。所有字体大小都应为 12 px 或更大。

如果你要放置显示在图像之上（或世界之上）的文本，你肯定需要试验其可读性。在这些情况下，我们建议你在文本与图像之间添加一层有颜色的实心区域，这样可以确保文本保持可读。

<figure><img src="https://2460066822-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-9a277a4a94c7904455781552939bac4bf90c0403%2Fux-text-over-images.png?alt=media" alt="Text over images" width="300"><figcaption><p>优先考虑可读性</p></figcaption></figure>

### 图标

图标能综合信息，通过图像帮助你识别操作。与使用文字为事物加标签相比，它们是极其强大的输入工具，因为文字会要求玩家投入更多注意力和时间。图标与文字结合显示也很有用，因为这有助于消除歧义，明确其含义。

<figure><img src="https://2460066822-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-cdcdf8db8cd023d3550881b30f3ab56dc818ac9d%2Fux-icons2.png?alt=media" alt="Icon examples" width="300"><figcaption><p>把图标当作一种通用语言使用</p></figcaption></figure>

### 运动

在需要时使用动效来提供反馈并引导方向。动效有助于玩家集中注意力，并在 UI 变化时保持连贯性。

<figure><img src="https://2460066822-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-0a13840d235b318e369b3dc11ea4272633b8c0b4%2Fux-glow.png?alt=media" alt="Adding glow" width="300"><figcaption><p>使用粒子、缩放或渐隐边距让事物更醒目</p></figcaption></figure>

### 写作与内容结构

UI 文本可以让界面更易用，并让玩家在操作时更有信心。始终让 UI 文本尽可能简洁。玩家是来玩的，不是来读的。任何看起来过长的文本，大多数玩家都不会阅读。

用欢迎信息迎接玩家，并告诉他们场景目标。先明确他们在场景中的目标，然后说明实现该目标所需的操作。接着你可以按需逐步揭示信息，这样玩家在体验一开始就不会感到压力过大。与图形资源一样，尽量在 UI 功能和叙事中使用一致的措辞。

### 对象交互

确保玩家能分辨哪些对象可以交互，哪些不可以。当你在某个实体上注册按钮事件时，SDK 默认会显示悬停反馈：实体边缘高亮，以及光标旁边显示一条提示，说明应使用哪种输入，并附带自定义文本描述与之交互的效果。我们强烈建议使用它，这会让你的场景感觉更自然、更易用。参见 [悬停反馈](/creator/content-creator-zh/chang-jing-sdk7/jiao-hu-xing/an-niu-shi-jian/register-callback.md#hover-feedback).

### 第三人称相机

玩家可以随时按下 ‘V’ 键在第一人称和第三人称相机之间切换。设计你的场景时，要确保交互在两种模式下都能舒适地进行：例如，在第三人称下，小型点击目标更难命中。你的场景可以读取玩家当前的相机模式，也可以在某个区域强制使用特定模式，参见 [摄像机](/creator/content-creator-zh/chang-jing-sdk7/3d-nei-rong-ji-chu/camera.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/chang-jing-sdk7/she-ji-ti-yan/ux-ui-guide.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.