Introducción a material design (3 de 4)

Hojas de botones

Son una hoja de papel que se desliza hacia arriba desde el fondo de la pantalla .
Para tres o más acciones, puestas como lista o rejilla.
Pueden tener subtítulos o separadores.
Oscurecen el contenido que cubren para informar su característica modal.
Si cubren toda la pantalla, necesitarán un botón para quitarla.

Botones

Se proporcionan tres tipos de botones principales:

Botón de acción flotante. Botón circular hecho de papel
que se eleva y emite tinta como reacción a la presión.
Botón elevado, típicamente rectangular, hecho de papel
que se eleva y emite tinta como reacción a la presión.
Botón plano, hecho de tinta y que emite tinta como reacción pero no se eleva.

Botones principales

Para cada botón:

¿es lo suficientemente importante para ser un botón de acción flotante?
después, selecciona si elevado o plano dependiendo del contenedor y cuantas capas tienen el eje Z. No debe abusarse del número de capas.
finalmente, mira a tu layout. Solo debe haber un botón primario por contenedor. Mezcla tipos de botones solo cuando tengas una buena razón como enfatizar una función.

Botones en diálogos

Usa principalmente botones de tinta, para evitar demasiadas capas.

Botones en línea

Selecciónalos elevados o planos según el layout. Asegura padding suficiente sobre los botones planos para que el usuario pueda encontrarlos fácilmente.

Botones de pie persistentes

Para acciones importantes pero que no se quiera promocionar tanto.

Nunca uses botones elevados con areas de botones persistentes.

Agregando una barra divisoria, un area persistente también puede usarse para diálogos con scroll.

Botones de acción flotantes

Son un tipo especial de acción promocionada. Son un icono circular sobre el UI, y suelen tener un comportamiento especial, con transformaciones y desplazamientos para atraes la atención.

Dos tamaños: normal y mini. El tamaño mini sólo debe usar para crear continuidad visual con otros elementos en la pantalla.

Botones elevados

Usados para enfatizar funciones que de otra manera se perderían en un espacio ancho o muy ocupado. Añaden dimensión a un layout plano.

Bien Mal

Botones planos

Usa botones planos en contextos como barras de herramientas, diálogos y popovers para evitar capas de papel innecesarias.

Title

Bien Mal

Estados de los botones

Los botones elevados actúan como una pieza de papel sobre otra hoja, se elevan y colorean al presionarse.

Los botones planos permanecen en la hoja y se llenan de color al presionarse.

La tinta viaja entre botones al captar el fonco. El estado de foco es un intermedio entre el normal y el presionado.

Cuando se representan en mocks, usa anillos gráficos para representar la animación. Los estados de foco están siempre animados.

Otros botones: iconos

Botones desplegables

Un botón desplegable/pulldown es un botón que controla el estado de un valor, con dos o más estados. Presenta el estado actual con un icono de flecha. El menu que aparece puede ser muy diverso.

Desplegables en desktop

Tarjetas

Una tarjeta/card es un trozo de papel que contiene un conjunto único de datos relacionados y heterogéneos, como por ejemplo, una foto, texto y un enlace sobre un asunto.
Suelen ser el punto de entrada a información más detallada y/o compleja.
Tienen ancho constante y altura variable.
La altura máxima se fija por lo que puede entrar en una vista única de una plataforma, pero puede expandirse temporalmente.
Las tarjetas no se giran para mostrar información en su espalda.

Uso

Son convenientes cuando hay que mostrar contenido de diferentes tipos. También cuando son objetos similares cuyo tamaño o acciones pueden variar considerablemente, como fotos con textos de diferente longitud.

Una colección de tarjetas es un layout de tarjetas en el mismo plano.

Cada tarjeta tiene un conjunto distinto: checklist con acciones, nota con acción, nota con foto...

Usa un layout de tarjetas cuando:

La colección es de elementos heterogéneos
No requiere comparación directa
Incluye contenido de longitud variable
Tiene contenido rico o interacción, como slider, comentarios, +1, ...
Podría ser una lista, pero necesita más
de tres líneas de texto
Podría ser una cuadrícula, pero necesita
más texto para apoyar a la imagen

Bien Mal

Bien Mal

Bien Mal

Guías de layout

Contenido

El tipo y cantidad de contenido puede variar muchísimo. Las tarjetas proporcionan el contexto y el punto de entrada a información más detallada y nuevas vistas; asegúrate de no sobrecargar las tarjetas con información o acciones excesivas.

El contenido principal debe estar en la parte superior de la tarjeta. Utiliza la jerarquía para dirigir la atención de los usuarios a la información más importante de la tarjeta.

Acciones

La acción principal suele ser la tarjeta misma.

Las acciones suplementarias pueden variar entre tarjetas en función el tipo de contenido y del resultado esperado, por ejemplo, abrir un libro o ver una película.

Las acciones suplementarias de una tarjeta suelen representarse con iconos, texto o controles de interfaz, normalmente en el pie de la tarjeta.

