Aplicaciones multimedia

Mientras que los desarrolladores de aplicaciones proporcionan el contenido principal, los íconos y las acciones personalizadas para sus aplicaciones multimedia, los fabricantes de automóviles tienen la flexibilidad de personalizar la experiencia visual general. Esto garantiza que las aplicaciones multimedia de terceros se integren de forma nativa en la experiencia de infoentretenimiento del vehículo.

¿Qué pueden personalizar los fabricantes de automóviles?

Configurar la barra de aplicaciones

La barra de aplicaciones es el elemento principal de navegación y marca para las aplicaciones multimedia en coches con Google integrado. Proporciona a los usuarios contexto sobre dónde se encuentran en la aplicación y les permite acceder rápidamente a funciones esenciales como la búsqueda y la navegación.

Puedes personalizar la barra de la aplicación para alinearla con la marca de tu auto usando tokens de diseño para modificar su apariencia, diseño y funcionalidad.

Anatomía

La barra de la aplicación multimedia normalmente consta de los siguientes elementos:

  • Icono de navegación: generalmente una flecha hacia atrás para regresar a la pantalla anterior.
  • Marca de la aplicación: el logotipo o el nombre de su aplicación.
  • Pestañas: enlaces de navegación para categorías de nivel superior, como "Explorar" o "Buscar".
  • Iconos de acción: acciones contextuales como el icono de búsqueda.

Personaliza la apariencia

Usa tokens de diseño para asegurar que la barra de aplicaciones coincida con el tema del sistema de tu coche. Los tokens te permiten definir colores y tipografías que se actualizan automáticamente en la interfaz de usuario.

  • Fondo: establece el color de fondo y la opacidad de la barra de la aplicación utilizando los tokens de superficie adecuados.
  • Tipografía: utiliza la fuente y el peso de tu marca para el título de la aplicación y las etiquetas de las pestañas asignándolos a tokens tipográficos del sistema.
  • Íconos: asegúrese de que los íconos de navegación y acción utilicen tamaños y colores uniformes para facilitar su lectura mientras conduce.

Configuraciones funcionales

Administrar pestañas

Puedes elegir qué pestañas aparecen en la barra de la aplicación según su estructura. Las configuraciones habituales incluyen:

  • Navegación estándar: pestañas para categorías como Listas de reproducción, Artistas y Álbumes.
  • Integración de búsqueda: una pestaña o ícono de búsqueda dedicado en la barra de la aplicación para acceder rápidamente al teclado o la búsqueda por voz.

Mostrar marca

Para mantener una apariencia coherente, puedes decidir cómo se mostrará el logotipo o la marca de la aplicación en la barra de aplicaciones. Puedes elegir entre:

  • Mostrar el logotipo: coloca el logotipo de la aplicación junto al ícono de navegación.
  • Mostrar el título: use texto para el nombre de la aplicación si no se proporciona ningún logotipo.

Vistas de navegación de estilos

Las vistas de navegación permiten a los usuarios explorar el contenido multimedia mediante cuadrículas y listas. Los fabricantes de automóviles pueden personalizar estas vistas para garantizar que la experiencia multimedia se adapte a la imagen de marca del vehículo y al diseño del sistema.

Personalización del encabezado

El encabezado de navegación proporciona contexto sobre la ubicación actual del usuario en la jerarquía de contenido. Puede personalizar los siguientes aspectos del encabezado:

  • Posición y estilo: ajuste la ubicación vertical y el diseño visual del encabezado, incluida la altura y el tratamiento del fondo.
  • Elementos del encabezado: personalice componentes específicos, como el estilo del texto del título y la apariencia de los íconos secundarios.

Elementos de cuadrícula y lista

El contenido multimedia se organiza en cuadrículas o listas para facilitar la navegación. Puedes personalizar estos diseños para mejorar la legibilidad y la visibilidad:

  • Estilo de elementos: personalice la apariencia visual de elementos individuales, incluido el tamaño y la forma de las miniaturas y la tipografía de los títulos y subtítulos.
  • Selección de diseño: elija entre formatos de cuadrícula o lista según el tipo de contenido que se muestra (por ejemplo, usar cuadrículas para las carátulas de álbumes y listas para los nombres de las pistas).
  • Estados de enfoque: definen cómo aparecen los elementos cuando el usuario los selecciona o resalta.

Diseños de reproducción de estilos

La vista de reproducción proporciona a los usuarios controles y metadatos para el contenido multimedia que están reproduciendo. Los fabricantes de automóviles pueden personalizar la apariencia de esta vista y la barra de control minimizada para crear una experiencia coherente y acorde con la marca del vehículo.

Anatomía de la vista de reproducción

La vista de reproducción normalmente incluye los siguientes componentes:

  • Carátula del álbum: La representación visual de los medios actuales.
  • Metadatos: información como el título de la pista, el nombre del artista y el título del álbum.
  • Controles de reproducción: acciones esenciales como reproducir, pausar, saltar y reproducir en modo aleatorio.
  • Barra de progreso: un indicador visual del progreso de la pista actual, que a menudo incluye una miniatura que se puede buscar.

Opciones de personalización

Puede utilizar tokens de diseño para modificar el estilo visual de la experiencia de reproducción.

