+
En esta lección:
En la sección anterior vimos qué era Material Design, por qué Google lo había creado y qué beneficios le ha entregado al mundo del diseño de producto.
Además, aprendimos sobre Layout, Grid, medidas, paletas de colores y principios de Material Design.
Material Design incluye una escala de estilos de fuentes para apoyar las necesidades del producto y su contenido.
Es una combinación de 30 estilos que contiene categorías reusables de texto, cada una con un significado y una aplicación particular.
Utilizando Google Fonts, Material Design provee un generador de escalas de fuentes. Cualquier fuente que escojas automáticamente se optimiza basándose en la guía de legibilidad de Material.
Puedes ver más aquí de forma interactiva.
Este ejemplo usa Roboto para toda la aplicación. Aquí puedes ver todas las fuentes que se pueden generar.
Puedes ver que además de las relacionadas a texto y títulos, también hay estilos para botones, captions y overlines.
Captions y overlines son textos que se acomodan para hacer anotaciones por encima o por debajo de otros textos o imágenes.
Overlines:
CUIDADO!
Nunca uses fuentes expresivas o muy elaboradas ni para captions ni para overlines. Al ser muy complejas, no funcionan bien en fuentes pequeñas porque se leen mal. Y además, no se ven bien.
Mira un ejemplo:
Quizás de las cosas más atractivas que ofrece Material Design son sus componentes prediseñados. Los componentes de Material Design obedecen a patrones de uso bastante comunes en todas las aplicaciones actuales.
La ventaja de usar componentes al principio de nuestra carrera como diseñadores de producto es que nos permite mantenernos actualizados con las novedades conforme va pasando el tiempo. Es como si tuviéramos a un equipo de diseñadores estudiando patrones de uso e interacciones humano-ordenador solo para nosotros.
La oferta de componentes de Material Design es enorme. En la página oficial podemos buscar componentes, incluso, por plataforma:
En esta lección, vamos a enfocarnos en elementos que sean reusables para diferentes plataformas y que consideramos fundamentales en cualquier aplicación.
Los botones le permiten a los usuarios tomar decisiones, navegar, enviar o recibir información, con un solo gesto.
Comunican acción y típicamente están en toda la interfaz, usualmente en sitios como:
En su diseño, Material Design se enfoca en tres principios fundamentales. Los botones deben ser:
Los botones pueden ser
Los botones tienen un espaciado singular. Cuando estamos diseñando para soportes pequeños (móviles), ya hemos dicho que un botón contenido debe abarcar todo el ancho de la pantalla, respetando los márgenes con el viewport.
Sin embargo, cuando los botones forman parte de elementos más complejos, trabajaremos con mínimos.
En el caso de los botones contenidos, por ejemplo, usaremos un mínimo padding de 16dps entre el label y los bordes. Así mismo, en el caso de los botones con iconos, utilizaremos un mínimo de 8dps entre el icono y el label del botón.
En un botón los estados son fundamentales. Los estados son representaciones visuales del estado de un componente o elemento interactivo. Cada estado debe ser visualemente similar, pero debe tener claras diferencias para que sea distinguible.
Para un botón, debemos tener los siguientes estados:
Enabled (Activo): Comunica que el elemento es interactivo y que se puede acceder a esta opción
Disabled (Deshabilitado): Comunica que el elemento no es interactivo o que por alguna razón no es una opción posible en determinado momento
Hover: Comunica que el usuario tiene el cursor por encima del elemento interactivo. Lógicamente sólo es posible que un elemento tenga este estado cuando tenemos un periférico que lo soporte (el ratón, usualmente) así que lo usaremos en versiones para escritorio fundamentalmente
Otros estados:
Estos estados preliminares no abarcan todos los estados posibles de un elemento. Adicionalmente, podemos tener los siguientes estados, no sólo de botones, sino de otros componentes de la interfaz:
Seleccionado: Significa que el elemento es una opción seleccionada por el usuario
Activado: Un estado activado (o activo) comunica un destino resaltado, iniciado por el usuario o preseleccionado por el sistema. Es útil tener esto en cuenta, por ejemplo, cuando mostramos tabs
Presionado: Este estado se comunica cuando un usuario hace un tab sobre el elemento. Por ende, funciona en soportes como móviles y tablets donde el usuario interactúa directamente con la pantalla, sin acceso a teclado o ratón
Dragged (arrastrado): Cuando un usuario presiona y arrastra un elemento activa este estado. Puede hacerlo directamente en una pantalla táctil o a través de un ratón o trackpad
Las cards son superficies que muestran contenido y acciones sobre el mismo tópico. Son muy comunes y funcionan para agrupar atributos de un mismo objeto.
El contenedor de un Card es el único elemento requerido. Todos los demás son opcionales. Su alineación puede variar para mostrar los tipos de contenido que ofrece. No es lo mismo una card que tenga, por ejemplo, una imagen, que una card que solo tenga un título y un texto. Puede haber diferente variedad de contenido, pero frecuentemente observaremos algo como esto:
1) Contenedor: El contenedor posee todos los elementos del card (usualmente usaremos un Frame en Figma). Su tamaño está determinado por los elementos que contiene. En Material Design podemos otorgarle elevación (utilizando sombras), así como también darle bordes redondeados y colores de fondo.
2) Thumbnail: Usualmente utilizamos este elemento cuando necesitamos mostrar avatares, logos o iconos relativos al contenido del card
3) Header (Cabecero): Es el nombre del objeto
4) Subhead: El texto que va por debajo incluye más información sobre el elemento, el contenido puede ser tan variado como una descripción, una localidad, el subtítulo de un artículo o un número o dato
5) Media: Las cards pueden mostrar una variedad de tipos de media, pueden ser fotos, gráficos, iconos, ilustraciones o hasta vídeos o gifs
6) Texto de soporte: Usualmente es un resumen o descripción del elemento. La información más relevante del objeto
7) Botones: Los botones, así como en el resto de la interfaz, son elementos interactivos que ofrecen acciones al usuario
8) Iconos: Igualmente, los cards pueden mostrar iconos para ofrecer acciones al usuario
Los chips son elementos compactos que representan un atributo, acción o aporte de información.
Son increíblemente flexibles y permiten al usuario insertar información, seleccionar, filtrar contenido o iniciar acciones.
A diferencia de los botones, deben ser dinámicas y son un grupo de múltiples elementos interactivos.
Las chips deben ser:
1) Input Chip: Representan información utilizadas en campos, atributos de una entidad
2) Choice Chip: Son chips de decisión. Sirven para resolver la circunstancia en la que tenemos al menos dos o tres opciones y cada chip representa una selección
3) Filter Chip: Representan filtros para una colección. Son muy útiles para generar filtros de varias dimensiones
4) Action Chip: Ejecutan acciones relacionadas con el contenido
1. Contenedor: Contiene todos los elementos del chip y su ancho está determinado por esos elementos. El contenedor puede tener un relleno, un borde
2. Thumbnail: Identifica entidades. Puede ser un avatar, un logo o un icono. Para los chips de acciones siempre es un icono relacionado con la acción que genera su uso
3. Text: Puede ser el nombre de la entidad, la descripción, el tag, la acción o incluso puede ser conversacional
4. Remove Icon: Es un elemento fundamental en input chips, en el caso de que el usuario quiera borrar la información. También es necesario en chips de filtrado, para poder eliminar un filtro en una búsqueda. Donde no aplica es en el caso de los chips de acciones
A continuación puedes ver los estados más comunes que puede tener un chip de input.
Como puedes ver, se pueden generar estados sin necesidad de aplicar color. utilizando sombras (elevaciones), gradientes y elementos como iconos (en el caso del check) y cursores.
CUIDADO!
Nunca uses chips para presentar una sola opción:
Son también uno de los elementos más usados en la interfaz de usuario. Nos importan mucho porque permiten a los usuarios insertar texto. Aparecen en formularios y diálogos usualmente.
Los campos de texto deben ser:
En Material Design, los campos de texto vienen en dos tipos:
Ambos tipos usan un contenedor para proveer interacción, haciendo que los campos sean detectables
Ambos poseen la misma funcionalidad, el tipo de campo de texto que escojas depende solo del estilo. Sólo asegurate de ser consistente y utiliza un solo tipo.
Elige uno que:
La misma interfaz de registro para un móvil con ambos estilos de text field
En esta sección hemos intentado observar varios de los componentes más comunes de Material Design. Son muchísimos, son muy utilizados y obedecen a patrones muy comunes. Aprende más indagando en la página oficial de Material Design para que veas todo lo que hay disponible.