Estilo

Dar estilo eficaz a los widgets es crucial para lograr una imagen experiencia del usuario coherente. En esta sección, se profundiza en los conceptos clave y técnicas para definir el color y la tipografía para crear las ideas más útiles y atractivos widgets de Android.

Color

Usa el color para expresar estilo y comunicar significado. Establecer colores adecuados de los widgets son cruciales para la legibilidad, la personalización en el que se expresa la identidad de marca de tu app.

Usa roles y tokens de color de Material para cumplir con los lineamientos de contraste de accesibilidad. y admiten funciones de color dinámicas, como las imágenes de color los temas claros.

Para obtener más información, consulta la guía de colores de Material Design.

Temas dinámicos

A partir de Android 12, un widget puede usar los colores del tema del dispositivo para los botones, los fondos y otros componentes. Esto proporciona coherencia visual en diferentes widgets, íconos de pantalla principal y fondos de pantalla, que ofrecen a los usuarios de Android experiencia del usuario más coherente. El uso de los tokens de color proporcionados garantiza que tu widget se verá integrado en los temas del dispositivo proporcionados por diferentes dispositivos los fabricantes y los temas dinámicos que establece el usuario.

Figura 1: Imagen de un widget con tokens de color destacados.

Modo claro y oscuro

Un modo oscuro es una versión con poca luz de la IU del dispositivo que se muestra mayormente oscura los colores de la superficie. Los usuarios pasan cada vez más al modo oscuro para obtener la duración de batería y la comodidad visual. Si tu widget no se adapta al modo oscuro, parecerá estar fuera de lugar y podría frustrar a los usuarios.

Figura 2: Un widget en modo claro en la pantalla izquierda y oscuro en la derecha.

Tipografía

La tipografía ayuda a que la escritura sea legible y hermosa. Utiliza tamaños de fuente y para establecer una jerarquía clara que guíe el ojo del usuario hacia elementos importantes. Presta atención al interlineado y el interlineado. para mejorar la legibilidad, especialmente para pantallas de texto más pequeñas dentro del espacio restringido de un widget.

Jerarquía

La jerarquía se comunica a través de diferencias en el grosor de la fuente, el tamaño, la altura de línea, y el espaciado entre letras. La escala de tipos actualizada organiza los estilos de texto en cinco roles que se nombran como una descripción de sus propósitos. Los cinco estilos de texto son pantalla, encabezado, título, subtítulo y cuerpo. Los nuevos roles son independientes del dispositivo, lo que permite y simplificar la aplicación en una variedad de casos de uso.

Figura 3: Widget que muestra el uso de diferentes escalas de tipos.