Nelle parole della skill
Apple Design distilla gli interventi sull'interfaccia del WWDC di Apple, principalmente Designing Fluid Interfaces (WWDC 2018), in regole per costruire interfacce web fluide e fisiche. È pensata per designer e sviluppatori che lavorano su interfacce guidate da gesti: trascinamento, scorrimento, sheet, molle, momentum, transizioni interrompibili, materiali translucidi e profondità, tipografia (dimensionamento ottico, tracking, leading) e comportamento con movimento ridotto.
Il filo conduttore è che il movimento dovrebbe partire dal valore attuale visualizzato sullo schermo, ereditare la velocità dell'utente, proiettare il momentum in avanti ed essere afferrabile e reversibile in qualsiasi istante. Le molle sostituiscono le animazioni a durata fissa perché sono intrinsecamente interrompibili e sensibili alla velocità, e la skill si conclude con gli otto principi di design di Apple usati come vocabolario condiviso.
Che cosa produce
- CSS di feedback alla pressione che ridimensiona il controllo su :active con una transizione ease-out di 100ms.
- Chiamate spring per il movimento che mostrano affiancati il valore predefinito con smorzamento critico e la variante di rimbalzo del momentum.
- Un helper project() che implementa la proiezione del momentum con decelerationRate impostato di default a 0.998.
- CSS per trasparenza ridotta che sostituisce le barre degli strumenti translucide con sfondi solidi e senza sfocatura.
Come funziona
- 01Rispondere al pointer-down
Il feedback appartiene alla pressione, non al rilascio: evidenziare il controllo nell'istante in cui viene premuto, e considerare qualsiasi elemento non essenziale sul percorso di input, incluso il ritardo di tocco di circa 300ms, come una regressione.
- 02Seguire il Pointer 1:1
Utilizzare i Pointer Events con capture, così il tracking sopravvive anche quando il puntatore esce dai limiti dell'elemento, e rispettare il punto in cui l'utente ha afferrato l'elemento invece di far scattare tutto al centro dell'elemento.
- 03Rendere il Movimento Interrompibile
Un elemento in movimento deve poter essere afferrato e invertito a metà del volo; l'utente non dovrebbe mai dover attendere che l'animazione in corso termini prima di reindirizzarla.
- 04Modellare il Movimento con le Spring
Una spring assorbe il nuovo input semplicemente cambiando il suo target, così il movimento resta continuo; gli script a durata fissa non hanno nulla da ri-mirare.
- 05Trasferire la Velocità di Rilascio
Fornire alla spring la velocità del puntatore al momento del rilascio, così non c'è alcuna cesura tra il drag e l'animazione; normalizzare in base alla distanza rimanente quando l'API richiede una velocità relativa.
- 06Proiettare l'Inerzia, Poi Agganciare
Non agganciare dal punto esatto in cui il dito ha lasciato la presa; proiettare la posizione di riposo come farebbe la decelerazione dello scroll e scegliere il target di aggancio più vicino a quella proiezione.