Prácticas recomendadas para el diseño de apps

Optimiza para diseños verticales

Simplifica el diseño de tu app usando diseños verticales, que permiten a los usuarios desplazarse en una sola dirección para recorrer el contenido.

Qué hacer

El objetivo de esta app es llevar al usuario del punto A al punto B.

Qué no hacer

No uses el desplazamiento vertical y horizontal, ya que esto puede confundir la experiencia de tu app.

Muestra la hora

Muestra la hora (superposición) en la parte superior, ya que es un lugar coherente para que el usuario pueda verla.

Qué hacer

Muestra la hora en la parte superior de la superposición, ya que es un lugar coherente para que el usuario pueda verla.

Qué no hacer

Muestra la hora en un diálogo temporal, una superposición de confirmación o un selector. Por ejemplo, es probable que un usuario solo vea una pantalla de confirmación muy brevemente.

Puntos de entrada intercalados accesibles

Asegúrate de que todas las acciones se muestren intercaladas con iconografías y etiquetas claras para la accesibilidad. Esto incluye puntos de entrada a la configuración y las preferencias.

Qué hacer

Utiliza íconos y etiquetas cuando sea posible.

Qué no hacer

No uses únicamente íconos para solicitarle al usuario que realice una acción.

Usa etiquetas para orientar a los usuarios

Para diálogos más largos, ayuda a orientar al usuario con etiquetas mientras se desplaza por el contenido.

Qué hacer

Usa saltos de sección, etiquetas y otros elementos para organizar el contenido y orientar a los usuarios mientras se desplazan por vistas más largas con contenido mixto.

Qué no hacer

No agregues una etiqueta para los diálogos que contengan un solo tipo de contenido.

Mejora las acciones principales

Para facilitar que los usuarios realicen acciones en tu app, arrastra las acciones principales hacia la parte superior de la superposición.

Qué hacer

Destaca las acciones principales no ambiguas en la parte superior.

Qué no hacer

Coloca la acción principal en una página muy larga en la parte inferior.

Cómo mostrar la barra de desplazamiento en pantallas de desplazamiento

Usa el indicador de desplazamiento solo en pantallas de desplazamiento para evitar una expectativa de interacción incorrecta. Del mismo modo, recuerda agregar el indicador de desplazamiento en las pantallas de desplazamiento para indicar en qué punto de la pantalla te encuentras.

Qué hacer

Muestra el indicador de desplazamiento si se desplaza toda la vista.

Qué no hacer

Muestra el indicador de desplazamiento en las vistas que no se desplazan o no muestres la barra de desplazamiento en las vistas que sí se desplazan.

Cómo diseñar de forma responsiva para tamaños de pantalla más grandes

Asegúrate de que los componentes que uses ocupen el ancho disponible y considera la altura en los diseños sin desplazamiento.

Todos los componentes de Compose se compilan de forma responsiva, pero se recomienda cualquier personalización para mejorar tu diseño y agregar valor adicional en pantallas más grandes.

Qué hacer

Asegúrate de que el contenido ocupe el ancho y la altura disponibles, y que los elementos de pantalla completa (ProgressIndicators, TimeText, etc.) se adapten de forma responsiva en diseños sin desplazamiento.

Qué no hacer

Usa componentes con un ancho fijo que no llenen la pantalla de forma responsiva o no ajusten el comportamiento del contenido para llenar el espacio disponible.

Usa márgenes responsivos (porcentajes)

Te recomendamos que uses márgenes porcentuales para que el tamaño de los márgenes se adapte a la curva creciente de la pantalla.

Qué hacer

Usa márgenes porcentuales adicionales para asegurarte de que el contenido no se corte en la parte superior ni inferior.

Qué no hacer

Los componentes no solo deben escalarse para llenar el espacio disponible sin márgenes adicionales.