Przewidywany tył

Przewidywanie wstecz to wynik operacji nawigacji przy użyciu gestów, w której użytkownik przesunął palcem wstecz, aby wyświetlić podgląd miejsca docelowego gestu cofania, zanim w pełni go wykonał. Dzięki temu użytkownik może zdecydować, czy chce kontynuować (inaczej mówiąc, wykonać gest cofania) czy pozostać przy bieżącym widoku.

Funkcja przewidywanego przejścia wstecz zapewnia płynniejszą i bardziej intuicyjną nawigację przy nawigacji przy użyciu gestów. Wykorzystuje wbudowane animacje, aby poinformować użytkowników, gdzie mogą przyjść ich działania, i ograniczyć nieoczekiwane rezultaty.

Skorzystaj ze wskazówek na tej stronie, jeśli projekt Twojej aplikacji wymaga od użytkownika przejścia wstecz w przypadku niestandardowych przejść i animacji w kluczowych momentach.

Obsługa przewidywanego przejścia wstecz

Obsługa przewidywania jest dostępna zarówno w przypadku korzystania z domyślnej, jak i niestandardowej nawigacji wstecz. Jeśli używasz domyślnej nawigacji Wstecz, możesz łatwo włączyć tę funkcję. Dowiedz się więcej o obsłudze funkcji przewidywania wstecznego.

Gdy włączysz tę opcję, aplikacja będzie miała wbudowane animacje, np. powrót do ekranu głównego, krzyżówki i różne zadania.

Możesz też uaktualnić zależność komponentu Material Design do wersji 1.10.0-alfa02 lub nowszej w MDC na Androida, aby otrzymywać te animacje komponentu Material:

Zadbaj o to, aby aplikacja była obsługiwana od początku do końca

Aby pomóc użytkownikom, przewidywana nawigacja wsteczna obsługuje zestawy gestów zdefiniowane w funkcjach od krawędzi do krawędzi. Nie dodawaj gestów dotykowych ani przeciągaj celów w tych obszarach gestów.

Rys. 1. Wstawki z gestami systemowymi Unikaj umieszczania docelowych elementów dotykowych w tych obszarach.

Powierzchnie pełnoekranowe

Jeśli Twoja aplikacja tworzy niestandardowe przejścia do platform pełnoekranowych, postępuj zgodnie z tymi wskazówkami dotyczącymi projektowania.

Film 1. Przykład przewidywanego przejścia wstecz na pełnym ekranie.


Podgląd tyłu

Gdy użytkownik wykonuje gest wstecz na powierzchni pełnoekranowej, obszar wewnętrzny powinien skalować się w dół w miarę postępów gestu. Gdy tylko użytkownik przekroczy próg zobowiązania, treści powinny przechodzić do następnego stanu, stosując przenikanie, informując użytkownika, dokąd zostanie przekierowana czynność.

Interpolacja

Użyty interpolator zapewnia szybkie zamknięcie ekranu. Te parametry to (.1, .1, 0, 1) zgodne z interpolatorem używanym w animacjach SystemUI.

Anuluj działanie

Jeśli użytkownik zwolni gest w stanie niewymagającym zobowiązania, treść szybko powraca do pierwotnego stanu i rozmiaru przed rozpoczęciem gestu, co cofa wszystkie zmiany stanu.

Film 2. Przykład działania typu „brak zobowiązania” i „anulowanie”.

Parametry ruchu

Parametr

Wartość początkowa

Wartość docelowa

Kontekst

Wyjdź z wagi

100%

90%

Wprowadź skalę

110%

100%

Wyjdź

100%

0%

Zanika do wartości docelowej przy progu postępu na poziomie 35%

Włącz zanikanie

0%

100%

Wpisz, jak zanikanie, zaczyna się od progu postępu wynoszącego 35%

Film 3. Dodanie subtelnego przeciągnięcia w celu absorbowania napięcia sprężyn nagromadzonego podczas gestu

Przejście wspólnych elementów (widoki w różnych widokach)

Jeśli Twoja aplikacja tworzy niestandardowe przejścia między elementami wspólnymi w widokach danych, postępuj zgodnie z tymi wskazówkami dotyczącymi projektowania.

Gdy użytkownik wykonuje gest wstecz w trakcie przejścia wspólnego elementu, podczas wyświetlania podglądu powierzchnia odłącza się od krawędzi ekranu i użytkownik może bezpośrednio nią sterować. Projekt nie powinien jednak sugerować użytkownikowi, że wykonanie gestu cofania powoduje zamknięcie elementu w kierunku gestu cofania.

Na przykład po przywróceniu ekranów szczegółów z powrotem do pionowej listy możesz użyć przejść udostępnionych elementów, aby poinformować użytkownika, że cofa poprzednie działanie. W filmie 3 wydarzenie z kalendarza zostaje przywrócone do widoku dnia. Aby poprawić dotykanie, konstrukcja dodaje subtelną przekładnię, która pochłania część napięcia sprężyn nagromadzonego podczas gestu.


Podgląd tyłu

