android-design

Conception Android

Comment Google conçoit les applications Android avec Material 3 Expressive, traduit en décisions et code Compose. Expressive n'est pas un langage de conception séparé : c'est Material 3 plus des API optionnelles, des composants et des tactiques de conception que Google appelle un "pack d'extension". Les directives, les recherches et les noms d'API proviennent de m3.material.io, des guides de conception Android (developer.android.com/design/ui), du guide de conception Wear OS, des conférences Google I/O et Android Developers, et des sources androidx.

Le fil conducteur : un écran est bien conçu lorsque l'emphase est dépensée délibérément. Classez les priorités de l'écran, puis consacrez la taille, le contraste de couleur, la forme, la typographie, le conteneur et le mouvement à l'objectif principal, moins au suivant, et presque plus au reste. Le code Material standard donne un poids égal à chaque élément, c'est pourquoi il ressemble à un modèle.

Les citations et règles marquées (Google) proviennent des directives de Google. Les règles marquées (par défaut) sont les points de départ de cette compétence : suivez-les sauf si la direction de l'écran donne une raison de ne pas le faire.

Surfaces. Cette compétence cible les écrans d'applications pour téléphone, tablette, bureau et Wear OS. Pour un écran Wear OS, lisez d'abord references/wear-os.md ; ce fichier prévaut là où les deux diffèrent. Utilisez la compétence wear-compose-m3 pour l'échafaudage et la migration. Les tuiles Wear, les cadrans de montre et les widgets d'écran d'accueil sont en dehors de cette compétence : utilisez la compétence wear-widgets pour les widgets et tuiles Wear, et les compétences Glance pour les widgets d'écran d'accueil.

Outils visuels

L'implémentation ou la révision de code Compose réel nécessite la CLI compose-preview et les compétences compose-preview et compose-ui-builder : lisez et suivez compose-preview, qui possède la sélection d'outils, le rendu et le dépannage. Pour une demande de conception d'interface utilisateur avec UI Builder, suivez compose-ui-builder. Cette compétence possède les décisions de conception et la vérification d'écran. Si une dépendance est indisponible, signalez-la et redirigez l'utilisateur vers la section README de configuration de ce dépôt plutôt que d'installer des outils ou de substituer un autre moteur de rendu.

Exploration ou implémentation

Lorsque la demande concerne la conception d'une nouvelle application, d'un nouvel écran ou d'une refonte (elle demande une finition, une direction visuelle, ou Material 3 Expressive, ou nomme cette compétence), commencez par une proposition, même si elle dit "construire" : suivez la compétence android-design-explore, montrez sa proposition dans l'application de prévisualisation, et attendez que l'utilisateur approuve une direction avant d'écrire du code Compose. Sautez la proposition lorsque l'utilisateur le dit ("saute la proposition", "code-le simplement") ou qu'une proposition approuvée existe déjà ; portez une proposition approuvée avec les étapes "Approuver et porter" de cette compétence, qui commencent par export_kotlin.

Une construction simple qui ne demande pas de conception va directement au code, en appliquant les décisions et la vérification d'écran ci-dessous.

