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.

Seguir Patrones de diseño UI .- Los patrones de diseño de la interfaz de usuario son soluciones recurrentes que resuelven problemas de diseño comunes. Los patrones de diseño son puntos de referencia estándar para el diseñador experimentado de interfaz de usuario.

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