> 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-es/desarrollar-para-movil/desarrollar/ui-best-practices.md).

# Mejores prácticas de UI

Lo que se debe y no se debe hacer al diseñar UI de escena que funcionen bien en móviles.

Aún no existe una receta única y probada para la UI móvil de Decentraland — la plataforma es nueva y seguimos iterando. Las recomendaciones de esta página son las mejores prácticas actuales, destiladas del trabajo en escenas reales. Tómalas como punto de partida y pruébalas en un dispositivo real.

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

## Qué hacer

* **Diseña UIs específicas para móviles**, o varía tu UI según el tamaño de pantalla y la plataforma. Usa [`isMobile()`](/creator/content-creator-es/desarrollar-para-movil/desarrollar/detect-platform.md) para bifurcar.
* **Mantén la UI crítica dentro de la** [**área segura**](/creator/content-creator-es/desarrollar-para-movil/desarrollar/safe-area.md)**.** Los márgenes de hardware del dispositivo (notch, barra de estado, indicador de inicio) se limpian por defecto para ti — solo no desactives esto con `screenInset: 'none'`. Los controles propios del cliente son un área separada, y `screenInset: 'interactable'` cubre parte de esa tarea: coloca tu UI en el rectángulo que Explorer designa para la UI de la escena. En móvil eso despeja los controles de la izquierda; los botones de acción en la parte inferior derecha se dibujan sobre esa área por diseño, así que mantén [esas esquinas](/creator/content-creator-es/desarrollar-para-movil/desarrollar/safe-area.md#where-the-client-controls-live) en mente. `'interactable'` requiere el cliente móvil `1.12.1` o posterior — los clientes más antiguos no reportan ningún margen y la UI cubre toda la pantalla.
* **Minimiza las opciones.** Muestra solo lo que el jugador necesita en este momento y revela progresivamente el resto.
* **Coloca los diálogos accionables en el centro de la pantalla** — en cualquier lugar donde el jugador deba leer y responder.
* **Coloca los mensajes no accionables en el centro superior** — estado, notificaciones e información ambiental.
* **Oculta los controles táctiles detrás de una UI a pantalla completa.** Mientras un marcador, una tienda o un panel de resultados está abierto, el jugador no necesita saltar ni pulsar E. Consulta [UI a pantalla completa sobre los botones de acción](#full-screen-ui-over-the-action-buttons).

## Qué no hacer

* **No dimensiones los elementos de la UI solo en píxeles sin tener en cuenta una pantalla virtual.** Los valores en píxeles se escalan con respecto a la `virtualWidth` / `virtualHeight` resolución de referencia descrita en [UI en pantalla](/creator/content-creator-es/scenes-sdk7/ui-2d/onscreen-ui.md#screen-virtual-scale) — `1600x720` por defecto en móvil, `1920x1080` en escritorio y web. Conoce contra qué resolución de referencia se crearon tus valores en píxeles, pásala explícitamente si no es la predeterminada y combínala con un tamaño adaptado a la plataforma. Solo desactiva la pantalla virtual (pasando un tamaño de `0`) si realmente quieres píxeles brutos del canvas.
* **No coloques elementos fuera del área segura.** Chocarán con los controles del cliente.
* **No ancles la UI a la esquina superior izquierda ni al borde izquierdo.** Ahí es donde el cliente dibuja el chat, el perfil y el joystick virtual, todo sobre la UI de tu escena. Ancla a la derecha o al centro en su lugar, o usa `screenInset: 'interactable'`. Consulta [Nunca ancles tu UI en la esquina superior izquierda](/creator/content-creator-es/scenes-sdk7/disenar-la-experiencia/ux-ui-guide.md#never-anchor-your-ui-to-the-top-left).
* **No pongas elementos interactivos en la esquina inferior derecha.** Los botones de acción se dibujan sobre esa región, y los toques allí van a los botones del cliente, no a tu escena.
* **No dependas de botones pequeños.** Los objetivos pequeños son poco fiables de tocar en una pantalla táctil.
* **No asignes acciones de teclas a `IA_ACTION_3`–`IA_ACTION_6`** (la `1`/`2`/`3`/`4` teclas en un teclado). No son fácilmente accesibles en móvil. Consulta [Entrada en móvil](/creator/content-creator-es/desarrollar-para-movil/desarrollar/input-on-mobile.md).

## UI a pantalla completa sobre los botones de acción

`screenInset: 'interactable'` mantiene tu UI libre de los controles de la izquierda, pero los botones de acción en la parte inferior derecha se dibujan sobre esa área por diseño. Un panel que llena el área sigue quedando cubierto allí, y los toques en esa región activan los botones del cliente en lugar de tu UI.

Para un **HUD de gameplay** que debe seguir siendo utilizable mientras el jugador se mueve, mantenlo fuera de la esquina inferior derecha: ancla arriba a la derecha o en el centro superior.

Para un **UI que interrumpe el gameplay**, como un marcador, una tienda o una pantalla de resultados, oculta los controles táctiles mientras esté abierto y restáuralos al cerrarlo:

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

function openScoreboard() {
  TouchScreenControls.hideAll()
  TouchScreenControls.hideJoystick()
  // ... muestra tu UI
}

function closeScoreboard() {
  TouchScreenControls.showAll()
  TouchScreenControls.showJoystick()
  // ... oculta tu UI
}
```

`showAll()` solo restaura los botones del gamepad, así que combínalo con `showJoystick()`. Ambos helpers no hacen nada en escritorio, así que no hace falta bifurcar según la plataforma. Consulta [Controles en pantalla](/creator/content-creator-es/scenes-sdk7/interactividad/touch-screen-controls.md) para el componente completo.

Si el avatar también debe dejar de moverse mientras el panel está abierto, añade un [InputModifier](/creator/content-creator-es/scenes-sdk7/interactividad/avatares/locomotion.md#freeze-the-player) encima.

## Tamaño

La antigua regla general — *diseña en escritorio y luego escala los tamaños de la UI por 3× para móvil* — es anterior a dos cambios de SDK y ya no debería aplicarse a ciegas. Ahora la mayor parte de ese 3× se aplica por ti:

* **`devicePixelRatio` no interviene en el diseño de la UI.** La UI con tamaño en píxeles ahora se renderiza `devicePixelRatio` veces más grande que antes — normalmente **2–3× en un teléfono**, y también en laptops retina. No hay forma de desactivarlo.
* **La pantalla virtual tiene valores predeterminados por plataforma**, `1600x720` en móvil contra `1920x1080` en escritorio y web, por lo que el mismo valor en píxeles ya cubre aproximadamente 1,2× más de la pantalla en un teléfono.

Parte de tus tamaños de escritorio sin cambios, mide en un dispositivo real — consulta [Previsualización en móvil](/creator/content-creator-es/desarrollar-para-movil/desarrollar/preview-on-mobile.md) — y aumenta solo donde los objetivos táctiles o el texto realmente se queden cortos. Haz una bifurcación con [`isMobile()`](/creator/content-creator-es/desarrollar-para-movil/desarrollar/detect-platform.md) cuando ambos realmente necesiten diferir.

## Relacionados

* [Funciones que faltan](/creator/content-creator-es/desarrollar-para-movil/cliente-movil/missing-features.md)
* [Área segura móvil](/creator/content-creator-es/desarrollar-para-movil/desarrollar/safe-area.md)
* [Detecta la plataforma desde el código](/creator/content-creator-es/desarrollar-para-movil/desarrollar/detect-platform.md)
* [UI en pantalla](/creator/content-creator-es/scenes-sdk7/ui-2d/onscreen-ui.md)
* [Guía de UX y UI](/creator/content-creator-es/scenes-sdk7/disenar-la-experiencia/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-es/desarrollar-para-movil/desarrollar/ui-best-practices.md?ask=<question>&goal=<user_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.