> 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-pt/scenes-sdk7/criar-para-mobile/ui-best-practices.md).

# Melhores 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 nesta página são as melhores práticas atuais, extraídas do trabalho em scenes reais. Considere-as um ponto de partida e teste em um dispositivo real.

## O que fazer

* **Desenhe UIs específicas para mobile**, ou varie a sua UI de acordo com o tamanho da tela e a 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)e envolva-a em [`ScreenInsetArea`](/creator/content-creator-pt/scenes-sdk7/criar-para-mobile/safe-area.md#device-hardware-insets-screeninsetarea) para ignorar as margens de hardware do dispositivo (notch, barra de status, indicador de início).
* **Minimize as opções.** Mostre apenas o que o jogador precisa agora e revele o restante progressivamente.
* **Coloque diálogos acionáveis no centro da tela** — em qualquer lugar onde o jogador precise ler e responder.
* **Coloque mensagens não acionáveis no centro superior** — status, notificações e informações ambientais.

## 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 na tela](/creator/content-creator-pt/scenes-sdk7/ui-2d/onscreen-ui.md#screen-virtual-scale) e combine-o com um dimensionamento consciente da plataforma.
* **Não coloque elementos fora da área segura.** Eles vão colidir com os controles do sistema.
* **Não dependa de botões pequenos.** Alvos pequenos são pouco confiáveis para tocar numa tela sensível ao toque.
* **Não vincule ações de tecla a `IA_ACTION_3`–`IA_ACTION_6`** (as `1`/`2`/`3`/`4` teclas de um teclado). Elas não são facilmente alcançá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 primeiro no desktop, depois multiplique os tamanhos da UI por 3× para o mobile.**

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

## Limitações atuais

Estas limitações se aplicam à UI da scene no cliente móvel atual. Elas estão sendo acompanhadas e espera-se que sejam removidas com o tempo.

* **`border-radius` ainda não é suportado no mobile.** Os cantos arredondados em `uiBackground` serão renderizados como quadrados no cliente móvel. Planeje seu design visual de acordo, ou ramifique o estilo com base em `isMobile()`.

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

## Relacionados

* [Área segura do mobile](/creator/content-creator-pt/scenes-sdk7/criar-para-mobile/safe-area.md)
* [Detecte a plataforma a partir do código](/creator/content-creator-pt/scenes-sdk7/criar-para-mobile/detect-platform.md)
* [UI na tela](/creator/content-creator-pt/scenes-sdk7/ui-2d/onscreen-ui.md)
* [Guia de UX e UI](/creator/content-creator-pt/scenes-sdk7/desenhar-a-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 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.