Historial de página
Subdirección de las Tecnologías de la Información y Comunicaciones
Área de Gobernanza y Calidad
| Table Excerpt Include | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Versión
| Table Excerpt Include | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Tabla de Contenido
| Tabla de contenidos | ||||||
|---|---|---|---|---|---|---|
|
Cumplimiento Normativo
| Advertencia |
|---|
Las normas expuestas son de obligado cumplimiento. La STIC podrá estudiar los casos excepcionales los cuales serán gestionados a través de los responsables del proyecto correspondiente y autorizados por el Área de Gobernanza de la STIC. Asimismo cualquier aspecto no recogido en estas normas deberá regirse en primera instancia por las guías técnicas correspondientes al esquema nacional de seguridad y esquema nacional de interoperabilidad según correspondencia y en su defecto a los marcos normativos y de desarrollo software establecidos por la Junta de Andalucía, debiendo ser puesto de manifiesto ante la STIC. La STIC se reserva el derecho a la modificación de la norma sin previo aviso, tras lo cual, notificará del cambio a los actores implicados para su adopción inmediata según la planificación de cada proyecto. En el caso de que algún actor considere conveniente y/o necesario el incumplimiento de alguna de las normas y/o recomendaciones, deberá aportar previamente la correspondiente justificación fehaciente documentada de la solución alternativa propuesta, así como toda aquella documentación que le sea requerida por la STIC para proceder a su validación técnica. Contacto Arquitectura: l-arquitectura.stic@juntadeandalucia.es |
Histórico de cambios
Los cambios en la normativa vendrán acompañados de un registro de las modificaciones. De este modo se podrá realizar un seguimiento y consultar su evolución. Ordenándose de mas recientes a menos recientes, prestando especial cuidado a las cabeceras de la tablas dónde se indican las fechas de entrada en vigor y versión.
| Expandir | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||
|
1. Definición
Alcance | Esta definición en ningún momento le indica que colores utilizar o cómo definir la identidad corporativa de su solución para la interfaz de usuario, sin embargo sí que define una serie de pautas mínimas a cumplir encaminadas a conseguir interfaces de usuario que puedan llegar a proporcionar experiencias de usuario ordenadas y homogéneas. |
El color es la base de la llamada de atención en la interfaz de usuario, su equilibrio y uso homogéneo colaboran en la percepción de la experiencia de usuario. Por este motivo se definen una serie de pautas a tener en cuenta en la definición y manejo del color de obligado cumplimiento en el desarrollo de su solución.
Los principios en que se basa este sistema de color serán:
- Jerárquico: El color debe indicar claramente qué elementos son interactivos, cómo se relacionan unos elementos con otros, y, sobre todo, su nivel de importancia dentro de la vista.
- Legible: Los textos y otros elementos importantes, como los iconos, deben cumplir en todo momento los estándares de legibilidad y accesibilidad cuando se sitúen sobre fondo con color.
- Expresivo: El color debe ser utilizado para expresar identidad y su utilización en los momentos o interacciones más importantes de la vista refuerzan dicha idea.
2. Conceptos clave
Modo de color
Se elige por parte de la STIC el modelo de color HSL:
El modelo HSL(del inglés Hue, Saturation, Lightness – Matiz, Saturación, Luminosidad), también llamado HSI (del inglés Hue, Saturation, Intensity – Matiz, Saturación, Intensidad), define un modelo de color en términos de sus componentes constituyentes. El modelo HSL se representa gráficamente como un cono doble o un doble hexágono. Los dos vértices en el modelo HSL se corresponden con el blanco y el negro, el ángulo se corresponde con el matiz, la distancia al eje con la saturación y la distancia al eje blanco-negro se corresponde a la luminancia. Como los modelos HSI y el HSV, es una deformación no lineal del espacio de color RGB.
Más información sobre el modelo de color HSL AQUÍ.
Este modelo de color se escoge sobre otros modelos existentes (por ejemplo HEX o RGBA) ya que necesitamos representaciones opacas 100% de los colores sin usar la transparencia, de modo que HEX ni siquiera permite usarla y RGBA si que lo permite pero si el componente se encuentra sobre otra superficie (por ejemplo, un botón en un modal) y ambos tienen colores de superficie, el color del elemento superpuesto (botón) al usar transparencia, se difumina con el color de fondo (modal), obteniéndose un color que no es el deseado para el componente que se encuentra superpuesto.
Con el modelo HSL podemos obtener esta gama de difuminados sobre un color base simplemente cambiando el ultimo valor de la terna, de modo que, si tomamos como base, por ejemplo, hsl(220, 100%, X), tenemos el siguiente espectro de colores sólidos simplemente modificando la luminosidad (no se tiene en cuenta el 0% y el 100% ya que seria los colores negro y blanco):
Tipos de color
Color Primario
- El color primario será el color más identitario en su aplicación y los componentes que forman la misma.
- Identifica claramente los elementos interactivos, cómo de relativos son dichos elementos respecto a otros y la predominancia de elementos frente a otros.
Color Secundario
- El color secundario, provee más formas de acentuar y distinguir su solución.
- Contrastando con el color primario, que forma la base, el color secundario será utilizado para enfatizar ciertos controles o partes de la interfaz de usuario que sean de interés para el flujo de la misma.
Variantes
- Tanto el color primario como el secundario pueden presentar variantes adicionales con el objetivo de conformar una SSUI más atractiva al usuario final.
Color de fondo
- El color de fondo no representa en ningún caso identidad en la interfaz de usuario, es el utilizado como fondo para contenidos que se pueden desplazar haciendo scroll.
Color de superficie
- El color de superficie es el utilizado en superficies que se encuentran dispuestas sobre el fondo, habitualmente dichas superficies constriñen las fronteras de los componentes. Es habitual hacer uso de los colores primarios o secundarios en dichas superficies para reforzar la identidad de la interfaz de usuario.
Color de error
- El color de error se usa para indicar un error en el componente, de modo que el color de superficie cambia y se adopta este color de error.
Color en tipografías e iconografías
- Las tipografías son elementos básicos y especiales dentro de la interfaz de usuario, consecuentemente la gestión del color es sencilla pero básica. A este respecto se distingue un subconjunto de colores que son aplicables a las tipografías debido a las necesidades de contraste de las mismas sobre los colores primario, secundario, de superficie, de fondo o de error.
- Estos colores también son llamados "On Colors", ya que suelen ser usados para textos e iconos que aparecen sobre los distintos elementos de nuestra aplicación. Por defecto suelen ser el negro (#000000) y el blanco (#FFFFFF), pero dependiendo de los colores primarios y secundarios, y de los otros colores de la UI, se podrá modificar levemente sus valores siempre teniendo en cuenta que se cumplan los criterios de accesibilidad y visibilidad de ellos.
3. Definición del color
El desarrollo de componentes basado en los componentes de Material Components Web aconseja el uso del modo de color HSL:
4. Aplicación del color
El mecanismo de aplicación del color se encuentra provisto por la definición de un conjunto de variables fijo (theming) que tendrán los valores que su diseño del SSUI haya contemplado y por otro lado la exposición por parte de su SSUI de un conjunto de variables que pueden ser sobrescritas para hacer su componente componente customizable externamente.
Para definir los valores fijos de su theme, se definirán temas desde el nivel de frontera anterior hacia afuera, mientras que la definición de variables customizables se efectúa en la frontera interior de su SSUI y se exponen desde la frontera anterior hacia el exterior.
A continuación se listan el conjunto de pautas y reglas a tener en cuenta para integrar su SSUI en el mecanismo de theming.
Tenga en cuenta... | Los ítems marcados con * son obligatorios, por lo tanto su definición del theming debe contemplar valores para dicha implementación obligatoriamente. | ||
La nomenclatura general de las variables en caso de customización será la siguiente:
Recordando que <área_de_negocio> se sustituirá por las siguientes letras dependiendo del ámbito de negocio en el que se encuentre:
|
--theme-color-primary*
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P2 | --theme-color-primary | Theming | Cuando necesita resaltar superficies interactivas imprimiendo carácter de la identidad en su solución. | Solo se admitirá un único color primario para su solución. | Storybook |
Reglas de asignación de valor
P2.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P2.R2 | Fallback | Cada ámbito puede definir un valor concreto para la variable del tema, siendo el valor de fallback en dicho ámbito el de la variable en el ámbito inmediatamente superior |
| P2.R3 | Valores permitidos | Para indicar la luminiscencia solamente podremos usar las variables definidas aquí (Sección color). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-color-secondary
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P3 | --theme-color-secondary | Theming | Cuando necesita distinguir superficies interactivas imprimiendo carácter de la identidad en su solución. | Solo se admitirá un único color secundario para su solución. | Storybook |
Reglas de asignación de valor
P3.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P3.R2 | Fallback | Cada ámbito puede definir un valor concreto para la variable del tema, siendo el valor de fallback en dicho ámbito el de la variable en el ámbito inmediatamente superior |
| P3.R3 | Valores permitidos | Para indicar la luminiscencia solamente podremos usar las variables definidas aquí (Sección color). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-color-primary-<variant>
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P4 | --theme-color-primary-<variant> | Theming | Cuando necesita generar un énfasis alineado con la identidad aplicada a su solución en superficies interactivas. | La solución de theming sólo soporta un color variante primario para el SSUI | Storybook |
Reglas de asignación de valor
P4.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P4.R2 | Fallback | Cada ámbito puede definir un valor concreto para la variable del tema, siendo el valor de fallback en dicho ámbito el de la variable en el ámbito inmediatamente superior |
| P4.R3 | Valores permitidos | Para indicar la luminiscencia solamente podremos usar las variables definidas aquí (Sección color). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-color-secondary-<variant>
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P5 | --theme-color-secondary-<variant> | Theming | Cuando necesita generar un énfasis alineado con la identidad aplicada a su solución en superficies interactivas. | La solución de theming sólo soporta un color variante secundario para el SSUI | Storybook |
Reglas de asignación de valor
P5.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P5.R2 | Fallback | Cada ámbito puede definir un valor concreto para la variable del tema, siendo el valor de fallback en dicho ámbito el de la variable en el ámbito inmediatamente superior |
| P5.R3 | Valores permitidos | Para indicar la luminiscencia solamente podremos usar las variables definidas aquí (Sección color). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-color-background*
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P6 | --theme-color-background | Theming | Su utilización aplica en establecer contraste entre el fondo de la aplicación y los distintos componentes, que se sitúan por encima de este en la UI. | Su definición es obligatoria a nivel de theming. | Storybook |
Reglas de asignación de valor
P6.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P6.R2 | Fallback | Cada ámbito puede definir un valor concreto para la variable del tema, siendo el valor de fallback en dicho ámbito el de la variable en el ámbito inmediatamente superior |
| P6.R3 | Valores permitidos | Para indicar la luminiscencia solamente podremos usar las variables definidas aquí (Sección color). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-color-surface*
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P7 | --theme-color-surface | Theming | Resaltar la superficie de los componentes por encima del fondo de la aplicación. Es importante tener claro que se trata de superficies no interactivas en el componente. | Su definición es obligatoria a nivel de theming. | Storybook |
Reglas de asignación de valor
P7.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P7.R2 | Fallback | Cada ámbito puede definir un valor concreto para la variable del tema, siendo el valor de fallback en dicho ámbito el de la variable en el ámbito inmediatamente superior |
| P7.R3 | Valores permitidos | Para indicar la luminiscencia solamente podremos usar las variables definidas aquí (Sección color). |
| Advertenciaexpand | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-color-error*
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P8 | --theme-color-error | Theming | Se utiliza para dotar a una superficie de un color que indica que su SSUI está en situación de error. | Su definición es obligatoria a nivel de theming. | Storybook |
Reglas de asignación de valor
P8.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P8.R2 | Fallback | Cada ámbito puede definir un valor concreto para la variable del tema, siendo el valor de fallback en dicho ámbito el de la variable en el ámbito inmediatamente superior |
| P8.R3 | Valores permitidos | Para indicar la luminiscencia solamente podremos usar las variables definidas aquí (Sección color). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-color-on-primary*
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P9 | --theme-color-on-primary | Theming | Se utiliza sobre el texto o iconografía de su SSUI cuando una superficie interactiva está coloreada con --theme-color-primary o --theme-color-primary-variant. |
| Storybook |
Reglas de asignación de valor
P9.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P9.R2 | Fallback | Cada ámbito puede definir un valor concreto para la variable del tema, siendo el valor de fallback en dicho ámbito el de la variable en el ámbito inmediatamente superior |
| P9.R3 | Valores permitidos | Para indicar la luminiscencia solamente podremos usar las variables definidas aquí (Sección color). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-color-on-secondary
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P10 | --theme-color-on-secondary | Theming | Se utiliza sobre el texto o iconografía de su SSUI cuando una superficie interactiva está coloreada con --theme-color-on-secondary o --theme-color-on-secondary-variant | Su aplicación se restringe a superficies interactivas coloreadas con con --theme-color-on-secondary o --theme-color-on-secondary-variant | Storybook |
Reglas de asignación de valor
P10.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P10.R2 | Fallback | Cada ámbito puede definir un valor concreto para la variable del tema, siendo el valor de fallback en dicho ámbito el de la variable en el ámbito inmediatamente superior |
| P10.R3 | Valores permitidos | Para indicar la luminiscencia solamente podremos usar las variables definidas aquí (Sección color). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-color-on-primary-<variant>
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P11 | --theme-color-on-primary-<variant> | Theming | Se utiliza sobre el texto o iconografía de su SSUI cuando una superficie interactiva está coloreada con --theme-color-on-primary-<variant> | Su aplicación se restringe a superficies interactivas coloreadas con --theme-color-on-primary-<variant> | Storybook |
Reglas de asignación de valor
P11.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P11.R2 | Fallback | Cada ámbito puede definir un valor concreto para la variable del tema, siendo el valor de fallback en dicho ámbito el de la variable en el ámbito inmediatamente superior |
| P11.R3 | Valores permitidos | Para indicar la luminiscencia solamente podremos usar las variables definidas aquí (Sección color). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-color-on-secondary-<variant>
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P12 | --theme-color-on-secondary-<variant> | Theming | Se utiliza sobre el texto o iconografía de su SSUI cuando una superficie interactiva está coloreada con --theme-color-on-secondary-<variant> | Su aplicación se restringe a superficies interactivas coloreadas con --theme-color-on-secondary-<variant> | Storybook |
Reglas de asignación de valor
P12.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P12.R2 | Fallback | Cada ámbito puede definir un valor concreto para la variable del tema, siendo el valor de fallback en dicho ámbito el de la variable en el ámbito inmediatamente superior |
| P12.R3 | Valores permitidos | Para indicar la luminiscencia solamente podremos usar las variables definidas aquí (Sección color). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-color-on-background*
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P13 | --theme-color-on-background | Theming | Se utiliza sobre el texto o iconografía de su SSUI cuando una superficie coloreada con el color de background. |
| Storybook |
Reglas de asignación de valor
P13.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P13.R2 | Fallback | Cada ámbito puede definir un valor concreto para la variable del tema, siendo el valor de fallback en dicho ámbito el de la variable en el ámbito inmediatamente superior |
| P13.R3 | Valores permitidos | Para indicar la luminiscencia solamente podremos usar las variables definidas aquí (Sección color). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-color-on-surface*
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P14 | --theme-color-on-surface | Theming | Se utiliza sobre el texto o iconografía de su SSUI cuando una superficie coloreada con el color de superficie. |
| Storybook |
Reglas de asignación de valor
P14.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P14.R2 | Fallback | Cada ámbito puede definir un valor concreto para la variable del tema, siendo el valor de fallback en dicho ámbito el de la variable en el ámbito inmediatamente superior |
| P14.R3 | Valores permitidos | Para indicar la luminiscencia solamente podremos usar las variables definidas aquí (Sección color). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-color-on-error*
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P15 | --theme-color-on-error | Theming | Se utiliza sobre el texto o iconografía de su SSUI cuando una superficie coloreada con el color de error |
| Storybook |
Reglas de asignación de valor
P15.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P15.R2 | Fallback | Cada ámbito puede definir un valor concreto para la variable del tema, siendo el valor de fallback en dicho ámbito el de la variable en el ámbito inmediatamente superior |
| P15.R3 | Valores permitidos | Para indicar la luminiscencia solamente podremos usar las variables definidas aquí (Sección color). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
Vista general
Herramientas de contenido
- Impreso por Atlassian Confluence 8.7.2