Abstand / Raster Designsystem

Halten Sie den Layout-Rhythmus konsistent, wenn sich Inhalte und Bildschirme ändern.

7 Prüfpunkte · 2 Inhaltsgruppen

Inhalt der Checkliste

Prüffortschritt

Struktur und Bedeutung

Vergleichen Sie Informationen und Präsentation im Nutzungskontext.

Verwenden Sie einen gemeinsamen AbstandssatzWählen Sie regelmäßige Entfernungsstufen, anstatt jeden Punkt willkürlich anzupassen.Unterscheiden Sie den Abstand innerhalb eines Elements vom Abstand zwischen Seitenabschnitten.Beispiel Beschriftungen und Eingabefelder sind nah beieinander; Die beiden Einstellungsgruppen weisen einen größeren Abstand auf.Benannt nach ZweckVerwenden Sie Variablen für den Elementabstand, den Listenabstand und die Seitenränder.Trennen Sie die Polsterung innerhalb der Komponente vom Layoutabstand zwischen Regionen. Der gleiche numerische Wert bedeutet nicht die gleiche Rolle.Säulen- und DachrinnenverschlüsseGeben Sie an, wie die Spalten, der Abstand zwischen den Spalten und der äußere Rand auf jeder Breitenebene aufgeteilt werden sollen.Geben Sie die Anzahl der Spalten, den Abstand zwischen den Spalten und den äußeren Rand in jeder Größe an; Der tatsächliche Inhalt sollte zum Raster passen und nicht nur zum Farbblockmuster.Ändern Sie das Layout je nach InhaltLegen Sie einen Übergangspunkt fest, wenn der Inhalt überfüllt wird, und halten Sie an den Freigaberegeln fest.Legen Sie Layout-Änderungspunkte fest, wenn der Inhalt dies erfordert, und nicht nur anhand des Gerätenamens. Überprüfen Sie die Breiten zwischen zwei angegebenen Punkten.

Interaktion und Benutzerfreundlichkeit

Probieren Sie den Vorgang aus, ändern Sie den Status und arbeiten Sie weiter.

Haben Sie eine kontextgerechte DichteGegebenenfallsWenn der Kompaktmodus unterstützt wird, sind Text, Berührungsbereiche und Fokuspunkte weiterhin lesbar.Im Kompaktmodus müssen weiterhin der interaktive Bereich und die Lesbarkeit erhalten bleiben. Reduzieren Sie den Umfang der Dekoration, bevor Sie Schaltflächen oder Text skalieren.Vergleichen Sie die AusrichtungsachseStellen Sie sicher, dass Titel, Eingabefelder und Aktionen dieselben Leitfäden haben wie die Absicht.Versuchen Sie es mit langen Inhalten und ZoomÜberprüfen Sie, ob lange Beschriftungen und mehrere Zeilen vorhanden sind, und vergrößern Sie den Text, bevor Sie das Raster fertigstellen.Versuchen Sie es mit langen Beschriftungen, mehreren Spalten, langen Übersetzungen und großen Zoomstufen. Netzfehler treten in diesen Fällen häufig vor den Beispieldaten auf.

Der Fortschritt wird automatisch in diesem Browser gespeichert.

ANLEITUNG

So prüfen Sie

Verwenden Sie einen gemeinsamen Abstandssatz

Unterscheiden Sie den Abstand innerhalb eines Elements vom Abstand zwischen Seitenabschnitten.

BEISPIELE

Anwendungsbeispiele

Verwenden Sie einen gemeinsamen Abstandssatz

Beschriftungen und Eingabefelder sind nah beieinander; Die beiden Einstellungsgruppen weisen einen größeren Abstand auf.

Abstand / Raster Designsystem

Struktur und Bedeutung

Interaktion und Benutzerfreundlichkeit

So prüfen Sie

Verwenden Sie einen gemeinsamen Abstandssatz

Anwendungsbeispiele

Verwenden Sie einen gemeinsamen Abstandssatz

Checkliste suchen

Keine Checklisten gefunden