Questa pagina è stata tradotta dall'API Cloud Translation.

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.

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.

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.

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

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.

Durata

Linee guida di Material Design relative alla durata prevista delle transizioni

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

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.

Durata

Linee guida di Material Design relative alla durata prevista delle transizioni

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

Esempio

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.