Elegir un estilo artístico

Elegir un estilo artístico es el proceso de planificar una dirección estética para tus elementos de UI. Es importante comenzar tu proceso de diseño con un estilo artístico porque los estilos artísticos proporcionan reglas visuales de referencia que puedes utilizar para asegurar que tu UI proporcione intuitivamente a los jugadores información sobre lo que pueden hacer en tu juego.

Usando el juego de laser tag de muestra .rbxl como referencia, esta sección del currículo de interfaz de usuario te muestra cómo tomar decisiones significativas sobre cómo diseñar tus elementos de UI de acuerdo con el género de tu juego, incluyendo orientación sobre:

• Identificar los elementos de UI necesarios según lo que deseas comunicar a los jugadores a lo largo de tu juego.
• Seleccionar un tema de color que refuerce las convenciones de color específicas del género que son intuitivas para tu audiencia.
• Esbozar íconos simples que sean fáciles de descifrar en cualquier tamaño de pantalla.
• Establecer un orden de botones que coincida con la probabilidad de diferentes flujos de trabajo de los jugadores.
• Determinar un sistema de texto que asegure la legibilidad en los dispositivos de destino.

Después de completar esta sección, aprenderás a diseñar la estructura y el flujo de la información que deseas comunicar a los jugadores a través de la UI dentro de tu juego.

Identifica tus elementos de UI

El primer paso para elegir un estilo artístico para tu UI es identificar qué elementos de UI necesitas para los diferentes tipos de información que deseas comunicar a tu audiencia. Hacer este trabajo al inicio de tu proceso de diseño es crucial porque te permite categorizar los elementos de UI según su propósito funcional, tomar decisiones semánticas sobre dónde y cuándo los jugadores van a interactuar con cada elemento de UI, y planificar dónde puedes reutilizar elementos de UI a lo largo de tu juego.

Hay muchas maneras diferentes de hacer una lluvia de ideas sobre qué elementos de UI son necesarios para tus requisitos de juego, pero se recomienda comenzar imaginando qué necesita saber un jugador tan pronto como se une a tu juego. Por ejemplo, cuando un jugador abre el juego de laser tag de muestra, puede hacerse las siguientes preguntas:

• ¿Cuál es el objetivo del juego?
• ¿Cómo sé quién está en mi equipo?
• ¿Cómo hago un seguimiento de los puntos de mi equipo?
• ¿Cómo selecciono un bláster?
• ¿Cómo sé dónde el bláster dispara un láser?
• Si estoy en un dispositivo móvil, ¿cómo disparo mi bláster?
• Después de disparar un láser, ¿cuándo puedo disparar de nuevo?
• ¿Cómo sé cuándo estoy comenzando la ronda?
• ¿Cómo sé cuándo he etiquetado con éxito a alguien con mi bláster?
• ¿Cómo sé cuándo el equipo enemigo me etiqueta con éxito?

Al usar estas preguntas para entender qué información es imperativa para que los jugadores tengan éxito, puedes clasificar las necesidades de UI del juego de laser tag de muestra en tres categorías:

1. Información sobre el objetivo del juego.
2. Información sobre el bláster.
3. Información sobre el estado del jugador.

Clasificar las necesidades de UI de tu juego en categorías es útil porque puedes formular tu estilo artístico en torno a cada agrupación para reforzar qué información necesita enseñar cada categoría a los jugadores. Por ejemplo, si deseas que tu UI le diga a los jugadores qué acciones pueden tomar con respecto al estado de salud de su personaje, podrías elegir un estilo artístico con elementos de UI que prioricen el color verde y/o íconos de suma para que los jugadores puedan reconocer rápidamente su función.

Después de clasificar las necesidades de UI de tu juego en categorías, puedes crear una lista de los elementos de UI necesarios para cumplir con los requisitos de cada categoría. Para demostrar, el juego de laser tag de muestra utiliza la siguiente tabla de elementos de UI para abordar la lista anterior de preguntas potenciales de los jugadores. A medida que trabajes en este tutorial, el currículo de UI continuará refiriéndose a esta lista y destacará decisiones de diseño importantes que se relacionan con cada categoría de elementos de UI.

