Apple Design: gestos, muelles y materiales de Apple en la web
Una interfaz parece viva cuando el movimiento arranca desde donde está el elemento, hereda la velocidad del dedo y se puede atrapar a medio camino. La skill de Emil Kowalski resume las charlas de diseño de Apple en la WWDC, sobre todo Designing Fluid Interfaces de 2018, en términos web: Pointer Events, requestAnimationFrame, backdrop-filter y muelles de Motion.
Animaciones con muelle en lugar de duraciones fijas, con damping y response y los valores que Apple usa en hojas y desplazamientos
Interrupción: toda animación parte del valor visible en pantalla, así que un elemento en marcha se puede agarrar y devolver
Traspaso de velocidad y proyección del impulso con la función de Apple y una tasa de desaceleración de 0.998
Bordes elásticos, entradas y salidas por el mismo camino y materiales translúcidos con backdrop-filter
Accesibilidad con prefers-reduced-motion, prefers-reduced-transparency y prefers-contrast, además de tamaño óptico, tracking e interlineado
Cuándo usarla
Haces una hoja inferior, un carrusel o tarjetas deslizables y quieres que respondan como en iOS
El cierre de un modal no deja al usuario arrepentirse a mitad de la animación
Necesitas una barra de navegación de cristal legible sobre el contenido y fiel a los ajustes de accesibilidad
Pídale al agente
Crea una hoja inferior con un muelle que recoja la velocidad del gesto al soltar
Revisa este carrusel con las reglas de Apple: interrupción, impulso y bordes elásticos
Añade una barra translúcida y una alternativa para prefers-reduced-transparency
Preguntas
¿Cómo se instala Apple Design?
Con npx skills add emilkowalski/skills@apple-design. Sin el sufijo @apple-design, el mismo comando instala todo el conjunto de skills de Emil Kowalski.
¿De dónde salen las reglas de Apple Design?
De las charlas de diseño de Apple en la WWDC, sobre todo Designing Fluid Interfaces (2018) y otra sobre audio y háptica, traducidas a CSS, Pointer Events y muelles de Motion.
¿En qué se diferencia Apple Design de las otras skills de Emil Kowalski?
Muchas de las otras skills del conjunto tratan la animación en general y su revisión. Apple Design recoge el enfoque propio de Apple: gestos, muelles, materiales, respuesta multimodal y tipografía.
