Dale vida a tu app con material design

  • Desarrollo
  • Diseño

Sigue los principios de material design para crear apps que atraigan y deslumbren a los usuarios.

Por qué funciona

Material design incluye recomendaciones de diseño, imágenes y convenciones comunes que te ayudan a crear apps expresivas que funcionan a la perfección en cualquier dispositivo. A medida que los usuarios se familiaricen con este lenguaje visual, esperarán encontrarlo en las apps. Este diseño te permitirá crear apps que atraigan al instante, mejoren la usabilidad y aumenten la participación y retención de los usuarios.

Principios de diseño

  • Usa superficies y sombras como metáforas. Los elementos de la IU deben incluir superficies con capas individuales apiladas o ubicadas una al lado de la otra. Se deben usar sombras para mostrar qué superficies están delante de otras; esto permite centrar la atención y establecer jerarquías.
  • Las imágenes no deben tener sangrado completo. Minimiza el espacio y los márgenes entre las fotos, así como los bordes de las pantallas, para obtener una IU más envolvente y llena de contenido.
  • Los colores deben ser intensos para destacar la marca y los elementos importantes de la IU. Asegúrate de elegir un color primario para los elementos destacados a fin de ofrecer una experiencia coherente en toda la app. Considera la posibilidad de usar la API de Palette para tomar colores directamente desde el contenido y ofrecer una experiencia más envolvente.
  • Se deben usar métricas y líneas clave para alinear y ajustar el contenido según una cuadrícula de base de 8 dp con el fin de facilitar la lectura y mantener la coherencia visual. El posicionamiento de texto más preciso puede usar una cuadrícula de 4 dp. Cuando corresponda, ciertos elementos, como el texto del cuerpo, las miniaturas, los títulos de las barras de las apps y otros similares, se deben alinear según las líneas clave estándar.
  • Se debe usar movimiento significativo, como animaciones y transiciones , para ayudar a guiar y centrar a los usuarios, además de ofrecer una continuidad entre una pantalla y la siguiente. En las narraciones visuales, el movimiento significativo puede proporcionar una experiencia del usuario placentera y contribuir con la continuidad visual.
  • Las interacciones de respuesta , como la opción básica para dejar comentarios de forma táctil, deben tener un efecto de ondas en la superficie. No se suele incluir la función de ondas en los dispositivos anteriores a la versión 5.0, por lo que debes usar el comportamiento predeterminado android:selectableItemBackground. Además de las ondas de la superficie, las superficies interactivas también deben elevarse al tacto para encontrarse con el dedo del usuario durante la entrada, y cualquier cambio debe irradiarse desde el punto de contacto.

Componentes del sistema de la interfaz de usuario

  • En Android 5.0 y versiones posteriores, la barra de estado del sistema debe tener un color que complemente el color primario de la app o el contenido de la pantalla actual. En el caso de las imágenes con sangrado completo, la barra de estado puede ser transparente. En el caso del nivel de API 23 y versiones posteriores, se puede configurar la barra de estado del sistema con un color claro alternativo (donde los íconos se oscurecen).
  • Se deben usar barras de herramientas y de la app para informar y ayudar a expresar el desarrollo de la marca mediante el uso de colores, la tipografía y el logotipo del producto (evita usar el ícono de selector). En el caso de las pantallas enriquecidas con imágenes, la barra de la app puede ser transparente para brindar una experiencia de IU más envolvente, ya que las imágenes deben ubicarse de borde a borde y podrían incluso aparecer detrás de la barra de la app o de estado. Asegúrate de usar láminas para proteger el texto en todos los íconos de la barra transparente. Además, considera la opción de usar técnicas de desplazamiento que proporcionen una experiencia visual enriquecida al usuario.
  • Las pestañas deben seguir las interacciones y el estilo de Material Design. Deben poder desplazarse de manera horizontal y no deben incluir separadores verticales entre ellas. Indica las pestañas seleccionadas mediante un cambio de color en primer plano o una franja pequeña debajo del texto de la pestaña (o del ícono) que tenga un color destacado. En general, las pestañas y la barra de la app tienen la misma elevación de superficie, a menos que se establezca una jerarquía clara.
  • El panel lateral de navegación debe incluir solo los elementos de navegación principales y cumplir con los nuevos lineamientos visuales. Debe aparecer frente a la barra de la app y el contenido de la pantalla, y ubicarse debajo de la barra de estado del sistema. Como práctica recomendada, asegúrate de tener el panel lateral abierto durante la primera ejecución de tu app a fin de mejorar la visibilidad.
  • Considera la opción de usar la navegación inferior si la app tiene entre 3 y 5 destinos de nivel principal que requieren acceso directo. Se recomienda el patrón de cambio de navegación inferior ya que proporciona mayor impacto visual y permite tener strings de texto más largas en las etiquetas. Asegúrate de que la barra de navegación inferior esté accesible desde la mayoría de las pantallas (excluye las pantallas con mucho nivel de detalle) y permite que se oculte mientras el usuario desplaza el dedo.