Ahora que tienes una lista de elementos de UI para tu juego, es hora de comenzar a tomar decisiones estilísticas y semánticas para cada agrupación de elementos de UI, comenzando con un tema de color.

Selecciona un tema de color

Un tema de color, o paleta de colores, es una selección de colores que cada uno comunica un mensaje a través de una aplicación consistente dentro de tu juego, como usar un color brillante para indicar cuándo algo es seleccionable. Aplicar un tema de color a tus elementos de UI es importante, especialmente cuando dependes de convenciones de color dentro del género de tu juego, porque permite a los jugadores entender rápidamente tu UI con un esfuerzo mínimo.

En el Currículo de Arte Ambiental, cada mitad del entorno de laser tag está codificada por colores desde una vista superior para diferenciar qué área del mapa está cerca de la zona de aparición respectiva de cada equipo: menta para el equipo que se reúne en el lado izquierdo del mapa, y rosa carnal para el equipo que se reúne en el lado derecho del mapa. Estos colores específicos son útiles porque son complementarios, lo que significa que contrastan bien entre sí, y permiten a los jugadores escanear fácilmente su entorno y orientarse sin importar en qué dirección estén mirando en el edificio.

El juego de laser tag de muestra utiliza este mismo tema de color en su UI para resaltar información que pertenece a cada equipo, como el indicador de equipo de cada jugador dentro del espacio 3D, o el rastreador de puntos del equipo que se superpone a la pantalla. Esta consistencia ayuda a los jugadores a comprender rápidamente la información sobre el objetivo del juego durante la jugabilidad rápida de un juego de disparos en primera persona, especialmente a medida que los jugadores necesitan tomar decisiones rápidas mientras atraviesan el entorno.

Al seleccionar un tema de color para tu propio juego, considera lo siguiente:

• La fuerza de un tema de color depende de ayudar a los jugadores a hacer asociaciones mentales rápidas entre cada color y su función. Por esta razón, limita tu tema de color para resaltar solo la información clave que deseas que los jugadores asocien con tus elementos de UI.
• Para asegurar que los jugadores con daltonismo puedan entender el mensaje de tu tema de color, no siempre confíes solo en el color para distinguir entre los elementos de UI. En su lugar, combina colores con íconos, formas y/o animaciones para asegurar que tu UI se comunique de manera efectiva con todos los jugadores.
• Es más importante que tu UI sea legible que estéticamente agradable. Por esta razón, prioriza una UI simple con colores que se mantengan legibles sobre elementos tanto claros como oscuros en el mundo 3D.

Para resaltar la orientación en el último punto, el juego de laser tag de muestra utiliza los colores neutros de negro y blanco para casi todos los demás elementos de UI que se superponen a la pantalla 2D. El negro y el blanco contrastan bien entre sí, y son fáciles de leer mientras el resto de la pantalla muestra un entorno 3D de otro modo colorido.

Esboza íconos simples

Un ícono es un símbolo que representa una acción, objeto o concepto en un juego. Es importante esbozar íconos que sean simples e intuitivos porque el resultado final permite a los jugadores reconocer fácilmente lo que pueden hacer y lo que deseas comunicarles a través de tu UI sin usar texto, lo que puede desordenar la pantalla y desviar la atención del contenido que importa. Este proceso es aún más crucial si tu audiencia accede a tu juego utilizando una pantalla pequeña en dispositivos móviles.

Los íconos simples idealmente tienen un estilo distinto de tus elementos 3D mientras aún complementan el mundo general de tu juego. Por ejemplo, en el entorno final del Currículo de Arte Ambiental, tanto los activos 3D modulares como los de prop tienen un estilo artístico limpio y de alta tecnología que utiliza formas rectangulares con esquinas suaves y redondeadas. Desde los paneles biselados a lo largo del suelo hasta las ventanas casi circulares en el techo, nada incluye un borde afilado.

Para complementar este estilo artístico mientras se mantiene único, todos los elementos de UI que aprenderás a crear más adelante en este tutorial incluyen una estética futurista y ángulos redondeados sin coincidir con el lenguaje de forma de los activos 3D en el entorno. Esto mantiene el significado de cada ícono distinto de otra información tanto en el espacio 2D como en el 3D.

