UI 最佳实践

设计在移动设备上运行良好的场景 UI 的注意事项和禁忌。

目前还没有一套经过验证的统一方案适用于 Decentraland 移动端 UI——平台还很新，我们仍在持续迭代。此页上的建议是目前最佳实践，源自真实场景的实践经验。把它们当作起点，并在真机上测试。

建议

设计专为移动端的 UI，或者根据屏幕尺寸和平台变化 UI。使用 isMobile() 来分支。
将关键 UI 保持在 安全区域. 设备的硬件边距（刘海、状态栏、Home 指示条）默认已经为你清除——只要不要通过 screenInset: 'none'。客户端自身的控制区是另一个区域，并且 screenInset: 'interactable' 承担了部分这项工作：它会将你的 UI 放置在浏览器为场景 UI 指定的矩形区域内。在移动端，这会清除左侧控制；右下角的动作按钮会按设计覆盖在该区域上，因此要留意这些角落。 'interactable' 需要移动端客户端 1.12.1 或更新版本——旧客户端会报告没有任何边距，而 UI 会覆盖整个屏幕。
尽量减少选项。 只显示玩家此刻需要的内容，其余内容逐步呈现。
将可操作的对话框放在屏幕中央 ——任何玩家需要阅读并作出回应的地方。
将不可操作的消息放在顶部居中 ——状态、通知和环境信息。
将触控控制隐藏在全屏 UI 之后。 当记分板、商店或结果面板打开时，玩家不需要跳跃或按 E。参见覆盖动作按钮的全屏 UI.

不要

不要在不考虑虚拟屏幕的情况下，仅用像素来设定 UI 元素大小。 像素值会相对于 virtualWidth / virtualHeight 参考分辨率进行缩放，详见屏幕 UI —— 1600x720 在移动端默认是， 1920x1080 在桌面端和网页端是。要知道你的像素值是基于哪一个参考分辨率编写的；如果不是默认值，就显式传入，并配合考虑平台的尺寸设定。只有在你确实想要原始画布像素时，才禁用虚拟屏幕（传入大小为 0）
不要将元素放在安全区域之外。 它们会与客户端控制区冲突。
不要将 UI 锚定在左上角或左边缘。 客户端会在这里绘制聊天、个人资料和虚拟摇杆，而且都叠在你的场景 UI 之上。改为锚定到右侧或居中，或者使用 screenInset: 'interactable'。参见切勿将你的 UI 锚定到左上角.
不要把交互元素放在右下角。 动作按钮会绘制在该区域上，点击那里会触发客户端按钮，而不是你的场景。
不要依赖小按钮。 在触摸屏上，小目标很难稳定点到。
不要将按键操作绑定到 IA_ACTION_3–IA_ACTION_6 （ 1/2/3/4 键盘上的按键）。它们在移动端不容易触及。参见移动端输入.

覆盖动作按钮的全屏 UI

screenInset: 'interactable' 会让你的 UI 远离左侧控制区，但右下角的动作按钮会按设计覆盖在该区域上。即使一个面板填满了该区域，也仍会在那里被遮住，而点按该区域会触发客户端按钮，而不是你的 UI。

对于一个 游戏 HUD 如果它必须在玩家移动时仍可用，就不要放在右下角：将其锚定在右上角或顶部居中。

对于一个 会中断游戏玩法的 UI，例如记分板、商店或结果界面，在打开时隐藏触控控制，并在关闭时恢复：

import { TouchScreenControls } from '@dcl/sdk/ecs'

function openScoreboard() {
  TouchScreenControls.hideAll()
  TouchScreenControls.hideJoystick()
  // ... 显示你的 UI
}

function closeScoreboard() {
  TouchScreenControls.showAll()
  TouchScreenControls.showJoystick()
  // ... 隐藏你的 UI
}

showAll() 只会恢复游戏手柄按钮，因此要配合 showJoystick()。这两个辅助函数在桌面端不会起任何作用，所以没必要按平台分支。参见屏幕控制以了解完整组件。

如果在面板打开时还应让头像停止移动，请再加上一个输入修饰器作为补充。

尺寸

旧经验法则—— 先在桌面端设计，然后将移动端 UI 大小放大 3 倍 ——早于 SDK 的两项变更，如今不应再盲目套用。其中大部分 3 倍现在已经由系统替你处理：

devicePixelRatio 不参与 UI 布局。 以像素指定大小的 UI 现在渲染为 devicePixelRatio 过去的多少倍——通常是 在手机上是 2–3 倍，在 Retina 笔记本上也是如此。无法关闭。
各平台的虚拟屏幕默认值, 1600x720 在移动端是基于 1920x1080 在桌面端和网页端是基于，因此相同的像素值在手机上本就已经覆盖大约多 1.2 倍的屏幕。

先保持桌面端尺寸不变，在真机上测量——参见在移动端预览 ——只在点击目标或文字确实不足时才放大。使用 isMobile() 在两者确实需要不同时进行分支。

建议

不要

覆盖动作按钮的全屏 UI

尺寸

相关