Movimento

Motion è uno strumento potente che dovrebbe essere usato con parsimonia nel contesto di guida. È appropriato solo quando può aiutare a informare i conducenti senza distogliere la loro attenzione dalla strada.

Guida in sintesi (TL;DR):

  • 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

Principi del movimento

Quando progetti il movimento per le interfacce di Android for Cars, tieni a mente tre principi di base: essere sicuro, essere informativo e flessibile.

Sicuri

Guidare è l'attività principale dell'utente, tutto il resto è secondario. Tratta l'attenzione dell'utente come una risorsa limitata ed evita di usare il movimento per creare distrazioni non necessarie.

GIF occhio

Informativo

Usa il movimento per trasmettere informazioni che aiutano gli utenti. Ad esempio, il movimento può aumentare la comprensione del prodotto da parte degli utenti dimostrando relazioni gerarchiche e spaziali tra gli elementi. Inoltre, il movimento può aiutare gli utenti ad acquisire dimestichezza con l'interfaccia, indicando le interazioni disponibili.

GIF informativa

Flessibile

Definisci un linguaggio di movimento scalabile e flessibile da adattarsi a schermi di ogni dimensione e forma, nonché a tutti i tipi di input utente.

GIF schermo flessibile

Sequenze di movimento

Per garantire un'esperienza utente coerente su tutte le app, Android Automotive fornisce consigli relativi a schemi di movimento specifici da utilizzare nelle seguenti situazioni:

  • Passare da una visualizzazione dello stesso livello a un'altra
  • Passare a una visualizzazione dei dettagli
  • Estendere un'azione esistente
  • Ridurre al minimo ed espandere un'azione
  • Interrompere un'azione

Tutti i pattern di movimento in questa sezione si basano sull'interpolazione standard, come descritto nelle linee guida di easing di Material Design. Cioè, i movimenti accelerano rapidamente e rallentano in modo più graduale, per attirare l'attenzione verso la fine della transizione.


Passare da una visualizzazione dello stesso livello a un'altra

Quando passi da una visualizzazione allo stesso livello gerarchico all'interno di un'app, ad esempio schede nella barra dell'app o brani in una playlist, usa un movimento laterale. Il movimento orizzontale rafforza l'idea di rimanere allo stesso livello all'interno dell'app.

Esempio di transizione peer
Una rapida dissolvenza incrociata porta l'utente da un'app di navigazione a un'app multimediale e poi di nuovo in Android Automotive

Esempio

Nel sistema operativo Android Automotive, il movimento laterale quando si passa dalla scheda Home alla scheda Playlist in un'app multimediale sottolinea che entrambe le schede rappresentano visualizzazioni di primo livello dei contenuti

Passare a una visualizzazione dei dettagli

Quando passi da una visualizzazione di livello superiore dei contenuti a una visualizzazione dettagliata, utilizza un movimento di profondità z che aumenta la visualizzazione in scala del livello inferiore e lo dissolve quando il livello più alto svanisce. Questo movimento rafforza la relazione genitore-figlio tra la vista di livello superiore e quella dei dettagli, attirando l'attenzione su quest'ultima.

Transizione dalla piattaforma principale a quella secondaria
Da una schermata principale, l'elemento secondario si solleva e si espande in posizione

Esempio

Passaggio a una visualizzazione dei dettagli
Nel modello multimediale del sistema operativo Android Automotive, quando l'utente fa clic su un album specifico in una griglia di album, l'elenco dei brani dell'album viene ingrandito e si espande per mettere in evidenza i dettagli

Estendere un'azione esistente

Quando un utente esegue un'azione ed esegue un'azione correlata, utilizza un movimento verticale (verso l'alto o verso il basso) per introdurre l'azione secondaria in un overlay a schermo intero, con uno sfondo a righe, sopra l'azione principale. La possibilità di vedere l'azione principale attraverso lo schema rafforza che l'utente sta ancora svolgendo l'azione.

Quando chiudi l'azione secondaria, usa l'inverso di questo movimento. Il movimento inverso dovrebbe richiedere meno tempo rispetto al movimento originale, poiché l'utente ha terminato l'azione secondaria ed è pronto a uscire.

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 del sistema operativo Android Auto
Nel modello multimediale del sistema operativo Android Automotive, quando l'utente tocca il pulsante Overflow per espandere la barra di controllo, i controlli aggiuntivi si alzano e vengono visualizzati sull'overlay

Ridurre al minimo ed espandere un'azione

Quando espandi un'azione in corso che è stata ridotta a icona in un formato sullo schermo più piccolo per consentire il multitasking, utilizza una maschera di finestra espandibile con una dissolvenza in entrata a schermo intero.

Quando riduci a icona un'azione in corso, utilizza l'inverso di questo movimento. Il movimento di riduzione dovrebbe richiedere meno tempo rispetto al movimento di espansione, dal momento che l'utente sta essenzialmente abbandonando questa azione ed è pronto a completarla.

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 della barra di controllo del sistema operativo Android Automotive
Nel modello multimediale del sistema operativo Android Automotive, la barra di controllo ridotta a icona si espande nella visualizzazione di riproduzione completa, per poi tornare alla sua forma ridotta quando l'utente tocca la Freccia giù

Interrompere un'azione

Quando un'azione breve e non bloccante deve apparire all'improvviso sopra un'azione in corso, falla scorrere verso il basso o verso l'alto dal bordo dello schermo (con una tela parziale) o dissolvenza al centro (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 finestra di dialogo
Quando al centro del modello multimediale del sistema operativo Android Automotive viene visualizzata un'azione di disturbo, scompare con un telaio completo per concentrare temporaneamente l'attenzione dell'utente sulla nuova azione, in questo caso una richiesta di autorizzazione per l'utilizzo dei dati sulla posizione