Móvil: Colores

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 lo siguiente: todos los colores deben proporcionarse en formato de código de color hexadecimal, por ejemplo (#ff6600).

Colores globales

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:

1. Botones “más” y “menos” para agregar artículos al carrito
2. Marcas de verificación
3. Pestañas activas
4. Píldoras de filtros
5. Iconos de pestañas activas
6. Cursor
7. Enlaces
8. Etiquetas
9. 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. Puedes utilizar este color para crear gradientes que representen el estado de la acción actual:

1. La barra de progreso en la tarjeta Loyalty con fondo oscuro
2. Ubicación del usuario
3. Gradiente del fondo de la pantalla de estado en combinación con el color principal
4. Gradiente del fondo de la barra de estado en combinación con el color principal
5. Carga en los botones en combinación con el color principal

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”:

1. Background Front
2. Background Back

Color indicador de tarea correcta (estado de la acción)

El color indicador de tarea correcta se utiliza para indicar disponibilidad o que una acción se realizó correctamente:

1. Pedido con etiqueta de la app
2. Snackbar
3. 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ó:

1. Estado de error del campo de entrada con indicación
2. Estado de error de los modificadores
3. Pantalla de estado del pedido cancelado

Color indicador de elemento inhabilitado (estado de la acción)

El color indicador de elemento inhabilitado se utiliza para indicar los elementos y acciones inhabilitados:

1. Contador de artículos no disponibles
2. Botón inhabilitado
3. Icono inhabilitado

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:

1. Botón “Clear” (Borrar) en los campos de entrada inactivos
2. Marcas de verificación vacías
3. Flechas de información
4. Botón “Show/hide password” (Mostrar/ocultar contraseña) en el campo de contraseña inactivo

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:

1. Iconos de perfil
2. Iconos “Back” (Atrás) y “Close” (Cerrar)
3. Icono de recompensas y ofertas
4. Icono de información
5. Botón “Clear” (Borrar) en los campos de entrada activos

Fondo de iconos grandes

El color de fondo de iconos grandes se utiliza en todos los iconos grandes activos:

1. Iconos del tipo de pedido
2. Iconos de configuración

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.

1. Línea de entrada activada (100 % de opacidad)
2. Línea de entrada pasiva (20 % de opacidad)
3. Línea de división (6 % de opacidad)
4. Línea de botones (15 % de opacidad)
5. Línea de tabulación (10 % de opacidad)

Color indicador de alimentos vegetarianos

El color indicador de alimentos vegetarianos se utiliza en los iconos que representan comidas vegetarianas y veganas:

1. Alimento vegetariano
2. Alimento vegano

Color de los títulos

Nuestro consejo es que elijas colores del texto con mucha atención. Dicho color debe tener suficiente contraste con el fondo para que se pueda leer y satisfaga las normas de accesibilidad. En cuanto a los colores de los encabezados, recomendamos utilizar el mismo color que en el resto de la app (negro, pero puedes elegir otro). Solo no olvides que debe ser lo suficientemente visible:

1. Encabezado grande
2. Encabezado

Color del cuerpo del texto

Aquí te sugerimos seguir el mismo consejo. El texto debe ser legible y accesible para todos. Asimismo, en el texto del cuerpo, debes elegir un color bien oscuro, de preferencia negro, ya que todos los demás tonos de los colores del texto parten de ese color más oscuro. Por ejemplo, el marcador de posición del campo de entrada solo tiene un 20 % del color del texto del cuerpo:

1. Color del cuerpo del texto 100 %
2. Color del cuerpo del texto 80 %
3. Color del cuerpo del texto 60 %
4. Color del cuerpo del texto 20 %

Color del texto de los botones principales

Los botones principales se utilizan para representar las acciones principales en la pantalla. Estos se crean a partir de dos colores: el color de fondo del botón principal y el color del texto del botón principal. Crea una combinación de esa manera para que el texto se pueda leer en el fondo:

1. Color de fondo del botón principal
2. Color del texto del botón principal

Color del texto y de los botones secundarios

Los botones secundarios se utilizan para representar las acciones secundarias en la pantalla. También se crean a partir de dos colores: el color de fondo del botón secundario y el color del texto de dicho botón. Esta combinación también se debe poder leer fácilmente:

1. Color de fondo del botón secundario
2. Color del texto del botón secundario

Colores adicionales

Color indicador de la información de estado

El color indicador de la información de estado se utiliza para mostrar información adicional neutra al usuario. Este color debe tener suficiente contraste para que se pueda leer el texto blanco:

1. Barra de información
2. Etiqueta
3. Información sobre el estado

Color oscuro indicador de icono inactivo

El color oscuro indicador de icono inactivo se aplica a los iconos que se utilizan para representar acciones secundarias en la página. Pertenece a una categoría diferente a la del color del texto y del botón secundario:

1. Flecha con menú desplegable
2. Iconos indicadores de pedidos inactivos
3. Iconos de la barra de pestañas inactivas
4. Iconos en filtros
5. Información sobre puntos Loyalty

Color del contador

El color del contador se utiliza en el fondo del contador de artículos. Este debe tener suficiente contraste para que se pueda leer el texto blanco:

1. Contador de artículos

Color de fondo de la pantalla Splash

El color de fondo de la pantalla Splash se utiliza como fondo de la pantalla Splash, donde se muestra principalmente el logotipo de la marca:

1. 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:

1. Fondo del iniciador de iconos