Material Design Type System en Xamarin Forms.
Este post forma parte del Calendario de Adviento de Xamarin 2019 Día 19.
Un saludo amigos de la comunidad Xamarin, en el post del día 2 de Diciembre deje mi aportación de como usar el Material Design Color System en nuestros proyectos de Xamarin de form y tener los colores bien documentados y poder hacer uso de ellos en todo el proyecto.
En esta mi segunda aportación continuare con otro tema muy importante que es el Manejo de tipografías y como deben ser manejadas en nuestro proyecto basado en las Recomendaciones de Material Design Type System
Cual es la finalidad del Material Design Type System
Usar la tipografía para presentar su diseño y contenido de la manera más clara y eficiente posible.
Cada proyecto Móvil es un reto de diseño. y concepto, para el Diseñador gráfico que no tiene experiencia en el desarrollo de aplicaciones móviles puede que cometa el error de declarar una gran variedad de fuentes tipográficas y de tamaños que hacen un reto complicado su implementación, ya que la formación de la mayoría de los diseñadores proviene del Mundo editorial y no del mundo tecnológico.
Si nosotros vemos la plantilla de Material Design para el adobe XD que se puede descargar de https://www.adobe.com/mx/products/xd/resources.html
encontraremos este panel :
La primera duda que genera la documentación es ¿cuantas fuentes son las ideales para el proyecto?:
La respuesta ideal es de una a no mas de 5 fuentes tipográficas.
Recomendaciones con fuentes tipográficas:
- Cada fuente tipográfica aumenta el tamaño de nuestra aplicación ejemplo la fuente Roboto en su versión regular aumenta en 159k la app “nota la fuente esta ya instalada en Android error incluirla dentro de los resources de Android”
- Usar una fuente tipográfica de fácil lectura para los textos, tipo Arial , Helveticas, etc.
- En el caso de aplicaciones de Marcas incluir la fuente tipográfica de la Marca para su uso en texto publicitario y en títulos “Opcional”.
- Si usamos Iconos como fuentes tipográficas “FontAwesome”, “Material Design Icons” ver de solo usar los archivos con los iconos que realmente usamos ejemplo: fa-solid900.ttf mide 194k
si usamos todo el set de FontAwesome tendremos 400kb de archivos en la app. - Ver que los archivos De Fuentes sean compatibles con dispositivos móviles,
La escala de tipo Material Design incluye una gama de estilos contrastantes que respaldan las necesidades de su producto y su contenido.
La escala de tipos es una combinación de 13 estilos compatibles con el sistema de tipos los cual permite representar armónicamente cualquier texto de manera clara
estas son:
La serie H1 al H6 son los Headers “Titulos sección” y van desde grande a pequeño sirven para enfatizar una sección de la app. el valor Size esta en Pts “Puntos tipográficos” no confundir Puntos con Pixeles.
ya que por ejemplo una letra a 12 pixeles que es el tamaño recomendado para textos es igual a 9 Pts
por lo que se tiene que tener cuidado al poner las unidades de tamaño en Xamarin por ejemplo:
Es fácil caer en el error de declarar FontSize=”Header” en Xamarin Forms y pensar que el header estará con el tamaño adecuado en todo el sistema aquí el ejemplo:
<Label Text=”Texto 96″ FontSize=”96″/>
<Label Text=”Texto Font Header” FontSize=”Header”/>
en Xamarin Android la salida es :
Lo que vemos es que FontSize=”Header” es igual a FontSize=”96″ pero o sorpresa al pasar a IOS o WPF
ver caso IOS:
Aqui vemos que FontSize=”Header” es different a FontSize=”96″ y que su valor real es 17, por lo que no recomiendo usar los valores de FORMS.
ver la siguiente tabla para ver la diferencia en los tamaños de las definiciones por nombre de Xamarin.Forms.
Por lo que la recomendación es crear nuestra definición de material design Type System.
en un resource estatico para todo el desarrollo:
ejemplo de código para las definiciones por tamaño:
Código Aplicado a una pagina
Vista del resultado
Aplicando la escala de tipo
La escala de tipo aparece como texto en los componentes y el diseño general. Los atributos de tipo pueden usar valores personalizados para el tipo de letra, la fuente, el caso, el tamaño y el espacio entre letras.
Titulares
En la escala de tipo, los encabezados abarcan desde un rango de 1 a 6. Los encabezados son el texto más grande en la pantalla, reservado para cortos, importantes …
En la escala de tipo, los encabezados abarcan desde un rango de 1 a 6. Los encabezados son el texto más grande en la pantalla, reservado para texto o números cortos e importantes.
Para los titulares, puede elegir una fuente expresiva, como una pantalla, manuscrita o estilo de guión. Estos diseños de fuentes poco convencionales tienen detalles y complejidad que ayudan a atraer la atención.
Los tipos de letra serif o sans serif funcionan bien para los titulares, especialmente en tamaños más pequeños.
Subtitulos
Los subtítulos son más pequeños que los titulares. Por lo general, están reservados para texto de énfasis medio que es más corto en longitud. Los tipos de letra serif o sans serif funcionan bien para …
Los subtítulos son más pequeños que los titulares. Por lo general, están reservados para texto de énfasis medio que es más corto en longitud. Los tipos de letra serif o sans serif funcionan bien para los subtítulos.
Para los subtítulos, tenga cuidado al usar fuentes expresivas, incluidos los estilos de pantalla, manuscritos y guiones.
Precaución.
Tenga cuidado al usar fuentes expresivas para subtítulos.
Cuerpo
El texto del cuerpo viene en rangos 1-2, y generalmente se usa para escritura de formato largo, ya que funciona bien para tamaños de texto pequeños. Para secciones más largas de …
El texto del cuerpo viene en rangos 1-2, y generalmente se usa para escritura de formato largo, ya que funciona bien para tamaños de texto pequeños. Para secciones más largas de texto, se recomienda un tipo de letra serif o sans serif.
No utilice fuentes expresivas, incluidos los estilos de pantalla, manuscrita y guión para la copia del cuerpo.
No lo hagas.
No utilice fuentes expresivas para el texto del cuerpo.
Subtítulo y overline
Los subtítulos y el texto sobreimpreso (texto con una línea encima) son los tamaños de fuente más pequeños. Se usan con moderación para anotar imágenes o para introducir …
Los subtítulos y el texto sobreimpreso (texto con una línea encima) son los tamaños de fuente más pequeños. Se usan con moderación para anotar imágenes o para introducir un titular.
No utilice fuentes expresivas, incluidos los estilos de pantalla, manuscritas y guiones para subtítulos o líneas generales.
No lo hagas.
No utilice fuentes expresivas para un overline.
Botón
El texto del botón es un llamado a la acción que utiliza diferentes tipos de botones (como texto, botones contorneados y contenidos) y en pestañas, cuadros de diálogo y tarjetas …
El texto del botón es una llamada a la acción que utiliza diferentes tipos de botones (como texto, botones contorneados y contenidos) y en pestañas, cuadros de diálogo y tarjetas.
El texto del botón suele ser todo en mayúsculas sin serifa.
El texto del botón puede ser un caso de oración, sans serif o serif.
Precaución.
Tenga cuidado cuando el texto del botón aparezca distinto del texto no interactivo, como este tipo de letra sans serif superior inferior en un botón.
No utilice fuentes expresivas como texto de botón, incluidos los estilos de pantalla, manuscritos y guiones.
No lo hagas.
No utilice un estilo de visualización para el texto del botón.
Gracias a todos los miembros de la Comunidad de Xamarin en Español por su retroalimentación y aportaciones en este calendario de Adviento de Xamarin.
Como nota final este articulo solo se enfoco en comprender la recomendación y en como usarla algunos podrán decir porque no incluyes la fuente y el color, estos son 2 aspectos que muchos desarrolladores integran y no esta mal este tipo de notación en Xamarin, solo recomiendo simplificar a que es mejor declarar fuentes y colores acordes al número de Fonts que el diseñador especifico y que los colores depende del juego definido en el color System el cual es más simple declararlo según el uso en su componente.
Féliz Navidad y prospero año nuevo, mucho éxito en sus proyectos.