Rilevato movimento

Il movimento dovrebbe apparire con moderazione nel contesto determinante per esprimere concetti, branding e relazioni tra elementi. Deve essere utilizzato solo per informare i conducenti senza distrarre la attenzione.

In sintesi:

  • Evitare di distrarre gli utenti con movimenti inutili
  • Usa il movimento per aumentare la comprensione e lo sviluppo delle competenze degli utenti
  • Rendi il tuo linguaggio di movimento abbastanza flessibile da supportare tutto l'hardware pertinente
  • Utilizza il pattern di movimento consigliato per la tua situazione

Modelli di movimento

Per supportare un'esperienza utente coerente in tutte le app, si applicano pattern di movimento specifici alle seguenti interazioni:

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

Questi pattern di movimento sono basati sull'easing standard, come descritto in Material Design, in cui l'attenzione si concentra sul termine di una transizione accelerando rapidamente la transizione e rallentando gradualmente.


Passare da un'app all'altra

Quando passi da un'app all'altra, utilizza una transizione tra dissolvenza, che comporta la dissolvenza di un elemento mentre l'altro viene disattivato. Questa transizione mostra un'uscita dall'app corrente mentre si sposta rapidamente in un'altra.

Cambio rapido di app
Il movimento a dissolvenza esegue la migrazione dell'utente 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 passi da una visualizzazione all'altra allo stesso livello gerarchico di un'app (nota anche come visualizzazioni peer), ad esempio schede in una barra dell'app o brani in una playlist, utilizza una transizione asse condiviso. Il movimento orizzontale laterale 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

Il pattern di movimento dell'asse condiviso quando si passa da un brano all'altro in un'app multimediale rafforza il fatto che entrambi i brani si trovano nella stessa playlist

Estensione di un'azione esistente

Quando un utente sta guardando o esegue un'azione e poi esegue un'azione secondaria correlata, questa deve essere introdotta con un movimento verticale (su o giù). L'azione secondaria viene mostrata in una sovrapposizione a schermo intero, con uno sfondo a scaglioni, di fronte all'azione principale. La presenza dell'azione principale attraverso la montatura rafforza il fatto che l'utente sia ancora nel bel mezzo dell'esecuzione dell'azione.

L'azione secondaria viene quindi chiusa nella direzione opposta del movimento di apertura. Questa azione inversa dovrebbe richiedere meno tempo di quella originale, poiché l'azione è stata completata.

Overlay azione secondaria
In questo caso, l'azione secondaria sorge dall'azione principale su un overlay, mentre l'azione principale rimane parzialmente visibile dietro la struttura

Esempio

Esempio di overlay delle azioni Android Auto
Selezionando il pulsante extra nella barra di controllo dei contenuti multimediali, l'espansione si espande verticalmente su un overlay con uno sfondo a scaglioni

Ridurre al minimo ed espandere un'azione

Le azioni in corso possono essere ridotte a 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.

  • Espandibile: quando l'utente tocca un'azione ridotta a icona, le dimensioni si espandono e riempiono lo schermo intero, utilizzando una transizione di dissolvenza.

  • Riduci al minimo: quando riduci a icona un'azione in corso, utilizza il contrario. La riduzione al minimo del movimento dovrebbe richiedere meno tempo del movimento espandibile, poiché l'utente abbandona l'azione.

Espandere lo schermo ridotto a icona
L'azione ridotta a icona si espande a schermo intero man mano che si sovrappone all'azione corrente

Esempio

Esempio di pulsante di azione floating Android Auto
Il FAB di riproduzione (pulsante mobile di azione) si espande nella visualizzazione di riproduzione completa e si contrae tramite la Freccia giù

Interrompere un'azione

Quando un'azione breve opzionale deve apparire improvvisamente di fronte a un'azione in corso, dovrebbe scorrere (su o giù) dal bordo dello schermo, con una montatura parziale. In alternativa, dovrebbe dissolversi al centro dello schermo, con un'intera montatura. Avvia il movimento dalla posizione più vicina a dove vuoi che venga visualizzata la nuova azione.

Esempio di azione breve
Quando l'azione rivoluzionaria dovrebbe apparire nella parte superiore dello schermo, falla scorrere dall'alto con una montatura 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 partizione parziale, in modo che i contenuti multimediali in corso rimangano visibili