Melhores práticas de UI

O que fazer e o que não fazer ao projetar UIs de cena que funcionem bem no mobile.

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

FAÇA

Crie UIs específicas para mobile, ou varie a sua UI de acordo com o tamanho do ecrã e a plataforma. Use isMobile() para ramificar.
Mantenha a UI crítica dentro da área segura. As margens de hardware do dispositivo (notch, barra de estado, indicador de início) são limpas por predefinição — basta não desativar com screenInset: 'none'. Os controlos próprios do client são uma área separada, e screenInset: 'interactable' cobre parte dessa função: posiciona a sua UI no retângulo que o Explorer designa para a UI da cena. Em mobile, isso limpa os controlos do lado esquerdo; os botões de ação no canto inferior direito são desenhados por cima dessa área por design, por isso tenha esses cantos em mente. 'interactable' requer o client móvel 1.12.1 ou mais recente — clients mais antigos não reportam margens nenhumas e a UI cobre o ecrã inteiro.
Minimize as opções. Mostre apenas o que o jogador precisa neste momento e revele progressivamente o resto.
Coloque diálogos acionáveis no centro do ecrã — em qualquer lugar onde o jogador precise de ler e responder.
Coloque mensagens não acionáveis no topo-centro — estado, notificações e informação ambiente.
Oculte os controlos táteis por trás de uma UI em ecrã inteiro. Enquanto um placar, uma loja ou um painel de resultados estiver aberto, o jogador não precisa de saltar nem de premir E. Veja UI em ecrã inteiro sobre os botões de ação.

NÃO FAÇA

Não dimensione elementos da UI apenas em píxeis sem ter em mente um ecrã virtual. Os valores em píxeis são escalados em relação à virtualWidth / virtualHeight resolução de referência descrita em UI no ecrã — 1600x720 por predefinição em mobile, 1920x1080 em desktop e web. Saiba contra que resolução de referência os seus valores em píxeis são criados, passe-a explicitamente se não for a predefinição e combine-a com dimensionamento consoante a plataforma. Desative o ecrã virtual apenas (passando um tamanho de 0) se quiser realmente píxeis brutos do canvas.
Não coloque elementos fora da área segura. Eles vão colidir com os controlos do client.
Não fixe a UI ao canto superior esquerdo ou à margem esquerda. É aí que o client desenha o chat, o perfil e o joystick virtual, tudo por cima da sua UI da cena. Em vez disso, fixe à direita ou ao centro, ou use screenInset: 'interactable'. Veja Nunca ancore a sua UI ao canto superior esquerdo.
Não coloque elementos interativos no canto inferior direito. Os botões de ação são desenhados sobre essa região, e os toques aí vão para os botões do client, não para a sua cena.
Não dependa de botões pequenos. Os alvos pequenos são pouco fiáveis para tocar num ecrã tátil.
Não associe ações de tecla a IA_ACTION_3–IA_ACTION_6 (as 1/2/3/4 teclas num teclado). Não são facilmente acessíveis em mobile. Veja Input em mobile.

UI em ecrã inteiro sobre os botões de ação

screenInset: 'interactable' mantém a sua UI livre dos controlos do lado esquerdo, mas os botões de ação no canto inferior direito são desenhados por cima dessa área por design. Um painel que preencha a área continua a ficar coberto ali, e os toques nessa região acionam os botões do client em vez da sua UI.

Para um HUD de gameplay que tem de se manter utilizável enquanto o jogador se move, mantenha-o fora do canto inferior direito: fixe-o no canto superior direito ou no topo-centro.

Para um UI que interrompe o gameplay, como um placar, uma loja ou um ecrã de resultados, oculte os controlos táteis enquanto estiver aberto e restaure-os ao fechar:

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

function openScoreboard() {
  TouchScreenControls.hideAll()
  TouchScreenControls.hideJoystick()
  // ... mostre a sua UI
}

function closeScoreboard() {
  TouchScreenControls.showAll()
  TouchScreenControls.showJoystick()
  // ... oculte a sua UI
}

showAll() restaura apenas os botões do gamepad, por isso combine-o com showJoystick(). Ambos os helpers não fazem nada em desktop, por isso não há necessidade de ramificar por plataforma. Veja Controlos no ecrã para o componente completo.

Se o avatar também deve parar de se mover enquanto o painel estiver aberto, adicione um input modifier por cima.

Dimensionamento

A antiga regra prática — desenhar no desktop e depois escalar os tamanhos da UI em 3× para mobile — é anterior a duas alterações do SDK e já não deve ser aplicada cegamente. A maior parte desses 3× agora é aplicada por si:

devicePixelRatio não tem qualquer papel no layout da UI. A UI dimensionada em píxeis agora é renderizada devicePixelRatio vezes maior do que antes — tipicamente 2–3× num telefone, e também em portáteis retina. Não há forma de desativar.
Os padrões do ecrã virtual por plataforma, 1600x720 em mobile contra 1920x1080 em desktop e web, por isso o mesmo valor em píxeis já cobre cerca de 1,2× mais do ecrã num telefone.

Comece com os tamanhos de desktop inalterados, meça num dispositivo real — veja Preview no mobile — e aumente apenas onde os alvos de toque ou o texto realmente fiquem aquém. Ramifique com isMobile() quando os dois realmente precisarem de diferir.

Relacionado

AnteriorÁrea segura no mobile

PróximoInput no mobile

Atualizado há 11 dias