Elementos y patrones de la interfaz de usuario

  • Los temas deben estar actualizados con el tema más reciente de Material Design para evitar que la app luzca anticuada. La actualización de los temas del sistema es una de las maneras más rápidas de mejorar la apariencia de tu app. Asegúrate de actualizar los temas de Gingerbread y Holo para brindar un diseño visual y una experiencia del usuario coherentes. Actualiza los temas de los elementos de la IU, como selectores, diálogos, menús y campos de texto, a los estándares de Material Design.
  • Los botones son los elementos interactivos que más se usan en una app, por lo que actualizarlos con los patrones de diseño visual más recientes es uno de los cambios de mayor impacto que puedes implementar. Si usas botones personalizados, evita usar esquinas demasiado redondeadas, gradientes pronunciadas y superficies brillantes, ya que este tipo de botones harán que tu app luzca anticuada. Usa botones elevados para acciones importantes que deban destacarse visualmente o para diseños con mucho texto, en los que un botón aplanado pasaría desapercibido. En el caso de las acciones simples que no tienen que estar destacadas, los botones planos son los que más se usan. En cuanto a la acción más importante de una pantalla determinada, usa el botón de acción flotante (BAF), ya que se distingue a nivel visual y se ubica sobre todos los demás elementos de la IU.
  • Se deben emplear mosaicos y listas cuando los usuarios comparan elementos directamente. Usa las vistas de lista cuando el contenido incluya mucho texto que el usuario leerá rápidamente. Usa mosaicos cuando el contenido sea principalmente visual. Asegúrate de usar el widget RecyclerView cuando crees tus listas y mosaicos para contar con opciones de diseño más sólidas.
  • Se deben emplear tarjetas cuando exista una combinación de tipos de contenido en la que el usuario explore los elementos sin comparar imágenes ni strings de texto de forma directa. También deben usarse cuando hay varias acciones en la superficie. Si bien las tarjetas hacen que los elementos se destaquen y brindan enfoque visual, ten en cuenta que el uso excesivo genera una contaminación visual innecesaria. Asegúrate de usar el widget CardView cuando crees contenido de tarjetas.
  • Se debe implementar la búsqueda en la app mediante la búsqueda integrada en la barra de la app. Si la función principal de la app es la búsqueda de contenido, considera usar un widget de búsqueda especial en la barra de la app.
  • Solo se deben usar divisores para separar grandes secciones de contenido o hacer distinciones importantes entre diferentes áreas de texto. Asegúrate de no usar divisores para cada elemento en una vista de lista simple, ya que generan mucha contaminación visual y no favorecen la legibilidad. En cambio, se recomienda el uso de espacios en blanco y tipografías que contribuyan a delimitar el contenido.
  • Cuando diseñes estados vacíos , asegúrate de comunicarle al usuario el motivo de su uso, así como de incluir un llamado a la acción donde se describa su propósito.

Novedades de Android 7.0

  • Se revisaron las notificaciones con nuevas áreas de contenido, interacciones, controles para el usuario y una entrada de texto breve.

Ejemplos