Landingpage-Feinschliff, Schritt 2: hochwertige UI-Details

---

name: ui-polish description: Engineering-grade UI polish rules: color-tier layering, font-weight compensation, streaming text, spring motion parameters, and component selection boundaries.

UI-Qualitätsstandards

Die „Hochwertigkeit“ einer Benutzeroberfläche ergibt sich aus quantifizierbaren Detailparametern. Gestalte Stile und Animationen gemäß dieser Richtlinie; bei Konflikten mit vorhandenen Design-Tokens/AntD-Themen des Projekts haben die Projektvorgaben Vorrang. Duale Themen werden ausschließlich mit CSS-Variablen im Gültigkeitsbereich von html[data-theme] umgesetzt, nicht mit light-dark() (Kompatibilitätsfalle älterer Kernel).

1. Grundlegende Qualitätsregeln

1. Schichtung ohne Rahmen: Hierarchien werden durch Hintergrundfarbstufen mit einem Helligkeitsunterschied von 1%–3% ausgedrückt, reines Schwarz #000 ist verboten.
   • Hell: Seitenhintergrund #f5f5f3 / Karte #fcfcfb; Dunkel: #0b0b0a / #151515 / #1a1a19 / #20201e (abgestufte Schichten von tief bis hell)
   • Bei AntD-Projekten an den Token (colorBgLayout/colorBgContainer) ausrichten, keine festen Farbwerte einzeln setzen
2. Fokus mit Schatten, nicht mit outline: Verwende bei Fokus auf Eingabefelder/Karten einen Doppelring-box-shadow (innerer Ring als Volltonstrich + äußerer Ring mit geringer Transparenz der Primärfarbe für einen „Biss“); standardmäßige outline entfernen, :focus-visible muss jedoch einen sichtbaren Fokuspunkt behalten
3. Schriftgewicht-Kompensation im Dunkelmodus: Im Dunkelmodus Schriftgewicht um eine Stufe reduzieren (400→300, bei variablen Schriften präzise 360), um den optischen Fülleffekt weißer Buchstaben auszugleichen; themenabhängig mit CSS-Variablen umschalten
4. Fließender Text mit Tuscheverlauf: Einzelne Zeichen 90ms, Übergang von blur(6px) + halbtransparent zu klar, Easing cubic-bezier(.215, .61, .355, 1), benachbarte Zeichen mit 30ms Verzögerung; kein schrittweises Einblenden oder sofortiges Erscheinen ganzer Absätze
5. Inline-Symbolausrichtung: vertical-align: -0.125em oder mit flex + align-items: center umschließen
6. Zahlen-Stabilität: Bei Statistiken/Zeiten/Preisen zwingend font-variant-numeric: tabular-nums verwenden, damit sich die Breite bei Aktualisierung oder Änderung nicht ändert
7. Sanftes Aufklappen: Höhenanimation ohne JS-Höhenberechnung mit display: grid + grid-template-rows: 0fr → 1fr Übergang (inneres Element mit overflow: hidden)
8. Vermeidung einzelner Wörter in letzter Zeile: Fließtext text-wrap: pretty, Überschriften text-wrap: balance
9. Animationscharakter nach Funktion:
   • Ziehen/Einrasten/Positionieren: überdämpfte Feder (steifigkeit 1200 / dämpfung 80) oder cubic-bezier(.2,0,0,1), kein Zurückfedern, einmaliger fester Halt
   • Like/Haken/Erfolgsfeedback: unterdämpft (380 / 18), ein kleines Zurückfedern, elastisch
   • Einblendung 150–250ms, Ausblendung 100–150ms, schnell und zurückhaltend
10. Feedback automatisch ausblenden: Temporäre Rückmeldungen wie Kopieren/Speichern nach 2–2.5s automatisch ausblenden und in den Ursprungszustand zurückversetzen, nicht auf manuelles Schließen warten

2. Negativ-Checkliste für „billiges“ Aussehen (Selbstprüfung)

Jeder dieser Punkte erfordert Nacharbeit:

• Alle Bereiche mit 1px Rahmen abgegrenzt; große Flächen mit reinem Schwarz/Weiß als Hintergrund
• Standardmäßiger blauer outline des Browsers bei Fokus
• Im Dunkelmodus wird das Schriftgewicht des Hellmodus beibehalten (weiße Buchstaben wirken füllig)
• Fließender Text erscheint schrittweise oder als ganzer Block
• Zahlen springen bei Änderung; alle Animationen verwenden dasselbe Easing, ohne Unterschiede in Geschwindigkeit und Charakter
• Temporäre Rückmeldungen verschwinden nie und müssen manuell geschlossen werden
• Dekoratives Beiwerk ohne Informationsgehalt: ALL-CAPS-Überschriften, mittig getrennte Zeichenketten, Button-Suffix →, überall Verläufe und Leuchteffekte

