El Primer Calendario de Adviento de Xamarin 2019 – Día 2.
Al trabajar con aplicaciones Móviles encontramos que hacer uso correcto de los colores en nuestros proyectos es un deber y responsabilidad de los diseñadores y que aplicar estos a nuestros sistemas solo es copiar y pegar un color más dentro de nuestros diseños XAML, si bien muchos programadores ya hacen uso de Xamarin Resource Dictonaries para poder tener mejor control de cambios sobre Fuentes y colores aun falta entender como organizar estos de manera efectiva.
Primero tenemos que entender lo que es un Patrón de Diseño “Gráfico”,
Los diseñadores al desarrollar materiales para la elaboración de pantallas tienen que generar las Guías que servirán para todo el proyecto:
Guía de Color.- colores usados dentro del proyecto
Guías Tipográficas .- Tipos de Letras, tamaños.
Guía Iconografica .- Símbolos usados para la comunicación general, en diseño móvil.
Material design es una normativa de diseño enfocado en la visualización del sistema operativo Android, además en la web y en cualquier plataforma. Fue desarrollado por Google y anunciado en la conferencia Google I/O celebrada el 25 de junio de 2014. Ampliando la interfaz de tarjetas vista por primera vez en Google Now.
Una ves entendiendo los conceptos bases encontraremos que en Materia Design existe un apartado llamado
Color System “Sistema de color” ver link: uso de colores
El sistema de color Material Design utiliza un enfoque organizado para aplicar color a su IU.
En este sistema, generalmente se selecciona un color primario y uno secundario para representar la Marca de la empresa ejemplo: “rojo y blanco Coca Cola o Azul y Rojo Pepsi” . Las variantes oscuras y claras de cada color se pueden aplicar a su interfaz de usuario de diferentes maneras para lograr un mejor acabado visual.
Nuestra guía de color que nos entregara el diseñador debe tener los siguientes elementos:
Nota: si el diseñado no entrega esto en sus prototipos y guías, puede llevarle esta información y ayudarlo a que puedan colaborar de forma conjunta, para definir estos elementos, tengamos en cuenta que no todos los diseñadores están preparados en estos temas, al igual que hay programadores que no tenemos conocimientos de diseño.
Primary: Color de marca y es usado normalemente en barras de navegación y como color de fondo pantalla completa en dashboard y algunas secciones.
Primary Variant: Color Primario Variante sirven como apoyos tonales para estar junto al color primario.
Secondary : Color secundario de marca y es usado como color alternativo al primario en alguna sección
Secondary Variant : Color Secundario Variante sirvo como apoyo al color secundario y es un color para complementar la pantalla.
Nota: ver como cada color tiene una variante “Variant” si el proyecto requiere más colores puede el diseñador usar Tertiary Color , Quaternary Color usando la nomenclatura Cuantitativa, el patrón define 2 pero en casos especiales puede llegar a tener no mas de cuatro.
Backgound : color de fondo que se usara en toda la aplicación.
Surface : color de superficie en algunas secciones tendremos un color para resaltar contra el fondo
Error: error color es usado para todas las alertas dentro del sistema
Nota: en esta parte se menciona Contraste, este es un color opuesto al mencionado ejemplo “negro el color de contraste puede ser Blanco”.
On Primary: Color sobre el primario es un color que tiene que ser contraste al color Primario y sirve para cualquier elemento que este dentro de un Color Primario o Primario Variante.
On Secondary: Color sobre el secundario es un color que tiene que ser contraste al color Secundario y sirve para cualquier elemento que este dentro de un Color Secundario o Secundario Variante.
On Background: Color sobre el fondo, es un color que tiene que hacer contraste con el Background.
On Surface: Color sobre superficie es un color que hace contraste con el color de superficie.
OnError: Color de Error es un color que contrasta con el color de Error ejemplo: “color de error rojo, On Error color Blanco”.
Ya tenemos los conocimientos base para aplicar el Material Design Color System quiere decir que podemos tener los elementos para poder generar temas de color en aplicaciones.
Ahora llega el momento de aplicar este conocimiento en el campo practico.
1 . Entramos a Visual Studio y Creamos un proyecto de xamarin forms shell
2.- La nombramos metaldesign y le damos en siguiente
3.- Vemos que nuestro proyecto esta bien y le damos crear
4 Una vez cargado el proyecto abrimos el archivo app.xaml para poder implementar nuestro diseño.
5.- Implementamos nuestro código de Material Design Color System para que nuestra aplicación nos permita usar los colores en toda la aplicación según la reglas de diseño
Con esto tendremos disponibles los colores para usarlos en cualquier XAML y así poder solo aplicar el color que corresponde
6.- Para terminar mostraremos como usarlo con el proyecto de arranque para esto vamos abrir appShell.xaml
7.- Para terminar realizamos los siguientes cambios. en la etiqueta ResourceDictionary :
Como se puede ver lo que estamos haciendo es colocar la variable de color correspondiente a a la sección que queremos aplicar.
con esto ganamos que si hay cambios de color en la app solo tenemos que modificar la variable del static Resource y en automático todas sus referencias quedaran modificadas con lo que es mas fácil mantener los cambios de diseño en la app.
También nos ayuda a que tenemos más control sobre los colores y secciones.
En un próximo post estaremos agregando las fuentes tipográficas del proyecto y continuando como implementar todos los patrones de diseño.
el repositorio de GitHub es https://github.com/jucaripo/Xamarin-Forms-Metal-Design