Gdy prezentujesz animacje prognozowane użytkownikowi, utrzymywany przez aplikację stan wstępnego zatwierdzenia oznacza, że użytkownik wykonał gest od początku do końca, ale nie podszedł do nich z powodu braku zgody. Musisz podać parametry mające zastosowanie do tego stanu wstępnego zatwierdzenia.

Wyświetlany zakres ruchu zależy od odległości użytkownika od miejsca, w którym rozpoczął się gest.

Film 4. Przykład podglądu tyłu

Parametry ruchu

Na przejścia wspólnych elementów bezpośrednio wpływa przesunięcie X i Y od początku gestu. W tej sekcji opisujemy specyfikacje i wartości, od których zależy działanie opinii na ekranie.

Na poniższych ilustracjach widać zalecane specyfikacje ruchu dla animacji powierzchni.

Rysunek 2. Parametry przesunięcia powierzchni, skali i marginesów przy przesuwaniu od lewej krawędzi"

1 Marginesy: 5% szerokości po obu stronach (związane z powierzchnią określoną w sekcji 3).

2 Obliczone przesunięcie przy skalowaniu okna do środka. Oblicz wymaganą marżę 8 dp: ((szerokość ekranu / 20) – 8) dp

3 Powierzchnia skaluje się do 90%, pozostawiając 10% wolnego miejsca na marginesach (patrz 1).

4 Pozostaw odstęp o długości 8 dp od krawędzi ekranu.

Zalecamy pozostawienie wymienionych parametrów w celu zachowania spójności, ale możesz zmienić specyfikacje, aby utworzyć niestandardową animację.

Na poprzedniej ilustracji szerokość ekranu wynosi 1280, co oznacza, że wartość x-shift wynosi 56 dp. Można to zrobić za pomocą wzoru:

((1280/20)-8)= 56 dp x-shift

Rys. 3. Parametry przesunięcia Y i skalowania przy przesuwaniu od lewej krawędzi. Na pełnym ekranie pojawia się podgląd z tyłu.

1 Odstęp między krawędzią a marginesem urządzenia dostępna dla efektu Y-shift

2 Jeśli powierzchnia przesuwa się poza ekran, przeskaluj ją w dół o nie więcej niż 50%.

2 Powierzchnia zaczyna się od wyśrodkowania w pionie. Przesunięcie Y jest zdefiniowane w ten sposób:

  • Ogranicz przesunięcie w kierunku, aby powierzchnia nigdy nie przekroczyła marginesu ekranu 8 dp
  • Aby zapobiec gwałtownemu zatrzymaniu się powierzchni, użyj interpolatora zwolnionego i zmapuj go na wartość graniczną przesunięcia Y.

3 Zachowaj margines 8 dp, gdy powierzchnia będzie wystarczająco krótka.

W przypadku animacji niestandardowej musisz zdefiniować wszystkie te parametry.

Parametr

Wartość

Kontekst

Przesunięcie X

((szerokość ekranu / 20) – 8) dp

Maksymalne przesunięcie, pozostawia margines 8 dp

Przesunięcie na osi Y

((dostępna wysokość ekranu / 20) –8) dp

Maksymalne przesunięcie, pozostawia margines 8 dp

Skala

90%

Minimalny rozmiar okna

Z tych parametrów korzystają programiści implementujący animację niestandardową za pomocą interfejsów Predictive Back Progress API.

Postępy interpolowania gestu

Liniową wartość postępu można pobierać na podstawie gestu użytkownika, ale nie należy jej bezpośrednio używać do wyświetlania animacji. Informacje zwrotne powinny być dostosowane do tego, co pomaga użytkownikowi wykonać wsteczną czynność. Podaj wartość postępu za pomocą tokena STANDARD_DECELERATE lub PathInterpolator(0f, 0f, 0f, 1f), aby gest był bardziej widoczny na początku. Funkcja ta ulepsza wykrywanie ruchu na początku gestu i wykorzystuje zwolnienie, aby sterować sprzężeniem w sposób przyjemny dla oka i jasny.

Zobowiązanie do działania

Film 5. Przykład rzucania do zatwierdzenia

Gdy użytkownik wykonuje gest gestem poza punkt zatwierdzenia i uruchamia obiekt, wyświetla się animacja potwierdzająca zakończenie działania.

Jeśli użytkownik szybko wykonuje gesty, jest to zwykle interpretowane jako rzuty. Ten rodzaj interakcji może powodować stosowanie dużej prędkości do elementów na ekranie. W kontekście podglądów wstecznych system absorbuje tę prędkość, tymczasowo animując powierzchnię w kierunku maksymalnego stanu podglądu, zanim uruchomi animację zatwierdzenia.

Natężenie przesunięcia określa, jaka część animacji podglądu jest wyświetlana przed uruchomieniem animacji zatwierdzenia. Rodzaj wyświetlanej animacji zależy od zamykanej treści, tak jak widać na filmie 2.

Anuluj działanie

Film 6. Przykład anulowania działania

Film 6 pokazuje przykład, co się dzieje, gdy użytkownik anuluje działanie przed ustawionym progu. Animacja pokazująca, że działanie zostało anulowane. W przypadku przejść wspólnych elementów okno szybko przesuwa się i skaluje z powrotem do pierwotnego stanu od krawędzi do krawędzi sprzed rozpoczęcia gestu.