Conceptos básicos de diseño

Ilustración de conceptos básicos del diseño de Hero

Un diseño define la estructura visual para que un usuario interactúe con tu app, por ejemplo, en un elemento componible. Android proporciona una variedad de bibliotecas, puntos de partida canónicos y técnicas para mostrar y posicionar contenido.

Comenzar

Comienza a diseñar diseños de Android aprendiendo la anatomía de la app y, luego, cómo estructurar el contenido de tu app.

Conclusiones

Orientación del diseño

Ten en cuenta las diferentes relaciones de aspecto, clases de tamaño y resoluciones que los usuarios podrían encontrar. Verifica que tu app proporcione una buena experiencia del usuario tanto en orientación horizontal como vertical, así como en diferentes tamaños de pantalla y factores de forma.

Para obtener más información, consulta la guía para adaptar tu diseño y los diseños canónicos.

Áreas seguras del dispositivo

Respeta las áreas seguras del dispositivo, que incluyen partes de la IU, como recortes de pantalla inserciones de borde a borde, pantallas de borde, teclados en pantalla y barras del sistema. Proporciona un diseño flexible para que los usuarios interactúen con el teclado.

Enfoca las entradas del usuario. Si el teclado está presente, mueve la entrada hacia arriba a un estado enfocado o considera adjuntar la entrada de texto al teclado.
Ocultar entradas. Incluso en pantallas más pequeñas, es posible que el usuario no sepa o no pueda desplazarse por la pantalla.
Ergonomía de la interacción

Mantén las interacciones esenciales, como la navegación principal, en un área de la pantalla accesible. Los botones de acción flotantes (BAF) proporcionan un punto de interacción destacado y accesible.

Grupos de contención

Usa la contención para agrupar contenido relacionado y guiar al usuario a través del contenido y acciones. Tarjetas que usan contención explícita para agrupar contenido con acciones relacionadas.

Alineación

Proporciona una alineación coherente entre el contenido similar y los elementos de la IU.

Establece un espaciado coherente entre elementos similares.
Interrumpir la legibilidad con un espaciado incoherente entre elementos similares, lo que puede hacer que los diseños parezcan aleatorios.
Interacciones esenciales

No abrumes al usuario con demasiadas acciones por vista.

Anota las especificaciones del diseño

Cuando compiles diseños personalizados, anota cómo debe ubicarse el contenido dentro del diseño con términos de alineación, restricciones o gravedad. Incluye cómo deben responder las imágenes a su contenedor para que se muestren correctamente.