HackMD+
Material Design 2
Learning Goals
En esta lección:
- Aprenderás cómo manejan las fuentes en Material Design
- Verás componentes de Material Design
¿Dónde nos quedamos?
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.
El sistema de tipografía en 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.
Generador de Estilos
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.
Ejemplo de escala de tipos
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.
Ejemplo de un Caption en una imagen
Overlines:
Ejemplo de un overline por encima del título de un artículo
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:
Componentes de Material Design
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.
Botones
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:
- Diálogos
- Formularios
- Modales
- Cards (tarjetas)
- Barras de herramientas
Principios:
En su diseño, Material Design se enfoca en tres principios fundamentales. Los botones deben ser:
- Identificables
Los botones deben indicar qué acción disparan - Encontrables
Los botones deben ser fáciles de encontrar entre elementos, incluso, deben ser diferenciables de otros botones - Claros
La acción de un botón y su estado (si está deshabilitado, activo, en foco) debe estar claro
Tipos de Botones
Los botones pueden ser
- Botones de Texto: tienen poco énfasis y se usan generalmente para acciones menos importantes o secundarias
- Botones con Borde: Tienen más carga visual, por lo tanto más énfasis que los botones de texto. Quedan muy bien como acciones secundarias a CTA, por ejemplo
- Botones Contenidos: tienen alto énfasis, porque tienen relleno e, incluso, sombra. Son idóneos para CTA, por ejemplo
- Botones Toggle: son agrupaciones de botones. Agrupan un set de acciones que son excluyentes y, además, están relacionadas (como por ejemplo, la alineación de texto en una herramienta de estilo)
Espaciado
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.
:information_source: Importante: Algunas veces estaremos diseñando interfaces para gente que tiene problemas de accesibilidad. Cuando este es el caso, podemos tomar una decisión un poco más arriesgada, asignar 24dps de padding horizontal entre el contenido del botón y su borde. Esto otorga dos beneficios importantes:
- Mayor superficie de interacción (para usuarios con problemas motores, por ejemplo)
- Mayor contraste entre el texto del botón y su contexto
Estados de un 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
4) Focused (en foco): Comunica que el usuario ha resaltado o seleccionado el elemento del botón. Para poder activar este estado, el usuario debe utilizar el teclado o activarlo a través de la voz. Usualmente accedemos a este estado cuando a través del teclado navegamos con tabulador hasta seleccionar el elemento.
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
Cards (Tarjetas)
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.
Principios:
Según Material Design, las cards deben estar:
- Contenidas: Identificables como una unidad sola y contenida
- Independientes: Una card no debe depender de ningún elemento de su alrededor para existir, ni debe requerir ningún contexto para que se entienda
- Individual: Una card no se puede juntar con otra card o dividirse en más cards. Su contenido no debe poder categorizarse con el contenido de otros elementos
Anatomía de una Card
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
Chips
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.
Principios:
Las chips deben ser:
- Compactas: Son componentes compactos que representan información discreta, esto es, información que solo puede tomar ciertos valores particulares (a diferencia de un input de texto libre, por ejemplo)
- Relevantes: Deben tener una relación útil y clara con respecto a la tarea o el contenido que representan
- Focused: Deben hacer las tareas más fáciles de completar y el contenido más fácil de ordenar
Tipos de Chips
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
Anatomía de un Chip
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
Estados de un Chip
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:
Text Fields (Campos de Texto)
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.
Principios
Los campos de texto deben ser:
- Descubribles: Deben indicar al usuario su uso (insertar información) y deben resaltar
- Claros: Deben diferenciarse claramente unos de otros y es muy importante que muestren claramente la información que debe ir allí
- Eficientes: Deben hacerle al usuario fácil la tarea de entender la información que se pide y debe mostrar claramente cualquier error
Tipos de Campos de Texto
En Material Design, los campos de texto vienen en dos tipos:
- Campos de texto rellenos
- Campos de textos bordeados
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:
- Sea compatible con el estilo visual de tu aplicación
- Se acomode a los objetivos de tu interfaz de usuario
- Se diferencie de otros componentes y el contenido que lo rodea
La misma interfaz de registro para un móvil con ambos estilos de text field
Muchos más
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.
Resumen
- Material Design incluye una escala de estilos de fuentes para apoyar las necesidades del producto y su contenido
- 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
- Captions y overlines son textos que se acomodan para hacer anotaciones por encima o por debajo de otros textos o imágenes
- Los botones le permiten a los usuarios tomar decisiones, navegar, enviar o recibir información, con un solo gesto
- Las cards son superficies que muestran contenido y acciones sobre el mismo tópico
- Los chips son elementos compactos que representan un atributo, acción o aporte de información.
- Los campos de texto permiten a los usuarios insertar texto. Aparecen en formularios y diálogos usualmente.
- Hay muchos componentes más disponibles en
