Las vistas que no se desplazan se enfocan en la información que se puede ver de un vistazo y ofrecen valor a los usuarios con poca o ninguna interacción. Por eso, puede ser difícil incorporar un comportamiento responsivo en estos diseños.
Componentes de diseño predeterminados que no se desplazan
Diálogo
Un diálogo es una superposición transitoria que ocupa toda la pantalla. Permite a los usuarios realizar una sola acción.
- Los diálogos enfocan tu atención para verificar que se aborde su contenido.
- Los diálogos deben ser directos para comunicar información y estar dedicados a completar una tarea.
- Los diálogos deben aparecer en respuesta a una tarea del usuario o una acción, con información relevante o contextual.
Superposición de confirmación
La pantalla de confirmación superpuesta muestra un mensaje de confirmación al usuario durante un período breve. Usa este componente para captar la atención del usuario después de que se haya ejecutado una acción.
Abrir en el teléfono
La superposición de abrir en el teléfono se activa cuando el usuario elige continuar su recorrido en un teléfono. La pantalla superpuesta tiene un indicador de progreso y le indica al usuario cuándo debe revisar su teléfono.
Stepper
Los objetos stepper proporcionan una experiencia de control en pantalla completa que permite a los usuarios seleccionar un rango de valores. Pueden controlar la interacción con los botones o la corona, y el nivel específico se muestra con un indicador de nivel curvo.
Selector de horario
Los selectores permiten que los usuarios elijan entre una cantidad finita de elementos en secciones desplazables. El selector de hora tiene hasta tres columnas, según si hay segundos disponibles o si el reloj es de 12 o 24 horas. Los usuarios interactúan con cada columna a la vez y realizan su selección dejando el número en foco antes de continuar.
Selector de fecha
Los selectores permiten que los usuarios elijan entre una cantidad finita de elementos en secciones desplazables. El selector de fecha tiene hasta tres columnas, cuyo orden se puede intercambiar entre fecha, hora y año, según el caso de uso. Los selectores de fecha requieren cadenas de contenido más largas, por lo que solo se ve una columna a la vez, lo que da una pista de lo que hay a la izquierda o a la derecha. Los usuarios interactúan con cada columna a la vez y realizan su selección dejando el número en foco antes de continuar.
Ejemplos de diseños personalizados que no se desplazan
Las pantallas de apps que no se desplazan no se limitan a los componentes establecidos. Puedes combinar una serie de elementos para crear el diseño que desees.
Debes tener en cuenta el espacio limitado en una pantalla sin desplazamiento y el uso de márgenes y padding responsivos (porcentaje) para usar el espacio de pantalla disponible. También puedes considerar aplicar un punto de interrupción en 225 dp para introducir contenido adicional o hacer que el contenido existente sea más fácil de ver de un vistazo en pantallas más grandes.
Maps
Superposición de emergencia
Alerta de emergencia
Comportamiento responsivo y adaptable
Todos los componentes de la biblioteca de Compose se adaptan automáticamente al tamaño de pantalla más amplio y ganan ancho y alto. En el caso de estas vistas en particular, el uso de puntos de interrupción puede brindar una experiencia especialmente enriquecedora y valiosa para todos los usuarios.
En el caso de muchos de los botones, las tarjetas y los márgenes de tu IU, estira y completa el espacio para diferentes tamaños de pantalla y, así, aprovecha el espacio disponible en la IU y crea un diseño equilibrado.
Usa la siguiente lista de tareas para verificar que los parámetros responsivos estén definidos correctamente:
- Crea diseños flexibles que se vean razonables en todos los tamaños de pantalla.
- Aplica los márgenes superior, inferior y laterales recomendados.
- Define márgenes en valores porcentuales en los lugares donde el contenido podría recortarse.
- Utiliza restricciones de diseño para que los elementos aprovechen al máximo el espacio en la pantalla y mantengan el equilibrio en los diferentes tamaños de dispositivos.
- Ten en cuenta el texto de hora si se usa, pero no superpongas la sección superior de la página.
- Considera usar botones que se ajusten a los bordes para aprovechar más el espacio limitado.
- Considera aplicar un punto de interrupción en 225 dp para introducir contenido adicional o hacer que el contenido existente sea más fácil de visualizar en tamaños de pantalla más grandes.
Múltiples recorridos de página sin desplazamiento con paginación
En situaciones en las que una experiencia requiere más contenido, pero desea conservar un diseño sin desplazamiento, considera un diseño de varias páginas con paginación vertical u horizontal.