Les modifications dans un design existant (un correctif, un ajustement, une révision, un nouvel état d'un écran approuvé) vont directement au projet réel sous ses propres règles d'approbation et de branche, en utilisant les décisions de conception et la vérification d'écran ci-dessous.

0. Avant d'écrire l'interface utilisateur

Répondez à ces questions dans votre réponse avant tout code, une ou deux phrases chacune. Sauter cette étape produit des écrans génériques.

1. Classez les objectifs. Quelle est la tâche principale sur cet écran ? Quelles sont les secondaires et tertiaires ? (Google : "Simplifier à une tâche principale par page.")
2. Choisissez une direction. Nommez le caractère émotionnel de l'écran, le contenu ou l'interaction qui le définit, et une idée visuelle qui lie la typographie, l'imagerie, la couleur et la forme. Chaque réponse doit nommer une décision ("l'ensemble total en grands chiffres remplit le tiers supérieur"), pas un adjectif ("moderne, propre"). Si l'idée décrit comment la plupart des applications de ce type ont déjà l'air, ce n'est pas encore une idée.
3. Décidez le moment héroïque. Cet écran est-il l'un des un ou deux moments héroïques du produit (l'interaction la plus émotionnelle ou la plus centrale) ? Si oui, planifiez comment plusieurs tactiques se combinent là. Si non, restez calme (Google).
4. Choisissez la source de couleur. Dynamique (fond d'écran), marque (un schéma généré) ou basée sur le contenu (à partir d'une image à l'écran). Voir section 4.
5. Dépensez l'emphase par rang. L'objectif principal obtient le plus, généralement la taille en premier. Les objectifs secondaires obtiennent moins de tactiques ; les tertiaires obtiennent conteneur et typographie (Google). Le contenu peut dominer l'écran lorsqu'il est le produit, tant que l'action principale reste indubitable.
6. Choisissez les composants dans le tableau de la section 9, pas de mémoire du Material plus ancien.
7. Répondez à la question d'adaptation. Pour chaque classe de taille que vous allez rendre (compact ; moyen ou élargi ; grand ou extra large), nommez ce que l'espace supplémentaire révèle : un deuxième volet, un rail élargi, plus de détails. Utilisez les cinq questions dans references/layout.md, en commençant par "Qu'est-ce qui doit être révélé ?". La navigation reste cohérente : si une mise en page plus grande a un rail, la compacte a une barre de navigation pour les mêmes destinations. Pour un écran basé sur les contrôles comme un lecteur multimédia, les contrôles se réorganisent et le contenu est révélé. Une mise en page plus grande qui n'est que le contenu du téléphone étalé n'a pas répondu à la question : "L'espace supplémentaire ne signifie pas simplement rendre la même chose plus grande." (Google)

Ensuite, composez l'écran (section 8), construisez-le, et exécutez la vérification d'écran sur le résultat rendu.

1. Configuration du thème

Expressive nécessite androidx.compose.material3:material3 1.5.0-alpha ou ultérieur. La version stable 1.4.0 n'a presque aucune de ces API. Consultez la dernière version 1.5.x dans Maven metadata au lieu de faire confiance à une version mémorisée ; les API alpha changent encore entre les versions. Les alpha actuelles nécessitent également compileSdk 37 et Android Gradle Plugin 9.1 ou ultérieur.

@Composable
fun AppTheme(dark: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val context = LocalContext.current
    val colorScheme = when {
        Build.VERSION.SDK_INT >= 31 -> if (dark) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        dark -> darkColorScheme()
        else -> expressiveLightColorScheme()
    }
    MaterialExpressiveTheme(
        colorScheme = colorScheme,
        motionScheme = MotionScheme.expressive(),
        typography = AppTypography, // Voix Google Sans Flex plus une police de marque optionnelle, voir section 5
        content = content,
    )
}

• Il n'y a pas de expressiveDarkColorScheme ; utilisez darkColorScheme() ou un schéma sombre généré.
• MaterialShapes, toShape(), LoadingIndicator, et ContainedLoadingIndicator nécessitent encore @OptIn(ExperimentalMaterial3ExpressiveApi::class). Tout le reste ici n'est pas expérimental dans les alpha 1.5.0.
• Configuration complète, schémas de semence, échelles de type personnalisées, morphing de formes, spécifications de mouvement, espacement et notes de version : lisez references/theming.md lors de la configuration ou de la modification d'un thème.

2. Emphase et hiérarchie

L'emphase est la manière dont les gens trouvent l'action principale : des actions clés plus grandes et une hiérarchie délibérée réduisent les erreurs et rendent les éléments d'interface clés plus rapides à trouver (Google).

• La taille est le levier le plus fort, et elle est relative. "L'action la plus importante ou le principal appel à l'action (CTA) doit être l'élément le plus grand" (Google) : des actions clés plus grandes signifient moins d'erreurs et des utilisateurs plus satisfaits, donc le primaire conduit les actions autour de lui, quelle que soit leur taille. Le contenu n'est pas en concurrence avec lui : une carte de résumé ou une ligne de liste peut être physiquement plus grande. Commencez par la taille par défaut du composant avec le remplissage le plus fort (un petit bouton ; pour un FAB, le "medium FAB est recommandé pour la plupart des situations" de Google) et agrandissez-le seulement autant qu'il le faut pour conduire ses pairs ; un point focal par écran, et quand tout est grand, rien ne l'est. Les actions groupées partagent une taille par défaut ("tous les boutons d'un groupe standard doivent être de la même taille"), et le primaire conduit par le remplissage ou la forme : la règle de groupe de Google est "le plus grand, le plus large ou le plus visuellement proéminent." L'extra large appartient à un héros mené par un contrôle, comme un lecteur ou une session de respiration, où le contrôle est le contenu de l'écran. L'étiquette fixe le plancher : Google dit "Ne tronquez pas et n'enveloppez pas le texte de l'étiquette" et un conteneur "ne doit pas être plus étroit que son texte d'étiquette." Lorsqu'une étiquette ne tient pas sur une ligne à la taille choisie dans son conteneur (une carte à largeur de téléphone, un volet), raccourcissez-la à 1 à 3 mots, donnez plus d'espace au bouton, ou descendez d'une taille (Google : la taille peut changer "à travers différents points d'arrêt", et l'emphase vient "par taille, couleur ou forme").
• Placement : mettez l'action clé là où les mains et les yeux sont déjà. L'étude de messagerie de Google : déplacer Envoyer d'une petite icône de barre supérieure vers un bouton plus grand juste au-dessus du clavier, en secondary, a fait trouver les gens 4 fois plus vite ; l'écran d'accueil d'Aura met son bouton extra large de démarrage en bas, dernier dans le flux vertical. Choisissez la position à partir de l'interaction et de l'espace dont le contenu a besoin (par défaut).
• L'action principale obtient le remplissage le plus fort (Google : les rôles primaires vont aux appels à l'action cruciaux ; les boutons remplis avec parcimonie). Les actions secondaires sont tonales ou standard ; les bascules comme les favoris montrent l'état avec une icône remplie ou un conteneur tonal, pas un second remplissage fort en compétition avec le contrôle principal.
• Contraste entre les rôles, pas un rôle partout : primary pour l'action principale, secondary ou secondaryContainer pour les contrôles de support, tertiary pour les statuts ou les accents. Utiliser primary et primaryContainer pour tout aplatit l'écran.
• Conteneur : regroupez les éléments liés dans des conteneurs ; donnez au contenu le plus important "beaucoup d'espace et la surface la plus lumineuse."
• Les résumés soutiennent la tâche, ils ne la surpassent pas. Lorsque l'objectif principal est d'agir sur une liste (cocher des habitudes, répondre à des messages), l'élément suivant doit rester le plus attrayant à l'écran. Les cartes de statistiques peuvent être audacieuses, mais donnez aux lignes exploitables des conteneurs clairs et laissez les éléments terminés reculer (couleur plus douce, pas de remplissage fort), regroupés par état plutôt que mêlés (section 8). Le surlignage de sélection est pour ce que l'utilisateur a choisi, pas pour ce qui est fini.
• Ordre de travail : construisez d'abord la hiérarchie (taille, couleur, espacement, placement, conteneur), puis ajoutez l'emphase unique (forme, échelle, morph) pour célébrer le succès ou le progrès.

