Introducción a material design

4 de 4

@gruizdevilla

Patrones

Selección de elementos

La selección múltiple es muy recomendada apra listas y elementos. Sin embargo, esto no es necesario si las acciones válidas solo tienen sentidos para uno solo (como llamar a alguien de una agenda) o si el contexto está dirigido a la manipulación individual.

El "long-press" y el toque con dos dedos se pueden extender con un gesto de arrastre para hacer selección múliple. Los elementos entre el punto de origen y de terminación serían seleccionados. En desktop, un gesto de arrastre iniciado fuera d elos limites de los elementos podría iniciar la selección múltiple.

Una vez realizada la selección se puede alterar de distintas formas:

Tocar un elemento para seleccionar o deselecccionar.
Shift+tocar/click para extener la selección hasta ese elementos más todos los que había entre ese elemento y la selección original.

Selección de texto

Arrastrar la selección inicial para expandir la selección.

Arrastrar los tiradores para expandir o reducir la selección.

Tocar o hacer click de forma repetida dentro de la selección para expandirla (palabra > párrafo > todo)

Accesos directos:

Shift+Left/Right Arrow selección de carácter
Shift+Up/Down Arrow selección de lína
Ctrl/Command+A seleccionar todo

Gestos

Los gestos se dividen en Touch Mechanics (lo que hacen tus dedos en la pantalla) y Touch Activities (los resultados específicos en cada contesto a los gestos en la interfaz). Un gesto puede tener muchos resultados distintos en función del contexto, y una actividad se puede conseguir con distintos gestos.

Touch mechanics

Tocar Toque doble Arrastrar

Ej: seleccionar Ej: zoom Ej: scroll, descartar

Presión larga Presión larga Doble toque

y arrastrar y arrastrar

Ej: seleccionar un elemento Ej: selec. y mover, select mul. Ej: zoom

Pinch open Pinch closed Toque dos dedos

Ej: zoom in Ej: zoom out Ej: zoom out

Arrastrar dos dedos Presión larga Presión larga y dos dos dedos arrastrar dos dedos

Ej: selección múltiple Ej: raro Ej: coger y mover

Doble toque dos dedos Rotar

Ej: zoom out Ej: rotar contenido

Actividades

Resultado de los gestos en el interfaz:

Tap, activar un elemento, como un botón: tocar.
Cancelar o escapar: tocar.
Encender, apagar luces: tocar
Arrastrar: arrastrar.
Seleccionar datos (de nuevas): toque largo o doble toque
Seleccionar datos (continuando): tocar, tocar don dos dedos
Multiselección: arrastrar con dos dedos, presión larga y arrastrar
Coger/jalar y mover: toque largo con dos dedos y arrastrar, presión larga y arrastrar.

Zoom in: toque doble, toque doble y arrastrar (abajo), pinch open
Zoom hasta ajustar: doble toque
Zoom out: toque doble en zoom máximo, toque doble y arrastrar (arriba), pinch close, tocar con dos dedos, doble toque con dos dedos
Expandir: pinch open
Colapsar: pinch close
Rotar: rotar

Drag, swipe or fling

Drag: gesto fino, lento, deliberado y controlado con un objetivo en pantalla.
Swipe: gesto grueso, rápido, sin objetivo en pantalla
Fling: gesto gruesos, sin objetivo en pantalla

Un swipe se convierte en fling basada en la velocidad final y si el elemento afectado cruza algún límite.

Scroll

El scroll depende de la velocidad del gesto.

Mostrar al hacer scroll

Invirtiendo el scroll del área de contenidos puede revelar elementos ocultos (como el omnibox)

Desplazar

Para contenido sin límites (mapas) o contenido más grande que la pantalla

Descartar

De forma ortogonal al scroll.

El gesto suele ser simétrico

Swipe para refrescar

Disponible en el primer elemento de la lista o en el extremo donde haya un contenedor vacío.

Swipe de paginación

No se debe usar si se pueden mover los elementos individuales.

Si el contenido es más del 100% de zoom, el contenido se desplazará.

Necesita superar un umbral para completarse.

Abrir menu

Arrastrando desde un menu.

Inclinar

Arrastrando(drag), para inclinar contenido 3D.

Acciones promocionadas

Las acciones flotantes son un caso especial de acciones distinguidas por un icono circular que flota sobre el UI. Hay dos tamaños, el normal y el mini.

Bien

Solo una acción flotante por pantalla

Mal

En diálogos, no se deben usar. Lo correcto son botones planos.

Bien Mal

No adjuntes botones de acción a los menus laterales.

Bien Mal

No pongas acciones relacionadas en acciones flotantes

Bien

Mal

Un botón puede transformarse en otra acción relacionada después de tocarlo

Bien

Si aparecen un conjunto de acciones no relacionadas con el botón, probablemente deban ir a un menu overflow

Mal

Si el botón se transforma en una barra de herramientas, esta debe tener acciones relacionadas.

Bien

La acción flotante no debe transformarse en una barra de herramientas con acciones no relacionadas o confusas.

Mal

La acción flotante debe tener acciones positivas, como crear, favoritos, compartir, navegar y explorar

Bien

Hay que evitar acciones destructivas, alertas, tareas inespecíficas o limitadas.

Mal

Usa la forma del círculo de forma consistente para no confundir al usuario

Bien Mal

El botón no debe botar

Bien Mal

Ubicación

Alineado con las reglas o adjunto a la barra de aplicación.

Puede estar pegado al pie o a un papel extendido

No debe flotar de forma aleatoria, ni por encima de elementos tocables.

Mal

Botón adjunto a una cabecera extendida

Botón adjunto a una barra de herramientas o elemento estructural de una hoja de papel

No debe haber más de una acción flotante por pantalla.

Mal

No lo asocies a las hojas laterales

Mal

No asocies acciones a cada elemento de la pantalla

Mal

No bloquees las acciones flotantes con snackbars o tostadas

Bien Mal

Tratamiento de imágenes

En lugar de apoyarse solo en cambios de opcidad, las ilustraciones y fotos se pueden cargar y transicionar en tres fases. Los niveles se ajustan para un bajo contraste, saturación y exposición, evolucionando hacia saturación completa una vez que la opacidad está al 100%.