Amélioration des icônes pour les éléments d'interface utilisateur avec l'alignement typographique et l'échelle

L'utilisation d'icônes dans les éléments d'interface utilisateur est utile. En plus de l'étiquetage des éléments, les icônes peuvent aider à renforcer l'intention d'un élément utilisateur aux utilisateurs. Mais je dois dire que je remarque un peu de désalignement d'icônes tout en parcourant le Web. Même si l'alignement de l'icône est correct, les icônes ne répondent souvent pas bien lorsque les styles typographiques pour l'élément changent.

J'ai pris note de quelques exemples du monde réel et j'aimerais partager mes réflexions sur la façon dont je les ai améliorés. J'espère que ces techniques peuvent aider les autres à créer des éléments d'interface utilisateur qui s'adaptent mieux aux changements typographiques et tout en respectant les objectifs originaux de la conception.

Exemple 1 - Messagerie du site

J'ai trouvé cet exemple de messagerie sur un site Web de médias populaire. La position de l'icône n'a pas l'air si mal. Mais lorsque vous modifiez certaines des propriétés de style de l'élément comme la taille de la police et la hauteur de ligne, elle commence à s'effondrer.

Problèmes identifiés

• L'icône est absolument positionnée à partir du bord gauche à l'aide d'une unité relative (REM)
• Parce que l'icône est retirée du flux, le parent reçoit une plus grande valeur de rembourrage à gauche pour aider à l'espacement global - idéalement, notre padding-x est uniforme, et que tout semble bon, que l'icône soit présente ou non
• L'icône (c'est un SVG) est également dimensionnée en REM - cela ne permet pas de redimensionner respectif si la taille de la police de son parent change

Recommandations

Nous voulons que le bord supérieur de notre icône soit sur la ligne en pointillés bleus, mais nous trouvons souvent le bord supérieur de notre icône sur la ligne pointillée rouge.

Avez-vous déjà inséré une icône à côté d'un texte et cela ne s'alignera pas en haut du texte? Vous pouvez déplacer l'icône en place avec quelque chose comme la position: relative; en haut: 0,2em. Cela fonctionne assez bien, mais si les styles typographiques changent à l'avenir, votre icône pourrait sembler mal alignée.

Nous pouvons positionner notre icône plus fiable. Utilisons la distance de référence de l'élément (la distance entre la ligne de base d'une ligne et la ligne de base de la ligne suivante) pour aider à résoudre ce problème.

La distance de base est la taille de la taille de la police * .

Nous stockons cela dans une propriété CSS Custom:

 --basélinédiste: calc (var (- fontsize) * var (- lineHeight));

Nous pouvons ensuite déplacer notre icône vers le bas en utilisant le résultat de (distance de base - taille de la police) / 2 .

 --iConOffset: calc ((var (- basélinediste) - var (- fontsize)) / 2);

Avec une taille de police de 1REM (16px) et une hauteur de ligne de 1,5, notre icône sera déplacée de 4 pixels.

• Distance de base = 16px * 1,5 = 24px
• Offset icône = (24px - 16px) / 2 = 4px

Demo: avant et après

Exemple 2 - listes non ordonnées

Le deuxième exemple que j'ai trouvé est une liste non ordonnée. Il utilise une police Web (Font Awesome) pour son icône via A :: avant pseudo-élément. Il y a eu beaucoup de grands articles sur le style des listes commandées et non ordonnées, donc je ne vais pas entrer dans les détails sur le pseudo-élément de marqueur relativement nouveau et autres. Les polices Web peuvent généralement fonctionner assez bien avec l'alignement de l'icône en fonction de l'icône utilisée.

Problèmes identifiés

• Aucun positionnement absolu utilisé - Lorsque vous utilisez des pseudo-éléments, nous n'utilisons pas souvent Flexbox comme notre premier exemple et le positionnement absolu brille ici
• L'élément de liste utilise une combinaison de rembourrage et d'indents de texte négatifs pour aider à la mise en page - je ne suis jamais en mesure de bien fonctionner en fonction de l'évolutivité du texte et de l'icône multi-lignes

Recommandations

Parce que nous utiliserons également un pseudo-élément dans notre solution, nous ferons tirer parti du positionnement absolu. La taille de l'icône de cet exemple était un peu plus grande que sa copie adjacente (environ 2x). Pour cette raison, nous allons modifier la façon dont nous calculons la position supérieure de l'icône. Le centre de notre icône doit s'aligner verticalement avec le centre de la première ligne.

Commencez avec le calcul de la distance de base:

 --basélinédiste: calc (var (- fontsize) * var (- lineHeight));

Déplacez l'icône vers le bas en utilisant le résultat de (distance de base - taille de l'icône) / 2 .

 --iConOffset: calc ((var (- bâle-linediste) - var (- iConSize)) / 2);

Ainsi, avec une taille de police de 1REM (16px), une hauteur de ligne de 1,6 et une icône 2x la copie (32px), notre icône obtiendra une valeur maximale de -3,2 pixels.

• Distance de base = 16px * 1,6 = 25,6px
• Offset icône = (25,6px - 32px) / 2 = -3.2px

Avec une plus grande taille de police de 2REM (32px), une hauteur de ligne de 1,2 et une icône 64px, notre icône obtiendra une valeur maximale de -12,8 pixels.

• Distance de base = 32px * 1,2 = 38,4px
• Offset icône = (38,4px - 64px) / 2 = -12.8px

Demo: avant et après

Conclusion

Pour les icônes d'interface utilisateur, nous avons beaucoup d'options et de techniques. Nous avons des SVG, des polices Web, des images statiques, :: Marker et de type liste. On pourrait même utiliser des couleurs d'arrière-plan et des chemins de clip pour obtenir des résultats d'icônes intéressants. Effectuer des calculs simples peut aider à aligner et à évoluer les icônes d'une manière plus gracieuse, ce qui entraîne des implémentations un peu plus à l'épreuve des balles.

Voir aussi: Discussion précédente sur l'icône d'alignement au texte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!