Design predittivo della parte posteriore

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.

Figura 1: riquadri di gesti di sistema. Evita di posizionare i touch target completamente 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.

Video 1. Esempio di dorso predittivo della superficie a schermo intero.


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.

Video 2. Esempio di stato non commit e azione di annullamento.

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%

Video 3. Aggiunta di un leggero superamento per assorbire la tensione della molla accumulata durante il gesto

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.

Video 4. Esempio di anteprima posteriore

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.

Figura 2: parametri di spostamento, scala e margine della superficie per scorrere dal bordo sinistro."

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

Figura 3: parametri di spostamento Y e scala per scorrere dal bordo sinistro. La superficie a schermo intero mostra un'anteprima posteriore.

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

Video 5. Un esempio di inflitto a un impegno

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

Video 6. Esempio di annullamento di un'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.