Elige un estilo artístico

Elegir un estilo artístico es el proceso de planificar una dirección estética para tus elementos de interfaz de usuario.Es importante comenzar tu proceso de diseño con un estilo artístico porque los estilos artísticos proporcionan reglas visuales que puedes consultar para garantizar que tu interfaz de usuario proporcione de forma intuitiva información a los jugadores sobre lo que pueden hacer en tu experiencia.

Usando el archivo ejemplo de experiencia de etiqueta láser.rbxl como referencia, esta sección del programa de la interfaz de usuario muestra cómo tomar decisiones significativas sobre cómo diseñar sus elementos de interfaz de usuario de acuerdo con el género de su experiencia, incluyendo instrucciones sobre:

• Identificar los elementos de interfaz de usuario necesarios según lo que quieras comunicar a los jugadores a lo largo de tu experiencia.
• Seleccionar un tema de color que refuerce las convenciones de color específicas del género que son intuitivas para tu audiencia.
• Delinear iconos simples que son 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 jugadores.
• Determinar un sistema de texto que garantice la legibilidad en los dispositivos objetivo.

Una vez que completes esta sección, aprenderás cómo diseñar la estructura y el flujo de la información que quieres comunicar a los jugadores a través de la interfaz de usuario dentro de tu experiencia.

Identifica tus elementos de UI

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

Hay muchas maneras diferentes de generar ideas sobre qué elementos de interfaz de usuario son necesarios para los requisitos de tu juego, pero se recomienda comenzar con la visualización de lo que un jugador necesita saber tan pronto como se una a tu experiencia.Por ejemplo, cuando un jugador abre la experiencia de etiqueta láser de muestra, puede plantearse las siguientes preguntas:

• ¿Cuál es el objetivo de la experiencia?
• ¿Cómo sé quién está en mi equipo?
• ¿Cómo hago un seguimiento de los puntos de mi equipo?
• ¿Cómo elijo un blaster?
• ¿Cómo sé dónde dispara el láser el bláster?
• Si estoy en un dispositivo móvil, ¿cómo dispara 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 etiqueto con éxito a alguien con mi blaster?
• ¿Cómo sé cuándo el equipo enemigo me etiqueta con éxito?

Al utilizar estas preguntas para comprender qué información es imperativa para que los jugadores sepan tener éxito, puedes clasificar las necesidades de la interfaz de usuario del experienciade etiqueta láser de muestra en tres categorías:

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

Ordenar las necesidades de la interfaz de usuario de tu experiencia en categorías es útil porque puedes formular tu estilo artístico alrededor de cada grupo para reforzar la información que cada categoría necesita para enseñar a los jugadores.Por ejemplo, si quieres que tu interfaz de usuario indique a los jugadores qué acciones pueden tomar con respecto al estado de salud de su personaje, puedes elegir un estilo artístico con elementos de interfaz que prioricen el color verde y/o los iconos plus para que los jugadores puedan reconocer rápidamente su función.

Después de clasificar las necesidades de la interfaz de usuario de tu experiencia en categorías, puedes crear una lista de los elementos de la interfaz de usuario necesarios para cumplir con los requisitos de cada categoría.Para demostrar, la experiencia de etiqueta láser de muestra utiliza la siguiente tabla de elementos de interfaz de usuario para abordar la lista anterior de preguntas potenciales del jugador.A medida que trabajas a través de este tutorial, el curso de la interfaz de usuario seguirá haciendo referencia a esta lista y resaltará las principales decisiones de diseño que se relacionan con cada categoría de elementos de interfaz de usuario.

Ahora que tienes una lista de elementos de interfaz de usuario para tu experiencia, es hora de comenzar a hacer elecciones estilísticas y semánticas para cada agrupación de elementos de interfaz de usuario, comenzando con un tema de color.

Seleccione 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 experiencia, como usar un color brillante para indicar cuando algo es seleccionable.Aplicar un tema de color a los elementos de tu interfaz es importante, especialmente cuando confías en las convenciones de color dentro del género de tu experiencia, porque permite que los jugadores comprendan rápidamente tu interfaz con el mínimo esfuerzo.

En el Curriculum de arte ambiental, cada mitad del entorno de etiqueta láser está codificada de arriba hacia abajo para diferenciar qué área del mapa está cerca de la zona de generación respectiva de cada equipo: menta para el equipo que se reúne en el lado izquierdo del mapa, y carnación rosa 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 se contrastan bien entre sí y permiten que los jugadores escaneen fácilmente su entorno y se orienten independientemente de qué dirección estén enfrentando en el construcción.

La experiencia de etiqueta láser de muestra utiliza este mismo tema de color en su interfaz de usuario para resaltar la información que pertenece a cada equipo, como el indicador del equipo de cada jugador dentro del espacio 3D o el rastreador de puntos de equipo que superpone la pantalla.Esta consistencia ayuda a los jugadores a poder comprender rápidamente la información sobre el objetivo de la experiencia durante el juego a ritmo rápido de una experiencia de disparador en primera persona, especialmente porque los jugadores deben tomar decisiones rápidas mientras atraviesan el entorno, ambiente.

