Movimento

Il movimento deve apparire con parsimonia nel contesto di guida per esprimere concetti, branding e relazioni tra gli elementi. Deve essere utilizzato solo per informare i conducenti senza distogliere la loro attenzione.

In sintesi:

  • Evita di distrarre gli utenti con movimenti non necessari
  • Usa il movimento per migliorare la comprensione degli utenti e le loro competenze
  • Rendi il linguaggio di movimento abbastanza flessibile da supportare tutti i componenti hardware
  • Usa la sequenza di movimento consigliata per la tua situazione

Sequenze di movimento

Per garantire un'esperienza utente coerente su tutte le app, schemi di movimento specifici vengono applicati alle seguenti interazioni:

  • Passare da un'app all'altra
  • Passare da una visualizzazione peer all'altra
  • Estendere un'azione esistente
  • Ridurre al minimo ed espandere un'azione
  • Interrompere un'azione

Questi schemi di movimento si basano sull'easing standard, come descritto in Material Design, che pone l'attenzione sulla fine di una transizione accelerandola rapidamente per poi rallentarla gradualmente.


Passare da un'app all'altra

Quando passi da un'app all'altra, usa una transizione a dissolvenza incrociata che rende visibile un elemento, mentre un altro scompare. Questa transizione mostra un'uscita dall'app corrente mentre si passa rapidamente a un'altra.

Passare rapidamente da un'app all'altra
La dissolvenza incrociata fa in modo che l'utente passi rapidamente da un'app all'altra

Esempio

Esempio di passaggio da un'app all'altra
Una rapida dissolvenza incrociata porta l'utente da un'app di navigazione a un'app multimediale e viceversa

Passare da una visualizzazione peer all'altra

Quando ti sposti da una visualizzazione allo stesso livello gerarchico all'interno di un'app (dette anche visualizzazioni app peer), ad esempio le schede nella barra dell'app o i brani in una playlist, utilizza una transizione dell'asse condiviso. Il movimento orizzontale da un lato all'altro di questa transizione riflette lo stato di rimanere allo stesso livello all'interno di un'app.

Esempio di transizione peer
Una rapida dissolvenza incrociata porta l'utente da un'app di navigazione a un'app multimediale e viceversa

Esempio

Lo schema di movimento degli assi condivisi quando si passa da un brano all'altro in un'app multimediale conferma che entrambi i brani sono nella stessa playlist

Estendere un'azione esistente

Quando un utente visualizza o esegue un'azione e quindi intraprende un'azione secondaria correlata, quest'ultima deve essere introdotta con un movimento verticale (verso l'alto o verso il basso). Questa azione secondaria viene visualizzata in un overlay a schermo intero, con uno sfondo a righe, davanti all'azione principale. La presenza dell'azione principale attraverso lo schema rafforza che l'utente è ancora nella fase di esecuzione dell'azione.

L'azione secondaria viene quindi chiusa in direzione inversa del movimento di apertura. L'inversione del movimento dovrebbe richiedere meno tempo rispetto al movimento originale, poiché l'azione è compiuta.

Overlay azione secondaria
In questo caso, l'azione secondaria emerge dall'azione principale su un overlay, mentre l'azione principale rimane parzialmente visibile dietro lo sfondo

Esempio

Esempio di overlay di azione Android Auto
Se selezioni il pulsante di overflow sulla barra di controllo dei contenuti multimediali, si espande verticalmente su un overlay con uno sfondo a righe

Ridurre al minimo ed espandere un'azione

Le azioni in corso possono essere ridotte a icona in un formato più piccolo. Questo formato più piccolo consente all'utente di svolgere più attività contemporaneamente mentre l'azione in corso viene eseguita in background.

  • Espansione: quando l'utente tocca un'azione ridotta a icona, questa si espande e viene riempita a schermo intero utilizzando una transizione con dissolvenza in entrata.

  • Ridurre a icona: quando riduci a icona un'azione in corso, utilizza l'inversione di questo movimento. Il movimento di riduzione a icona dovrebbe richiedere meno tempo rispetto al movimento di espansione, poiché l'utente sta abbandonando questa azione.

Espansione di una schermata ridotta a icona
L'azione ridotta a icona si espande a schermo intero mentre si dissolve nell'azione corrente

Esempio

Esempio del pulsante di azione mobile di Android Auto
Il FAB (tasto di azione mobile) di riproduzione si espande nella visualizzazione di riproduzione completa, quindi si contrae tramite la Freccia giù

Interrompere un'azione

Quando un'azione facoltativa breve deve apparire all'improvviso di fronte a un'azione in corso, dovrebbe scorrere (in alto o in basso) dal bordo dello schermo, con una tela parziale. In alternativa, dovrebbe sbiadire al centro dello schermo, con una tela completa. Avvia il movimento dalla posizione più vicina a dove vuoi che venga visualizzata la nuova azione.

Esempio di azione breve
Quando l'azione di disturbo dovrebbe apparire nella parte superiore dello schermo, falla scorrere dalla parte superiore con una tela parziale

Esempio

Esempio di notifica
In questo esempio di Android Auto, una notifica relativa a un'imminente svolta scorre verso il basso dalla parte superiore dello schermo con una tela parziale, in modo che i contenuti multimediali in corso rimangano visibili