Android abarca una amplia variedad de dispositivos, formas y tamaños de pantalla, por lo que diseñar para bloqueos específicos y perfectos en píxeles no solo es ineficaz, sino que también puede afectar negativamente la experiencia del usuario. En su lugar, diseña, compila y piensa de forma adaptable. Hace poco, presentamos nuevas APIs que incorporan algunos conceptos de diseño conocidos para ayudar a compilar diseños adaptables.
Pawparazzi es una app de ejemplo que exhibe estos conceptos. Se diseñó y compiló 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 tener buenas prácticas de diseño y puede ayudarte a decidir cómo se debe adaptar el contenido. Android tiene una cuadrícula de referencia subyacente de 8 dp a la que podemos alinear todo el contenido a un 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 de 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 Cuadrículas y unidades, Estructura de contenido y Cómo comenzar en computadoras de escritorio para obtener más información sobre cómo pensar en paneles.
En el caso de Pawparazzi, el objetivo principal era ver las mascotas del equipo de varias maneras, comenzando con una descripción general de la mascota, detalles de la mascota y, luego, mascotas clasificadas. Esto significaba que la galería de mascotas tomaría el panel de contenido principal y más de la cuadrícula, seguido de elementos de navegación y filtro. Cuando hay más espacio disponible, esto permite que la galería se expanda en más filas, más mascotas y muestre los detalles de las mascotas al mismo tiempo. Este principio adaptable es revelar o mostrar más contenido en diseños más grandes.
Observar el objetivo principal de la app y el contenido ayudó a determinar cómo y cuándo la cuadrícula de diseño debería adaptarse: qué tamaños de clase de ventana, ubicación de la bisagra y orientaciones del dispositivo.
Desde la cuadrícula de diseño, las subcuadrículas ayudan a compilar estructuras de contenido más flexibles. Las galerías son una cuadrícula. Para 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 para una jerarquía visual más clara, como la mascota de la semana, en la que se usa la cuadrícula para transmitir las mascotas mejor clasificadas. La cuadrícula puede ser de 2x4, pero el lugar superior abarca 2 columnas y filas.
Todo esto se logra con la API de Grid.
Flexiona esos componentes
Si bien la cuadrícula cubre la estructura de contenido macro y micro, Flexbox ayuda con los componentes que deben responder a su contenido. Esto se usa para contenido unidireccional, en el que solo se dicta 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
Si diseñamos una cuadrícula de diseño y usamos cuadrícula y flexbox, permitimos un diseño adaptable en varias pantallas e incluso admitimos formas únicas como plegables. Pero, ¿qué sucede con los diferentes contextos del usuario? Los usuarios de Android pueden conectarse a una pantalla o conectar un mouse. MediaQuery nos permite tomar decisiones de diseño matizadas para satisfacer a los usuarios en todos los contextos.
En Pawparazzi, esto significó aprovechar las entradas precisas del puntero, con áreas de destino más pequeñas y contenido más denso.
Muestras de AdaptiveUI de Android
Explora diseños inspiradores y optimizados para dispositivos con pantalla grande. Navega por las plantillas de IU/UX para categorías de apps populares, incluidos medios, creatividad, juegos y mucho más.
