Oberflächengefühl verbessern

Was macht Oberflächengefühl verbessern?

Nutzen Sie diese Skill für die kleinen Design-Engineering-Details, die sich zu einer polierten Benutzeroberfläche summieren.

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

Wann verwenden

• Der Benutzer sagt, die UI fühle sich komisch, flach, generisch, gequetscht, ruckelig oder unfertig an.
• Sie erstellen Steuerelemente, Karten, Listen, Dashboards, Navigation, Formulare oder Symbolleisten.
• Eine Komponente benötigt Hover-, Aktiv-, Fokus-, Eintritts-, Austritts-, Lade- oder Leerzustände.
• Ein Frontend-Review benötigt spezifische Vorher/Nachher-Empfehlungen.

Kernprinzipien

Konzentrischer Radius

Bei nahe beieinander liegenden abgerundeten Oberflächen:

äußerer Radius = innerer Radius + Abstand (Padding)

Wenn der Abstand groß ist, behandeln Sie die Ebenen als separate Oberflächen, anstatt die Mathematik zu erzwingen. Es geht um optische Kohärenz, nicht um Formelverehrung.

Optische Ausrichtung

Geometrische Zentrierung ist nicht immer visuelle Zentrierung. Symbolschaltflächen, Play- Dreiecke, Pfeile, Sterne und asymmetrische Symbole benötigen oft einen kleinen Versatz. Korrigieren Sie das SVG, wenn möglich; andernfalls passen Sie es mit einer pixelgenauen Margin- oder Padding-Änderung an.

Schatten und Rahmen

Verwenden Sie Rahmen zur Trennung und Fokusringe. Verwenden Sie gestaffelte Schatten, wenn eine Karte, Schaltfläche, Dropdown-Liste oder ein Popover Tiefe benötigt. Schatten sollten transparent und subtil genug sein, um auf allen Hintergründen zu funktionieren.

Textumbruch

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

Schriftglättung

Wenden Sie unter macOS auf der Root-Ebene eine Antialiasing-Schriftglättung an, wenn das Projekt dies nicht bereits tut:

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

Bildkonturen

Bilder benötigen oft eine subtile innere Kontur, damit ihre Kanten nicht mit 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);
  }
}

Verwenden Sie neutrale schwarze oder weiße Alpha-Konturen. Tönen Sie Bildkonturen nicht mit der Markenpalette.

Bewegung

Verwenden Sie CSS-Übergänge für interaktive Zustandsänderungen, da sie neu ausgerichtet werden können, wenn der Benutzer seine Absicht während der Bewegung ändert. Reservieren Sie Keyframes für inszenierte Einmal-Einblendungen oder Ladesequenzen.

Gute Bewegungsvoreinstellungen:

• Einblenden: Kombinieren Sie Deckkraft, kleines translateY und optional Weichzeichner.
• Ausblenden: Kürzer und leiser als Einblenden, normalerweise 150ms.
• Drücken: scale(0.96) für taktile Schaltflächen, mit einer Möglichkeit, dies zu deaktivieren, wenn die Bewegung ablenkt.
• Symbolwechsel: Überblenden mit Deckkraft, Skalierung und Weichzeichner anstelle von sofortigen Sichtbarkeitsumschaltungen.

Übergangsbereich

Verwenden Sie niemals transition: all. Geben Sie die geänderten Eigenschaften an:

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

Verwenden Sie will-change nur für Erstbild-Ruckler bei compositor-freundlichen Eigenschaften wie transform, opacity und filter. Verwenden Sie niemals will-change: all.

Trefferflächen

Interaktive Steuerelemente sollten mindestens eine 40x40px große Trefferfläche haben, idealerweise 44x44px, wo es das Layout zulässt. Erweitern Sie diese mit einem Pseudoelement, wenn das sichtbare Symbol kleiner ist, aber lassen Sie erweiterte Trefferflächen nicht überlappen.

Review-Ergebnis

Wenn Sie eine UI-Politur-Runde überprüfen, melden Sie konkrete Änderungen in Vorher/Nachher-Zeilen:

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

Fügen Sie Dateipfade und Eigenschaften hinzu, wenn diese aus den Code-Ausschnitten nicht ersichtlich sind. Lassen Sie Prinzipien weg, die Sie geprüft, aber nicht geändert haben.

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 Konturen.
• Ein- und Ausblend-Animationen 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 nutzbare Trefferflächen.