Para demostrar este concepto, observa las siguientes dos imágenes del juego de laser tag de muestra del punto de mira que le dice a los jugadores dónde su bláster dispara en la pantalla, y el botón que permite a los jugadores disparar su bláster en dispositivos móviles. Ambos íconos incluyen ángulos suaves para ser cohesivos con el mundo general, pero sus formas hexagonales y circulares los distinguen de cualquier cosa con la que un jugador podría asociar los íconos en el juego.

Al esbozar íconos simples para tu propio juego, considera lo siguiente:

• Los íconos simples son legibles incluso cuando son pequeños. Por esta razón, limita los detalles en tus íconos que se volverían irreconocibles en las pantallas de dispositivos móviles.
• Los íconos son poderosos porque pueden comunicar un mensaje sin importar el idioma del jugador. Siempre que no impacte la comprensión del jugador sobre tu UI, reemplaza el texto innecesario con íconos para mejorar los esfuerzos de localización.
• Muchos juegos del mismo género utilizan íconos que son estilísticamente similares, como un ícono de espada que representa fuerza, o un matraz que representa magia. Abraza el simbolismo dentro del género de tu juego para que los jugadores puedan entender tus íconos sin orientación adicional.

Si no sabes qué tipos de íconos son comunes dentro del género de tu juego, consulta la Base de Datos de UI de Juegos. Esta herramienta gratuita para diseñadores de UI incluye capturas de pantalla de cientos de juegos de diferentes géneros que puedes consultar durante tu proceso de diseño.

Establece un orden de interacción

Un orden de interacción es la secuencia de interacciones que los jugadores pueden tener con tu UI. Dado que a menudo hay múltiples elementos de UI interactuables en la pantalla, es importante establecer un orden de interacción intuitivo para ayudar a los jugadores a tomar decisiones mientras navegan por varios flujos de trabajo.

Normalmente hay tres tipos de interacciones en un flujo de trabajo:

• Interacción Primaria – La acción que un jugador es más probable que realice.
• Interacción Secundaria – La acción que un jugador es probable que realice como alternativa a la acción primaria.
• Interacción Terciaria – La acción que un jugador es menos probable que realice.

Cada tipo de interacción debe tener un nivel diferente de énfasis visual dependiendo de la probabilidad de que un jugador realice la acción. Para ilustrar este concepto, examina la siguiente imagen del orden de interacción para el flujo de trabajo de seleccionar un bláster en el juego de laser tag de muestra, en el que A representa la interacción primaria, B representa la interacción secundaria, y C representa la interacción terciaria.

En este flujo de trabajo, la acción que un jugador es más probable que realice es seleccionar entre los dos tipos diferentes de blásters, por lo que los botones de bláster son mucho más grandes que cualquier otro elemento interactuable en el diseño. Este nivel de énfasis visual capta la atención del jugador y dirige su mirada hacia el medio del elemento de UI general. Después de que el jugador toma su decisión, el siguiente paso lógico en el flujo de trabajo es confirmar su selección y comenzar la ronda. Por esta razón, el botón SELECCIONAR está directamente debajo de la interacción primaria.

Aunque es poco probable, el jugador puede no saber que puede seleccionar uno de los botones de bláster para comunicar qué bláster desea usar. Para ayudar en esta situación, hay dos botones de flecha terciarios que el jugador puede utilizar para alternar entre sus opciones. Estos botones son sutiles y mucho más pequeños que los elementos de las interacciones primaria y secundaria, pero también son percibibles para el jugador que necesita dirección sobre qué acciones puede realizar.

Si colocas estas interacciones primaria, secundaria y terciaria en un orden de interacción diferente, como intercambiar el botón SELECCIONAR con el botón de flecha izquierda, los jugadores no tendrían una dirección clara sobre la secuencia de elecciones que necesitan hacer. Por esta razón, además del énfasis visual de un orden de botones, los flujos de trabajo efectivos siguen una jerarquía visual que guía a los jugadores a través de tu orden ideal de decisiones según la dirección en la que es probable que escaneen la información, como de arriba hacia abajo y de izquierda a derecha.

Al establecer un orden de interacción para los flujos de trabajo en tu propio juego, considera lo siguiente:

