Mejores prácticas de UI
Lo que se debe y no se debe hacer al diseñar UIs de scene que funcionen bien en mobile.
Todavía no existe una única receta 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. Trátalas como un punto de partida y pruébalas en un dispositivo real.
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()para bifurcar.Mantén la UI crítica dentro del área segura, y envuélvela en
ScreenInsetAreapara dejar libres los márgenes de hardware del dispositivo (notch, barra de estado, indicador de inicio).Minimiza las opciones. Muestra solo lo que el jugador necesita ahora y revela el resto de forma progresiva.
Coloca los diálogos accionables en el centro de la pantalla — en cualquier lugar donde un jugador necesite leer y responder.
Coloca los mensajes no accionables en la parte superior central — estado, notificaciones e información ambiental.
NO HACER
No dimensiones los elementos de UI solo en píxeles. Los diseños solo en píxeles se verán diferentes en cada dispositivo. Usa el
virtualWidth/virtualHeightmecanismo descrito en UI en pantalla y combínalo con un tamaño adaptado a la plataforma.No coloques elementos fuera del área segura. Chocarán con los controles del sistema.
No dependas de botones pequeños. Los objetivos pequeños no son fiables para pulsarlos en una pantalla táctil.
No asignes acciones de teclas a
IA_ACTION_3–IA_ACTION_6(las1/2/3/4teclas de un teclado). No son fácilmente accesibles en móvil. Consulta Input en móvil.
Tamaño
La recomendación más útil al adaptar una UI de escritorio existente a móvil:
Diseña y prueba primero la UI en escritorio, luego escala los tamaños de la UI 3× para móvil.
Combinado con la virtualWidth / virtualHeight configuración del SDK, esto te da texto legible, botones cómodos de pulsar y un diseño que se mantiene en todos los dispositivos. Confirma siempre el resultado en un teléfono real — consulta Preview en móvil.
Limitaciones actuales
Estas limitaciones se aplican a la UI de la scene en el cliente móvil actual. Se registran y se espera que se eliminen con el tiempo.
border-radiustodavía no es compatible en móvil. Los bordes redondeados enuiBackgroundse renderizarán como cuadrados en el cliente móvil. Planifica tu diseño visual en consecuencia, o adapta el estilo segúnisMobile().
Si encuentras una limitación que no aparece aquí, por favor repórtala para que podamos documentarla y priorizarla.
Relacionado
Última actualización