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. Per la maggior parte delle app, non è necessario implementare la navigazione a ritroso personalizzata perché le animazioni predittive indietro integrate mostrano all'utente la destinazione.
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:
Progetta la navigazione tramite gesti
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, utilizza queste linee guida sulla progettazione.
Quando un utente esegue il gesto Indietro su una superficie a schermo intero, la superficie si stacca 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 della superficie a schermo intero quando chiudi le schermate dei dettagli per tornare agli elenchi verticali per suggerire visivamente all'utente che sta annullando l'azione precedente. Nel video 1, 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 superfici a schermo intero sono influenzate 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 |
Il 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 4 mostra un esempio di cosa succede quando un utente rilascia il pulsante dopo la soglia, con un'animazione che conferma che l'azione è stata annullata. Per le superfici a schermo intero, la finestra si sposta rapidamente e torna allo stato originale da bordo a bordo prima dell'inizio del gesto.