Entrixy — guide de design

Un document vivant. Il consigne les calibrages, le rythme et les accords sur l’interface, et se met à jour dès qu’une décision est prise.

1. Icônes — tailles et calibrage

Le problème

Les icônes Material de androidx.compose.material.icons.outlined.* partagent une taille nominale — une grille 24×24 — mais la partie dessinée diffère de l’une à l’autre. Donnez-leur à toutes un simple Modifier.size(24.dp)et certaines paraîtront grandes et lourdes (Bolt, Delete) tandis que d’autres sembleront minuscules (Contacts, VpnKey). Il faut les calibrer à la main.

La méthode de calibrage

Faire une capture de l’écran avec les icônes dans leurs cercles de 38 dp — notre emplacement d’accueil.
Avec Python, PIL et numpy, mesurer le rectangle englobant du glyphe dessiné — sa largeur et sa hauteur maximales en pixels.
La formule : new_size = 24 × 52 / measured_px, borné à [18..28].
Puis le centrer dans l’emplacement de 38 dp, verticalement et horizontalement.

52 px, c’est le glyphe de référence, Fingerprint ; tout se mesure par rapport à lui comme unité.

La carte des tailles obtenue

Icon	Taille	Why
Add, Apps, ArrowBack, Close	28dp	traits fins, glyphe de 36–41 px
AutoMode, Bolt, DeleteOutline, Edit, List, Photo, QrCode, Tune, DriveFileRenameOutline	26dp	densité moyenne, glyphe d’environ 47 px
LocationOn	24dp	la punaise de carte — ne pas toucher, c’est une référence
LocationOff	26dp	la punaise barrée — ne pas toucher
ContentCopy, MyLocation, PeopleAlt, Wifi, ExpandMore, ExpandLess	22dp	larges ou hautes, et visuellement lourdes
Contacts, VpnKey	20dp	surchargées de détails internes

Ne pas toucher : LocationOn (24), LocationOff (26), ExpandMore et ExpandLess (22). Ce sont les icônes de référence : elles ont été validées pixel par pixel et tout le calibrage se mesure à partir d’elles.

AutoMode

S’utilise partout où se trouvait Bolt — le bouton Automatisation sur la carte de clé, l’icône de section dans les réglages. Taille 26 dp, comme Bolt.

Où la table vit dans le code

IconsDebugSheet.kt — la table iconSizeByName. L’écran de débogage s’ouvre depuis SettingsScreen par le bouton Icônes UI (debug) : en haut une FlowRow d’icônes calibrées, en bas une liste de noms, tailles et contextes.

2. Typographie

Nous utilisons les rôles standard de Material 3, délibérément limités à quatre :

Role	Taille / interligne	Où c’est utilisé
`titleLarge` SemiBold	22sp/28sp	Le titre de la feuille inférieure ( Pour l’invité · <objet> )
`titleMedium` SemiBold	16sp/24sp	Titres de règles ( Géolocalisation , Wi-Fi , Intervalle , Activation ) et libellés de FieldSection ( Coordonnées , Rayon , Mode , Réseaux enregistrés )
`bodyMedium`	14sp/20sp	Libellés des boutons radio, texte dans les boutons pilule, noms des segments
`bodySmall` muted	12sp/16sp	Statuts et indications ( 36540 m jusqu’au point , 74 m · maximum, l’invité peut réduire , textes d’aide). Couleur : `onSurfaceVariant`

Rule: ne pas mélanger les graisses au sein d’un rôle. Si quelque chose est titleMedium SemiBold, c’est SemiBold partout — pas regular ici et Semi là.

3. Rythme et espacements

L’échelle

Nous avons convenu de travailler en multiples de 2 / 4 / 8 / 10 / 14 / 16 / 20. Ni festin ni disette : des éléments identiques reçoivent des espacements identiques.

Entre les cartes du défilement principal

Le conteneur de la feuille inférieure : spacedBy(12.dp). Les cartes sont espacées de 12 dp.
Marges horizontales du contenu de la feuille : padding(horizontal=20.dp).

À l’intérieur d’une carte (RuleCard)

Marge sur tous les côtés : 16 dp.
L’en-tête — cercle, titre, chevron, interrupteur — forme une rangée : 14 dp entre le cercle et le titre, 12 dp entre le titre et l’interrupteur.
De l’en-tête au corps une fois déplié : padding(top=16.dp).
Le corps utilise verticalArrangement = spacedBy(16.dp) entre les grands blocs.

À l’intérieur d’une FieldSection (libellé plus contenu)

