Layout
Position, Abstand und Ausrichtung vermitteln Hierarchie, bevor ein Wort gelesen wird. Diese Fähigkeit baut diese Struktur auf und testet sie unter Stress: Größe ändern, übersetzen, für RTL spiegeln.
Schreibe jede Korrektur im Styling-System des Projekts. Die unten stehenden Zahlen sind Ausgangspunkte für Oberflächen ohne etabliertes Dichtesystem. Wo ein solches existiert, verwende es wie geschrieben und nicht einen vertraut aussehenden Ersatz. Behalte bewusste Plattform-Chrome, kompakte professionelle Werkzeuge und Projekt-Tokens bei, solange sie die Stresstests bestehen.
Trefferflächen und Fokusverhalten gehören zu hr-better-accessibility. Radius, Schatten und Animation liegen außerhalb dieser Fähigkeit. Zeilenlänge und Textabstand gehören zu hr-better-typography.
Mit Abstand gruppieren, nicht mit Linien
Zuerst mit Abständen gruppieren, zweitens mit Hintergrundformen, zuletzt mit Trennlinien und nur dort, wo Abstand allein die Struktur nicht tragen kann. Der Abstand zwischen Gruppen muss mindestens das 2-fache des Abstands innerhalb einer Gruppe betragen (8px intra-Gruppe zu 16px+ inter-Gruppe), sonst wirkt die Gruppierung wie Rauschen. Ausrichtungskanten und Wichtigkeitsreihenfolge sind in grouping-and-alignment.md.
Steuerelemente von Inhalt unterscheidbar halten
Gib jedem interaktiven Element eine Hintergrundform, einen Rahmen oder eine konsistente Platzierungszone. Ein Steuerelement, das wie der statische Text daneben gestaltet ist, wird nicht als Steuerelement erkannt.
An gemeinsamen Kanten ausrichten
Wähle Ausrichtungskanten aus und halte dich daran; jede abweichende Kante wirkt wie Rauschen. Verwende einen Projekt-Abstandsschritt pro Unterordnungsebene, wobei 16px ein nützlicher Standard ist.
Verwende logische Eigenschaften für richtungsabhängiges Layout: padding-inline-start, margin-inline-end. Hebe physisches links und rechts für wirklich physische Geometrie auf.
Nach Wichtigkeit ordnen
Der wichtigste Inhalt befindet sich nahe der Oberseite und der Vorderkante. Die Lesereihenfolge verläuft von oben nach unten, von vorne nach hinten. Denke in führend und hinterherlaufend, nicht in links und rechts.
Auf verborgenen Inhalt hinweisen
Progressive Offenlegung benötigt einen sichtbaren Hinweis. Verwende das etablierte Signal des Projekts, oder lasse das nächste Element 16–32px über die Scrollkante hinausragen, oder zeige ein Offenlegungs-Steuerelement. Inhalt, der ohne Hinweis verborgen ist, könnte genauso gut nicht existieren.
Atemraum zwischen Zielen
Ohne ein etabliertes Dichtesystem beginne mit 12px zwischen benachbarten umrandeten oder gefüllten Steuerelementen und 24px um randlose Text- und Nur-Symbol-Steuerelemente. Kompakte Layouts können weniger verwenden, solange die Trefferflächen von hr-better-accessibility sich nicht überlappen und die Steuerelemente unterscheidbar bleiben. Layout-Ränder und Breakpoint-Rezepte sind in spacing-and-adaptivity.md.
Buttons von den Rändern einrücken
In Inhaltslayouts halte vollbreite Buttons innerhalb der Layout-Ränder mit einem sichtbaren Radius, beginnend nahe 16px inline auf Mobilgeräten. Rand-zu-Rand-Aktionen funktionieren, wenn sie der etablierten Plattform-Chrome folgen, Sicherheitsbereiche berücksichtigen und von System-UI unterscheidbar bleiben.
Inhalt blutet aus, Steuerelemente schweben
Hintergründe und Medien erstrecken sich bis zu den Darstellungsbereichsrändern. Steuerelemente und Text bleiben innerhalb der Layout-Ränder und Sicherheitsbereiche (env(safe-area-inset-*)). Klebrige Chrome schwebt über der Inhaltsebene, anstatt sie zu blockieren.
Struktur halten, bis sie bricht
Breakpoints kommen vom Inhalt, nicht von Gerätevorgaben. Behalte das erweiterte Layout, solange es wirklich passt, und breche spät zusammen. Bevorzuge Container-Queries für die Komponenten-Anpassung und teste zuerst die kleinsten und größten Größen.
Für Wachstum und Beschneidung planen
Übersetzte Zeichenfolgen wachsen, und kurze wachsen proportional stärker, daher ist ein Ein-Wort-Button-Label das riskanteste Element auf dem Bildschirm. Gib keine feste Breite oder Höhe auf einen Textcontainer und lasse Zeilen umbrechen. Teste mit Pseudo-Lokalisierung und einem repräsentativen Gebietsschema, anstatt einen Prozentsatz einzuplanen.
Parke niemals eine kritische Aktion dort, wo Größenänderung oder Scrollen sie abschneidet. Behalte sie im normalen Fluss oder in stabiler, für das Produkt geeigneter Chrome.
Bevor du fertig bist
| Fehler | Korrektur |
|---|---|
margin-left / padding-right in einem lokalisierbaren Layout | margin-inline-start / padding-inline-end |
| Inhaltslayout-Button berührt den Darstellungsbereichsrand | Innerhalb der Projektränder einrücken; bewusste Plattform-Chrome beibehalten |
| Breakpoints bei 768/1024, weil sie die Standardwerte sind | Brechen, wo der Inhalt tatsächlich nicht mehr passt |
| Textcontainer mit fester Breite, auf eine Sprache zugeschnitten | max-width und Umbruch; Pseudo-Lokalisierung testen |
| Primäre Aktion am clip-gefährdeten unteren Rand eines Bereichs | Klebrige Positionierung oder stabile Chrome mit Sicherheitsbereich-Padding |
100vh App-Shell oder Hero auf Mobilgeräten | 100dvh für eine Shell, die die Browser-Chrome verfolgt, 100svh für einen ersten Bildschirm |
| Langer Text schiebt die nachlaufende Aktion einer Zeile aus dem Bildschirm oder quetscht ihren Avatar | min-width: 0 auf der Textspalte, flex-shrink: 0 auf Elementen fester Größe |
Meldewesen
Schweregrad. HOCH blockiert Inhalt oder eine Aktion bei einer unterstützten Darstellungsbereichsgröße. MITTEL schadet der Hierarchie, Lesereihenfolge oder Anpassungsfähigkeit. NIEDRIG ist isolierte Ausrichtungs- oder Abstands-Politur.
Überprüfung. Ohne Browser: logische Eigenschaften anstelle von physischen, Container- und Media-Queries gegen die Liste der unterstützten Darstellungsbereiche und DOM-Reihenfolge gegen die beabsichtigte Lesereihenfolge. Mit einem: jede unterstützte Breite, 200 % Zoom und der RTL-Spiegel. Melde jede Prüfung, die du nicht durchführen konntest, als Nicht verifiziert.
Format. Gruppiere die Ergebnisse unter dem Prinzip, das jedes verletzt, geordnet nach Schweregrad, eine Zeile pro Ursache, die jeden Ort auflistet, an dem sie vorkommt:
| Schweregrad | Ort | Vorher | Nachher | Warum |
|---|
Ort ist pfad/zu/datei:zeile. Warum benennt das Prinzip und die Auswirkung auf den Benutzer.
Melde Blockieren, wenn ein HOCH verbleibt, ansonsten Genehmigen, wobei der Rest in der Tabelle als zu erledigende Arbeit stehen bleibt. Genehmige niemals eine Abdeckung, die du nicht inspiziert hast. Wenn es nichts zu melden gibt, gib an: "Keine umsetzbaren Layout-Feststellungen" und melde die Verifizierung.