La funzionalità Indietro predittivo è il risultato di un'operazione di navigazione tramite gesti in cui un utente ha fatto scorrere a ritroso per visualizzare l'anteprima della destinazione del gesto Indietro prima di completarlo completamente. Ciò consente all'utente di decidere se continuare, in altre parole, eseguire il commit del gesto Indietro, o se rimanere nella visualizzazione corrente.
La parte posteriore predittiva offre un'esperienza di navigazione più fluida e intuitiva durante l'utilizzo della navigazione tramite gesti. che sfrutta animazioni integrate per indicare agli utenti dove verranno svolte le loro azioni in modo da ridurre gli esiti imprevisti.
Utilizza le indicazioni di progettazione riportate in questa pagina se la struttura della tua app richiede una navigazione a ritroso per transizioni e animazioni personalizzate per i momenti chiave.
Supporto per Indietro predittivo
Il supporto della navigazione indietro predittiva è disponibile indipendentemente dal fatto che venga utilizzata una navigazione a ritroso predefinita o personalizzata. Se utilizzi la navigazione a ritroso predefinita, puoi attivare facilmente la funzionalità. Scopri di più sul supporto del ritorno predittivo.
Dopo l'attivazione, l'app include animazioni come back-to-home, cross-activity e cross-task.
Puoi anche eseguire l'upgrade della dipendenza dei componenti Material a 1.10.0-alpha02 o versioni successive di MDC Android per ricevere le seguenti animazioni dei componenti Material:
Assicurati che la tua app abbia supporto perimetrale
Per aiutare gli utenti, la navigazione indietro predittiva rispetta gli insiemi di gesti definiti nelle funzionalità perimetrali. Evita di aggiungere gesti tattili o trascina target sotto queste aree.
Superfici a schermo intero
Se la tua app crea transizioni in-app personalizzate per le piattaforme a schermo intero, segui queste linee guida di progettazione.
Anteprima indietro
Quando un utente esegue un gesto Indietro su una superficie a schermo intero, l'area interna deve ridursi a mano a mano che il gesto progredisce. Non appena l'utente supera la soglia del commit, i contenuti devono passare allo stato successivo utilizzando una dissolvenza, indicando all'utente dove verranno intraprese l'azione.
Interpolazione
L'interpolatore utilizzato assicura che lo schermo si chiuda rapidamente. I parametri sono (.1, .1, 0, 1) per corrispondere all'interpolatore utilizzato per le animazioni SystemUI
Annulla azione
Se l'utente rilascia il gesto senza eseguire il commit, i contenuti tornano rapidamente e vengono ripristinati allo stato e alle dimensioni originali prima che il gesto inizi, annullando qualsiasi modifica allo stato.
Specifiche di movimento
Parametro |
Valore iniziale |
Valore target |
Il contesto |
|---|---|---|---|
Esci dalla scala |
100% |
90% |
|
Inserisci scala |
Il 110% |
100% |
|
Esci dalla dissolvenza |
100% |
0% |
Dissolvenza al valore target alla soglia di avanzamento del 35% |
Inserisci dissolvenza |
0% |
100% |
Inserisci la dissolvenza in base alla soglia di avanzamento del 35% |
Transizione degli elementi condivisi (Cross-View)
Se la tua app crea transizioni in-app personalizzate per le transizioni di elementi condivisi per le viste, utilizza le seguenti linee guida di progettazione.
Quando un utente esegue un gesto Indietro durante le transizioni di un elemento condiviso, la superficie si scollega completamente dal bordo dello schermo durante l'anteprima posteriore e l'utente può manipolarla direttamente. Tuttavia, il design non deve suggerire visivamente all'utente che completando un gesto Indietro si chiude l'elemento nella direzione del gesto Indietro.
Ad esempio, puoi utilizzare le transizioni degli elementi condivisi quando chiudi le schermate dei dettagli per tornare agli elenchi verticali per suggerire visivamente all'utente che stanno annullando l'azione precedente. Nel video 3, un evento di calendario viene ignorato in visualizzazione Giorno. Per migliorare la tattilità, il design aggiunge un leggero superamento per assorbire parte della tensione della molla generata durante il gesto.
Anteprima indietro
Quando presenti animazioni predittive all'utente, uno stato di pre-commit mantenuto dall'app misura quando l'utente ha eseguito un back-gesting edge-to-edge, ma non ha deciso di lasciarlo per farlo. Devi fornire i parametri che si applicano a questo stato pre-commit.
La quantità di movimento visualizzata si basa sull'area più lontana in cui l'utente può spostarsi rispetto alla posizione in cui è iniziato il gesto.
Specifiche di movimento
Le transizioni degli elementi condivisi sono interessate direttamente dallo spostamento x e y dall'inizio del gesto. Questa sezione descrive le specifiche e i valori che regolano i meccanismi utilizzati per il feedback sullo schermo.
Le seguenti figure mostrano le specifiche di movimento consigliate per le animazioni di superficie.
1 Margini: 5% della larghezza su entrambi i lati (relativi all'area descritta al passaggio 3)
2 Spostamento calcolato se la finestra viene scalata al centro. Calcola per il margine di 8 dp richiesto: ((larghezza dello schermo / 20) - 8) dp
3 La superficie viene scalata al 90% delle dimensioni, lasciando il 10% disponibile per i margini (vedi 1)
4 Lascia uno spazio di 8 dp dal bordo dello schermo
Ti consigliamo di mantenere i parametri elencati per un'esperienza coerente, ma puoi modificare le specifiche per creare un'animazione personalizzata.
Nella figura precedente, la larghezza dello schermo è di 1280, quindi x-shift è pari a 56 dp. La formula è:
((1280/20)-8)= 56 dp x-shift
1 Spazio tra il bordo e il margine del dispositivo disponibile per lo spostamento y
2 Se la superficie si sposta fuori dallo schermo, ridimensiona la superficie verso il basso non oltre il 50%.
2 La superficie inizia verticalmente centrata, con uno spostamento y definito come segue:
- Limita lo spostamento su y in modo che la superficie non superi mai il margine dello schermo di 8 dp
- Per evitare che la superficie si arresti bruscamente, utilizza un interpolatore decela e mappa il limite di y-shift
3 Mantieni il margine di 8 dp quando la superficie è abbastanza corta
Per le animazioni personalizzate, devi definire tutti i parametri seguenti.
Parametro |
Valore |
Il contesto |
|---|---|---|
Maiusc X |
((larghezza schermo / 20) - 8) dp |
Variazione massima, lascia un margine di 8 dp |
Variazione Y |
((altezza schermo disponibile / 20) -8) dp |
Variazione massima, lascia un margine di 8 dp |
Scala |
90% |
Scala minima delle dimensioni della finestra |
Gli sviluppatori che implementano l'animazione personalizzata mediante le API predittive back-progress utilizzano questi parametri.
Avanzamento del gesto di interpolazione
Un valore di avanzamento lineare può essere derivato dal gesto dell'utente, ma non deve essere
utilizzato direttamente per le animazioni di anteprima. il feedback deve essere invece su misura
in base a ciò che aiuta l'utente durante l'azione a ritroso. Inserisci nel valore di avanzamento un token STANDARD_DECELERATE o PathInterpolator(0f, 0f, 0f, 1f) in modo che il gesto sia più evidente all'inizio. Questo feedback migliora il rilevamento dei movimenti all'inizio del gesto e utilizza la decelerazione per controllare il feedback in modo chiaro e piacevole.
Esegui il commit
Quando un utente fa gesti oltre il punto di commit e la rilascia, viene visualizzata un'animazione che conferma il completamento dell'azione.
Quando gli utenti compiono gesti rapidi, questi vengono generalmente interpretati come scorrimenti. Questo tipo di interazione può applicare velocità elevate agli elementi sullo schermo. Pertanto, nel contesto delle anteprime avverse, il sistema assorbe questa velocità animando temporaneamente la superficie verso il suo stato di anteprima massimo prima di eseguire l'animazione di commit.
L'intensità dell'animazione determina la quantità di animazione di anteprima che viene visualizzata prima di eseguire l'animazione di commit. Il tipo di animazione mostrato dipende dai contenuti che vengono ignorati, come mostrato nel video 2.
Annulla azione
Il video 6 mostra un esempio di cosa succede quando un utente rilascia il dispositivo prima della soglia e mostra un'animazione che conferma che l'azione è stata annullata. Per le transizioni di elementi condivisi, la finestra si sposta rapidamente e torna allo stato originale da bordo a bordo prima dell'inizio del gesto.