Was macht Terrain UI?
Diese Regeln wurden aus der Benutzeroberfläche eines industriell thematisierten Spiels destilliert, wobei nur das beibehalten wurde, was sich auf gewöhnlichen Webseiten als nützlich erwiesen hat. Das Skill enthält keine Spiel-Assets und versucht nicht, das Spiel nachzubilden.
Lies diese gesamte Datei, bevor du beginnst. Öffne assets/terrain.css für Farben und Komponenten-Markup, verwende assets/contours.js für den Konturhintergrund und siehe references/research.md für die Herkunft jeder Regel und warum einige Dinge weggelassen wurden.
Acht Regeln
- Eine Akzentfarbe, zwei Bedeutungen: der aktuelle Ort und die primäre Aktion. Standardmäßig
#FEEC00, abgetastet vom ausgewählten Tab im Spiel. Verwende sie nur als Füllung, mit tintenfarbenem Text darauf; verwende sie im hellen Thema niemals für Linien oder Text. Dasselbe gilt für Hover: Nur der primäre Button wischt beim Hover die Akzentfarbe ein. Links, Pill-Buttons und Listenzeilen werden nur heller oder erhalten eine dickere Unterstreichung. - Auswahl hängt von der Richtung ab:
- Vertikale Listen: Hover hellt die Zeile auf; die ausgewählte Zeile wird dunkel mit hellem Text, und ein Akzentbalken erscheint auf der linken Seite.
- Horizontale Tabs: Der ausgewählte Tab füllt sich vollständig mit der Akzentfarbe. Beim Wechsel kollabiert der alte Block und der neue öffnet sich seitlich von seiner Mitte aus.
- Button-Form zeigt Priorität an: Die primäre Aktion ist ein Block mit abgeschnittener unterer rechter Ecke; sekundäre Aktionen sind Pillen mit einem runden Icon am rechten Ende. Maximal eine primäre Aktion pro Button-Gruppe.
- Setze einen Pfad oben links auf jede Seite:
// Arbeit / Über mich. Ebenen, zu denen du zurückkehren kannst, sind Links. - Zahlen sind Dekoration, und sie müssen echt sein: Setze IDs, Daten und
aktuell / gesamt-Zähler in breiten tabellarischen Ziffern. Erfinde niemals Daten oder füge falschen technischen Text hinzu. Dasselbe gilt für den Text: Beschreibe ein Produkt (Funktionen, unterstützter Umfang, Installation) nur aus dem, was der Benutzer angegeben hat, oder aus den eigenen Dokumenten des Projekts, und behalte dessen Umfang bei. Wo es keine Quelle gibt, schreibe einen Platzhalter wie[TODO: ...]anstatt etwas auszufüllen. - Zeige Tastenkappen für Tastenkürzel an: zum Beispiel
←→neben Seitentasten. Zeige sie nur auf Geräten mit einem feinen Zeiger. - Hintergrund: geschlossene Konturlinien: ein Patch in jeder von zwei Ecken, 6% bis 9% Deckkraft, jede fünfte Linie stärker, nicht animiert.
- Kurze, feste Bewegung: Hover 90 ms, Auswahl 110 bis 120 ms, Kurve
cubic-bezier(.2,0,0,1). Schalte alles aus, wenn das System eine reduzierte Bewegung anfordert.
Wähle zuerst einen Seitentyp
Entscheide, welche Art von Seite du baust, bevor du beginnst. Alle drei teilen sich dieselben Farben und Komponenten; sie unterscheiden sich darin, wie auffällig sie sind. Wenn du dir unsicher bist, wähle Lesen.
| Typ | Verwendet für | Wie | Entsprechung im Spiel |
|---|---|---|---|
| Lesen | Artikel, Projektdetails, Einstellungen, Hilfe | Eine Textspalte, etwa 65 lateinische oder 38 CJK-Zeichen breit; Akzent nur auf dem aktuellen Navigationselement und dem primären Button; Konturen optional | Enzyklopädie, Archive |
| Präsentation | Startseiten, Portfolios, Landingpages | Große breite Überschriften, Umriss-Schriftart erlaubt; große Zahlen als Hintergrund; Konturen aktiviert; Inhalt kann blockweise einblenden | Hauptmenü, Shop |
| Arbeitsbereich | Admin-Seiten, Dashboards, Tools, Erweiterungseinstellungen | Vertikale Listennavigation links, Tabs oben; hauptsächlich Tabellen, Zahlen und Formulare; keine großen Überschriften; Bewegung nur als Reaktion auf Aktionen | Inventar, Ausrüstung, Freundesliste |
Komponenten
Alle leben in assets/terrain.css mit dem Präfix tu-. examples/demo.html zeigt jede einzelne.
| Komponente | Klassen | Hinweise |
|---|---|---|
| Pfadtitel | tu-crumb | Regel 4 |
| Vertikale Liste | tu-list | Markiere das aktuelle Element mit aria-current |
| Horizontale Tabs | tu-tabs tu-tab | Markiere den aktuellen Tab mit aria-selected="true" oder aria-current |
| Primärer / Sekundärer Button | tu-btn / tu-btn--pill + tu-btn__icon | Regel 3 |
| Tastenhinweis | tu-kbd | Regel 6 |
| Feldzeile | tu-fields tu-sep | Trenne Metadaten mit einem vertikalen Balken │ |
| Panel | tu-panel | Ein flacher Block: keine Radius, Schatten oder Rahmen |
| Tabelle | tu-table-wrap tu-table | Kleine breite Kopfzeilen-Beschriftungen; rechtsbündig numerische Spalten mit tu-right; scrollt seitlich auf schmalen Bildschirmen |
| Eingabe | tu-field tu-input tu-hint | Bei Fokus wird die Unterstreichung dicker und ein Akzentbalken erscheint links |
| Fehler | tu-error, plus aria-invalid="true" auf der Eingabe | Ein kleiner Akzentquadrat und ein Satz, wie man es behebt; kein roter Text |
| Schalter | tu-switch | „Ein“ ist ein aktueller Zustand, also füllt sich die Spur mit der Akzentfarbe |
| Dialog | <dialog class="tu-dialog"> | Buttons sitzen in einer Fußzeilenleiste: einer primär, Abbrechen als Pille; er schärft sich aus einer Unschärfe ein |
| Toast | tu-toast | Ein dunkler Balken mit einem Akzentbalken links; kommt von links und verschwindet nach 2 Sekunden |
| Leerer Zustand | tu-empty | Eine gestrichelte Box mit einem Satz, was hier erscheinen wird, optional ein primärer Button |
| Laden | tu-progress, plus tu-progress--busy während des Wartens | Eine 2 px Linie; wenn der Fortschritt bekannt ist, setze --tu-value und zeige den Prozentsatz |
Kein Rot. Warnungen, Fehler und ausstehende Zustände verwenden den kleinen Akzentquadrat mit Tintentext. Setze irreversible Aktionen wie Löschen hinter einen Bestätigungsdialog.
Für alles, was nicht in dieser Tabelle steht, leite es aus den acht Regeln ab: ob es „aktuell“ oder „primär“ ist, entscheidet, ob es den Akzent verwenden darf; ob es primär oder sekundär ist, entscheidet Block oder Pille; ob es angeklickt werden kann, entscheidet, ob es beim Hover heller wird.
Bewegung
| Aktion | Dauer | Wie |
|---|---|---|
| Hover aufhellen | 90 ms | Hintergrundfarbübergang |
| Auswahlbalken erscheint | 110 ms | scaleY(0 → 1) |
| Tab-Wechsel | 120 ms | Akzentblock scaleX(0 → 1), von der Mitte aus öffnend |
| Primärer Button Hover | 280 ms | Akzent wischt von links ein |
| Seitenwechsel | Aus 320 ms, ein 480 ms | Alte Seite verschwimmt und blendet aus; neue Seite blendet blockweise ein, 100 ms Abstand |
Nicht tun
- Unsichtbare Markierungen (rote Punkte,
NEU-Abzeichen): Im Spiel drängen sie die Spieler, Belohnungen einzusammeln; auf einem Portfolio oder einer normalen Website wirken sie wie Nörgelei. - Milchglas, Glitch-Risse, Scanlines, Glühen, große Akzentfüllungen, abgerundete Karten mit Schatten.
- Nur im Spiel vorkommende Elemente wie 3D-Karussellmenüs, Charaktergrafiken und Seltenheitsfarbbalken.
- Offizielle Spiel-Assets: Screenshots, Logos, Icons, Charaktergrafiken, Text oder die offiziellen Schriftdateien.
Schrift
- Lateinischer Text und Zahlen: Saira (Open Source, SIL OFL). Beschriftungen auf 125% gedehnt, Großbuchstaben, 0.06em Laufweite. Die offizielle Seite fügt ihren breiten Beschriftungen keine Laufweite hinzu; hier wird für kleine Größen ein wenig beibehalten.
- Chinesisch: Noto Sans SC oder die systemeigene Sans. Keine Serifen- oder Pinselschriften für Fließtext.
- Alle Zahlen tabellarisch (
font-variant-numeric: tabular-nums).
Auslieferung als einzelne HTML-Datei
- Verwende die
terrain.css-Klassen so wie sie sind; füge keine seitenweiten Überschreibungen hinzu, die ihre Farben ändern. Wenn eine Änderung erforderlich ist, hat die Komponente ein Problem und sollte an das Skill zurückgemeldet werden. - Setze
terrain.cssin ein<style>-Element undcontours.jsin ein<script>-Element. Stelle vor dem Inline-Setzen eines Skripts sicher, dass es kein wörtliches</script>enthält; falls doch, schreibe es als</script>. - Wenn die Seite offline funktionieren muss, bette Saira als woff2-Daten-URI in
@font-faceein; andernfalls verlinke Google Fonts und behalte die Fallback-Schriftarten bei.
Checkliste vor der Auslieferung
- Ein Seitentyp wurde ausgewählt, und Überschriftegrößen verschiedener Typen werden nicht auf einer Seite gemischt.
- Die Akzentfarbe erscheint nur auf dem aktuellen Ort und primären Aktionen; es gibt kein Rot auf der Seite.
- Jede Button-Gruppe hat höchstens einen primären Block-Button; der Rest sind Pillen.
- Vertikale Listen und horizontale Tabs verwenden ihre eigenen Auswahlstile.
- Jede Seite hat einen
//-Pfadtitel. - Alle Zahlen sind echte Daten; jede Produktaussage hat eine Quelle und überschreitet ihren Umfang nicht.
- Sowohl helle als auch dunkle Themen wurden überprüft; nichts scrollt seitlich bei Telefonbreite (ca. 400 px).
- Der Tastaturfokus ist sichtbar; alles ist still bei reduzierter Bewegung.
- Keine offiziellen Spiel-Assets werden verwendet.
Dateien
| Datei | Inhalt |
|---|---|
assets/terrain.css | Farbschemata (hell und dunkel) und alle Komponenten |
assets/contours.js | Konturhintergrund, eine Zeile zum Einrichten: TerrainContours.mount(canvas) |
examples/demo.html | Jede Komponente auf einer Seite, bereit zum Öffnen |
examples/screenshots/ | Die Komponentenseite in hell, dunkel, Telefonbreite und dem Dialog |
references/research.md | Forschungsnotizen: was beobachtet wurde, was behalten wurde, was weggelassen wurde |