Al seleccionar un tema de color para tu propia experiencia, ten en cuenta lo siguiendo:

• 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, limite su tema de color a solo resaltar la información clave que quieres que los jugadores asocien con tus elementos de interfaz de usuario.
• Para asegurarse de que los jugadores con daltonismo puedan entender el mensaje de su tema de color, no siempre confíe en el color solo para distinguir entre elementos de la interfaz de usuario.En cambio, combina colores con iconos, formas y/o animaciones para asegurarte de que tu interfaz de usuario se comunique de manera efectiva con cada jugador.
• Es más importante que tu interfaz de usuario sea legible que agradable estéticamente.Por esta razón, prioriza la interfaz de usuario simple con color que se mantiene legible sobre ambos elementos claros y oscuros en el mundo 3D.

Para resaltar la orientación en el último punto, la experiencia de etiqueta láser de muestra utiliza los colores neutrales de negro y blanco para casi todos los demás elementos de interfaz que superponen la pantalla 2D.El contraste negro y blanco se complementa bien, y son fáciles de leer ya que el resto de la pantalla muestra un entorno 3D de color más bien.

Contorno de iconos simples

Un icono es un símbolo que representa una acción, objeto o concepto en una experiencia.Delinear iconos que sean simples e intuitivos es importante porque el resultado final permite que los jugadores reconozcan fácilmente lo que pueden hacer y lo que quieres decirles a través de tu interfaz sin usar texto, lo que puede desordenar la pantalla y distraer la atención de los contenidos que importan.Este proceso es aún más crucial si tu audiencia accede a tu experiencia usando una pequeña pantalla en dispositivos móviles.

Las iconos simples idealmente tienen un estilo distinto de tus elementos 3D mientras siguen complementando el mundo general de tu experiencia.Por ejemplo, en el entorno final del Curriculum de arte ambiental, tanto los recursos modulares como prop 3D tienen un estilo de arte 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 sigue siendo único, todos los elementos de interfaz de usuario que aprenderás a hacer más tarde en este tutorial incluyen una estética futurista y ángulos redondos sin coincidir con el lenguaje de forma de los recursos 3D en el entorno, ambiente.Esto mantiene el significado de cada íconodistinto de otra información en el espacio 2D y 3D.

Para demostrar este concepto, vea las siguientes dos imágenes de la experiencia de etiqueta láser de muestra del punto de mira que le dice a los jugadores dónde dispara su bláster en la pantalla y el botón que permite a los jugadores disparar su bláster en dispositivos móviles.Ambos iconos incluyen ángulos suaves para ser coherentes con el mundo en su conjunto, pero sus formas hexagonales y circulares los separan de cualquier cosa con la que un jugador podría asociar los iconos en la experiencia.

Al delinear iconos simples para tu propia experiencia, considera lo siguiendo:

• Las iconos simples son legibles incluso cuando son pequeñas.Por esta razón, limite los detalles en sus iconos que se volverían ilegibles en las pantallas de dispositivos móviles.
• Las iconos son poderosas porque pueden comunicar un mensaje sin importar el idioma del jugador.Siempre que no afecte la comprensión del jugador de tu interfaz de usuario, reemplaza el texto innecesario con iconos para mejorar los esfuerzos de localización.
• Muchas experiencias del mismo género utilizan iconos que son estilísticamente similares, como un icono de espada que representa fuerza, o un vaso que representa magia. Acepta el simbolismo dentro del género de tu experiencia para que los jugadores puedan entender tus iconos sin orientación adicional.

Si no sabe qué tipos de íconos son comunes dentro del género de su experiencia, consulte la Base de datos de la interfaz de usuario del juego.Esta herramienta de recursos gratis para diseñadores de interfaces incluye capturas de pantalla de cientos de juegos de diferentes géneros que puedes referenciar durante tu proceso de diseño.

Establecer una orden de interacción

Un orden de interacción es la secuencia de interacciones que los jugadores pueden tener con tu interfaz de usuario.Como a menudo hay múltiples elementos de interfaz de usuario 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.

Típicamente hay tres tipos de interacciones en un flujo de trabajo:

• Interacción principal – La acción más probable que realice un jugador.
• Interacción secundaria – La acción que un jugador es probable que realice como alternativa a la acción principal.
• Interacción terciaria – La acción que un jugador es menos probable que realice.

Cada tipo de interacción debe tener un nivel visual diferente dependiendo de la probabilidad de que un jugador realice la acción.Para ilustrar este concepto, examine la siguiente imagen del orden de interacción para el flujo de trabajo para seleccionar un blaster en la experiencia de etiqueta láser de muestra, en la que A representa la interacción principal, B representa la interacción secundaria y C representa la interacción terciaria.

