Combien de paliers d’espacement un système doit-il avoir ?

Avant de faire confiance à la recommandation de qui que ce soit, mesurez votre propre produit : cherchez dans vos feuilles de style (grep) chaque valeur de margin, padding et gap, puis comptez les résultats distincts. Les produits matures qui ont grandi sans système atterrissent souvent entre 30 et 60 valeurs distinctes — 12px à côté de 13px, 20px à côté de 22px à côté de 24px. Dressez ensuite la liste des tâches que ces valeurs accomplissent — écart d’icône, padding de contrôle, espace entre les champs d’un formulaire, padding de carte, écart entre les cartes, saut de bloc, saut de section, marge de page — et la liste s’arrête à environ huit.

Un système d’espacement a besoin de six à dix paliers : un ou deux paliers micro pour l’intérieur des composants, trois ou quatre paliers intermédiaires pour l’espace entre les éléments et les composants, et deux ou trois paliers macro pour les sections et les régions de page. L’écart entre les quarante valeurs en usage et les huit tâches à accomplir est la réponse à la question « combien » — un système a besoin d’à peu près autant de paliers qu’il y a de tâches, plus une petite marge de sécurité.

Cet article répartit les paliers zone par zone, explique pourquoi si peu tiennent perceptuellement, et couvre l’unique raison légitime d’en ajouter un — la question du dimensionnement au sein du système d’espacement plus large.

Combien de valeurs d’espacement les produits non systématisés accumulent-ils ?

Menez l’expérience concrètement :

grep -rhoE '(margin|padding|gap)[^;]*:[^;]*px' src/styles \
  | grep -oE '[0-9]+px' | sort -n | uniq -c | sort -rn

L’histogramme a tendance à présenter une forme reconnaissable : quelques poids lourds en haut (16px utilisé des centaines de fois, 8px et 24px juste derrière), puis une longue traîne — 18px utilisé 22 fois, 22px utilisé 9 fois, 13px utilisé deux fois. Chaque valeur de la traîne fut un jour une décision locale : un écart ajusté pour corriger un écran surchargé, un arrondi jamais réconcilié, la supposition d’un troisième développeur sur ce que voulait dire le deuxième. Aucune n’est fausse individuellement ; collectivement, elles signifient que la même décision de design est reprise des dizaines de fois avec des résultats légèrement différents.

Placez les deux chiffres côte à côte — une quarantaine de valeurs en usage, environ huit tâches distinctes — et la question se répond d’elle-même. Vous n’avez pas besoin de plus de paliers ; vous avez besoin que chaque tâche en ait exactement un.

Comment répartir six à dix paliers ?

Par zone, car les tâches d’espacement se regroupent à trois tailles distinctes. Avec une base de 16px, un ratio 2 et deux notes par doublement, l’échelle génère sept paliers — 8, 11, 16, 23, 32, 45, 64 — qui se répartissent ainsi :

Cette répartition explique les deux modes d’échec. Moins de six paliers affame une zone — généralement la zone micro, et les composants passent de serrés (8) à lâches (16) sans rien entre les deux. Beaucoup plus de dix et le menu cesse d’être court : les paliers voisins n’ont plus de tâches distinctes, on choisit entre eux à l’humeur, et la fatigue décisionnelle que l’échelle devait éliminer revient à la charge, cette fois avec un nom de token attaché.

Ouvrez cette échelle à sept paliers dans Scale Composer — trois chiffres génèrent l’ensemble des sept paliers, denses du côté micro et clairsemés du côté macro.

Pourquoi moins de paliers couvrent-ils quand même toutes les tâches ?

Parce que l’œil compare l’espace proportionnellement, pas au nombre de pixels. La différence entre 8px et 12px est sans équivoque — un écart vaut une fois et demie l’autre. La différence entre 56px et 64px, ce sont les mêmes 8 pixels, et elle passe presque inaperçue. Deux paliers ne peuvent porter deux tâches distinctes que si les lecteurs les distinguent de façon fiable, et aux grandes tailles cela exige un ratio visible, pas un incrément fixe.

C’est la propriété qu’une échelle non linéaire garantit par construction. Dans l’échelle à sept paliers ci-dessus, chaque palier est environ 41 % plus grand que le précédent (2^(1/2) ≈ 1,414) — chaque paire adjacente se distingue d’un coup d’œil, de 8 contre 11 jusqu’à 45 contre 64. Un menu linéaire comme celui de la grille de 8 points — 8, 16, 24, 32, 40, 48, 56, 64 — dépense la moitié de ses options en distinctions du côté des grandes valeurs que peu de lecteurs percevront un jour. Moins de paliers, espacés proportionnellement, ne sont pas un compromis face à un menu plus riche ; ils sont le menu débarrassé de ses options imperceptibles.

Quand faut-il ajouter un palier d’espacement ?

Quand une distance récurrente chevauche véritablement deux paliers existants — le même test de rôle que pour l’ajout d’une taille de police. Un seul écran où 23 paraît lâche et 16 paraît serré n’est pas une preuve ; une distance qui perd systématiquement face à ses deux voisins sur de nombreux écrans est un rôle sans palier, et elle en a mérité un.

Préférez modifier la densité de l’échelle plutôt qu’insérer une valeur isolée : passer de deux notes par doublement à trois régénère tout le menu avec des incréments plus doux (chaque palier environ 26 % plus grand au lieu de 41 %), si bien que les nouvelles valeurs intermédiaires partagent toujours la logique de l’échelle. Un 20 inséré à la main entre 16 et 23 résout un écart et casse l’arithmétique que tous les autres paliers respectent.

Quels nombres de paliers les systèmes de design publics utilisent-ils ?

Les échelles publiques sont un bon étalonnage, à condition de les lire correctement. Shopify Polaris, par exemple, documente ouvertement son échelle d’espacement : des paliers nommés, denses du côté des petites valeurs, se clairsemant vers les grandes — la même forme que produit la répartition par zone. Considérez-la comme une preuve de la forme d’une échelle viable, pas comme une autorité sur votre produit : Polaris est calibrée sur la densité des interfaces d’administration de Shopify, et un site marketing riche en contenu ou un tableau de bord dense en données atterriront à des points différents à l’intérieur de la fourchette de six à dix. Le motif convergent des systèmes publiés — un menu court et non linéaire — est la leçon transférable ; le nombre exact, c’est à vous de le mesurer.

Mesurez votre écart, puis choisissez votre densité

L’audit vous donne les deux chiffres qui comptent : les valeurs en usage et les tâches à accomplir. La décision qui reste, c’est la densité — savoir si la zone intermédiaire de votre produit a besoin de trois paliers ou de quatre. Comparez les candidats directement : la même base et le même ratio, à trois notes par doublement, font passer le menu de sept paliers vers dix, et chaque palier ajouté doit répondre au test de rôle — quelle tâche récurrente celui-ci possède-t-il ? Parcourez l’échelle plus dense et jugez chaque ajout à l’aune de votre propre histogramme : ouvrez l’échelle de comparaison dans Scale Composer.