make-interfaces-feel-better

Interfaces besser machen

Verwende diesen Skill für die kleinen, aber wirkungsvollen Design-Engineering-Details, die eine Oberfläche glatter und polierter wirken lassen.

Quelle: Aus der veralteten Community-PR #1659 von linus707 übernommen.

Verwendung

• Der Benutzer sagt, die UI fühle sich falsch, flach, generisch, gequetscht, ruckelig oder unfertig an.
• Du entwickelst Steuerelemente, Karten, Listen, Dashboards, Navigationen, Formulare oder Symbolleisten.
• Eine Komponente benötigt Hover-, Aktiv-, Fokus-, Eingabe-, Ausgabe-, Lade- oder Leerzustände.
• Ein Frontend-Review benötigt konkrete Vorher/Nachher-Empfehlungen.

Kernprinzipien

Konzentrischer Radius

Für nahe beieinander liegende, abgerundete Oberflächen:

gesamtradius außen = innenradius + abstand

Wenn der Abstand groß ist, behandle die Schichten als separate Oberflächen, anstatt die Mathematik zu erzwingen. Ziel ist die optische Kohärenz, nicht die Formel.

Optische Ausrichtung

Geometrische Zentrierung ist nicht immer die visuelle Zentrierung. Symbolschaltflächen, Abspieldreiecke, Pfeile, Sterne und asymmetrische Icons benötigen oft einen kleinen Versatz. Korrigiere nach Möglichkeit das SVG; passe andernfalls den Rand oder Abstand auf Pixelebene an.

Schatten und Rahmen

Verwende Rahmen zur Trennung und für Fokusringe. Verwende geschichtete Schatten, wenn eine Karte, Schaltfläche, Dropdown oder Popover Tiefe benötigt. Schatten sollten transparent und dezent genug sein, um auf verschiedenen Hintergründen zu funktionieren.

Textumbruch

• Verwende text-wrap: balance für Überschriften und kurze Titel.
• Verwende text-wrap: pretty für kurze bis mittellange Fließtexte, Bildunterschriften, Beschreibungen und Listenelemente.
• Vermeide beides bei langen Prosatexten, Code und vorformatierten Inhalten.
• Verwende font-variant-numeric: tabular-nums für Zähler, Timer, Preise, Tabellen und andere sich ändernde Zahlen.

Schriftglättung

Füge unter macOS die Antialiasing-Schriftglättung auf der obersten Layout-Ebene hinzu, sofern das Projekt dies nicht bereits tut:

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Bildumrisse

Bilder benötigen oft einen dezenten, inneren Umriss, damit ihre Kanten nicht in der Oberfläche verschwimmen.

img {
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

@media (prefers-color-scheme: dark) {
  img {
    outline-color: rgba(255, 255, 255, 0.1);
  }
}

Verwende neutrale schwarze oder weiße Alpha-Umrisse. Färbe Bildumrisse nicht mit der Markenpalette ein.

Bewegung

Verwende CSS-Übergänge für interaktive Zustandsänderungen, da sie neu ausgerichtet werden können, wenn der Benutzer während der Bewegung seine Absicht ändert. Reserviere Keyframes für inszenierte einmalige Eintritts- oder Ladesequenzen.

Gute Bewegungsvorgaben:

• Eintritt: Kombiniere Deckkraft, kleines translateY und optional Unschärfe.
• Austritt: Kürzer und leiser als der Eintritt, normalerweise 150 ms.
• Drücken: scale(0.96) für taktile Schaltflächen, mit einer Möglichkeit, es zu deaktivieren, wenn die Bewegung ablenkt.
• Symbolwechsel: Überblende mit Deckkraft, Skalierung und Unschärfe anstelle von sofortigen Sichtbarkeitsumschaltungen.

Übergangsbereich

Verwende niemals transition: all. Gib die geänderten Eigenschaften explizit an:

.button {
  transition-property: transform, background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

Verwende will-change nur für Ruckeln im ersten Frame bei compositor-freundlichen Eigenschaften wie transform, opacity und filter. Verwende niemals will-change: all.

Trefferflächen

Interaktive Steuerelemente sollten eine Trefferfläche von mindestens 40x40 Pixeln haben, idealerweise 44x44 Pixel, wenn es das Layout zulässt. Erweitere die Fläche mit einem Pseudo-Element, wenn das sichtbare Symbol kleiner ist, aber lasse sich die erweiterten Trefferflächen nicht überlappen.

Review-Ausgabe

Wenn du einen UI-Verfeinerungsdurchgang überprüfst, berichte konkrete Änderungen in Vorher/Nachher-Zeilen:

Prinzip	Vorher	Nachher
Konzentrischer Radius	Gleicher Radius bei Eltern und Kind	Elternradius berücksichtigt Abstand
Tabellarische Zahlen	Zähler verschiebt sich bei Ziffernwechsel	Zähler verwendet tabular-nums
Übergangsbereich	transition: all	Explizite Übergangseigenschaften

Füge Dateipfade und Eigenschaften hinzu, wenn diese aus den Ausschnitten nicht offensichtlich sind. Lasse Prinzipien weg, die du überprüft, aber nicht geändert hast.

Checkliste

• Verschachtelte abgerundete Elemente sind optisch kohärent.
• Symbole sind visuell zentriert.
• Schaltflächen, Karten und Popover verwenden Rahmen oder Schatten aus dem richtigen Grund.
• Überschriften und kurze Texte vermeiden unbeholfenen Umbruch.
• Dynamische Zahlen verwenden tabellarische Ziffern.
• Bilder haben bei Bedarf neutrale Umrisse.
• Ein- und Ausstiegsanimationen sind getrennt, subtil und bei Bedarf unterbrechbar.
• Schaltflächen haben taktile aktive Zustände ohne übertriebene Bewegung.
• transition: all und will-change: all sind nicht vorhanden.
• Kleine Steuerelemente haben dennoch brauchbare Trefferflächen.