Typographie Système de conception

Créez des hiérarchies de contenu claires, quelle que soit leur taille.

8 points de contrôle · 3 groupes de contenu

Contenu de la checklist

Progression de la vérification

Structure et signification

Comparer les informations et la présentation dans le contexte d'utilisation.

Utilisez une échelle de taille de police cohérenteDéfinissez les niveaux de la légende au titre et évitez d'ajouter de nouvelles tailles pour chaque écran.Remplacez les titres par du contenu plus long et augmentez la taille de la police sur les appareils. Gardez la hiérarchie, les accents vietnamiens, l'espacement des lignes et les actions associées faciles à lire sans couper le contenu.Exemple La carte comporte un titre, une description et un bouton d'ouverture sur deux lignes ; Lorsque les lettres sont plus grandes, l'étiquette augmente en hauteur au lieu de recouvrir le bouton ou de couper la marque vietnamienne.Définir le style par rôleDistinguez les titres, le contenu, les étiquettes et les légendes pour choisir les styles en fonction de leur signification.Une police de caractères doit avoir un nom qui joue le même rôle que le corps ou l'étiquette ; Les changements de rôle doivent être mis à jour de manière synchrone au lieu de modifier chaque écran.Vérifiez les polices et les accents vietnamiensChoisissez le poids à utiliser, sauvegardez la police et vérifiez le texte accentué lorsque le téléchargement de la police échoue.Vérifiez la longueur des lettres, les accents vietnamiens et le poids réellement chargés ; Les polices de sauvegarde doivent être de taille proche pour éviter les sauts de mise en page.

Interaction et convivialité

Essayez l'opération, modifiez le statut et continuez à travailler.

Ajuster l'espacement des lettresDéfinissez la hauteur de ligne et l’espacement des caractères appropriés pour les titres et les lectures longues.Essayez un paragraphe de plusieurs lignes, pas seulement un exemple de phrase. Les lignes trop serrées rendent la lecture difficile, et un espacement important des lettres peut détruire les mots et la ponctuation dans les petites tailles.Gardez le texte lisible lors de la mise à l'échelleRecherchez un écran étroit et un niveau de zoom de 200 % pour éviter de couper du texte ou de chevaucher du contenu.Lors de l'augmentation de la taille de la police ou du zoom, les boutons et les balises doivent s'étirer en fonction du contenu ; Évitez les hauteurs fixes qui coupent la deuxième ligne.Gardez le contenu suffisamment contrastéAssurez-vous que les petits textes restent faciles à lire et n'utilisez pas la couleur comme seul indicateur de signification.Vérifiez également le sous-texte, l'espace réservé et l'état clair/sombre désactivé ; Les petites lettres sur fond coloré sont souvent faciles à manquer.

Complétez l'expérience

Recherchez les détails faciles à manquer lors de la mise en œuvre de la conception.

Définir la taille minimale du texte par rôleDocumentez les minimums lisibles pour le corps du texte, les étiquettes et les légendes, et expliquez quand un style plus large est nécessaire au lieu de réduire le texte pour l'adapter.Essayez la taille d'affichage réelle sur l'appareil ; Le texte dans une image d’aperçu agrandie peut masquer les problèmes de lisibilité en taille réelle.Définir une échelle de type réactiveDocumentez la façon dont les titres et le corps du texte changent dans la largeur de la fenêtre tout en préservant la hiérarchie et en évitant les changements brusques de taille.Si vous utilisez des tailles de police flexibles, définissez des limites minimales et maximales ; Vérifiez que l'étiquette longue n'est pas réduite pour ne conserver qu'une seule ligne.

La progression est enregistrée automatiquement dans ce navigateur.

GUIDE

Comment vérifier

Vérifiez la hiérarchie lorsque le texte est long et agrandi

Remplacez les titres par du contenu plus long et augmentez la taille de la police sur les appareils. Gardez la hiérarchie, les accents vietnamiens, l'espacement des lignes et les actions associées faciles à lire sans couper le contenu.

EXEMPLES

Exemples d’utilisation

Titre long dans une seule balise

La carte comporte un titre, une description et un bouton d'ouverture sur deux lignes ; Lorsque les lettres sont plus grandes, l'étiquette augmente en hauteur au lieu de recouvrir le bouton ou de couper la marque vietnamienne.