Los controles de interfaz pueden modificar la vista del contenido. Limita el número de acciones a dos más un menú desplegable adicional.

El menú desplegable (opcional) suele posicionarse en la esquina superior derecha, pero puede estar en la posición inferior derecha si mejora la disposición del contenido y la legibilidad.

Los enlaces en línea con el texto están desaconsejados.

Ten en cuenta que la tarjeta es el punto de entrada a información más compleja y detallada, por lo que puedes delegar a ese punto muchas acciones para no sobrecargar.

Comportamiento

Puede soportarse el gesto de mover tarjetas. Hay que decidir si es importante mover las tarjetas o ordenarlos de forma programática.

Las colecciones deben hacer scroll solo de forma vertical. Si el contenido de una tarjeta excede el máximo de altura, se debe truncar y no hacer scroll dentro.

Las tarjetas con contenido truncado pueden expandirse, en cuyo caso pueden exceder una altura mayor al de la vista. En este caso, la tarjeta hace scroll con la colección.

Para interfaces que dependan de un foco para la navegación, las tarjetas individuales solo deben tener una acción principal o deben abrir una nueva vista con la acción principal y otras suplementarias.

Chips

Los chips son bloques pequeños que representan una entidad compleja, como un calendario o un contacto. Pueden contener una foto, un título corto (truncado si es necesario) y algún tipo de información de la entidad.

Los chips son fácilmente manipulables con drag and drop. Presionándolos pueden invocar una entidad completa o invocar un menú de opciones relacionado con la entidad.

Las animaciones deben redimensionar el papel del chip.

Chips de contacto

Diálogos

Los diálogos solicitan al usuario información adicional o que tome una decisión para completar una tarea. Pueden ser decisiones sencillas del tipo OK/Cancel o más complicadas, donde se gestionen configuraciones o se introduzca texto.

Uso

Usados tipicamente para pedir una decisión importante para continuar o como parte de una tarea o proceso. Las operacioens complejas pueden no ser apropiadas para diálogos.

Pueden contener título, contenido y acciones

Si el texto de la acción es largo, se pueden apilar las acciones.

Contenido

El contenido puede variar mucho pero debe estar fuertemente relacionado.

Acciones

Las acciones tienen que ser limitadas, normalmente afirmativas o para hacer descartar el diálogo.

Las acciones afirmativas se ponen a la derecha para continuar con el proceso (pueden ser afirmativas y destructivas como borrar o eliminar). Las acciones de descarte estarán a la izquierda y devolverán al usuario al punto de origen.

Las acciones pueden tener textos como Cancelar/OK o verbos o frases más específicas.

Scrolling

Es mejor que no haya scroll. Esto puede ser señal de que se necesita otro tipo de contenedor o presentación, pero si lo hace, debe quedar claro por el corte del texto o elementos de UI.

Gestos

Por norma general, tocar fuera del diálogo lo hace desaparecer.

Divisores

Los divisores agrupan y separan el contenido de listas y layouts de páginas utilizando distinciones visuales y espaciales fuertes. A la vez, deben ser ligeros para no distraer del contenido.

Pueden ser completos o en linea.

Si hay subcabeceras, deben ponerse por encima.

No siempre son necesarios

Cuadrículas

Una lista en cuadrícula se usa para presentar datos de tipo homogéneo, típicamente imágenes, y está optimizada para comprensión visual y diferenciar entre tipos de datos parecidos.

Una cuadrícula es un continuo teselado, con una subdivision regular en celdas.

Las celdas están dispuestas horizontal y verticalmente en la cuadrícula. Las teselas tienen el contenido y pueden ocupar una o más celdas, horizontal o verticalmente.

Recuerda:

Utiliza listas si quieres mejorar la compresión lectora
Utiliza tarjetas cuando tienes tipos distintos
con formatos heterogéneos.

Contenido

La tesela suele tener contenido primario y secundario. El contenido primario suele ser el elemento principal y diferenciador, como una imagen. El contenido secundario puede ser una acción o texto.

Proporciona un imagen por defecto para las teselas que no tengan imagen para el contenido primario.

Acciones

Las acciones en el contenido primario o secundario (como play, zoom, borrar o seleccionar) suelen ser inmediatas y no el resultado de un submenú de opciones. Las acciones pueden abrir una vista como una tarjeta o tarjeta flotante.

Acciones primarias: Afectan a toda la tesela y no se representan por icono o texto y son consistente en toda la cuadrícula.

Acciones secundarias: representadas con iconos o texto, se posicionan de forma consistente.

Comportamiento

El scroll es típicamente vertical.

El scroll horizontal se desaconseja por interferir
con patrones de lectura.

Cortando las teselas se puede comunicar
la dirección de scroll.

Bien Mal

Los gestos individuales para cada tesela se desaconsejan.

Los contenidos de la cuadrícula pueden ser filtrados u ordenados de forma programática.

El primer elemento se posicióna arriba a la izquierda y el orden continúa de izquierda a derecha y de arriba a bajo.