Columnarrangement: spacedBy(2.dp). Seulement 2 dp entre le libellé en gras et le statut ou l’indication en dessous, pour qu’ils se lisent comme un couple titre-légende.
La même règle vaut pour tout texte apparié : 2 dp partout, sans exception. Auparavant, c’était 0 dp à un endroit et 2 dp à un autre, et cela heurtait l’œil.

Boutons pilule et statuts

Du statut ou de l’indication au bouton pilule : Spacer(10.dp). Idem dans Géo, la connexion Wi-Fi et la liste Wi-Fi.

Les curseurs sont un cas particulier

Un curseur Material 3 occupe environ 48 dp dans la mise en page à cause de la zone tactile minimale, dont la piste visible ne fait qu’environ 4 dp au milieu, avec près de 22 dp de zone tactile vide au-dessus et en dessous. D’où :

Entre le texte de statut et le curseur nous appliquons Modifier.offset(y=-16.dp) pour rapprocher la poignée du texte.
Sous le curseur nous appliquons Modifier.sliderTrim() (un utilitaire dans GuestAutomationEditor.kt), qui annonce au parent une hauteur de 22 dp au lieu de 48 dp. Ainsi le padding(16.dp) donne le même écart entre la poignée et le bord inférieur que sur les cartes se terminant par un bouton pilule.

Le résultat : la distance entre le dernier élément visible — pilule, bouton radio ou poignée de curseur — et le bord inférieur de la carte est à peu près la même partout.

4. Couleurs et niveaux

Trois niveaux de confiance envers l’invité

Chaque règle — Géolocalisation, Wi-Fi, Temps, Autorisation, Confirmation — et le bloc Activation prennent l’un des trois niveaux. Le cercle d’icône de la carte prend la couleur correspondante quand l’interrupteur est allumé.

Key	Label	Colour	Description
`own`	L’invité décide	#3BA55D (green)	L’invité choisit lui-même le réglage
`suggest`	Preset	#E5B409 (yellow)	La valeur est fixée, et l’invité peut la modifier
`force`	Locked	#CC3322 (red)	La valeur est fixée et l’invité ne peut pas la modifier

Quand l’interrupteur est éteint, le cercle devient gris (#9AA0A6), quel que soit le niveau choisi.

Le sens du maximum et du minimum : in yellow (Prédéfini) la valeur du rayon est un maximum et l’invité ne peut que l’abaisser. Pour le nombre de réseaux Wi-Fi — le seuil de correspondance — c’est l’inverse : un minimum que l’invité ne peut qu’élever. Le sens de la liberté s’inverse, et les textes de statut le disent franchement : maximum, l’invité peut réduire / minimum, l’invité peut augmenter .

Règles pour les descriptions de niveaux

Écrire à la troisième personne, jamais je ni par moi . Dire l’invité , le réglage , la valeur .
Une seule phrase ne prend pas de point (voir Règles de texte ).

5. Contrôles

Le cercle coloré avec icône (38 dp)

Un unique emplacement d’accueil de 38 dp dans toute l’application :

Taille : 38dp, CircleShape, le fond prenant la couleur du niveau.
À l’intérieur se trouve l’icône à sa taille calibrée (voir section 1), en blanc.
Le contenu est centré : contentAlignment = Alignment.Center.

Boutons radio

Les envelopper dans Box(Modifier.size(38.dp), contentAlignment=Center) { RadioButton(...) } pour que le centre du cercle radio s’aligne sur celui du cercle coloré au-dessus. Sans l’enveloppe, le radio dérive horizontalement, car RadioButton se dessine avec ses propres marges.

Entre un bouton radio et son texte : Spacer(14.dp). Entre les lignes radio d’un groupe : Column(spacedBy(4.dp)).

La zone tactile minimale est désactivée : CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) — sinon chaque ligne radio gonfle à 48 dp et casse le rythme.

Switch

Un interrupteur standard Material 3, à droite du titre de la carte. Il désactive toute la règle, et la couleur du niveau n’est alors pas affichée — le cercle devient gris.

Rangée segmentée

Un contrôle maison pour changer de mode dans une règle — aujourd’hui seulement en Wi-Fi : Par un réseau précis / Par les réseaux alentour . Deux éléments dans une Row, chacun avec weight(1f):

Le fond de l’ensemble : colorScheme.surface, RoundedCornerShape(10.dp), marge 4dp.
Sélectionné : un fond de primaryContainer, RoundedCornerShape(8.dp), texte en SemiBold.
Non sélectionné : transparent, graisse normale.

Boutons pilule

Un contour, une icône et du texte, entièrement arrondis. Pour les actions secondaires — Utiliser la position actuelle , Relever les réseaux alentour . À l’état désactivé, le contour et le texte tombent à alpha=0.4.

Slider

