Design Engineering
Gute Oberflächen bestehen aus vielen kleinen Details, die Nutzer einzeln nie bewusst wahrnehmen. Jedes der folgenden Details hat einen Grund. Wende es dort an, wo der Grund zutrifft, und studiere, warum die Oberflächen, die du bewunderst, sich so anfühlen, wie sie es tun.
Wähle das passende Skill für die Aufgabe
- Eine einzelne Animation bauen:
animate. - Ein Diff, dessen Bewegung eine Bewertung braucht:
review-animations. - Eine Codebasis, deren Bewegungsverhalten auditiert und geplant werden soll:
improve-animations. Stellen, die sich bewegen sollten:find-animation-opportunities. Bewegung, die entfernt werden soll:remove-animations. - Mehrere Elemente, die sich gemeinsam bewegen:
choreograph. Eine Animation, die Frames fallen lässt:animation-performance. - Drag, Swipe und Sheets im Web:
gestures. - Eine Komponente, die mit Worst-Case-Daten gestresst werden soll:
break-ui. - Gesten, Federn, Materialien und Typografie auf Apples Niveau:
apple-design. - Eine Web-App, die sich auf einem Handy falsch anfühlt:
mobile-native. - Eine Komponentenbibliothek auswählen:
pick-ui-library. - Mehrere Richtungen für ein einzelnes UI-Element:
prototype.
Dieses Skill deckt den Rest ab: Komponenten-Polish und eine UI-Überprüfung, die mehr als nur Bewegung betrachtet.
Regeln, die die meisten Probleme abfangen
- Entscheide, ob es überhaupt animieren soll. Eine Aktion, die 100 oder mehr Mal am Tag gesehen wird oder über die Tastatur gestartet wird, erhält keine Animation.
- Benenne exakte Eigenschaften. Niemals
transition: all. - Ein- und Austritt mit
ease-outoder einer starken benutzerdefinierten Kurve, z. B.cubic-bezier(0.23, 1, 0.32, 1). Niemalsease-inbei UI. - Halte UI-Animationen unter 300 ms. Ein Dropdown dauert 150 bis 250 ms; Press-Feedback 100 bis 160 ms.
- Gib jedem drückbaren Element einen
:active-Zustand, z. B.transform: scale(0.97). - Niemals aus
scale(0)eintreten. Beginne beiscale(0.95)mitopacity: 0. - Popovers skalieren von ihrem Auslöser (
transform-origin: var(--transform-origin)in Base UI). Modale bleiben zentriert. - Verwende Transitions, nicht Keyframes, für alles, was ein Nutzer während des Laufs erneut auslösen kann. Sie zielen vom aktuellen Wert neu an.
- Animieren ausschließlich
transformundopacity. In Motion verwende den vollständigentransform-String anstelle derx- undy-Kurzformen. - Respektiere
prefers-reduced-motionmit sanfterer Bewegung (nicht ohne) und platziere Hover-Effekte innerhalb von@media (hover: hover) and (pointer: fine).
Wenn sich das Gefühl nicht aus dem Code beurteilen lässt, sage dies. Spiele die Animation mit 2- bis 5-facher Dauer oder Bild für Bild in den DevTools ab, teste Gesten auf einem echten Gerät und schaue am nächsten Tag noch einmal hin.
Review-Format
Eine UI-Überprüfung ist eine einzelne Markdown-Tabelle mit den Spalten Vorher, Nachher und Grund, eine Zeile pro Problem. Schreibe niemals „Vorher:“ und „Nachher:“ in separaten Zeilen.
| Vorher | Nachher | Grund |
|---|---|---|
transition: all 300ms | transition: transform 200ms ease-out | Benenne die Eigenschaften; all animiert, was du nicht vorhattest |
transform: scale(0) | transform: scale(0.95); opacity: 0 | Nichts in der realen Welt erscheint aus dem Nichts |
Kein :active-Zustand auf einem Button | transform: scale(0.97) auf :active | Ein Druck braucht sofortiges Feedback |
Die Referenz
Für eine schnelle Lösung bei einem häufigen Symptom (zitternde Zahlen, ein gequetschter Avatar, „1 Mitglieder“) schaue zuerst in references/ui-cheatsheet.md.
Lies references/craft.md für die Gründe und den Code hinter jeder Regel: den Animationsentscheidungsrahmen, Federn, Komponentenprinzipien (Tooltips, Unschärfe statt Überblendung, @starting-style), Transformationen, Clip-Pfad-Muster (Tabs, Halten zum Löschen, Bildenthüllungen, Vergleichsschieberegler), Drag- und Gesteinsbehandlung, Performance, Barrierefreiheit, Prinzipien für Komponenten, die Menschen lieben, Staffelung, Debugging und die Überprüfungs-Checkliste.