Elige un estilo de arte

Elegir un estilo de arte es el proceso de planificación de una dirección artística para sus elementos de UI. Es importante comenzar su proceso de diseño con un estilo de arte porque los estilos de arte proporcionan reglas de suelo visual que puedes referirte para asegurar que tu UI proporcione información intuitiva a los jugadores sobre lo que pueden hacer en tu experiencia.

Usando la experiencia de etiqueta láser de muestra Example.rbxl como referencia, esta sección del programa de usuario de la interfaz de usuario muestra cómo tomar decisiones significativas sobre cómo diseñar los elementos de su interfaz de usuario según el género de su experiencia, incluida la guía sobre:

• Identificar los elementos de UI necesarios según lo que quieres comunicar a los jugadores durante tu experiencia.
• Seleccionar un tema de color que refuerza las convenciones de color específicas del género que son intuitivas para su audiencia.
• Contorno de iconos simples que son fáciles de descifrar en cualquier tamaño de pantalla.
• Establecer un orden de botón que coincida con la probabilidad de diferentes flujos de trabajo de los jugadores.
• Determinación de un sistema de texto que garantiza la legibilidad en los dispositivos objetivo.

Después de completar esta sección, aprenderás a 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 en elegir un estilo de arte para su UI es identificar qué elementos de UI necesita para los diferentes tipos de información que desea comunicar a su audiencia. Hacer este trabajo al comienzo de su proceso de diseño es crucial porque te permite categorizar los elementos de UI según su propósito funcional, tomar decisiones semánticas según dónde y cuando los jugadores interactúan con cada elemento de UI y planificar dónde puedes reutilizar los elementos de UI a lo largo de tu experiencia.

Hay muchas maneras diferentes de hacer brainstorming de qué elementos de UI son necesarios para sus requisitos de juego, pero se recomienda comenzar con la visión de lo que un jugador necesita saber tan pronto como se unen a su experiencia. Por ejemplo, cuando un jugador abre la experiencia de etiqueta láser, puede preguntarse las siguientes preguntas:

• Cuál es el objetivo de la experiencia?
• ¿Cómo sé quién está en mi equipo?
• ¿Cómo rastreo los puntos de mi equipo?
• ¿Cómo selecciono un blaster?
• ¿Cómo sé dónde dispara el láser el blaster?
• Si estoy en un dispositivo móvil, ¿cómo disparo mi arma?
• ¿Cuándo puedo disparar un láser después de disparar uno?
• ¿Cómo sé cuándo estoy empezando la ronda?
• ¿Cómo sé cuándo tengo éxito al etiquetar a alguien con mi blaster?
• ¿Cómo sé cuándo el equipo enemigo me etiqueta con éxito?

Al usar estas preguntas para entender qué información es imperativa para los jugadores para ser exitosos, puede ordenar las necesidades de la interfaz de usuario de la experiencia de etiqueta láser 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 la UI de tu experiencia en categorías es útil porque puedes formular tu estilo de arte alrededor de cada agrupación para reforzar la información que cada categoría necesita enseñar a los jugadores. Por ejemplo, si quieres que tu UI le diga a los jugadores qué acciones puede tomar con respectar al estado de salud de su personaje, puedes elegir un estilo de arte con elementos de UI que priorizan el color verde y/o los iconos de 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 UI necesarios para cumplir con los requisitos de cada categoría. Para demostrar, la experiencia de etiqueta láser usa la siguiente tabla de elementos de UI para abordar la lista anterior de posibles preguntas del jugador. A medida que trabajas a través de este tutorial, el curso de UI seguirá refiriéndose a esta tabla y resaltará las decisiones de diseño importantes que se refieren a cada

Ahora que tienes una lista de elementos de UI para tu experiencia, es hora de comenzar a hacer elecciones estilísticas y semánticas para cada agrupación de elementos de UI, 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 la aplicación consistente dentro de su experiencia, como usar un color brillante para indicar cuando algo es seleccionable. Aplicar un tema de color a sus elementos de UI es importante, especialmente cuando se basa en las convenciones de color dentro del género de su experiencia, porque permite que los jugadores entiendan rápidamente su UI con un esfuerzo mínimo.