En este flujo de trabajo, la acción más probable que realice un jugador es seleccionar entre los dos tipos diferentes de láseres, por lo que los botones de láser son mucho más grandes que cualquier otro elemento interactuable en el diseño.Este nivel de énfasis visual captura la atención del jugador y dirige su ojo a la mitad del elemento de la interfaz de usuario general.Después de que el jugador tome 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 SELECT está directamente debajo de la interacción principal.

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

Si colocara estas interacciones primarias, secundarias y terciarias en un orden de interacción diferente, como intercambiar el botón SELECT con el botón de flecha izquierda, los jugadores no tendrían una dirección clara sobre la secuencia de opciones que deben tomar.Por esta razón, además de la enfatización 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 su orden ideal de decisiones de acuerdo con la dirección que es probable que escaneen información, como de arriba hacia abajo y de izquierda a derecha.

Al establecer una orden de interacción para los flujos de trabajo en tu propia experiencia, ten en cuenta lo siguiendo:

• Los jugadores deben tener una comprensión clara de cuándo pueden interactuar con tu interfaz de usuario para realizar acciones.Por esta razón, se recomienda proporcionar al menos una forma de retroalimentación visual para elementos de interfaz de usuario 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 elementos de interacción de la interfaz de usuario son vagas o similares entre sí en el mismo flujo de trabajo, los jugadores pueden malinterpretar cómo completar una acción o un proceso.Para evitar una experiencia negativa del jugador, crea etiquetas que sean borrar, concisas y distintas entre sí .
• Si los elementos de interfaz de usuario interactivos son demasiado grandes, pueden distraer de otra información importante en la pantalla.Al contrario, si son demasiado pequeños, pueden ser difíciles de leer o de elegir, especialmente si están en cercana proximidad en dispositivos móviles.Por esta razón, es esencial revisar el tamaño de los elementos de interfaz de usuario interactuables en varios tamaños de pantalla .

En Implementar en Studio, aprenderás a usar objetos UIAspectRatioConstraint para garantizar que los elementos de la interfaz de usuario mantengan una proporción de aspecto específica sin importar qué dispositivo use el jugador para acceder a tu experiencia.Además de hacer tu proceso de diseño más fácil, esta técnica también puede ayudarte a cumplir con la recomendación de tamaño y distancia del objetivo táctil de las Directrices de accesibilidad de contenido web para crear una zona táctil para elementos de interfaz de usuario interactivos que tengan al menos 9x9 mm en dispositivos móviles.

Determinar un sistema de texto

Un sistema de texto es un conjunto de reglas sobre fuentes y estilo para todas las palabras de tu interfaz de usuario, como "siempre encabezados audaces" o "usar fuentes verdes al referirse a una estadística de salud" . Determinar un sistema de texto al comienzo de tu proceso de diseño te permite tener una estructura que puedas aplicar de manera consistente a lo largo de tu experiencia para que los jugadores sepan a qué esperar al buscar la información que necesitan.

Si bien los sistemas de texto pueden variar dependiendo del género de la experiencia o de los requisitos del mundo 3D, la regla más importante que todos los sistemas de texto deben seguir es asegurarse de que todo el texto de la interfaz de usuario esté claro y fácil de leer .Al utilizar esta regla como base para todas las decisiones relacionadas con su sistema de texto, puede mejorar la accesibilidad y la experiencia del usuario para los jugadores que leen su interfaz de usuario considerando las diferentes maneras en que los jugadores pueden interactuar con su texto, como:

• Los jugadores de dispositivos que pueden usar para acceder a tu experiencia.
• El idioma en el que los jugadores pueden leer tu texto localizado.
• El posible fondo subyacente detrás del texto en la pantalla.

Por ejemplo, el siguiente diseño de respuesta de pantalla cuando un jugador es etiquetado 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 en ambos lados del texto inglés para idiomas con traducciones más largas y incluye un fondo contrastante para que los jugadores puedan leer el texto sin importar qué color tengan en su fondo.

Al determinar un sistema de texto para tu propia experiencia, considera lo siguiendo:

• El texto es difícil de leer cuando se mezcla con el ruido de su fondo.Para mejorar la legibilidad de tu interfaz de usuario, muestra texto en la parte superior de un color de contraste o con un trazado .
• Si no escalas tu texto para diferentes dispositivos, el texto ocupará demasiado espacio o se hará pequeño e ilegible en la pantalla del jugador.Para detectar discrepancias en tu texto, prueba tu diseño en múltiples dispositivos durante todo el proceso de diseño.
• Las palabras pueden extenderse más allá de tu diseño original cuando las localizas a 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 en la estética de tu experiencia, pueden ser difíciles de leer en grandes cantidades.Por esta razón, utilice texto estilizado de forma escasa , como para títulos o texto de alerta.

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