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%.

Baja opacidad y bajo contraste, después opacidad completa y exposición, y luego saturación de color.

En cargas, utiliza una duración más larga y en transiciones más corta.

Esto es ideal para pantallas grandes


Búsqueda

Mejora la búsqueda con mejoras como:
  • Entrada por voz
  • Proporciona un histórico de búsquedas
  • Autocomplete que devuelvan resultados

Dos patrones para búsqueda dentro de la aplicación:
  • Búsqueda persistente
  • Búsqueda expandible

Búsqueda persistente

Usada cuando la búsqueda es el foco primario de la aplicación.


Búsqueda expandible

Si la búsqueda no es el foco primario de la aplicación.



Accesibilidad

Piensa en tu producto:
  • sin sonido
  • sin color
  • sin alto contraste
  • con la pantalla magnificada
  • con lector de pantalla
  • controlándola solo con voz
  • combinando las anteriores

Y piensa como afecta a la navegación, lectura, feedback, etc.

Navegación

Debe ser fácil y eficiente

Los objetivos a tocar deben ser de al menos 48dpx48dp

Soporta la ausencia de ratón y los gestos típicos

Gestiona la atención de tu usuario

Lectura

Asegúrate de que funciona con fuentes grandes (como al maginificar la pantalla)

Asegúrate de que hay contraste suficiente

Utiliza algo más aparte del color para transmitir información importante.

Proporciona pistas sobre relaciones espaciales.

Proporciona alternativas al sonido y viceversa.

Guiando al usuario

Haz los controles interactivos claros y fáciles de descubrir

Proporciona alternativas textuales a las imágenes y el video

Ofrece ayuda

Proporciona sentido a cada en lace.

Recursos


Tienes recursos para todo esto en formato de Adobe Illustrator aquí:
Layouts, ejemplos, fuente Roboto, paletas de color

Introducción a material design (4 de 4)

By Gonzalo Ruiz de Villa

Introducción a material design (4 de 4)

El mismo contenido que en google.com/design pero para poder contarlo en una presentación

  • 1,713
Loading comments...

More from Gonzalo Ruiz de Villa