3. Komponenten-Auswahlgrenzen (Overlays und Feedback)

Szenario	Verwenden	Wichtigste Punkte
Unterer Halbbildschirm für Inhaltsansicht, höhenverstellbar (mobil)	Bottom Sheet (AntD Drawer placement="bottom")	Gedämpfte Gesten, mehrstufiges Einrasten, drei Höhenstufen peek/half/full ≈ 25/50/90%
Wenige sich gegenseitig ausschließende Aktionen (mobil)	Action Sheet	Flache Buttons, separater Abbrechen-Button, gefährliche Aktionen rot markiert und von Abbrechen getrennt
Leichter Hinweis nach Aktion, rückgängig machbar	Snackbar (AntD message + Rückgängig-Button)	Untere Leiste, verschwindet automatisch nach Zeitlimit, Rückgängig muss Aktion tatsächlich rückgängig machen können
Risikoreiche/blockierende Bestätigung	AlertDialog (AntD Modal)	Hintergrund abdecken und sperren; Esc nur bei irreversiblen Aktionen deaktivieren, sonst beibehalten
Neue Funktion/Erstbenutzerführung	Tour (AntD Tour)	Hervorhebung + Schritt-für-Schritt-Rundgang, überspringbar
Bild/Medienvergrößerung	Lightbox (antd-image oder selbst erstellen)	Scroll-Zoom, Esc zum Schließen
Formularfeldvalidierung	Inline Alert (AntD Form-Validierung)	Roter Text unter dem Eingabefeld, sofortige Validierung, verschwindet bei Korrektur; keine globalen message für Feld-Fehler

Blockierungsgrad aufsteigend: Snackbar < Inline Alert < Sheet < Action Sheet < Dialog. Desktop bevorzugt Modal/message, Mobil bevorzugt Sheet-Familie; bei Unsicherheit die Variante mit geringerer Blockierung wählen.

4. Animations-Eigenschaftsbibliothek (nach Bedarf verwenden, nicht alle auf einmal)

• Bestätigungs-Button: Klicken → zu Kreis zusammenschrumpfen → Haken als Strich zeichnen → Partikelausbruch, 300–400ms
• Auswahlvernetzung: Auswahl → Fortschrittsring wächst + Zahlen scrollen + Hintergrund oben ändert sich mit Fortschritt
• Karten-Stapel-Entfaltung: Kartengruppe nacheinander entfalten (jede mit 50ms Versatz), erneutes Klicken wieder zusammenfalten
• Einrastkarte + Linienzeichnung: Horizontales Wischen, loslassen rastet in nächste Position ein (Feder 1200/80); beim Wechsel wird die Zeitleiste mit stroke-dashoffset abschnittsweise gezeichnet
• Trägheitsscrollen: Picker dreht träge → verlangsamt → rastet auf Skala ein; Überschießen federt zurück (unterdämpft 380/18)
• Kreisförmiger Ausbreitungsübergang: Von der Druckposition des Fingers/Cursors mit clip-path: circle() ausbreiten und Bildschirm füllen, 400–500ms

Bevorzuge CSS-Transition/Animation und Web Animations; Federparameter nach framer-motion-Semantik (steifigkeit/dämpfung); alle Animationen müssen einen prefers-reduced-motion Fallback haben (direktes Umschalten/Einblenden genügt).

5. Abnahme-Checkliste

• Schichtung durch Farbstufen, keine reinen Schwarz/Weiß-Hintergründe, keine vollständigen Rahmen zur Abgrenzung
• Tastatur-Fokus sichtbar (Doppelring-Schatten), Touch-Ziele ≥ 44px
• Schriftgewicht im Dunkelmodus kompensiert
• Zahlen mit tabular-nums; Fließtext mit text-wrap: pretty
• Animationen mit zwei Eigenschaftsstufen, Zeitdauer im angegebenen Bereich; prefers-reduced-motion mit Fallback
• Temporäre Rückmeldungen verschwinden nach 2–2.5s automatisch; Formularfehler als Inline-Hinweise

Quellen

Parameter extrahiert aus drei Douyin-Videos (2026-10): Ludi „Die 5 Tricks für hochwertige UI im Quellcode großer KI-Apps“, „6 geheime Top-Komponenten“, Xigua Tongxue „Folge 14: 6 Interaktionen für hochwertigere KI-Apps“.