Exemple travaillé de Google : l'application Aura de respiration

Chaque écran dépense l'emphase par classement des objectifs. Utilisez ceci comme modèle de raisonnement.

Écran	Classement	Emphase
Accueil	Primaire : démarrer une session	Bouton "Démarrer la respiration" extra large en primary foncé sur une surface douce, bas sur l'écran. Paramètres groupés comme éléments de liste en secondary. Message quotidien dans un conteneur doux, le moins d'emphase.
Session	Moment héroïque	Une forme de fleur remplissant l'écran (MaterialShapes.Flower et Sunny) grandit et rétrécit avec chaque respiration sur un mouvement printanier ; jaune vif à l'inspiration ; grands chiffres de compte à rebours contre petites étiquettes ; pause/arrêt petit en bas ; barre de navigation cachée.
Rapport	Secondaire	Moins de tactiques "pour réduire la charge cognitive" : métriques dans des formes de fleur uniformes, chiffres mis en avant, un bouton Terminer de taille moyenne (pas XL).
Progrès	Tertiaire	Discret : données clés en primary, jours accomplis en petites formes secondaires, chiffres "assez grands pour être parcourus, mais ils ne dominent pas."

Leur leçon de la v1 à la v2 : des paramètres non regroupés de taille similaire et de couleur incohérente se faisaient concurrence pour l'attention ; les regrouper au-dessus d'un seul bouton extra large est passé "de désordonné à calme."

