Diseñar los widgets de manera eficaz es fundamental para lograr una experiencia del usuario coherente y visualmente atractiva. En esta sección, se profundizan en los conceptos y las técnicas clave para definir el color y la tipografía para crear los widgets de Android más útiles y atractivos.
Color
Usa colores para expresar estilo y comunicar significado. Establecer colores adecuados para los colores de tu widget es fundamental para la legibilidad, la personalización y, por supuesto, para expresar 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 admitir funciones de color dinámicas, como el color generado por el usuario y los temas oscuros o claros.
Para obtener más información, consulta la guía sobre color de Material Design.
Temas dinámicos
A partir de Android 12, un widget puede usar los colores del tema del dispositivo para botones, fondos y otros componentes. De esta manera, se proporciona coherencia visual entre diferentes widgets, íconos de la pantalla principal y fondos de pantalla, lo que ofrece a los usuarios de Android una experiencia del usuario más cohesiva. El uso de los tokens de color proporcionados garantiza que tu widget se vea integrado en los temas de dispositivos proporcionados por diferentes fabricantes de dispositivos y los temas dinámicos establecidos por el usuario.
Modo claro y oscuro
El modo oscuro es una versión con poca luz de la IU del dispositivo que muestra colores de superficie mayormente oscuras. Los usuarios cambian cada vez más al modo oscuro para mejorar la duración de la batería y la comodidad visual. Si tu widget no se adapta al modo oscuro, aparecerá fuera de lugar y podría frustrar a los usuarios.
Tipografía
La tipografía ayuda a que el texto escrito sea legible y atractivo. Usa tamaños y grosores de fuente para establecer una jerarquía clara y guiar la vista del usuario hacia los elementos más importantes. Presta atención al interlineado y al espacio entre las letras (interletraje) para mejorar la legibilidad, especialmente para las 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, el interlineado y el espaciado entre letras. La escala de tipo actualizada organiza los estilos de texto en cinco funciones que se nombran para describir sus propósitos. Los cinco estilos de texto son anuncio gráfico, encabezado, título, subtítulo y cuerpo. Las funciones nuevas son independientes del dispositivo, lo que facilita la aplicación en una variedad de casos de uso.