• Los jugadores necesitan tener una comprensión clara de cuándo pueden interactuar con tu UI para realizar acciones. Por esta razón, se recomienda proporcionar al menos una forma de retroalimentación visual para los elementos de UI interactuables, como mostrar un contorno o cambiar el tamaño, color o animación de un botón cuando está en foco.
• Si las etiquetas en los elementos de UI interactuables son vagas o similares entre sí en el mismo flujo de trabajo, los jugadores pueden malinterpretar cómo completar una acción o proceso. Para evitar una experiencia negativa para el jugador, crea etiquetas que sean claras, concisas y distintas entre sí.
• Si los elementos de UI interactivos son demasiado grandes, pueden distraer de otra información importante en la pantalla. Por el contrario, si son demasiado pequeños, pueden ser difíciles de leer o difíciles de seleccionar, especialmente si están en estrecha proximidad en dispositivos móviles. Por esta razón, es esencial revisar el tamaño de tus elementos de UI interactuables en varios tamaños de pantalla.

En Implementar en Studio, aprenderás cómo usar objetos UIAspectRatioConstraint para asegurar que los elementos de UI mantengan una relación de aspecto específica sin importar qué dispositivo usen los jugadores para acceder a tu juego. Además de facilitar tu proceso de diseño, esta técnica también puede ayudarte a cumplir con las pautas de accesibilidad de contenido web Tamaño y Espaciado de Objetos Táctiles para crear una zona táctil para elementos de UI interactivos que tenga al menos 9x9 mm en dispositivos móviles.

Determina un sistema de texto

Un sistema de texto es un conjunto de reglas sobre fuentes y estilos para todas las palabras en tu UI, como "siempre en negrita los encabezados" o "usar fuente verde al referirse a una estadística de salud". Determinar un sistema de texto temprano en tu proceso de diseño te permite tener una estructura que puedes aplicar consistentemente a lo largo de tu juego para que los jugadores sepan qué esperar mientras buscan la información que necesitan.

Si bien los sistemas de texto pueden variar según el género del juego o los requisitos del mundo 3D, la regla más importante que todos los sistemas de texto deben seguir es asegurar que todo tu texto de UI sea claro y fácil de leer. Al usar esta regla como base para todas las decisiones relacionadas con tu sistema de texto, puedes mejorar la accesibilidad y la experiencia del usuario para los jugadores que leen tu UI considerando las diferentes formas en que los jugadores pueden interactuar con tu texto, tales como:

• El dispositivo que los jugadores pueden usar para acceder a tu juego.
• El idioma en el que los jugadores pueden leer tu texto localizado.
• El posible fondo subyacente detrás del texto en pantalla.

Por ejemplo, el siguiente diseño de respuesta de pantalla de cuando un jugador es etiquetado se escala a un tamaño de fuente más pequeño o más grande según el dispositivo de un jugador, incluye suficiente espacio a cada lado del texto en inglés para idiomas con traducciones más largas, e incluye un fondo contrastante para que los jugadores puedan leer el texto sin importar qué color haya en su fondo.

Al determinar un sistema de texto para tu propio juego, considera lo siguiente:

• El texto es difícil de leer cuando se mezcla con el ruido de su fondo. Para mejorar la legibilidad de tu UI, muestra el texto sobre un color contrastante o con un trazo.
• Si no escalas tu texto para diferentes dispositivos, el texto ocupará demasiado espacio o se volverá pequeño e indescifrable en la pantalla del jugador. Para detectar discrepancias en tu texto, prueba tu diseño en múltiples dispositivos a lo largo del proceso de diseño.
• Las palabras pueden extenderse más allá de tu diseño original cuando las localizas en otros idiomas. Para mejorar la composición de tu diseño, referencia el mayor espacio que tu texto puede ocupar en la pantalla.
• Si bien algunas fuentes pueden encajar con la estética de tu juego, pueden ser difíciles de leer en grandes cantidades. Por esta razón, usa texto estilizado con moderación, como para títulos o texto de alerta.

Una vez que tengas un plan para el estilo artístico de tu UI, puedes pasar a la siguiente sección del tutorial para aprender cómo crear un wireframe del diseño de cada elemento en varios flujos de trabajo de jugadores.