# Boas práticas de UI

Ainda não existe uma receita única e comprovada para a UI móvel do Decentraland — a plataforma é nova e ainda estamos iterando. As recomendações desta página são as melhores práticas atuais, extraídas do trabalho em cenas reais. Considere-as como um ponto de partida e teste em um dispositivo real.

## O que fazer

* **Desenhe UIs específicas para mobile**, ou varie a sua UI por tamanho de tela e plataforma. Use [`isMobile()`](/creator/content-creator-pt/scenes-sdk7/criar-para-mobile/detect-platform.md) para ramificar.
* **Mantenha a UI crítica dentro da** [**área segura**](/creator/content-creator-pt/scenes-sdk7/criar-para-mobile/safe-area.md).
* **Minimize as opções.** Mostre apenas o que o player precisa agora e revele o restante progressivamente.
* **Coloque diálogos acionáveis no centro da tela** — em qualquer lugar em que um player precise ler e responder.
* **Coloque mensagens não acionáveis no centro superior** — status, notificações e informações de contexto.

## O que não fazer

* **Não dimensione elementos de UI apenas em pixels.** Layouts baseados apenas em pixels terão aparência diferente em cada dispositivo. Use o `virtualWidth` / `virtualHeight` mecanismo descrito em [UI no ecrã](/creator/content-creator-pt/scenes-sdk7/ui-2d/onscreen-ui.md#screen-virtual-scale) e combine-o com dimensionamento consciente da plataforma.
* **Não coloque elementos fora da área segura.** Eles irão conflitar com os controles do sistema.
* **Não dependa de botões pequenos.** Alvos pequenos são pouco confiáveis para tocar em uma tela sensível ao toque.
* **Não vincule ações de teclas a `IA_ACTION_3`–`IA_ACTION_6`** (a `1`/`2`/`3`/`4` teclas em um teclado). Elas não são facilmente acessíveis no mobile. Veja [Input no mobile](/creator/content-creator-pt/scenes-sdk7/criar-para-mobile/input-on-mobile.md).

## Dimensionamento

A recomendação mais útil ao adaptar uma UI de desktop existente para mobile:

> **Desenhe e teste a UI no desktop primeiro e, depois, aumente os tamanhos da UI em 3× para mobile.**

Combinado com a configuração de `virtualWidth` / `virtualHeight` do SDK, isso fornece texto legível, botões confortavelmente tocáveis e um layout que se mantém em diferentes dispositivos. Sempre confirme o resultado em um telefone real — veja [Preview on mobile](/creator/content-creator-pt/scenes-sdk7/criar-para-mobile/preview-on-mobile.md).

## Limitações atuais

Essas limitações se aplicam à UI da scene no client móvel atual. Elas estão sendo acompanhadas e a expectativa é que sejam removidas ao longo do tempo.

* **`border-radius` ainda não é suportado no mobile.** Cantos arredondados em `uiBackground` serão renderizados como quadrados no client móvel. Planeje o seu design visual de acordo, ou faça o estilo em branch em `isMobile()`.

Se você encontrar uma limitação que não está listada aqui, por favor [reporte](/creator/content-creator-pt/scenes-sdk7/depuracao/report-bug.md) para que possamos documentá-la e priorizá-la.

## Relacionado

* [área segura para mobile](/creator/content-creator-pt/scenes-sdk7/criar-para-mobile/safe-area.md)
* [Detetar a plataforma no código](/creator/content-creator-pt/scenes-sdk7/criar-para-mobile/detect-platform.md)
* [UI no ecrã](/creator/content-creator-pt/scenes-sdk7/ui-2d/onscreen-ui.md)
* [Guia de UX & UI](/creator/content-creator-pt/scenes-sdk7/desenhar-a-experiencia/ux-ui-guide.md)


---

# Agent Instructions: 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:

```
GET https://docs.decentraland.org/creator/content-creator-pt/scenes-sdk7/criar-para-mobile/ui-best-practices.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.