Enfunda tus diseños

Wireframing your layouts es el proceso de diseño de 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 repetir el diseño de tus elementos de UI, 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 la experiencia de etiqueta láser Example.rbxl como referencia, esta sección del curso de usuario muestra cómo estructurar sus elementos de UI en la pantalla, incluida la guía sobre:

• Planificar una jerarquía visual para tu UI que intuitivamente conduce a los jugadores a las características y la información que necesitan para tener éxito en tu experiencia.
• Bloquea en los 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 de Roblox's UI y toques.
• 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 a construir y configurar tu UI en Studio que respete tu estilo de arte y wireframe.

Planear una Hierarquía Visual

Una jerarquía visual es una estructura de organización que destaca los elementos de la interfaz de usuario por su orden de importancia. Planificar una jerarquía visual para los diferentes flujos de trabajo en su experiencia es importante, ya que establece a los jugadores para el éxito en el logro de sus objetivos, lo cual es especialmente necesario para las rápidas experiencias de juego 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 sus requisitos de juego según dónde naturalmente miran en la pantalla para completar flujos de trabajo. Por ejemplo, la jerarquía visual de la experiencia de etiqueta láser debe guiar a los jugadores a través de las siguientes categorías de elementos de UI 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 de cada una de estas categorías en la pantalla en los resaltos de diseño final muestra su orden de importancia:

• La primera categoría está cerca de la parte superior porque contiene elementos de UI que tienen la mayor significación en 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 el punto focal para atraer la atención de los jugadores a la acción en el espacio 3D, y tiene la mayor significación para jugar el juego.
• La tercera categoría está cerca de los lados porque los jugadores pueden leer esta información periférica sin distraer su atención del juego.

Para algunos tipos 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 primer personaje, los jugadores deben ver elementos de UI de múltiples categorías al mismo tiempo porque todos proporcionan información que el jugador necesita para tener éxito, como el puntaje de su equipo, el período de tiempo de reutilización de su blaster y si

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

• Si agrupa los elementos de la interfaz de usuario de diferentes categorías juntos en todo el pantalla, los jugadores no sabrán dónde buscar lo que necesitan. Para ayudar a los jugadores a navegar por su experiencia, agrupa los elementos de la interfaz de usuario del mismo catálogo juntos .
• Si tiene demasiadas categorías en la pantalla al mismo tiempo, los jugadores pueden no saber qué información deben prestar atención. Para evitar sobrecargar a los jugadores con desorden, muestre elementos de UI contextualmente para diferentes flujos de trabajo .
• Del mismo modo, 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 usar tu estilo de arte para proporcionar un enfoque 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, consulte la siguiente tabla:

Bloquear en elementos de UI

Ahora que tienes una jerarquía visual en mente, puedes bloquear individualmente elementos de UI utilizando formas básicas para revisar la composición de tu diseño personalizado junto con la UI de Roblox en múltiples dispositivos. Este proceso te permite ver dónde necesitas modificar tu diseño para que sea efectivo en todas las dimensiones de pantalla que los jugadores pueden usar para acceder a tu experiencia, como en móvil, tablet, laptop y pantallas de TV.

Antes de comenzar, debe averiguar cuánto espacio de pantalla está disponible para sus elementos de UI personalizados mientras se tienen en cuenta los elementos de UI de Roblox por defecto. 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ú popup de emotes de personaje.

Puede desactivar cualquiera de estos elementos que no cumplen con los requisitos de juego de tu propia experiencia para ahorrar espacio de pantalla para tu inventariode usuario personalizada. Por ejemplo, la experiencia de etiqueta láser no requiere una mochila porque los jugadores solo tienen la capacidad de seleccionar un solo blaster. Sin embargo, si los jugadores pudieran seleccionar múltiples

Además de la interfaz de usuario principal de Roblox, también debe considerar el espacio de pantalla necesario para los controles de toque predeterminados de Roblox. Por ejemplo, cuando los jugadores acceden a su experiencia usando un dispositivo móvil, se muestra un Control (ES_MX)deslizante virtual en la esquina inferior izquierda de la pantalla y un botón de salto en la esquina inferior derecha de la pantalla. Esto garantiza que los jugadores siempre puedan navegar por su experi

