Diseña tus maquetas

Delinear tus diseños es el proceso de diseñar la estructura y el flujo de la información que quieres comunicar a través de la interfaz de usuario en varios flujos de trabajo.Este paso crítico del tutorial te permite iterar sobre el orden de tus elementos de interfaz de usuario, descubrir puntos de dolor y mejorar la experiencia del jugador antes de invertir tiempo y recursos en un diseño problemático que no funciona para tu experiencia.

Usando el archivo de ejemplo de etiqueta láser como referencia, esta sección del programa de interfaz de usuario muestra cómo estructurar sus elementos de interfaz de usuario en la pantalla, incluyendo instrucciones sobre:

• Planificar una jerarquía visual para tu interfaz que lleve de forma intuitiva a los jugadores a las funciones y la información que necesitan para tener éxito en tu experiencia.
• Bloquear en elementos de la interfaz de usuario con formas básicas para revisar la composición de tus elementos de interfaz de usuario junto con los controles táctiles del núcleo de Roblox.
• Desarrollar flujos de usuario para cubrir las acciones necesarias que los jugadores deben tomar para lograr sus objetivos.

Después de completar esta sección, aprenderás cómo construir y configurar tu interfaz de usuario en Studio que respete tu estilo artístico y tus bocetos.

Planificar una jerarquía visual

Una jerarquía visual es una estructura de organización que destaca los elementos de la interfaz por su orden de importancia.Planificar una jerarquía visual para los diferentes flujos de trabajo en tu experiencia es importante porque establece a los jugadores para el éxito en el cumplimiento de sus objetivos, lo que es especialmente necesario para el juego rápido de las experiencias de disparador en primera persona en las que los objetivos cambian de momento en momento.

Las jerarquías visuales efectivas guían a los jugadores a través de las características y la información que necesitan para cumplir con los requisitos de juego de acuerdo con el lugar donde naturalmente miran en la pantalla para completar flujos de trabajo.Por ejemplo, la jerarquía visual de la etiqueta láser de muestra debe guiar a los jugadores a través de las siguientes categorías de elementos de interfaz de usuario a medida que navegan por el mapa y etiquetan a los jugadores en el equipo enemigo:

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

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

• La primera categoría está cerca de la parte superior porque contiene elementos de interfaz de usuario que tienen la mayor importancia sobre cómo ganar el juego.
• La segunda categoría ocupa la mayor parte del espacio de la pantalla cerca del medio porque actúa como punto focal para llamar la atención de los jugadores a la acción en el espacio 3D, y tiene la mayor importancia 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 las experiencias de disparador en primera persona, los jugadores necesitan ver elementos de interfaz de usuario de múltiples categorías al mismo tiempo porque todos proporcionan información que el jugador necesita para tener éxito, como la puntuación de su equipo, el período de reutilización de su bláster y si salen etiquetados de una ronda.

Al planificar una jerarquía visual para los flujos de trabajo en tu propia experiencia, ten en cuenta lo siguiendo:

• Si agrupas elementos de interfaz de usuario de diferentes categorías juntos 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, elementos de interfaz de usuario de grupo de la misma categoría juntos .
• Si tienes demasiadas categorías en la pantalla a la vez, los jugadores pueden no saber qué información necesitan prestar atención.Para evitar abrumar a los jugadores con desorden, muestre elementos de la interfaz de usuario contextualmente para diferentes flujos de trabajo .
• Del mismo modo, si hay demasiados elementos de interfaz de usuario por categoría, puede distraer a los jugadores de comprender cómo completar una acción o proceso.Por esta razón, es importante usar 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 la experiencia de etiqueta láser de muestra, consulte la siguiente tabla:

Bloquear en elementos de la interfaz de usuario

Ahora que tienes una jerarquía visual en mente, puedes bloquear elementos de interfaz de usuario individuales usando formas básicas para revisar la composición de tu diseño de interfaz de usuario personalizado junto con la interfaz de usuario 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 dispositivos móviles, tabletas, portátiles y televisores.

Antes de comenzar, debe averiguar cuánto espacio de pantalla está disponible para sus elementos de interfaz de usuario personalizados mientras se tiene en cuenta la interfaz de usuario principal de Roblox.Por ejemplo, por defecto, Roblox muestra los siguientes elementos de interfaz de usuario 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 emotes de personajes.

Puedes desactivar cualquiera de estos elementos que no cumplen con los requisitos de juego de tu propia experiencia para ahorrar espacio en la pantalla para tu interfaz de usuario personalizada.Por ejemplo, la experiencia de etiqueta láser de muestra no requiere una mochila porque los jugadores solo tienen la capacidad de seleccionar un solo bláster.Sin embargo, si los jugadores pudieran seleccionar múltiples blasters a la vez, la experiencia podría deshabilitar esta interfaz de usuario principal para garantizar que siempre haya espacio para el seleccionador de blasters cuando los jugadores reaparezcan, luego proporcione otra ubicación para elegir de su inventario.

