Style

Il est essentiel de styliser efficacement les widgets pour offrir une expérience utilisateur cohérente et visuellement attrayante. Cette section aborde les concepts et techniques clés permettant de définir la couleur et la typographie afin de créer les widgets Android les plus utiles et les plus attrayants.

Couleur

Utilisez la couleur pour exprimer le style et donner du sens. Il est essentiel de définir des couleurs appropriées pour les couleurs de votre widget pour la lisibilité, la personnalisation et, bien sûr, exprimer l'identité de marque de votre application.

Utilisez des rôles et des jetons Material Color pour respecter les consignes d'accessibilité en matière de contraste et prendre en charge des fonctionnalités de couleur dynamiques, telles que les couleurs générées par l'utilisateur et les thèmes sombres ou clairs.

Pour en savoir plus, consultez les conseils sur les couleurs Material Design.

Thèmes dynamiques

À partir d'Android 12, un widget peut utiliser les couleurs du thème de l'appareil pour les boutons, les arrière-plans et d'autres composants. Cela assure une cohérence visuelle entre différents widgets, icônes d'écran d'accueil et fonds d'écran, offrant aux utilisateurs Android une expérience plus cohérente. L'utilisation des jetons de couleur fournis garantit que votre widget sera intégré aux thèmes d'appareil fournis par différents fabricants d'appareils et aux thèmes dynamiques définis par l'utilisateur.

Figure 1:Image d'un widget avec des jetons de couleur mis en évidence.

Mode clair et sombre

Le mode sombre est une version faible luminosité de l'interface utilisateur de l'appareil qui affiche principalement des couleurs de surface sombres. Les utilisateurs passent de plus en plus en mode sombre pour améliorer l'autonomie de la batterie et le confort visuel. Si votre widget ne s'adapte pas au mode sombre, il apparaîtra mal à sa place et pourrait agacer les utilisateurs.

Figure 2:Widget en mode clair sur l'écran de gauche et sombre sur la droite

Typographie

La typographie aide à rendre l’écriture lisible et belle. Utilisez des tailles et des épaisseurs de police pour établir une hiérarchie claire, en guidant l'œil de l'utilisateur sur les éléments les plus importants. Faites attention à l'interligne et à l'interligne (crénelage) pour améliorer la lisibilité, en particulier pour les affichages de texte plus petits dans l'espace limité d'un widget.

Hiérarchie

La hiérarchie est communiquée par le biais de différences d'épaisseur, de taille, de hauteur des lignes et d'espacement entre les lettres. L'échelle de type mise à jour organise les styles de texte en cinq rôles qui sont nommés pour décrire leurs objectifs. Les cinq styles de texte sont affichage, titre, titre, sous-titre et corps. Les nouveaux rôles sont indépendants de l'appareil, ce qui permet une application plus facile dans divers cas d'utilisation.

Figure 3:Widget illustrant l'utilisation de différents types d'échelles