Contexto
El segundo paso en el proceso de definición del estilo visual de una app móvil de marca blanca es elegir los colores adecuados.
Algunos colores afectan al aspecto de la app móvil más que otros, por lo que te sugerimos que los elijas con atención.
Ten en cuenta quetodos los colores deben proporcionarse en formato de código de color hexadecimal, por ejemplo (#ff6600).
Colores generales
Color principal
El color principal se utiliza para destacar una parte importante de la interfaz. El color principal de la marca es el más utilizado para ese fin. Este debe contrastar lo suficiente con todos los demás elementos, de modo que los elementos de texto en ese color se puedan leer fácilmente. Usamos este color para los siguientes elementos en la app móvil:
- Botones “más” y “menos” para agregar artículos al carrito
- Pestañas activas
- Píldoras de filtros
- Iconos de pestañas activas
- Cursor
- Enlaces
- Etiquetas
- Filtros seleccionados, etc.
Color secundario
El color secundario se utiliza para destacar detalles adicionales de la interfaz. Este también debe contrastar lo suficiente con el resto del diseño de la app, de manera tal que el texto blanco colocado por encima se pueda leer fácilmente:
- La barra de progreso en la tarjeta Loyalty con fondo oscuro
- Ubicación del usuario
- Subcategoría seleccionada en el menú con diseño de una sola página
Color de fondo
El color de fondo se utiliza en toda la app móvil. “Background Back” es el color de fondo principal, y el color “Background Front” se utiliza en los elementos que se sitúan por encima del plano principal, como los modales y las tarjetas. En algunas pantallas, todo el fondo es de color “Background Front”:
- Background Front
- Background Back
Colores indicadores de estado
Color indicador de tarea correcta
El color indicador de tarea correcta se utiliza para indicar disponibilidad o que una acción se realizó correctamente:
- Pedido con etiqueta de la app
- Snackbar
- Pantalla de estado
Color indicador de error (estado de la acción)
El color indicador de error se utiliza para indicar errores o que una acción falló:
- Estado de error del campo de entrada con indicación
- Estado de error de los modificadores
- Pantalla de estado de pedido cancelado
Color indicador de la información
El color indicador de la información se utiliza para mostrarle información adicional neutra al usuario. Estos deben tener suficiente contraste para que se pueda leer el texto blanco:
- Barra de información
- Etiqueta
- Información sobre el estado
Color de la píldora de información
Se utiliza para los mensajes en la píldora de la barra. Este debe tener suficiente contraste para que se pueda leer el texto blanco.
Colores para elementos en proceso y procesados
Puedes utilizar estos colores para crear gradientes que representen el estado de la acción actual. Estos deben tener suficiente contraste para que se pueda leer el texto blanco:
- Gradiente del fondo de la pantalla de estado
- Gradiente del fondo de la barra de estado
- Estado de carga del botón
Color de los iconos
Color indicador de icono activo
El color indicador de icono activo se coloca en todos los iconos que se utilizan para activar alguna acción:
- Iconos de perfil
- Iconos “Back” (Atrás) y “Close” (Cerrar)
- Icono de recompensas y ofertas
- Icono de información
- Botón “Clear” (Borrar) en los campos de entrada activos
Color indicador de icono inactivo
El color indicador de icono inactivo se aplica a los iconos que se utilizan a modo de orientación o para indicar un estado de inactividad. Recomendamos configurar un color gris más oscuro para esos iconos, ya que tenemos iconos que utilizarán el 100 % de ese color y otros que utilizarán el 70 %:
- Botón “Clear” (Borrar) en los campos de entrada inactivos (70 % de opacidad)
- Marcas de verificación vacías (70 % de opacidad)
- Flechas de despliegue (70 % de opacidad)
- Botón “Show/hide password” (Mostrar/ocultar contraseña) en el campo de contraseña inactivo (70 % de opacidad)
- Flecha de menú desplegable (100 % de opacidad)
- Iconos indicadores de pedidos inactivos (100 % de opacidad)
- Iconos de la barra de pestañas inactivas (100 % de opacidad)
- Iconos de filtros (100 % de opacidad)
- Información sobre puntos Loyalty (100 % de opacidad)
Color de icono inhabilitado
Se aplica sobre la base del icono que representa el estado inhabilitado. Color recomendado: gris claro
Color de las líneas
El color de las líneas se utiliza en cada línea en todo el sistema. Todos los colores de las líneas se generan reduciendo la opacidad de un color determinado. Por ello, deben ser muy oscuros. De ese modo, incluso hasta un 6 % de opacidad puede ser visible.
- Línea de entrada activada (100 % de opacidad)
- Línea de entrada pasiva (20 % de opacidad)
- Línea de división (6 % de opacidad)
- Línea de botones (15 % de opacidad)
- Línea de tabulación (10 % de opacidad)
Colores del contador
Los colores del contador se utilizan en el fondo del contador de artículos. Estos deben tener suficiente contraste para que se pueda leer el texto blanco:
- Contador de artículos
- Contador de artículos inhabilitados
Colores adicionales
Color indicador de bebidas alcohólicas
Se usa para dar color al icono que representa un artículo con alcohol:
Color indicador de alimentos vegetarianos y veganos
El color indicador de alimentos vegetarianos se utiliza en los iconos que representan comidas vegetarianas y veganas:
- Alimento vegetariano
- Alimento vegano
Color de fondo de la pantalla Splash
El color de fondo de la pantalla Splash se utiliza como fondo de dicha pantalla, donde se muestra principalmente el logotipo de la marca:
- Diferentes colores de fondo
Color de fondo del iniciador de iconos
Este color es específico de Android. Elige el color de fondo para el iniciador de iconos:
- Fondo del iniciador de iconos
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.