3. Moments héroïques et retenue

"Les moments héroïques utilisent plusieurs tactiques expressives pour s'écarter des idées de conception prévisibles ou uniformément appliquées."

• Un moment héroïque superpose la typographie, la forme, la couleur, le mouvement et des composants flexibles sur l'interaction clé du produit : le composeur téléphonique, un lecteur multimédia, un objectif accompli, une session de respiration. Demandez : est-ce émotionnellement impactant ? et est-ce une interaction clé ?
• Un ou deux par produit. Ils sont "brefs, délicieux, surprenants et inattendus" ; plus que cela submerge.
• Les écrans secondaires utilisent moins de tactiques. Ne combinez pas chaque tactique partout.
• Dans un moment héroïque, une chose personnalisée bouge : gardez le texte stable pendant que la forme s'anime (Google). Les morphs de composants intégrés (un bouton changeant de forme à la pression) ne comptent pas.
• Quand le contenu est le produit, le contenu est le héros. Dans les lecteurs, les galeries et les voyages, donnez à la pochette d'album ou à la photo de l'échelle et laissez sa couleur définir l'écran. Un masque en forme de bibliothèque, un affichage plein écran ou un titre superposé sur l'image sont des options, pas des exigences : un recadrage arrondi ordinaire est tout aussi fort lorsque la composition autour porte l'idée.
• Gardez les motifs familiers. Expressive stylise les motifs ; il ne les remplace pas. Dans les tests de Google, une liste de lecture reconstruite en pochettes d'album dispersées "avait l'air moderne et excitante" mais les gens ne l'ont pas reconnue comme une liste de lecture, et la suppression des étiquettes de texte des actions de messagerie a nui à l'utilisabilité. Le contexte compte aussi : ce qui convient à un lecteur multimédia peut ne pas convenir à une application bancaire.
• "Aucune quantité d'émotion ne peut compenser un manque de clarté." Expressive affine un écran qui fonctionne déjà ; il ne sauve pas un écran confus.

4. Couleur

• Le générateur fait la palette ; vous assignez les rôles. Les utilitaires de couleur de Material transforment une couleur source en les rôles d'accent, de surface, clair et foncé (Google). Prenez la palette générée telle quelle et consacrez l'effort de conception à quel élément obtient quel rôle.
  • Dynamique (fond d'écran) est la recommandation de Google et donne de la personnalisation. La mise à jour M3 Expressive a rendu la couleur dynamique plus riche à la source ("chroma plus élevé à travers toutes les teintes") ; les applications le reçoivent automatiquement. L'application partage les teintes avec le reste du téléphone, donc son identité vient de la hiérarchie, de la forme et de la typographie.
  • Marque donne à l'application sa propre identité : un schéma généré à partir de la couleur de la marque avec Material Theme Builder, ou avec MaterialKolor à l'exécution au style de palette par défaut (référence de thème). N'augmentez pas un style de palette pour qu'il ait l'air "plus expressif" : PaletteStyle.Expressive de MaterialKolor est une variante de schéma de décalage de teinte sans rapport avec M3 Expressive, et il éloigne la palette de la teinte de la marque.
  • Basée sur le contenu colore une zone contenue à partir...

[truncated for translation]