Además de la interfaz de usuario principal de Roblox, también debes considerar el espacio de pantalla necesario 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 garantiza que los jugadores siempre puedan navegar por tu experiencia, incluso cuando no tengan acceso a un teclado o Control (ES_MX).

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

Para demostrar este método, revisa las siguientes dos imágenes de cómo los bloques de experiencia de etiqueta láser de muestra se bloquean en los elementos de interfaz de usuario personalizados para dispositivos móviles y de PC.Ambas imágenes incluyen:

• Formas básicas para representar la interfaz de usuario personalizada porque permite que el diseño pase fácilmente por varias iteraciones antes de lograr el diseño final.
• Coloración a escala de grises que permite que el ojo siga la información sin la distracción de un entorno, ambientede fondo colorido
• 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ñas tus layouts de esta manera mientras piensas en cuántos elementos de interfaz de usuario pueden existir en la pantalla al mismo tiempo, estás protegiendo el futuro para todos los layouts potenciales según los dispositivos y los flujos de trabajo de los jugadores.

Al bloquear elementos de interfaz de usuario para sus diseños, tenga en cuenta lo siguiendo:

• Dónde y cómo bloqueas en tu interfaz de usuario puede afectar la composición de tus diseños. Apunta a la equidad y simetría en la cantidad y el tamaño de tus elementos de interfaz de usuario personalizados junto con la interfaz de usuario principal de Roblox.
• Interactuar con la interfaz de usuario que está lejos de las esquinas inferiores de algunos dispositivos móviles y tabletas es incómodo o imposible. Coloque elementos interactivos en zonas fácilmente accesibles cerca de la posición de descanso natural para los pulgares.
• Cuando los jugadores navegan por tu entorno, ambiente, el espacio 3D puede distraerse de la interfaz de usuario en la pantalla. Prueba tus diseños contra una variedad de fondos posibles para asegurarte de que los elementos de la interfaz de usuario en la pantalla se mantengan claros y legibles.

Para obtener más información sobre qué considerar al diseñar y bloquear en tus elementos de interfaz de usuario para múltiples dispositivos, vea Posicionamiento y dimensiones - Factores de plataforma cruzada.

Desarrollar flujos de usuario

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

La siguiente tabla de flujo muestra el flujo de usuario de un jugador que entra y juega la experiencia de etiqueta láser de muestra.Cuando un jugador abre la experiencia, se une a un lobby.Si la ronda aún no está en curso, esperan hasta que comience el bucle de la ronda, de lo contrario se unen a un equipo que está jugando actualmente 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 bláster y experimentan el juego principal de etiquetar o ser etiquetados por el equipo enemigo, equipando un nuevo bláster dentro de la arena o reapareciendo después de que sean etiquetados.Una vez que los jugadores cumplan con la condición final, terminan la ronda y se unen de nuevo al vestíbulo.

Es importante desarrollar flujos de usuario para todo lo que los jugadores puedan hacer en tu experiencia porque te permite evaluar dónde y cómo quieres que completen tareas, y anticipar dónde puedes aliviar los puntos de dolor para cualquiera que siga su propio camino.Por ejemplo, si desarrollas flujos de usuario adicionales para la experiencia de etiqueta láser de muestra, qué sucede cuando los jugadores:

• ¿Salir de una ronda antes de que se cumpla la condición de final?
• ¿Dejar el juego mientras te unes a un equipo?
• ¿Recibir una llamada telefónica en medio de una ronda?
• ¿Perder su conexión con la ronda por menos de 15 segundos?

Al visualizar todas las acciones potenciales que los jugadores pueden tomar o escenarios que pueden suceder a los jugadores mientras completan tareas, puedes determinar mejor cómo la disposición de los elementos de tu interfaz de usuario afecta negativamente su experiencia, luego realiza ajustes antes de implementar tus diseños en Studio.Si las tareas se sienten intuitivas, poco 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 siguiendo:

• Lo que quieres que hagan los jugadores en tu experiencia y lo que quieren hacer puede ser completamente diferente.Es mejor probar tus diseños con múltiples tipos de jugadores para obtener una comprensión de los caminos que quieren tomar para lograr sus objetivos.
• Las tablas de flujo pueden volverse difíciles de leer y poco eficaces si tratan de capturar múltiples escenarios a la vez dentro del diagrama.Para centrar tu atención en cada tarea, limita las tablas 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 su experiencia.Si estás diseñando para múltiples dispositivos, desarrolla flujos de usuario únicos para cada dispositivo para que puedas identificar puntos de dolor y simplificar los flujos de trabajo.

Después de finalizar el diseño de tus wireframes, es hora de pasar al estudio y hacer que tu interfaz de usuario cobre vida.