iOS tiene un conjunto definido de colores semánticos y de sistema que se adapta automáticamente a la vitalidad, la configuración de accesibilidad y el modo de apariencia.
A color semántico Es un color que tiene un nombre que explica su finalidad. Cada color semántico tiene variantes de color como Primario, Secundaria y Terciaria, que se utilizan para diferenciar el contenido según su nivel de jerarquía. Por ejemplo, si desea definir un color personalizado para un Fondo primario, el nombre del color podría ser appPrimaryBackgroundColor donde app es el nombre corto de su marca/aplicación y PrimaryBackground es el nombre semántico de un color. Cabe mencionar que el nombre de un color personalizado no debe ser el mismo que el color del sistema iOS.
Ejemplo de colores personalizados definidos en Figma
🎨 Repasaremos cómo crear una paleta de colores personalizada teniendo en cuenta las pautas de Apple.
Color primario
Un color primario debe transmitir la personalidad de tu aplicación. Este es un color básico de una paleta. Este color se muestra con frecuencia en la mayoría de las pantallas y componentes y se utiliza para indicar las acciones principales. También puede utilizar tonos de colores primarios para acentuar elementos específicos de la interfaz de usuario, así como estados de la interfaz de usuario para interacciones como tocar y presionar.
Para generar tonos de color en Figma, puedes utilizar este complemento.
Colores primarios definidos en Figma.
Ejemplos de colores primarios en aplicaciones móviles populares
Colores secundarios y de acento
Los colores secundarios se utilizan para respaldar el color primario y agregar profundidad y variedad al diseño.
Ejemplos de colores secundarios en aplicaciones móviles populares
Además de un color secundario, es posible que te encuentres con el término color “acento”. Puede considerar los colores de acento como parte de los colores secundarios, que se utilizan para resaltar acciones y controles importantes.
Los colores de acento son mejores para:
Controles de selección, como controles deslizantes e interruptores. Resaltado del texto seleccionado. Barras de progreso. Enlaces y titulares.
Para encontrar colores secundarios que complementen el color primario, considere usar generadores de combinaciones de colores como Coolors. Por lo general, la aplicación debe tener 1 color primario, 1 a 2 secundarios y 1 a 3 colores de acento.
Ejemplos de colores secundarios y de acento que complementan el color primario.
Colores de relleno
En iOS, los colores de relleno se utilizan para los elementos de la interfaz de usuario, lo que permite que se muestre el color de fondo. Los colores de relleno comparten el mismo valor de color, pero con distintos niveles de opacidad para cada variante de color.
Variantes de colores de relleno de iOS:
Color de relleno primario — para formas delgadas y pequeñas, como la pista del control deslizante.Color de relleno secundario — para formas de tamaño mediano, como el fondo de un interruptor.Color de relleno terciario — para formas grandes, como campos de entrada, barras de búsqueda o botones.
Colores de relleno de iOS
Ejemplo de colores de relleno personalizados definidos en Figma
Colores de fondo
iOS define variantes de color para el color de fondo para diferenciar el contenido y los elementos agrupados.
Primario para la vista general, el fondo principal de su aplicación.Secundario para agrupar contenidos o elementos dentro de la vista general.Terciario para agrupar contenidos o elementos dentro de elementos secundarios.
Capas de fondo en iOS: no agrupadas (izquierda) y agrupadas (derecha).
Ejemplo de colores de fondo en una aplicación móvil
Colores de etiqueta
El color de una etiqueta tiene variantes de color primario, secundario, terciario y cuaternario. Dependiendo del nivel de importancia el color tiene su propio nivel de transparencia.
Colores de etiquetaColor de etiqueta principal para resaltar texto o contenido importante que debe mostrarse de forma destacada al usuario. Por ejemplo, puede utilizar colores primarios para títulos y titulares, etiquetas de las páginas en las barras de navegación, etiquetas de campos o control de entrada en formularios.Color de etiqueta secundaria para mostrar subtítulos o información de apoyo. Se puede utilizar una etiqueta secundaria en formularios y campos de entrada para proporcionar contexto o instrucciones adicionales para campos o controles de entrada, y en listas o tablas para mostrar información secundaria y detalles sobre una lista o elementos de tabla.Color de etiqueta terciaria para mostrar texto o contenido aún menos importante, como información complementaria o detalles que no son esenciales para que el usuario comprenda la aplicación.
Ejemplo de colores de etiquetas en aplicación móvil
Colores del separador
Un separador es una línea horizontal delgada que se utiliza para separar visualmente grupos de contenido. A menudo se utilizan en vistas de tabla, vistas de colección y otras partes de la interfaz de usuario para crear una jerarquía visual y ayudar al usuario a comprender la estructura del contenido.
iOS define dos tipos de colores de separador: Separador (con un nivel de transparencia) y Separador opaco (separador normal).
Colores de separador personalizados definidos en Figma
Ejemplo de colores de separador en aplicación móvil
Colores funcionales
Los colores funcionales se utilizan para indicar el estado o estado de un elemento o para proporcionar contexto o un mensaje al usuario.
Pautas para colores funcionales:
Estado de éxito: Verde se utiliza a menudo para indicar un estado de éxito. Esto podría usarse para mostrar que una tarea se completó exitosamente o que un formulario se completó correctamente. Estado de advertencia: Amarillo o naranja se utilizan comúnmente para indicar un estado de advertencia. Esto podría usarse para alertar al usuario sobre un problema potencial o para indicar que aún no se ha completado una acción requerida. Estado de error: Rojo se utiliza a menudo para indicar un estado de error. Esto se puede utilizar para texto o colores de fondo, o para elementos como iconos o botones.
Ejemplo de colores funcionales definidos en Figma.
Ejemplos de colores funcionales en aplicaciones móviles
Manejo del color
Hay muchos complementos de Figma disponibles que pueden ayudar con la gestión del color:
Color Palette Generator genera una paleta de colores basada en un único color que usted proporciona. Color Contrast Checker lo ayuda a garantizar que sus opciones de color cumplan con las pautas de accesibilidad al verificar la relación de contraste entre dos colores. Colorblind Simulator le permite ver sus diseños tal como aparecerían a alguien con un tipo específico de deficiencia en la visión de los colores. Esto puede ayudarle a garantizar que sus diseños sean accesibles para todos los usuarios. Dark Mode Magic le permite generar un tema Oscuro basado en el tema Claro que cree.