La cuadrícula no debe transformarse en lista cuando se contraiga el espacio horizontal. Las cuadrículas y las listas son estructuras con objetivos distintos.

Sólo imágenes

Texto e imagen

Texto e icono

Listas

Las listas son idóneas para datos de tipo homogéneo,
o tipos de datos optimizados para lectura,
como imágenes con texto.

Si se necesitan más de tres líneas,
es mejor usar tarjetas. Si el contenido primario

consisten en imágenes es mejor usar cuadrículas.

Contenido

Usa la jerarquía para mejorar la lectura, priorizando la información. Por ejemplo, enfatizando un avatar sobre un texto sobre una fecha u hora.

El contenido más importante debe estar hacia la izquierda, y en la primera línea si hay contenido en varias líneas.

Acciones primarias

Ocupan toda la tesela y por tanto no se representan con iconos, por lo que no se debe presentar con iconos, texto, etc. Esto implica que la acción principal debe ser consistente en toda la lista.

Las acciones suplementarias se representan con iconos, texto secundario, etc. y deben situarse de forma consistente. Intenta evitar el ruido visual suando demasiadas acciones suplementales en cada tesela.

Comportamiento

El scroll debe ser solo vertical.

Las acciones de swipe deben ser consistentes.

Donde sea apropiado, se deben poder mover entre la lista y un objetivo (por ejemplo, un fichero a una carpeta)

Donde sea apropiado, las teselas podrán ser ordenadas.

Una línea de texto

Listas de dos líneas

Tres líneas

Controles de listas

Los controles de listas caen en cuatro categorías:

Estado
Acción primario
Acción secundaria
Información secundaria

El texto de un elemento debe considerarse como parte de la acción primaria.

No posiciones dos iconos o acciones juntas en el elemento de una lista.

Tipo checkbox

Tipo switch

Reordenación

Expandir/colapsar

Controles leave behind (por detrás)

Controles de ver más.

Menús

Un menú es una pieza temporal de papel emitida por un botón, acción, puntero u otro tipo de control con al menos dos elementos.

Los elementos son acciones y opciones discretas que pueden afectar a la aplicación, la vista o el elemento seleccionado dentro de una vista.

Los menú no deben usarse como método primario de navegación de la aplicación.

El menú muestra un conjunto consistente de elementos, activos o no en función del estado de la aplicación.

Elimina los irrelevantes y desactiva aquellos elementos que son importantes pero no se cumplen todas las condiciones.

Reposiciona menus verticalmente y horizontalmente basado en la proximidad de los bordes de pantalla.

El menu puede tener scroll y subopciones en cascada.

Animaciones en un menú

Elementos de menu

Comportamiento

Los menús aparecen por encima de otros elementos de la aplicación. Desaparece al tocar fuera del menu o el botón que lo emitió (si está visible).

Generalmente, seleccionar una opción del menú lo esconde. Una excepción, por ejemplo, es un menú que permita elegir múltiples elementos con checkmarks.

Los menús se posicionan sobre los elementos que lo emiten y no deben duplicar el valor seleccionado.

Bien

Mal

No deben alinearse horizontalmente en función de donde se toca.

Bien

Mal

Progreso y actividad

Los indicadores de progreso pueden indicar un porcentaje de progreso o ser indeterminados, y respecto a su formato, habitualmente son lineales o circulares.

Cargando por fases

Cargando contenido adicional

Expansión de tarjeta

Scroll up para refrescar

Empuja abajo para refrescar

Sliders

Permiten escoger un valor de un rango discreto o continuo. Es interesante para establecer el valor de un nivel que refleje intensidad, como volumen, brillo o saturación.

Valores discretos

Hay que poner marcas para los valores discretos.

Snackbars y toasts

Los snackbars proporcionan feedback ligero sobre una operación en un popup en el fondo de la pantalla en móvil o en la esquina inferior izquierda en desktop. Se coloca sobre todos los otros elementos de la pantalla.

Desaparecen automáticamente al cabo de un rato o después de interacción del usuario, lo que ocurra antes. No bloquean el input de la pantalla y no pueden recibir foco. Solo hay uno en un momento dado.

Bien Mal

Switches

Permiten al usuario seleccionar opciones. Tres tipos: checkboxes, radio buttons y on/off.

Checkboxes

Para seleccionar múltiples opciones de un conjunto.

Si hay muchas opciones on/off en una lista.

Si solo hay una opción on/off, conviene evitar el checkbox y usar un on/off.

Transformando un checkbox de una caja en un checkmark se da la sensación de completar más la acción.

Checkboxes usan animaciones para comunicar el estado de foco y presionado.

Radio button

Para seleccionar una única opción de un conjunto y cuando se quieren mostrar las opciones una junto a otra. Si no, utiliza un pulldown.

On/off

Pestañas

Las pestañas tienen que estar en una fila.
Las pestañas no deben anidarse.
Las pestañas deben tener entre dos y seis elementos.
La pestaña actual tiene que estar resaltada.
Las pestañas tienen que estar cerca
de su contenido para mantener la relación entre ambas.