Diseña tus diseños

Diseñar tus diseños es el proceso de diseñar la estructura y el flujo de la información que deseas comunicar a través de la interfaz de usuario (UI) en varios flujos de trabajo. Este paso crítico del tutorial te permite iterar en la disposición de los elementos de tu interfaz, descubrir puntos problemáticos y mejorar la experiencia del jugador antes de invertir tiempo y recursos en un diseño problemático que no funcione para tu experiencia.

Usando el ejemplo de experiencia de laser tag .rbxl como referencia, esta sección del currículo de la interfaz de usuario muestra cómo estructurar los elementos de tu UI en la pantalla, incluyendo orientación sobre:

• Planificar una jerarquía visual para tu UI que guíe intuitivamente a los jugadores hacia características e información que necesitan para tener éxito en tu experiencia.
• Bloquear elementos de UI con formas básicas para revisar la composición de tus elementos de UI junto con la UI principal de Roblox y los controles táctiles.
• Desarrollar flujos de usuario para tener en cuenta las acciones necesarias que los jugadores deben realizar para alcanzar sus objetivos.

Después de completar esta sección, aprenderás a construir y configurar tu UI en Studio, respetando tu estilo artístico y tus modelos a escala.

Planifica una jerarquía visual

Una jerarquía visual es una estructura organizativa que resalta los elementos de UI según su orden de importancia. Planificar una jerarquía visual para los diferentes flujos de trabajo en tu experiencia es importante porque prepara a los jugadores para el éxito en el logro de sus objetivos, lo cual es especialmente necesario para el ritmo rápido de las experiencias de juegos de disparos en primera persona donde los objetivos cambian de un momento a otro.

Las jerarquías visuales efectivas guían a los jugadores a través de las características e información que necesitan para cumplir con los requisitos de juego según donde naturalmente miren en la pantalla para completar los flujos de trabajo. Por ejemplo, la jerarquía visual del ejemplo de experiencia de laser tag debe guiar a los jugadores a través de las siguientes categorías de elementos de UI mientras navegan por el mapa y etiquetan a los jugadores del equipo enemigo:

1. Información sobre el objetivo de la experiencia.
2. Información sobre el lanzador.
3. Información sobre el estado del jugador.

La ubicación de cada una de estas categorías en la pantalla en el diseño final resalta su orden de importancia:

• La primera categoría está cerca de la parte superior porque contiene elementos de UI que tienen la mayor significancia sobre cómo ganar el juego.
• La segunda categoría ocupa la mayor parte del espacio en la pantalla cerca del centro porque actúa como el punto focal para atraer la atención de los jugadores hacia la acción en el espacio 3D, y tiene la mayor significancia para jugar el juego.
• La tercera categoría está cerca de los lados porque los jugadores pueden leer esta información periférica sin desviar su atención del juego.

Para algunos géneros de experiencia, solo necesitas mostrar una categoría de información a la vez porque es el único tipo de información que es importante para el jugador durante ese flujo de trabajo. Sin embargo, para experiencias de juegos de disparos en primera persona, los jugadores necesitan ver elementos de UI de múltiples categorías al mismo tiempo porque todos ellos proporcionan información que el jugador necesita para tener éxito, como la puntuación de su equipo, el período de enfriamiento de su lanzador y si ha sido etiquetado fuera de una ronda.

Al planificar una jerarquía visual para los flujos de trabajo en tu propia experiencia, considera lo siguiente:

• Si agrupar elementos de UI de diferentes categorías a lo largo de la pantalla, los jugadores no sabrán dónde buscar lo que necesitan. Para ayudar a los jugadores a navegar por tu experiencia, agrupa los elementos de UI de la misma categoría juntos.
• Si tienes demasiadas categorías en la pantalla al mismo tiempo, los jugadores pueden no saber qué información necesitan prestar atención. Para evitar abrumar a los jugadores con desorden, muestra elementos de UI contextualmente para diferentes flujos de trabajo.
• De manera similar, si hay demasiados elementos de UI por categoría, puede distraer a los jugadores de entender cómo completar una acción o proceso. Por esta razón, es importante utilizar tu estilo artístico para proporcionar énfasis visual para tus órdenes de interacción ideales.