Pantalla de reproducción principal

  • Fondo y superposiciones: personalice el color de fondo, los degradados o los niveles de opacidad para que coincidan con el tema de su sistema.
  • Tipografía: define la fuente, el tamaño y el peso de los títulos de las pistas y la información del artista utilizando tokens tipográficos del sistema.
  • Estilo de control: personalice la forma, el color y el estilo del ícono de los botones de reproducción (por ejemplo, reproducir, pausar, siguiente) para garantizar que sean consistentes con otros controles del sistema.
  • Barra de progreso: diseñe la pista y el pulgar de la barra de progreso usando colores específicos de la marca.

Barra de control minimizada (MCB)

La barra de control minimizada permite a los usuarios controlar el contenido multimedia mientras navegan por otras partes del sistema. Puede personalizar:

  • Posición y diseño: determina dónde aparece el MCB en la pantalla y cómo se organizan los elementos dentro de él.
  • Visibilidad del elemento: elija qué controles (como reproducir/pausar o saltar) se muestran en el estado minimizado.
  • Estilo: aplique colores consistentes y esquinas redondeadas para garantizar que el MCB se sienta como una parte nativa de la interfaz de usuario del sistema.

La búsqueda dentro de la aplicación es una función esencial que permite a los usuarios encontrar contenido multimedia rápidamente mientras están en el vehículo. Si bien los desarrolladores de aplicaciones proporcionan el contenido de búsqueda, los fabricantes de automóviles son responsables del diseño de la interfaz de búsqueda, incluyendo el teclado y la presentación de los resultados.

Diseño de teclado

La superposición de búsqueda utiliza diferentes configuraciones de teclado según el estado de conducción del vehículo para garantizar la seguridad y la facilidad de uso.

  • Teclado estándar: Se muestra cuando el vehículo está estacionado. Es un teclado completo para la entrada manual de texto.
  • Teclado optimizado para la conducción: Se muestra cuando el vehículo está en movimiento. Esta versión suele priorizar la entrada de voz y puede ofrecer entrada manual simplificada o sugerencias para minimizar las distracciones del conductor.

Los fabricantes de automóviles pueden personalizar el estilo visual de estos teclados (como la forma de las teclas, el color de fondo y la tipografía) utilizando tokens de diseño del sistema para que coincidan con la marca del vehículo.

Una vez que el usuario introduce una consulta, los resultados se muestran en una superposición. Puede personalizar los siguientes aspectos de esta vista:

  • Diseño y espaciado: define cómo se agrupan los resultados de la búsqueda y cuánto espacio se proporciona entre los elementos para una mejor legibilidad.
  • Apariencia del elemento: personalice el estilo de los elementos de la lista dentro de los resultados de búsqueda, incluidos los estilos de fuente para títulos y subtítulos y el tamaño de las miniaturas asociadas.
  • Estados vacíos y de error: diseña la apariencia de la superposición cuando no se encuentran resultados o si ocurre un error de conexión.

Mostrar la marca de la aplicación

Para crear una experiencia multimedia coherente en coches con Google integrado, puedes personalizar la integración de la marca de aplicaciones de terceros en la interfaz de usuario del sistema. Esto garantiza que, aunque el usuario sepa qué aplicación está usando, la presentación visual se mantenga coherente con el diseño general del vehículo.

Elementos de marca

Puede personalizar la ubicación y la integración de los siguientes elementos específicos de la aplicación:

  • Icono de la aplicación: el identificador visual principal del servicio multimedia.
  • Color de acento: el color específico de la marca proporcionado por el desarrollador de la aplicación.
  • Nombre de la aplicación: el nombre basado en texto del servicio multimedia.

Opciones de personalización

Utilice tokens de diseño para definir cómo aparecen estos elementos de marca en las diferentes pantallas de medios.

Ubicación y estilo de los iconos

Tienes flexibilidad en cómo se muestra el ícono de la aplicación dentro de la interfaz multimedia:

  • Posicionamiento: determina dónde aparece el ícono de la aplicación en las pantallas de contenido, como dentro de la barra de la aplicación o en la vista de reproducción.
  • Escala y forma: utilice tokens del sistema para definir el tamaño y el radio de las esquinas del ícono para garantizar que coincida con otros íconos a nivel del sistema.

Integrar colores de acento

Los colores de acento de la aplicación se pueden usar para proporcionar una pista sutil de la marca de la aplicación sin abrumar la interfaz de usuario del vehículo:

  • Estilo adaptable: puedes elegir cómo incorporar el color de acento de la aplicación en los componentes de la interfaz de usuario, como barras de progreso, indicadores de pestañas activas o botones.
  • Normalización de color: asegúrese de que los colores proporcionados por la aplicación cumplan con los requisitos de contraste para seguridad y legibilidad mediante la aplicación de transformaciones de color definidas por el sistema.

Mejores prácticas de diseño

  • Mantenga la armonía del sistema: asegúrese de que la marca de la aplicación no distraiga de la tarea de conducción principal ni entre en conflicto con el tema general del sistema del vehículo.
  • Priorice la legibilidad: si usa el color de acento de una aplicación para texto o íconos, asegúrese de que cumpla con las relaciones de contraste necesarias con el fondo elegido.
  • Aplicación consistente: aplique reglas de marca de manera uniforme en todas las aplicaciones multimedia de terceros para brindar una experiencia de usuario predecible.
  • Utilice tokens del sistema: asigne siempre las personalizaciones de marca a los tokens de diseño proporcionados para mantener la compatibilidad con futuras actualizaciones del sistema.