Calculateur de taille de composant en Design UI

Obtenez des repères de dimension pour les composants d’une interface selon le dispositif, la distance de lecture, la résolution et la densité recherchée.

Paramètres

Type d’installation
Densité de l’interface

Dimensions recommandées

Une base à tester dans le contexte réel.

Texte courant
px
Bouton
px
Champ
px
Ligne de tableau
px
Titre principal
px
Titre secondaire
px

Ces valeurs sont des repères. Vérifiez-les avec les utilisateurs, le dispositif réel, les règles d’accessibilité et les recommandations de la plateforme ciblée. Pour une interface tactile, privilégiez la densité confortable.

Comment lire ces recommandations ?

Le critère principal est la distance entre l’œil de l’utilisateur et l’écran. La diagonale et la résolution permettent ensuite d’estimer la densité de pixels du dispositif.

Le contexte modifie la recommandation : une interface mobile ou tactile demande généralement des cibles plus grandes qu’un poste de travail utilisé avec une souris. Les modes compact, normal et confortable permettent d’ajuster cette base.

Les calculs reprennent les principes documentés dans la page WordPress historique, inspirés notamment de Human Scale et des recommandations d’interface des plateformes mobiles. Ils ne remplacent pas un test d’accessibilité ni une observation en situation réelle.

Une taille correcte ne suffit pas à rendre une interface adoptable.