marvinmcv-svg/SCCS-Landing-page

Apple Design

Erste Antwort

Wenn diese Fähigkeit zum ersten Mal ohne eine spezifische Frage aufgerufen wird, antworten Sie nur mit:

Ich bin bereit, Ihnen zu helfen, flüssige, Apple-ähnliche Oberflächen im Web zu erstellen. Mein Wissen stammt aus Apples WWDC-Designvorträgen, übersetzt für das Web.

Geben Sie keine weiteren Informationen, bis der Benutzer eine Frage stellt.

Wie Apple Oberflächen baut, die sich nicht mehr wie ein Computer, sondern wie eine Erweiterung Ihrer selbst anfühlen. Dieses Wissen stammt aus Apples WWDC-Designvorträgen – hauptsächlich Designing Fluid Interfaces (WWDC 2018) – destilliert und für die Webplattform übersetzt (CSS, Pointer Events, requestAnimationFrame, Feder-Bibliotheken wie Motion/Framer Motion).

Der rote Faden: Eine Oberfläche fühlt sich lebendig an, wenn Bewegungen vom aktuellen Bildschirmwert ausgehen, die Geschwindigkeit des Benutzers übernehmen, den Schwung vorwärts projizieren und jederzeit gegriffen und umgekehrt werden können. Federn sind das Werkzeug, das all dies natürlich macht, da sie inhärent unterbrechbar und geschwindigkeitsbewusst sind.

Die Kernidee

„Wenn wir die Oberfläche an unsere Denk- und Bewegungsweise anpassen, passiert etwas Magisches – sie fühlt sich nicht mehr wie ein Computer an, sondern wie eine nahtlose Erweiterung unserer selbst.“

Eine Oberfläche ist flüssig, wenn sie sich wie die physische Welt verhält: Dinge reagieren sofort, bewegen sich kontinuierlich, tragen Schwung, widerstehen an Grenzen und können mitten in der Bewegung umgeleitet werden. Alles untenstehende ist ein Weg, dem näher zu kommen.

Apple stellt Design als Dienst an vier menschlichen Bedürfnissen dar: Sicherheit/Vorhersagbarkeit, Verständnis, Leistung und Freude. Jede Regel hier dient einem davon.

1. Reaktion – Latenz töten

Sobald Verzögerung auftritt, fällt das Gefühl von Direktheit „eine Klippe hinunter.“ Reaktion ist das Fundament, auf dem alles andere aufbaut.

• Reagieren Sie beim Zeiger-nach-unten, nicht beim Loslassen. Heben Sie einen Knopf hervor, sobald er gedrückt wird. Auf click/Berührungs-Ende für Feedback zu warten, fühlt sich tot an.
• Seien Sie wachsam bei jeder Latenz. Überprüfen Sie Debounces, künstliche Timer, Übergangswartezeiten und die ~300ms Tipp-Verzögerung. Alles auf dem Eingabepfad, das nicht wesentlich ist, ist ein Rückschritt.
• Feedback muss während der Interaktion kontinuierlich sein, nicht nur am Ende. Ziehen, Schieberegler oder Schublade: Aktualisieren Sie die UI 1:1 mit dem Zeiger während des gesamten Vorgangs – animieren Sie niemals nur, wenn die Geste abgeschlossen ist.

/* Feedback lebt auf dem Druck, und es ist sofort */
.button:active {
  transform: scale(0.97);
  transition: transform 100ms ease-out;
}

2. Direkte Manipulation – 1:1-Verfolgung

„Berührung und Inhalt sollten sich zusammen bewegen.“

Wenn der Benutzer etwas zieht, muss es am Finger kleben bleiben – und den Versatz von der Stelle wo es gegriffen wurde respektieren. Auf die Mitte des Elements beim Greifen einzurasten, zerstört die Illusion sofort.

