Espacement / Grille Système de conception

Gardez le rythme de mise en page cohérent à mesure que le contenu et les écrans changent.

7 points de contrôle · 2 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.

Utiliser un ensemble de distances communChoisissez des niveaux de distance réguliers au lieu d’ajuster arbitrairement chaque point.Distinguer l'espacement au sein d'un élément de l'espacement entre les sections de page.Exemple Les étiquettes et les zones de saisie sont proches ; Les deux groupes de paramètres présentent un écart plus important.Nommé selon le butUtilisez des variables pour le remplissage des éléments, l'espacement des listes et les marges des pages.Séparez le remplissage au sein du composant de l'espacement de mise en page entre les régions ; la même valeur numérique ne signifie pas le même rôle.Loquets de colonnes et de gouttièresIndiquez comment diviser les colonnes, l'espace entre les colonnes et la marge extérieure à chaque niveau de largeur.Précisez le nombre de colonnes, l'espace entre les colonnes et la marge extérieure dans chaque taille ; Le contenu réel doit correspondre à la grille au lieu de se limiter au motif de blocs de couleur.Changer la mise en page en fonction du contenuDéfinissez un point de transition lorsque le contenu commence à être encombré et conservez les règles de partage.Définissez les points de changement de mise en page lorsque le contenu en a besoin, pas seulement par nom d'appareil ; vérifier les largeurs entre deux points spécifiés.

Interaction et convivialité

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

Avoir une densité adaptée au contexteLe cas échéantSi le mode compact est pris en charge, le texte, les zones tactiles et les points AF seront toujours lisibles.Le mode compact doit encore préserver la zone interactive et la lisibilité ; Réduisez la quantité de décoration avant de mettre à l’échelle les boutons ou le texte.Comparez l'axe d'alignementVérifiez que les titres, les zones de saisie et les actions ont les mêmes guides que l'intention.Essayez le contenu long et zoomezRecherchez les étiquettes longues, les lignes multiples et agrandissez le texte avant de finaliser la grille.Essayez de longues étiquettes, plusieurs colonnes, de longues traductions et de grands niveaux de zoom ; Des erreurs de maillage apparaissent souvent dans ces cas avant les données d'échantillonnage.

La progression est enregistrée automatiquement dans ce navigateur.

GUIDE

Comment vérifier

Utiliser un ensemble de distances commun

Distinguer l'espacement au sein d'un élément de l'espacement entre les sections de page.

EXEMPLES

Exemples d’utilisation

Utiliser un ensemble de distances commun

Les étiquettes et les zones de saisie sont proches ; Les deux groupes de paramètres présentent un écart plus important.

Espacement / Grille Système de conception

Structure et signification

Interaction et convivialité

Comment vérifier

Utiliser un ensemble de distances commun

Exemples d’utilisation

Utiliser un ensemble de distances commun

Trouver une checklist

Aucune checklist trouvée