Raum und Dichte
Eine Siebenstufige Skala für jeden Raum. Verknüpft mit Feinjustierung (wenige Werte, immer gleich) und mit "nie verworren" (Platz für jedes Ding, um auf seine eigene Art gesehen zu werden).
Auf dieser Seite
Die Skala
Jeder Raum stammt aus einer einzigen Siebenstufigen Skala. Niemand wählt "etwa 20 Pixel": du wählst einen Schritt.
- space-1
- 4px
- Abstand-2
- 8px
- Abstand-3
- 16px
- Abstand-4
- 24px
- Abstand-5
- 40px
- Abstand-6
- 64px
- Abstand-7
- 96px
Nachmalnäher, je enger
Was zusammengehört, bleibt nah (Icon und Wort: space-1; verschiedene Teile bleiben entfernt (zwischen Sektionen: space-7). Raum sagt, was eine Gruppe ist, nicht Linien und Kästen.
Do
ErminnerungDi, 9 UhrRückkopieJeden Abend
Title and detail together; one item far from the next.
Don’t
ErminnerungDi, 9 UhrRückkopieJeden Abend
Everything with the same space: you cannot tell which detail belongs to which title.
No space off the scale
Wenn kein Schritt passt, ist die Komposition falsch, nicht der Maßstab.
Density depends on the screen
Leseseiten atmen. Arbeitsbildschirme mit Tabellen und Formularen zum Scannen und massenhaften Handeln sind kompakt: data-density="compact" auf dem Arbeitsbereich drückt Zellen und Steuerelemente zusammen und lässt den Text allein. Das Ändern der Dichte animiert: Zeilen schrumpfen, sie springen nicht.
| Terminplan | Wenn |
|---|---|
| Wöchentlicher Backup | Sonntag, 3 Uhr |
| Pflanzen gießen | Montag, 9 Uhr |
| Monatlicher Bericht | Der 1. um 8 Uhr |
Breite und Raster
Eine Lesespalte hat eine Messgröße
Sie geht nie über die bequeme Breite (measure-reading, etwa 70 Zeichen pro Zeile) hinaus.
Ein Raster wächst nie über den Bildschirm hinaus
Eine Spalte im Raster schrumpkt standardmäßig nicht unter ihren Inhalt: eine breite Tabelle streckt die Spalte und der gesamte Seitenanfang scrollt seitwärts. Verwenden Sie minmax(0, 1fr) für Spalten und lassen Sie breiten Inhalt innerhalb seines eigenen Kastens scrollen.
Do
Eine bequeme Lesespalte lässt das Auge zum Anfang der nächsten Zeile zurückkehren, ohne sich zu verlieren. Wenn die Zeile auf einem breiten Bildschirm von Kante zu Kante streckt, wird jede Rückkehr zur Suche und das Lesen ermüdet vor dem Ende des Absatzes.
Die Spalte stoppt an einer bequemen Messgröße, auch wenn Platz übrig bleibt.
Don’t
Eine bequeme Lesespalte lässt das Auge zum Anfang der nächsten Zeile zurückkehren, ohne sich zu verlieren. Wenn die Zeile auf einem breiten Bildschirm von Kante zu Kante streckt, wird jede Rückkehr zur Suche und das Lesen ermüdet vor dem Ende des Absatzes.
Die Zeile streckt sich so weit wie der Kasten zulässt: auf einem breiten Bildschirm verliert das Auge beim Zurückgehen.
.colunas {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}Do
Terminplan · Wann · Status · Läuft · Besitzer · Letzter Lauf
Eine weitere Spalte
Mit minmax(0, 1fr) beachtet die Spalte den Kasten und breiter Inhalt scrollt darin hinein.
Don’t
Terminplan · Wann · Status · Läuft · Besitzer · Letzter Lauf
Eine weitere Spalte
With 1fr wächst die Spalte mit ihrem Inhalt und geht über die gestrichelte Kante hinaus: auf Mobilgeräten scrollt die gesamte Seite seitwärts.
Diese Regel stammt aus einem echten Fehler: Feitios erste Showcase hat auf dem Handy wegen einer Tabelle 34px seitwärts gescrollt.