Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Boas práticas de UI

DOs e DON'Ts para desenhar UIs de cena que funcionem bem no mobile.

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() para ramificar.

  • Mantenha a UI crítica dentro da área segurae envolva-a em 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 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.

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.

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 para que possamos documentá-la e priorizá-la.

Relacionados

AnteriorÁrea segura no mobilePróximoEntrada no mobile

Atualizado