Apple Design : gestes, ressorts et matières d'Apple sur le web
Une interface paraît vivante quand le mouvement part de la position réelle, reprend la vitesse du doigt et peut être rattrapé en plein vol. Le skill d'Emil Kowalski condense les conférences design d'Apple à la WWDC, surtout Designing Fluid Interfaces de 2018, en termes web : Pointer Events, requestAnimationFrame, backdrop-filter et ressorts de la bibliothèque Motion.
Des ressorts plutôt que des durées fixes, réglés par damping et response, avec les valeurs qu'Apple utilise pour les feuilles et déplacements
Interruption : chaque animation part de la valeur affichée à l'écran, si bien qu'un élément en mouvement se rattrape et s'inverse
Transmission de vitesse et projection de l'élan avec la fonction d'Apple et un taux de décélération de 0.998
Bords élastiques, entrée et sortie par le même chemin, matières translucides construites avec backdrop-filter
Accessibilité via prefers-reduced-motion, prefers-reduced-transparency et prefers-contrast, plus taille optique, approche et interlignage
Quand s’en servir
Vous construisez une feuille glissante, un carrousel ou des cartes à balayer et les voulez aussi souples que sur iOS
La fermeture d'une modale empêche l'utilisateur de changer d'avis en cours de route
Il vous faut une barre de navigation en verre lisible sur le contenu et fidèle aux réglages d'accessibilité
Demandez à l’agent
Crée une feuille glissante avec un ressort qui reprend la vitesse du geste au relâchement
Passe ce carrousel au crible des règles d'Apple : interruption, élan, bords élastiques
Ajoute une barre translucide et une variante pour prefers-reduced-transparency
Questions
Comment installer Apple Design ?
Avec npx skills add emilkowalski/skills@apple-design. Sans le suffixe @apple-design, la même commande installe toute la collection de skills d'Emil Kowalski.
D'où viennent les règles d'Apple Design ?
Des conférences design d'Apple à la WWDC, surtout Designing Fluid Interfaces (2018) et une session sur l'audio et l'haptique, transposées en CSS, Pointer Events et ressorts Motion.
Qu'est-ce qui distingue Apple Design des autres skills d'Emil Kowalski ?
Beaucoup d'autres skills de la collection portent sur l'animation en général et sa revue. Apple Design rassemble l'approche propre à Apple : gestes, ressorts, matières, retour multimodal et typographie.