Para una revisión completa de la jerarquía visual para el ejemplo de experiencia de laser tag, consulta la siguiente tabla:

Bloquea los elementos de UI

Ahora que tienes una jerarquía visual en mente, puedes bloquear elementos individuales de UI utilizando formas básicas para revisar la composición de tu diseño de UI personalizado junto con la UI principal de Roblox en múltiples dispositivos. Este proceso te permite ver dónde necesitas modificar tu diseño para que sea efectivo en todos los tamaños de pantalla que los jugadores pueden usar para acceder a tu experiencia, como en móviles, tabletas, portátiles y pantallas de TV.

Antes de comenzar, necesitas averiguar cuánto espacio en la pantalla está disponible para tus elementos de UI personalizados mientras consideras la UI principal de Roblox. Por ejemplo, por defecto, Roblox muestra los siguientes elementos de UI en cada experiencia:

• Una lista de jugadores dentro de la experiencia.
• La barra de salud del personaje.
• La mochila del personaje.
• Una ventana de chat.
• Un botón de captura.
• Un menú emergente de emoticonos del personaje.

Puedes desactivar cualquiera de estos elementos que no cumplan con los requisitos de juego de tu propia experiencia para ahorrar espacio en pantalla para tu UI personalizada. Por ejemplo, la experiencia de laser tag de muestra no requiere una mochila porque los jugadores solo tienen la capacidad de seleccionar un solo lanzador. Sin embargo, si los jugadores pudieran seleccionar múltiples lanzadores a la vez, la experiencia podría desactivar esta UI principal para garantizar que siempre haya espacio para el selector de lanzadores cuando los jugadores reaparezcan, y luego proporcionar otra ubicación para seleccionar de tu inventario.

Además de la UI principal de Roblox, también debes considerar el espacio necesario en la pantalla para los controles táctiles predeterminados de Roblox. Por ejemplo, cuando los jugadores acceden a tu experiencia usando un dispositivo móvil, un joystick virtual se muestra en la esquina inferior izquierda de la pantalla, y un botón de salto se muestra en la esquina inferior derecha de la pantalla. Esto asegura que los jugadores siempre puedan navegar tu experiencia, incluso cuando no tienen acceso a un teclado o controladora.

Al tener en cuenta tanto los elementos de la UI principal de Roblox que son necesarios para el juego de tu experiencia, como la posibilidad de controles táctiles, puedes bloquear tus elementos de UI personalizados en un diseño que sea adaptable en todos los dispositivos. Esto es importante porque significa que no necesitas mantener versiones separadas de tu UI a medida que actualizas tu experiencia.

Para demostrar este método, revisa las siguientes dos imágenes de cómo la experiencia de laser tag de muestra bloquea los elementos de UI personalizados tanto para dispositivos móviles como para PC. Ambas imágenes incluyen:

• Formas básicas para representar UI personalizada porque permite que el diseño pase fácilmente por varias iteraciones antes de lograr el diseño final.
• Colores en escala de grises que permiten que el ojo siga la información sin la distracción de un colorido entorno de fondo.
• El estado abierto de la ventana de chat y la lista de jugadores activos y ventana de chat para ver cuánto espacio ocupan en la pantalla.
• Espacio para controles móviles incluso si no son necesarios para dispositivos de PC.

Cuando diseñes tus diseños de esta manera, pensando en cuántos elementos de UI pueden existir en la pantalla al mismo tiempo, estarás asegurando la viabilidad para todos los diseños potenciales según los dispositivos y flujos de trabajo de los jugadores.

Al bloquear en elementos de UI para tus diseños, considera lo siguiente:

• Dónde y cómo bloquees tu UI puede impactar la composición de tus diseños. Apunta a equilibrar y simetría en la cantidad y el tamaño de tus elementos de UI personalizados junto con la UI principal de Roblox.
• Interactuar con la UI que está lejos de las esquinas inferiores de algunos dispositivos móviles y tabletas es incómodo o imposible. Coloca elementos interactivos en zonas fáciles de alcanzar cerca de la posición natural de descanso para los pulgares.
• Cuando los jugadores navegan por tu entorno, el espacio 3D puede distraer de tu UI en pantalla. Prueba tus diseños contra una variedad de posibles fondos para asegurarte de que tus elementos de UI en pantalla sigan siendo claros y legibles.

Desarrollar flujos de usuario

Un flujo de usuario es una colección de caminos que los jugadores pueden tomar en una experiencia para completar una tarea, como elegir un arma, comprar un objeto o curar a un personaje. Los flujos de usuario normalmente comienzan donde esperas que los jugadores inicien la tarea y terminan con la acción final o logro que alcanzan al final de la tarea. Además, los flujos de usuario efectivos también consideran caminos inusuales que los jugadores puedan querer tomar por su cuenta para alcanzar el mismo objetivo.

El siguiente diagrama de flujo muestra el flujo de usuario de un jugador que entra y juega en el ejemplo de experiencia de laser tag. Cuando un jugador abre la experiencia, se une a un vestíbulo. Si la ronda aún no ha comenzado, espera hasta que comience el ciclo de ronda; de lo contrario, se une a un equipo que actualmente está jugando el juego. Si la condición final no se ha cumplido, como alcanzar un límite de tiempo o etiquetar a 10 jugadores por equipo, entonces los jugadores seleccionan su lanzador y experimentan la jugabilidad principal de etiquetar o ser etiquetados por el equipo enemigo, equipando un nuevo lanzador dentro de la arena o reapareciendo después de ser etiquetados fuera. Una vez que los jugadores cumplen la condición final, finalizan la ronda y se unen nuevamente al vestíbulo.

Es importante desarrollar flujos de usuario para todo lo que los jugadores pueden hacer en tu experiencia porque te permite evaluar dónde y cómo deseas que completen las tareas, y anticipar dónde puedes aliviar los puntos problemáticos para cualquiera que siga su propio camino. Por ejemplo, si desarrollas flujos de usuario adicionales para la experiencia de laser tag de muestra, ¿qué sucede cuando los jugadores:

• Abandonan una ronda antes de que se cumpla la condición final?
• Salen de la experiencia mientras se unen a un equipo?
• Reciben una llamada telefónica en medio de una ronda?
• Pierden su conexión a la ronda por menos de 15 segundos?

Al visualizar todas las acciones potenciales que los jugadores pueden tomar o los escenarios que pueden sucederles mientras completan tareas, puedes determinar mejor cómo la disposición de tus elementos de UI impacta negativamente su experiencia y luego hacer ajustes antes de implementar tus diseños en Studio. Si las tareas se sienten intuitivas, no intrusivas y convenientes, es más probable que los jugadores pasen tiempo en tu experiencia y regresen en una fecha posterior.

Al desarrollar flujos de usuario para tu propia experiencia, considera lo siguiente:

• Lo que deseas que los jugadores hagan en tu experiencia y lo que ellos quieren hacer pueden ser completamente diferentes. Es mejor probar tus diseños con múltiples tipos de jugadores para obtener una comprensión de los caminos que desean tomar para alcanzar sus objetivos.
• Los diagramas de flujo pueden volverse difíciles de leer e ineficaces si intentan capturar múltiples escenarios a la vez dentro del diagrama. Para centrar tu atención en cada tarea, limita los diagramas de flujo a una tarea principal a la vez.
• Los patrones de interacción varían dependiendo de si los jugadores están usando controles táctiles, gamepads o ratones de computadora para interactuar con tu experiencia. Si estás diseñando para múltiples dispositivos, desarrolla flujos de usuario únicos para cada dispositivo para que puedas identificar puntos problemáticos y simplificar los flujos de trabajo.

Una vez que finalices el diseño de tus modelos a escala, es hora de entrar en Studio y dar vida a tu UI.