Voir la section 3 sur offset(y=-16.dp) et sliderTrim(). Un curseur est toujours précédé d’un StatusLine portant un texte de statut (bodySmall, atténué) — 74 m · maximum, l’invité peut réduire .

Le menu déroulant des niveaux

S’ouvre en touchant la ligne de titre de la carte — toute la Row sauf l’interrupteur. Il apparaît juste sous l’en-tête, sur toute la largeur du contenu de la carte. Pour cela :

la Row est enveloppée dans Box avec onGloballyPositioned, et l’on mesure sa largeur en dp.
Le DropdownMenu reçoit cette largeur via DropdownMenuItem avec le modificateur Modifier.width(anchorWidthDp).

Les éléments du menu respirent au lieu d’être des lignes plates : un marqueur coloré à gauche, le libellé en gras, la description en dessous en petits caractères atténués. Ils s’alignent verticalement sur la première ligne, le libellé.

6. Animations

Le cercle pulsant d’Activation

Contrairement aux cercles colorés ordinaires des règles, le cercle d’en-tête d’Activation pulse.

Dans l’emplacement de 38 dp : un cercle plein de 28 dp, sans icône.
Par-dessus : deux ondes concentriques dessinées avec drawBehind + Stroke(width=6dp).
Le rayon de l’onde croît linéairement de 14 dp à 19 dp — la moitié de 38 dp.
Le cycle dure 2000 ms, la seconde onde étant décalée de 1000 ms.
Lissage : strictement LinearEasing. Pas FastOutSlowInEasing — sinon le redémarrage du cycle laisse voir un à-coup.
L’alpha suit la courbe sin(π·p) × 0.6 : à p=0 et p=1 l’alpha vaut 0, avec un pic au milieu. Le redémarrage est invisible.

Ne pas toucher à la formule de l’alpha. Elle a demandé plusieurs itérations, et toute simplification — linéaire (1−p) ou ease-out — produit un à-coup visible.

7. Règles de texte

Punctuation

Une phrase unique dans une chaîne d’interface ne prend pas de point. Les points n’apparaissent qu’à partir de deux phrases, pour les séparer. Cela vaut pour toute description, indication, statut, infobulle, titre et phrase isolée.

À quelle voix nous écrivons

Interdit : Je fixe la valeur exacte , Je ne restreins rien .
Autorisé : La valeur est fixée , L’invité choisit lui-même le réglage .

Choisir entre un maximum et une valeur exacte

Dans les statuts de curseur en mode jaune (Prédéfini), nous indiquons franchement le sens de la liberté :

Rayon : 74 m · maximum, l’invité peut réduire — plus petit veut dire plus strict.
Seuil Wi-Fi : 5 sur 7 · minimum, l’invité peut augmenter — plus grand veut dire plus strict.

En rouge (Verrouillé) : 74 m · exactement / 5 sur 7 · exactement .

Les noms des niveaux sont arrêtés

L’invité décide / Prédéfini / Verrouillé se sont imposés ; nous ne les changeons pas.

8. Motifs d’interaction

Un interrupteur ou une option radio non sélectionné

Si une règle possède un état désactivé, exprimez-le par un interrupteur plutôt que par une option radio du genre Non requis / Non / Désactivé . Sinon l’utilisateur dispose de deux façons de désactiver la même chose, ce qui déroute.

Examples:

Authorisation: interrupteur éteint signifie que ce n’est pas demandé. Allumé, il ne révèle que les trois vraies méthodes : code PIN, biométrie, ou code PIN ou biométrie.
Confirmation: interrupteur éteint signifie que l’appel part automatiquement. Allumé, l’invité appuie sur un bouton. Aucun bouton radio n’est nécessaire à l’intérieur — l’interrupteur porte tout.

Les coordonnées et les actions à droite

Dans le bloc Coordonnées, les icônes de copie et de suppression sont à droite au niveau des deux lignes (le libellé et le statut). Implémenté sous la forme Row { Column(weight=1f) { label; status }; CopyIcon; DeleteIcon }. Les icônes sont centrées verticalement par rapport au couple entier.

Afficher et masquer le corps d’une carte

Le corps ne se déplie que si :

l’interrupteur est allumé, et
le niveau n’est pas OWN — avec L’invité décide , le corps n’a pas de sens, puisque nous ne fixons rien.

Animation: expandVertically(tween(220)) + fadeIn(tween(220)) à l’ouverture, shrinkVertically(tween(180)) + fadeOut(tween(120)) à la fermeture.

Quand afficher la boîte de dialogue Clé ajoutée

À la réception d’une clé invité — seulement si l’application est à l’écran et que la clé est nouvelle et non répétée. Sinon, on l’enregistre en silence.