Al tener en cuenta los elementos de la interfaz de usuario principal de Roblox que son necesarios para el gameplay de tu experiencia, y la posibilidad de controles táctiles, puedes bloquear en tu propio elementos de interfaz de usuario personalizado en un diseño que es adaptivo en todos los dispositivos. Esto es importante porque significa que no necesitas mantener versiones separadas de tu UI mientras actualizas tu experiencia.

Para demostrar este método, revisa las siguientes dos imágenes de cómo la experiencia de etiqueta láser de muestra bloquea en los elementos de UI personalizados para ambos dispositivos móviles y de escritorio. Ambas imágenes incluyen:

• Formas básicas para representar UI personalizada porque permite que el diseño se ejecute fácilmente a través de varias iteraciones antes de alcanzar el diseño final.
• Coloración de grises que permite al ojo seguir 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 la 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ña sus layouts de esta manera mientras pensaba en cuántos elementos de UI pueden existir en la pantalla al mismo tiempo, está futuro-protegiendo para todos los layouts potenciales según los dispositivos y flujos de trabajo de los jugadores.

Al bloquear en elementos de UI para tus layouts, considera lo siguiendo:

• Dónde y cómo bloqueas en tu UI puede afectar la composición de tus layouts. Apunta por el equilibrio y simetría en la cantidad y tamaño de tus elementos de UI personalizados junto con los elementos de UI de Roblox.
• Interactuar con UI que están lejos de los esquina inferior de algunos dispositivos móviles y tabletas es incómodo o imposible. Colocar elementos interactuables en zonas fáciles de alcanzar cerca de la posición de descanso natural para los dedos.
• Cuando los jugadores navegan a través de tu entorno, ambiente, el espacio 3D puede distraerse de tu interfaz de usuario en la pantalla. Prueba tus diseños contra una variedad de posibles fondos de pantalla para asegurarte de que los elementos de tu interfaz de usuario en la pantalla se mantengan claros y legibles. Para obtener más información sobre lo que debe considerar al diseñar y bloquear en sus elementos de UI para múltiples dispositivos, consulte Posicionamiento y escalado - factores de plataforma cruzada .

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 objetoo curar a un personaje. Los flujos de usuario típicamente comienzan donde esperan los jugadores para comenzar la tarea, y terminan con la acción final o logro que los jugadores alcanzan al final de la tarea. Además, los flujos de usuario efectivos también cuentan con caminos inusuales que los jugadores pueden tomar por sí mism

El siguiente gráfico de flujo muestra el flujo de usuario de un jugador ingresando y jugando la experiencia de etiqueta láser. Cuando un jugador abre la experiencia, se une a un lobby. Si la ronda aún no está en progreso, es decir, alcanzando un lím

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

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

Al visualizar todas las posibles acciones que los jugadores pueden tomar o escenarios que pueden ocurrir a los jugadores mientras completan tareas, puede mejorar la determinación de cómo la distribución de sus elementos de UI afecta negativamente su experiencia, luego hacer ajustes antes de implementar sus diseños en Studio. Si las tareas se sienten intuitivas, no molestivas y convenientes, los jugadores son más probable que pasen tiempo en su experiencia y regresen en una fecha posterior.

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

• Lo que quieres que los jugadores hagan en tu experiencia y lo que quieren hacer puede ser completamente diferente. Es mejor probar tus layouts con múltiples tipos de jugadores para obtener una comprensión de las rutas que quieren tomar para lograr sus objetivos.
• Los gráficos de flujo pueden ser difíciles de leer y ineficaces si intentan capturar múltiples escenarios a la vez dentro del diagrama. Para enfocar su atención en cada tarea, limite los gráficos 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 ordenador 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 de dolor y simplificar los flujos de trabajo.

Después de finalizar el diseño de tus wireframes, es hora de pasar a Studio y hacer que tu UI sea una realidad.