Directrices de diseño adaptativo

El diseño adaptativo garantiza que tus juegos de Roblox se vean y se sientan bien en varios tamaños de pantalla, orientaciones y tipos de entrada. Más allá de las categorías de dispositivos tradicionales como móvil, escritorio y consola, los dispositivos de hoy tienen capacidades mucho más dinámicas, que permiten una transición fluida entre diferentes entradas y pantallas. Imagina una tableta que admite múltiples orientaciones (horizontal y vertical), múltiples tipos de entrada (toque, gamepad, ratón y teclado) y múltiples tamaños de pantalla (pantalla nativa y extendiéndose a un gran televisor).

Estas directrices te ayudarán a ofrecer juegos de primera clase que se adapten de manera inteligente a cualquier dispositivo y tipo de entrada para alcanzar una amplia audiencia. Para más detalles sobre flujos de trabajo y API que ayuden a implementar estas directrices, consulta la guía de desarrollo multiplataforma.

Principios básicos

Cada juego es único, pero seguir algunos principios clave te ayudará a ofrecer un juego intuitivo y pulido a cada jugador, en cada dispositivo.

1. Fluididad de entrada — Asegúrate de que tu interfaz de usuario funcione con varios tipos de entrada como gamepad, toque, teclado y controladores de VR. Esto incluye cambiar el diseño de tu interfaz de usuario y proporcionar pistas asistivas dependiendo del tipo de entrada.
2. Diseño receptivo — Diseña los diseños de la interfaz de usuario que se ajusten automáticamente a diferentes tamaños de pantalla y orientaciones.
3. Tamaño dinámico — Escala los elementos de la interfaz de usuario según sea necesario para adaptarse a diversas dimensiones de pantalla.
4. Legibilidad y claridad visual — Asegúrate de que todos los componentes de la interfaz de usuario, incluidos los textos y los botones, sean fácilmente legibles y visualmente claros.

Fluididad de entrada

Asegúrate de que tu juego se sienta natural en varios dispositivos de entrada, incluidos gamepads, ratón/teclado, toque y VR.

• Diseña controles y accesos directos para múltiples entradas — Asegúrate de que cada acción en tu juego pueda ser activada utilizando botones de gamepad/D-pad, accesos directos de teclado y tacto. Los controles deben ser visual y funcionalmente enfocables para la navegación con el pad direccional o palanca. Prueba cada modo de entrada para que el juego principal, los menús y la interfaz de usuario sean accesibles y naturales, sin importar el dispositivo.
• Proporciona retroalimentación visual según el tipo de entrada — Actualiza las etiquetas de la interfaz de usuario, los mensajes y las indicaciones para reflejar el método de entrada activo, por ejemplo, mostrando Presiona A en un gamepad, Apareja en toque, o ShiftA en teclado. Usa íconos y lenguaje familiar para los jugadores de cada plataforma.

Diseño receptivo

El diseño de la interfaz de usuario de tu juego debe adaptarse a diferentes tamaños de pantalla y orientaciones. En un gran monitor de computadora, tienes mucho espacio para mostrar todos los botones a la vez. Sin embargo, en una pequeña pantalla de teléfono, todos esos botones se verían apiñados y desordenados.

• Adapta los diseños al tamaño de la pantalla y la orientación — Utiliza patrones receptivos para que tu interfaz de usuario se reorganice o se condense adecuadamente. Por ejemplo, mueve los botones menos importantes a un menú colapsable ("hamburguesa"/botón de menú) en pantallas pequeñas, mientras que los muestras en su totalidad en escritorios. La interfaz de usuario de tu juego debe adaptarse suavemente tanto a la orientación horizontal como vertical si las admite.
• Implementa componentes de diseño que reaccionen al tamaño del padre — Crea paneles y widgets de la interfaz de usuario que ajusten su tamaño o posición según su contenedor padre. Por ejemplo, usa diseños de vista dividida donde los paneles laterales se colapsen en pantallas estrechas pero se expandan en pantallas más amplias.

Tamaño dinámico

Esto se refiere al tamaño de los elementos de tu interfaz de usuario, no solo a su posición. Tu interfaz de usuario debe escalarse hacia arriba o hacia abajo con la pantalla para que todo mantenga el tamaño correcto y siempre sea fácil de interactuar.

• Soporta tamaño impulsado por contenido y ajuste automático — Implementa comportamientos de auto-ajuste: deja que los cuadros de texto crezcan o se encojan con el contenido, y soporta el ajuste automático de línea para que las etiquetas no se desborden ni se vuelvan ilegibles a medida que cambia el tamaño de la pantalla.
• Expón y respeta preferencias de accesibilidad / usuario — Permite que tu interfaz de usuario responda a las configuraciones de escalado de texto o interfaz de usuario especificadas por el usuario, vinculando esas configuraciones directamente al tamaño de los elementos de la interfaz de usuario para que las preferencias de accesibilidad siempre se traduzcan en una interfaz de usuario más grande y legible.

Legibilidad y claridad visual

¿Pueden los jugadores leer realmente tu texto en una pequeña pantalla de teléfono o en un televisor más grande que está lejos de ellos? ¿Son tus botones fáciles de ver contra el fondo de tu mundo 3D?

• Elige tamaños y estilos de fuente para pantallas pequeñas — Selecciona siempre tamaños de fuente que sean legibles en dispositivos móviles, no solo en escritorio. Prueba en dispositivos reales y verifica que el texto sea legible en el tamaño más pequeño esperado. Evita fuentes excesivamente decorativas o delgadas.
• Asegura un alto contraste y una clara jerarquía visual — Usa colores para texto y fondos que proporcionen suficiente contraste para ser legibles en diversas condiciones de iluminación del juego. Emplea una fuerte jerarquía visual y haz que las acciones y etiquetas clave se destaquen a través del tamaño, color o posicionamiento.

Reflexiones finales

La adaptabilidad se trata de encontrar a los jugadores donde están, ya sea en sus manos, sobre su escritorio o en la pantalla grande. Los creadores de Roblox que construyen con estas directrices ofrecen juegos significativos, accesibles y divertidos en múltiples plataformas. ¡Comienza a adaptar hoy y deja que tus creaciones prosperen!