En el programa de arte ambiental, cada mitad del entorno de las etiquetas láser se codifica de arriba para abajo para diferenciar qué área del mapa está cerca de cada zona de generación del equipo: menta para el equipo que se reúne en el construcción

La experiencia de etiqueta láser usa este mismo tema de color en su UI para resaltar la información que pertenece a cada equipo, como el indicador de 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 entender rápidamente la información sobre el objetivo del juego durante la rápida experiencia de un juego de primera persona, especialmente mientras los jugadores necesitan tomar decisiones rápidas

Al seleccionar un tema de color para su propia experiencia, tenga en cuenta lo siguiendo:

• La fuerza de un tema de color se basa en 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 a solo resaltar la información clave que quieres que los jugadores asocien con tus elementos de UI 。
• Para asegurar que los jugadores con ceguera de color entienden el mensaje de tu tema de color, no confíe siempre en el color solo para distinguir entre elementos de UI. En cambio, combina colores con íconos, formas y/o animaciones para asegurar que tu interfaz de usuario se comunica con eficacia con cada jugador.
• Es más importante para tu UI ser legible que estéticamente agradable. Por esta razón, prioriza la UI simple con color que se mantiene leíble tanto sobre los elementos de luz como de oscuridad en el mundo 3D .

Para resaltar la guía en el último punto, la experiencia de etiqueta láser utilizada utiliza los colores neutrales del negro y el blanco para casi todos los demás elementos de la interfaz de usuario que superponen la pantalla 2D. El contraste negro y blanco es bien uno el otro, y son fáciles de leer como el resto de la pantalla muestra un entorno, ambiente3D de color.

Contorno de iconos simples

Un icono es un símbolo que representa una acción, objeto o concepto en una experiencia. Outlining iconos que son simples y intuitivos es importante porque el resultado final permite a los jugadores reconocer fácilmente lo que pueden hacer y lo que quieres decir a través de tu UI sin usar texto, lo que puede desordenar la pantalla y quitar la atención del contenido que importa. Este proceso es aún más crucial si tu audiencia accede a tu experiencia usando una pant

Los iconos simples idealesmente tienen un estilo distinto de tus elementos 3D mientras se complementan con el mundo general de tu experiencia. Por ejemplo, en el entorno final del Currículo de Arte Ambiental, tanto los activos modulares como los prop 3D tienen un estilo de arte limpio y de alta tecnología que utiliza formas rectangulares con esquinas redondeadas. Desde los paneles cepillados junto al suelo hasta las ventanas casi circulares en el

Para complementar este estilo de arte mientras se mantiene único, todos los elementos de la interfaz de usuario que aprenderás a hacer más tarde en este tutorial incluyen un estilo futurista y ángulos redondeados sin que coincida el lenguaje de forma de las 3D en el entorno, ambientedel 2D y 3D. Esto mantiene el significado de cada íconodistinto de la otra información en ambos el espacio 2D y 3D.

Para demostrar este concepto, consulte las siguientes dos imágenes de la experiencia de etiqueta láser de muelles que muestran a los jugadores dónde se encuentra 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 general, pero sus formas hexagonales y circulares los apartan de cualquier cosa que los jugadores pudieran asociar con en la experiencia.

Al contorno de los iconos simples para tu propia experiencia, considera lo siguiendo:

• Los iconos simples son legibles incluso cuando son pequeños. Por esta razón, limite los detalles de sus iconos que se volverían ilegibles en pantallas de dispositivos móviles.
• Los íconos son poderosos 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, reemplazar el texto no necesario con íconos para mejorar los esfuerzos de localización.
• Muchas experiencias del mismo género usan iconos que son estéticamente similares, como un icono de espada que representa fuerza, o un taza que representa magia. Embrace el simbolismo dentro del género de su experiencia para que los jugadores puedan entender sus íconos sin guía adicional.

Si no sabe qué tipos de íconos son comunes dentro del género de su experiencia, consulte el Archivo de base de datos de la interfaz de usuario del juego . Esta herramienta de recursos gratuitos para los diseñadores de UI incluye capturas de pantalla de cientos de juegos de diferentes géneros que puede referir durante su proceso de diseño.

