Astrale Frontend-Design
Erstelle die Domain als fokussierte Produktschnittstelle, nicht als Landingpage. Domänen leben innerhalb der Astrale GUI und erben deren umgebende Hülle. Füge keine Hero-Elemente, große Präsentationsbereiche, redundante Seitenkopfzeilen oder leeren Raum vor nützlichem Inhalt hinzu.
Wende dieses Skill zusammen mit der View-Anleitung von astrale-domain an. Verwende die visuelle
Sprache der Host-Anwendung und die vorhandenen Primitiven des Projekts, es sei denn, die Aufgabe etabliert eine andere Richtung.
Plane die Informationsarchitektur
Bevor du UI-Code schreibst, skizziere ein grobes Wireframe gedanklich oder in einer temporären Notiz. Identifiziere:
- die primäre Aufgabe des Benutzers;
- die Hauptabschnitte und Unterabschnitte;
- die logischen Verbindungen zwischen ihnen;
- ihre relative Bedeutung;
- welche Informationen zusammengehören;
- den korrekten übergeordneten Abschnitt für jeden Unterabschnitt.
Mache jeden Abschnitt zu einer kohärenten logischen Einheit. Lass die Informationsarchitektur und die Aufgabenpriorität das Layout, die Reihenfolge, den Raum und die visuelle Gewichtung bestimmen. Platziere Status und Steuerelemente nahe dem Inhalt, den sie betreffen.
Halte die Schnittstelle zurückhaltend
Vermeide KI-„Slop“-Ästhetik. Verwandle nicht jedes Element in eine Karte, verschachtele Container ohne echten Gruppierungsbedarf oder lasse Karten beim Überfahren mit der Maus aufschweben. Verwende Hover nur, um Interaktion zu verdeutlichen, und biete die gleiche Klarheit für Tastatur- und Touch-Benutzer.
Bevorzuge eine kleine Anzahl starker Bereiche, eine klare Hierarchie, kompakte Abstände und konsistente Steuerelemente. Füge standardmäßig keine dekorativen Farbverläufe, Pillen, überdimensionierten Metriken, Animationen oder ornamentalen Text hinzu. Jedes visuelle Element muss Struktur, Zustand, Priorität oder Bedienbarkeit vermitteln.
Gestalte Interaktionszustände präzise
Modelliere die relevanten Zustände initial, laden, leer, bereit, senden, erfolgreich, fehlgeschlagen, nicht autorisiert und deaktiviert, bevor ein Ablauf als abgeschlossen betrachtet wird.
- Zeige das Laden im Bereich, der tatsächlich wartet: innerhalb eines gesendeten Buttons für eine lokale Aktion, oder mit einem Seiten-Skeleton für den anfänglichen Seiteninhalt. Zeige niemals mehrere Ladeanzeigen für eine Aktion.
- Verhindere doppelte Übermittlungen. Bewahre Benutzereingaben bei Fehlern und platziere umsetzbares Feedback neben der betroffenen Steuerung oder dem Inhalt.
- Behandle Erstellungen klar: Zeige, dass die Aktion erfolgreich war, füge das Ergebnis dort ein, wo der Benutzer es erwartet, und verschiebe den Fokus nur, wenn dies die nächste Aufgabe unterstützt.
- Behandle Löschungen klar: Unterscheide reversible Entfernung von destruktivem Löschen und bestätige nur, wenn die Konsequenz eine Unterbrechung rechtfertigt.
- Verwende optimistische Listenaktualisierungen, wenn das Ergebnis vorhersagbar ist. Mache bei Fehlern rückgängig, zeige den Fehler an und gleiche die Schnittstelle mit dem committeten Kernel-Zustand ab.
- Schließe ein geöffnetes Dropdown, wenn der Benutzer außerhalb klickt oder Escape drückt. Unterstütze Tastaturnavigation, zeige das ausgewählte Element an und setze den Fokus zurück auf das auslösende Element, wenn angemessen.
- Mache lange Bezeichnungen und Werte zu einem Teil des Layout-Tests. Lasse sie umbrechen, wenn Lesen wichtig ist; kürze nur in tatsächlich fixem Raum und biete Zugriff auf den vollständigen Wert. Lasse niemals zu, dass Text angrenzende Aktionen verdeckt.
- Halte Dialoge, Menüs, Formulare und Inline-Aktionen mit der Tastatur bedienbar. Verwende sichtbaren Fokus, semantische Steuerelemente, korrekt zugeordnete Bezeichnungen und zugängliche Status- oder Fehlermeldungen.
- Mache Hover-, deaktivierte, laufende, erfolgreiche und Fehlerzustände visuell unterscheidbar, ohne sich nur auf Farbe zu verlassen.
Reduziere Text bewusst
Behalte nur Text, der dem Benutzer hilft, den Zustand zu verstehen, eine Entscheidung zu treffen oder zu handeln. Bewahre notwendige Bezeichnungen, Rückmeldungen und Barrierefreiheitstexte. Entferne Einleitungen, Wiederholungen, offensichtliche Hilfe, dekorativen Text und Beschreibungen, die lediglich eine Überschrift oder Steuerung wiederholen.
Führe nach der Implementierung einen speziellen Textreduktionsdurchlauf durch. Lies jeden sichtbaren Text im Kontext und entferne ihn, es sei denn, die Schnittstelle wird ohne ihn schwerer verständlich, entscheidbar oder bedienbar.
Überprüfe das Ergebnis
Teste die tatsächlichen Aufgabenabläufe mit repräsentativen, leeren, langen, ladenden und fehlerhaften Daten. Überprüfe Erstellung, Löschung, Rückgängigmachung, Außerhalb-Klick- und Escape-Verhalten, Tastaturreihenfolge, schmale Layouts und sichtbares Feedback. Überprüfe dann den gesamten Bildschirm noch einmal und entferne redundante Karten, Effekte, Text und Platz vor nützlichem Inhalt.