Android abarca una amplia variedad de dispositivos, formas y tamaños de pantalla, por lo que diseñar para bloqueos específicos perfectos en píxeles no solo es ineficaz, sino que también puede afectar negativamente la experiencia del usuario. En cambio, diseña, crea y piensa de forma adaptativa. Hace poco, presentamos nuevas APIs que incorporan algunos conceptos de diseño conocidos para ayudar a crear diseños adaptativos.
Pawparazzi es una app de ejemplo que muestra estos conceptos. Se diseñó y creó para destacar el diseño adaptable con APIs adaptables, como Grid y Flexbox.
Pensar de forma adaptable no solo se trata de diseñar con puntos de interrupción, sino también de pensar en el contenido en contenedores flexibles.
Todo es una cuadrícula.
Tener una base para estructurar el contenido ayuda a aplicar buenas prácticas de diseño y puede ayudarte a decidir cómo se debe adaptar el contenido. Android tiene una cuadrícula de base subyacente de 8 dp a la que podemos alinear todo el contenido a nivel micro.
Pawparazzi usa una cuadrícula de diseño jerárquica, en lugar de una cuadrícula modular uniforme o una cuadrícula de columnas unidireccional, lo que significa que las columnas y las filas que la componen se deciden en función de la jerarquía del contenido.
La decisión sobre el tipo de cuadrícula debe depender del contenido. Comienza con el contenido de tu app y piensa en cómo se agrupa. Esto ayuda a determinar la estructura general del diseño. Consulta Grids and Units, Content structure y getting started on desktop para obtener más información sobre cómo pensar en paneles.
En Pawparazzi, el objetivo principal era ver a las mascotas del equipo de varias maneras, comenzando con un resumen de la mascota, sus detalles y, luego, las mascotas clasificadas. Esto significaba que la galería de mascotas ocuparía el panel de contenido principal y más espacio de la cuadrícula, seguida de los elementos de navegación y filtro. Cuando hay más espacio disponible, la galería puede expandirse en más filas y mostrar más mascotas, así como los detalles de las mascotas al mismo tiempo. Este principio adaptable es el de revelación, que consiste en mostrar más contenido en diseños más grandes.
Analizar el objetivo principal de la app y el contenido ayudó a determinar cómo y cuándo se tendría que adaptar la cuadrícula de diseño: qué tamaños de clase de ventana, qué ubicación de bisagra y qué orientaciones del dispositivo.
Desde la cuadrícula de diseño, las subcuadrículas ayudan a crear estructuras de contenido más flexibles. Las galerías son una cuadrícula en sí mismas. Para los tamaños compactos, se usa una cuadrícula de 2 columnas.
Las cuadrículas son un concepto de diseño bidireccional, por lo que el contenido puede fluir en dirección horizontal y vertical.
Esto se puede usar para crear diseños más interesantes o lograr una jerarquía visual más clara, como la mascota de la semana, en la que la cuadrícula se usa para mostrar las mascotas mejor clasificadas. La cuadrícula puede ser de 2x4, pero el primer lugar abarca 2 columnas y filas.
Todo esto se logra con la API de Grid.
Flexiona esos componentes
Si bien la cuadrícula abarca la estructura de contenido macro y micro, Flexbox ayuda con los componentes que deben responder a su contenido. Se usa para contenido unidireccional, en el que solo se indica la dirección horizontal o vertical. Por ejemplo, los chips de filtro pueden responder a sus etiquetas y el área de filtro puede expandirse según la cantidad de filtros. Usa Reveal en pantallas más grandes para mostrar más filtros a la vez.
Consultas matizadas
Al diseñar una cuadrícula de diseño y usar cuadrícula y Flexbox, permitimos un diseño adaptable en varias pantallas y, además, admitimos formas únicas, como las de los dispositivos plegables. Pero, ¿qué sucede con los diferentes contextos del usuario? Los usuarios de Android pueden conectar un monitor o enchufar un mouse. MediaQuery nos permite tomar decisiones de diseño matizadas para adaptarnos a los usuarios en todos los contextos.
En Pawparazzi, esto significó aprovechar las entradas de puntero precisas, con áreas de destino más pequeñas y contenido más denso.
Ejemplos de AdaptiveUI de Android
Explora diseños inspiradores y optimizados para dispositivos con pantallas grandes. Explora plantillas de IU/UX para categorías de apps populares, como multimedia, creatividad, juegos y mucho más.