Establecer un Orden de Interacción

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

Hay tres tipos de interacciones en un flujo de trabajo:

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

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 la interacción para que el flujo de trabajo seleccione un blaster en la experiencia de etiqueta de láser para la muestra, en la que A representa la interación principal, 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 armas, por lo que los botones de las armas son mucho más grandes que cualquier otro elemento interactuable en el diseño. Este nivel de enfoque visual atrae la atención del jugador y llama su atención a la mitad del elemento de UI general. Después de que el jugador haga su decisión, el siguiente paso lóg

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

Si colocara estas interacciones principales, 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 en la secuencia de opciones que necesitan tomar. Por esta razón, además del énfasis visual de un botón de orden, los flujos de trabajo efectivos siguen un n

Al establecer un orden de interacción para los flujos de trabajo en tu propia experiencia, considera lo siguiendo:

• Los jugadores deben 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, el color y la animación de un botón cuando está en enfoque.
• Si las etiquetas en los elementos de la interfaz de usuario interactuables son ambiguas o similares entre sí en el mismo flujo de trabajo, los jugadores pueden malentender cómo completar una acción o un proceso. Para evitar una mala experiencia del jugador, crea etiquetas que sean borrar, concisas y distintas entre sí .
• Si los elementos de la interfaz de usuario interactiva son demasiado grandes, pueden distraerse de la información importante en la pantalla. Por el contrario, si son demasiado pequeños, pueden ser difíciles de leer o difíciles de elegir, especialmente si están en proximidad cercana en dispositivos móviles. Por esta razón, es esencial revisar el tamaño de sus elementos de interfaz de usuario interactiva en varios tamaños de pantalla .

En implementar en Studio , aprenderás a usar UIAspectRatioConstraint objetos para asegurar que los elementos de la interfaz de usuario mantengan un aspecto específico sin importar qué dispositivo los jugadores usen para acceder a tu experiencia. Además de hacer que tu proceso de diseño sea más fácil, esta técnica también puede ayudarte a cumplir

Determine un sistema de texto

Un sistema de texto es un conjunto de reglas sobre fuentes y estilo para todas las palabras de tu UI, como "siempre subrayar encabezados" o "utilizar fuentes verdes 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 con consistencia en toda tu experiencia para que los jugadores sepan lo que esperar mientras buscan la información que necesitan.

Mientras que los sistemas de texto pueden variar dependiendo del género o los requisitos del mundo 3D, la regla más importante que todos los sistemas de texto deben seguir es asegurarse de que todo tu texto de UI esté 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 al considerar las diferentes formas en

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

Por ejemplo, la siguiente respuesta de la pantalla cuando se etiqueta a un jugador escala a un tamaño de fuente más pequeño o más grande según el dispositivo del jugador, incluye suficiente espacio en ambos lados del texto en inglés para los idiomas con traducciones más largas, y incluye un fondo de pantalla de contraste para que los jugadores puedan leer el texto sin importar qué color esté en su fondo.

Al determinar un sistema de texto para su propia experiencia, tenga en cuenta lo siguiendo:

• El texto es difícil de leer cuando se mezcla con el ruido de su fondo. Para mejorar la legibilidad de su interfaz de usuario, muéstrate el texto en la parte superior de un color contrario o con un trazo .
• Si no escala su texto para diferentes dispositivos, el texto ocupará demasiado espacio o se hará demasiado pequeño y deslegible en la pantalla del jugador. Para detectar desviaciones en su texto, pruebe su diseño en múltiples dispositivos durante el proceso de diseño.
• Las palabras pueden extenderse más allá de su diseño original cuando las localice en otros idiomas. Para mejorar la composición de su diseño, referenciar el espacio más que puede ocupar tu texto en la pantalla .
• Mientras que algunas fuentes pueden encajar con las estéticas de tu experiencia, 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 tenga un plan para el estilo de arte de su UI, puede avanzar a la siguiente sección del tutorial para aprender a wireframe el diseño de cada elemento en varios flujos de trabajo de los jugadores.