In den eigenen Worten des Skills
Apple Design fasst Apples WWDC-Vorträge zur Oberflächengestaltung, vor allem Designing Fluid Interfaces (WWDC 2018), zu Regeln für den Bau flüssiger, physischer Web-UI zusammen. Er richtet sich an Designer und Entwickler, die an gestengesteuerten Oberflächen arbeiten: Ziehen, Wischen, Sheets, Federn, Schwung, unterbrechbare Übergänge, transluzente Materialien und Tiefe, Typografie (optische Größenanpassung, Laufweite, Zeilenabstand) und das Verhalten bei reduzierter Bewegung.
Der rote Faden ist, dass Bewegung vom aktuellen Bildschirmwert ausgehen, die Geschwindigkeit des Nutzers übernehmen, den Schwung nach vorne projizieren und jederzeit greifbar und umkehrbar sein soll. Federn ersetzen Animationen mit fester Dauer, weil sie von Natur aus unterbrechbar und geschwindigkeitsbewusst sind, und der Skill schließt mit Apples acht Designprinzipien als gemeinsamem Vokabular.
Was er erzeugt
- Press-Feedback-CSS, das das Steuerelement bei :active mit einem 100ms-Ease-out-Übergang skaliert.
- Motion-Spring-Aufrufe, die den kritisch gedämpften Standard und die Momentum-Bounce-Variante nebeneinander zeigen.
- Ein project()-Helfer, der die Schwungprojektion mit einer standardmäßigen decelerationRate von 0,998 implementiert.
- CSS für reduzierte Transparenz, das transluzente Toolbars durch solide Hintergründe ohne Unschärfe ersetzt.
So funktioniert es
- 01Auf Pointer-Down reagieren
Feedback gehört zum Drücken, nicht zum Loslassen: Heben Sie das Steuerelement in dem Moment hervor, in dem es gedrückt wird, und behandeln Sie alles Nicht-Wesentliche auf dem Eingabepfad, einschließlich der ~300ms-Tap-Verzögerung, als Regression.
- 02Den Pointer 1:1 verfolgen
Verwenden Sie Pointer Events mit Capture, damit die Verfolgung auch dann erhalten bleibt, wenn der Zeiger die Grenzen des Elements verlässt, und berücksichtigen Sie, wo der Nutzer gegriffen hat, statt zur Mitte des Elements zu springen.
- 03Bewegung unterbrechbar machen
Ein bewegtes Element muss mitten im Flug greifbar und umkehrbar sein; der Nutzer sollte nie warten müssen, bis die aktuelle Animation beendet ist, um sie umzulenken.
- 04Bewegung mit Springs modellieren
Ein Spring nimmt neue Eingaben einfach durch Ändern seines Ziels auf, sodass die Bewegung kontinuierlich bleibt; Skripte mit fester Dauer haben nichts, worauf sie erneut zielen könnten.
- 05Freigabegeschwindigkeit übergeben
Geben Sie dem Spring die Geschwindigkeit des Zeigers beim Loslassen, damit es keine Nahtstelle zwischen Ziehen und Animieren gibt; normalisieren Sie anhand der verbleibenden Distanz, wenn die API eine relative Geschwindigkeit erwartet.
- 06Schwung projizieren, dann einrasten
Rasten Sie nicht dort ein, wo der Finger losgelassen wurde; projizieren Sie die Ruheposition so, wie es eine Scroll-Verzögerung tun würde, und wählen Sie das Einrastziel, das dieser Projektion am nächsten liegt.