• Verwenden Sie Pointer Events mit setPointerCapture, damit die Verfolgung fortgesetzt wird, selbst wenn der Zeiger die Grenzen des Elements verlässt.
• Verfolgen Sie eine kurze Geschwindigkeits-/Positionshistorie (die letzten paar pointermove-Ereignisse), nicht nur den aktuellen Punkt – Sie benötigen die Geschwindigkeit beim Loslassen.

el.addEventListener('pointerdown', (e) => {
  el.setPointerCapture(e.pointerId);
  const grabOffset = e.clientY - el.getBoundingClientRect().top; // respektiert, wo gegriffen wurde
  // ...Position + Zeitstempelhistorie für Geschwindigkeit verfolgen
});

3. Unterbrechbarkeit – das wichtigste Prinzip überhaupt

„Der Gedanke und die Geste geschehen parallel.“

Jede Animation muss unterbrechbar und jederzeit umleitbar sein. Ein Benutzer muss ein sich bewegendes Element mitten im Flug greifen und umkehren können, ohne auf das Ende der Animation warten zu müssen. Ein schließender Modal, den der Benutzer wieder greift, sollte dem Finger folgen – nicht zuerst schließen und dann wieder öffnen.

• Sperren Sie die Eingabe während eines Übergangs niemals aus.
• Animieren Sie immer vom Darstellungs- (aktuellen) Wert, niemals vom Zielwert. Bei Unterbrechung lesen Sie die Live-Bildschirm-Transformation des Elements aus und starten die neue Animation von dort. Vom logischen/Zielwert zu starten, verursacht einen sichtbaren Sprung.
• Vermeiden Sie CSS-Übergänge und @keyframes für alles Gestengesteuerte – sie können nicht glatt mitten im Flug gegriffen und umgekehrt werden. Federn animieren standardmäßig vom aktuellen Wert, was genau das ist, was Unterbrechung braucht.
• Wenn eine Geste die Richtung umkehrt, mischen Sie die Geschwindigkeit – schneiden Sie sie nicht hart ab. Das Ersetzen einer Animation durch eine andere bei einer Umkehrung erzeugt eine Diskontinuität der Geschwindigkeit, eine „Steinmauer.“ Feder-Bibliotheken, die die Geschwindigkeit durch eine Neuausrichtung tragen, vermeiden dies. (Das tun iOS's additive Animationen nativ; wählen Sie im Web eine Feder-Bibliothek, die von der aktuellen Geschwindigkeit aus neu ausrichtet.)
• Zerlegen Sie 2D-Bewegungen in unabhängige X- und Y-Federn. Eine einzelne Feder auf einem 2D-Abstand desynchronisiert, wenn X und Y unterschiedliche Geschwindigkeiten haben.

4. Verhalten über Animation – Federn verwenden

„Denken Sie an Animation als ein Gespräch zwischen Ihnen und dem Objekt, nicht etwas, das von der Oberfläche vorgeschrieben wird.“

Eine vorskriptierte Animation mit fester Dauer kann nicht auf neue Eingaben reagieren. Eine Feder kann – neue Eingaben ändern nur das Ziel, und die Bewegung bleibt kontinuierlich. Greifen Sie zu Federn für alles, was ein Benutzer berühren kann.

Apple hat das physikalische Trio (Masse/Steifigkeit/Dämpfung) bewusst durch zwei designerfreundliche Parameter ersetzt. Denken Sie in diesen:

• Dämpfungsverhältnis – steuert Überschwingen. 1.0 = kritisch gedämpft, kein Überschwingen, glattes Einlaufen. < 1.0 = überschwingt und oszilliert. Niedriger = schwungvoller.
• Reaktion – wie schnell der Wert das Ziel erreicht, in Sekunden. Niedriger = schneller. Dies ist keine „Dauer“ – eine Feder hat keine feste Dauer; ihre Einschwingzeit ergibt sich aus den Parametern.

Standardwerte:

• Beginnen Sie die meisten UI mit Dämpfung 1.0 (kritisch gedämpft) – anmutig und nicht ablenkend.
• Fügen Sie Überschwingen (Dämpfung ~0.8) nur hinzu, wenn die Geste selbst Schwung hatte (ein Wisch, ein Wurf, ein Zieh-Loslassen). Überschwingen bei einem Menü, das nur eingeblendet wurde, fühlt sich falsch an; Überschwingen bei einer Karte, die Sie gewischt haben, fühlt sich richtig an.

Konkrete Werte, die Apple ausliefert:

Interaktion	Dämpfung	Reaktion
Bewegen / Neu positionieren (z.B. PiP)	1.0	0.4
Drehung	0.8	0.4
Schublade / Blatt	0.8	0.3

Web-Mapping (Motion / Framer Motion): die bounce + duration Feder-API bildet Apples Dämpfung + Reaktion gut ab. Ein sicherer Hausstil ist, standardmäßig überall Federn mit damping: 1.0 zu verwenden; Überschwingen für schwunggetriebene, physikalische Interaktionen reservieren.

import { animate } from 'motion';

// Kritisch gedämpfter Standard (kein Überschwingen)
animate(el, { y: 0 }, { type: 'spring', bounce: 0, duration: 0.4 });

// Schwung-Interaktion – ein wenig Überschwingen, nur weil ein Wisch vorausging
animate(el, { y: target }, { type: 'spring', bounce: 0.2, duration: 0.4 });

5. Geschwindigkeitsübergabe – die Naht zwischen Ziehen und Animation

Wenn eine Geste endet, muss die Animation mit der exakten Geschwindigkeit des Fingers fortgesetzt werden, damit es keine sichtbare Naht zwischen Ziehen und Animieren gibt. Dies ist das Detail, das am meisten „flüssig“ von „in Ordnung“ trennt.

Übergeben Sie die Loslass-Geschwindigkeit des Zeigers als Anfangsgeschwindigkeit der Feder. Einige Feder-APIs wollen relative Geschwindigkeit – normalisieren Sie sie durch die verbleibende Distanz zum Ziel:

relativeGeschwindigkeit = GestenGeschwindigkeit / (Zielwert − aktuellerWert)

Beispiel: Element bei y=50, Ziel y=150 (100px zu gehen), Finger bewegt sich 50px/s → anfängliche Federgeschwindigkeit = 50 / 100 = 0,5. Framer Motion / Motion nehmen die absolute px/s-Geschwindigkeit direkt (velocity-Option), also übergeben Sie normalerweise den rohen Wert.

6. Schwungprojektion – dorthin animieren, wo die Geste hingeht

„Nehmen Sie eine kleine Eingabe und machen Sie eine große Ausgabe.“

Rasten Sie nicht am nächsten Rand vom Loslasspunkt aus ein. Verwenden Sie die Geschwindigkeit, um die Ruheposition zu projizieren – genau wie Scroll-Verzögerung – und rasten Sie dann am Ziel ein, das diesem projizierten Punkt am nächsten ist. Dies lässt einen Wisch sich so anfühlen, als würde er das Element werfen.

Apples exakte Projektionsfunktion (aus dem Beispielcode von Designing Fluid Interfaces):

// decelerationRate ≈ 0.998 für normales Scrollgefühl; 0.99 für schnelleres
function project(initialVelocity /* px/s */, decelerationRate = 0.998) {
  return (initialVelocity / 1000) * decelerationRate / (1 - decelerationRate);
}

const projectedEndpoint = currentPosition + project(releaseVelocity);
const target = nearestSnapPoint(projectedEndpoint);   // Ziel aus der Projektion wählen
animateSpringTo(target, { velocity: releaseVelocity }); // dann Geschwindigkeit übergeben (§5)

Hinweis: Das physiklehrbuchhafte v²/(2·decel) ist nicht das, was Apple ausliefert – verwenden Sie die obige exponentielle Abklingform. Dies ist das Standardverhalten in guten Bottom-Sheets und Karussells (Vaul, Embla).

7. Räumliche Konsistenz – symmetrische Pfade, verankerte Ursprünge

„Wenn etwas auf eine Weise verschwindet, erwarten wir, dass es dort auftaucht, wo es herkam.“

• Ein- und Austritt auf demselben Pfad. Ein Panel, das von rechts hereinschiebt, muss nach rechts ausgeblendet werden. Von-rein-rechts / raus-unten fühlt sich unverbunden und verwirrend an.
• Verankern Sie Interaktionen an ihrer Quelle. Ein Menü, Popover oder Blatt sollte von dem Element ausgehen, das es ausgelöst hat – setzen Sie transform-origin auf den Auslöser, damit die räumliche Beziehung zwischen Schaltfläche und Inhalt offensichtlich ist. (Dies ist derselbe Punkt der Ursprungsbewusstheit wie bei Popovern, die von ihrem Auslöser skalieren, nicht von ihrer Mitte.)
• Spiegeln Sie die Beschleunigung bei umkehrbaren Übergängen, sodass der Ausgangspfad mit dem Rückweg übereinstimmt (verwenden Sie inverse kubische Bézier-Kontrollpunkte für die zwei Richtungen).

8. Hinweis in Richtung der Geste

Menschen sagen einen Endzustand aus einer Bahn voraus. Zwischenbilder sollten telegraphieren, wohin die Dinge gehen – Control Center-Module „wachsen nach oben und außen in Richtung Ihres Fingers.“ Lassen Sie die Zwischenbilder auf das Ergebnis zeigen, nicht nur blind dorthin interpolieren.

9. Gummiband-Effekt – weiche Grenzen

An einer Grenze widerstehen Sie zunehmend, anstatt hart zu stoppen. Ein harter Stopp liest sich als „eingefroren“; kontinuierlicher Widerstand liest sich als „reaktionsschnell, aber hier gibt es nichts mehr.“ Wenden Sie eine Dämpfung an, die zunimmt, je weiter der Benutzer über die Grenze hinaus zieht.

// Je weiter über die Grenze hinaus, desto weniger folgt das Element – reale Dinge verlangsamen sich, bevor sie stoppen
function rubberband(overshoot, dimension, constant = 0.55) {
  return (overshoot * dimension * constant) / (dimension + constant * Math.abs(overshoot));
}

10. Details zum Gestendesign (die „Gefühls“-Checkliste)

• Tippen: Hervorheben bei Berührungs-nach-unten (sofort), bestätigen bei Berührungs-nachoben. Fügen Sie ~10px Hysterese/Treffer-Polsterung um das Ziel hinzu und erlauben Sie Abbruch durch Wegziehen und Zurück.
• Ziehen/Wischen: Erfordern Sie eine kleine Bewegungsschwelle (Hysterese, ~10px), bevor Sie sich für eine Richtung entscheiden, dann 1:1 verfolgen.
• Erkennen Sie alle plausiblen Gesten parallel ab der ersten Bewegung und brechen Sie die Verlierer dann sicher ab, sobald die Absicht klar ist. Vermeiden Sie Erkennungsmechanismen, die nur einen endgültigen Zustand melden (Ereignisse vom Typ swipeleft) – sie werfen die kontinuierliche Verfolgung weg, die Sie für Feedback benötigen.
• Minimieren Sie Verzögerungen bei der Disambiguierung. Doppeltipp-Erkennung verzögert unvermeidlich einzelne Tipps; zahlen Sie diese Kosten nur dort, wo Doppeltipp wirklich existiert.

11. Bildgenaue Glätte

Glätte dreht sich um das, was in den Bildern ist, nicht nur um die Bildwiederholrate.

• Halten Sie die positionsänderung pro Bild unter der Wahrnehmungsschwelle, um Stroboskopeffekte zu vermeiden.
• Für sehr schnelle Bewegungen kodiert eine subtile Bewegungsunschärfe / Streckung die Geschwindigkeit und liest sich besser als eine harte, scharfe Spur.
• requestAnimationFrame ist die display-synchronisierte Uhr des Webs (Apple verwendet CADisplayLink). Animieren Sie nur kompositorfreundliche Eigenschaften – transform und opacity – und geben Sie mit will-change einen Hinweis, wo Bewegung bevorsteht.

12. Materialien & Tiefe – Transluzenz vermittelt Hierarchie

Apple verwendet transluzente Materialien als schwebende funktionale Schicht, die Struktur bringt, ohne die Aufmerksamkeit zu stehlen. Im Web mit backdrop-filter annähern.

• Bauen Sie Navigations-/Symbolleisten/Blätter als transluzente Schichten (backdrop-filter: blur() + ein halbtransparenter Hintergrund) mit darunter scrollendem Inhalt – nicht undurchsichtige Balken, die einen festen Streifen verbrauchen.
• Materialgewicht kodiert Hierarchie: dunklere/schwerere Materialien trennen strukturelle Bereiche (Sidebars); hellere Materialien lenken die Aufmerksamkeit auf interaktive Elemente (Schaltflächen). Stapeln Sie niemals eine helle transluzente Oberfläche auf eine andere – die Lesbarkeit bricht zusammen.
• Größere Oberflächen sollten als dicker gelesen werden: stärkerer Weichzeichner + ein tieferer Schatten als bei kleinen Chips. Erwägen Sie kontextbewusste Schatten – schwerer über belegtem/textreichen Inhalt zur Trennung, heller über einfachen Hintergründen.
• Abdunkeln, um zu fokussieren, trennen, um den Fluss zu erhalten. Eine modale Aufgabe paart die Oberfläche mit einem abdunkelnden Schleier und drückt den Hintergrund zurück/nach unten. Ein paralleles, nicht blockierendes Panel verwendet Transluzenz und Versatz ohne einen Schleier, damit der Fluss nicht unterbrochen wird. Bei gestapelten Blättern dunkeln Sie jede übergeordnete Schicht zunehmend ab und drücken sie zurück.
• Lebendigkeit hält Text über wechselnden Hintergründen lesbar. Verwenden Sie über weichgezeichneten/transluzenten Oberflächen kein flaches graues Text – verwenden Sie höheren Kontrast, etwas schwereres Gewicht und eine kleine Erhöhung der Laufweite. Setzen Sie Farbe auf eine feste Schicht, nicht den transluzenten Vordergrund.
• Scrollkanteneffekte, keine harten Trennlinien. Verwenden Sie anstelle einer 1px-Grenze unter einer klebrigen Kopfzeile eine kleine Weichzeichner-/Verlaufsmaske, wo Inhalt auf schwebendes Chrom trifft – nur dort, wo schwebende UI tatsächlich Inhalt überlappt.
• Materialisieren, nicht nur einblenden. Für Glas-/Weichzeichner-Oberflächen animieren Sie Weichzeichnungsradius und Skalierung gemeinsam beim Ein-/Austritt, damit die Oberfläche als ein ankommendes reales Material und nicht als einfache Deckkraft-Einblendung gelesen wird.

.toolbar {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.4); /* helle Oberkante = Licht, das das Material einfängt */
}

13. Multimodales Feedback – Bewegung + Klang + Haptik

Drei Regeln für die Kombination der Sinne (aus Designing Audio-Haptic Experiences):

1. Kausalität – es muss offensichtlich sein, was das Feedback verursacht hat. Lösen Sie es beim eigentlichen kausalen Ereignis aus (dem Umlegen des Schalters, dem Einrasten des Objekts) und passen Sie seinen Charakter an die Physikalität der Aktion an.
2. Harmonie – das Visuelle, der Klang und die Haptik müssen im selben Bild ausgelöst werden. Latenz zwischen ihnen zerstört die Illusion. Lassen Sie nicht zu, dass ein ... (gekürzt für die Übersetzung)