Desain kembali prediktif

Kembali prediktif adalah hasil dari operasi navigasi gestur saat pengguna menggeser kembali untuk melihat pratinjau tujuan gestur kembali sebelum menyelesaikan sepenuhnya. Hal ini memungkinkan pengguna memutuskan apakah akan melanjutkan—dengan kata lain, untuk "meng-commit" gestur kembali—atau tetap berada dalam tampilan saat ini.

Kembali prediktif memberikan pengalaman navigasi yang lebih lancar dan intuitif saat menggunakan navigasi gestur. AI generatif memanfaatkan animasi bawaan untuk memberi tahu pengguna ke mana tindakan mereka akan membawa mereka untuk mengurangi hasil yang tidak terduga.

Gunakan panduan desain di halaman ini jika desain aplikasi Anda meminta penyediaan navigasi kembali untuk transisi dan animasi kustom untuk momen penting.

Dukungan untuk kembali prediktif

Mendukung kembali prediktif tersedia baik menggunakan navigasi kembali default maupun kustom. Jika menggunakan navigasi kembali default, Anda dapat dengan mudah memilih untuk menggunakan fitur ini. Baca selengkapnya tentang mendukung kembali prediktif.

Setelah Anda ikut serta, aplikasi Anda akan memiliki animasi bawaan seperti "kembali ke layar utama", lintas aktivitas, dan lintas tugas.

Anda juga dapat mengupgrade dependensi komponen Material ke 1.10.0-alpha02 atau yang lebih tinggi dari MDC Android untuk menerima animasi komponen Material berikut:

Pastikan aplikasi Anda memiliki dukungan layar penuh

Untuk membantu pengguna Anda, navigasi kembali prediktif mengikuti inset gestur yang ditentukan di fitur tepi-ke-tepi. Hindari penambahan gestur sentuh atau tarik target di bawah area gestur ini.

Gambar 1: Inset gestur sistem. Hindari menempatkan target sentuh sepenuhnya di bawah area ini

Permukaan layar penuh

Jika aplikasi Anda membuat transisi kustom dalam aplikasi untuk platform layar penuh, ikuti panduan desain ini.

Video 1. Contoh kembali prediktif platform layar penuh.


Pratinjau kembali

Saat pengguna melakukan gestur kembali di permukaan layar penuh, area dalam akan diperkecil seiring berjalannya gestur. Segera setelah pengguna melewati batas commit, konten harus beralih ke status berikutnya menggunakan fade-through, yang memberi tahu pengguna ke mana tindakan akan membawa mereka.

Jenis interpolasi

Interpolator yang digunakan memastikan layar keluar dengan cepat. Parameternya adalah (.1, .1, 0, 1) agar sesuai dengan interpolator yang digunakan untuk animasi SystemUI

Batalkan tindakan

Jika pengguna merilis gestur dalam status non-commit, konten akan dengan cepat kembali dan diskalakan kembali ke status dan ukuran asli sebelum gestur dimulai, sehingga semua perubahan status akan diurungkan.

Video 2. Contoh status non-commit dan tindakan pembatalan.

Spesifikasi gerakan

Parameter

Nilai Awal

Nilai Target

Konteks

Keluar dari Timbangan

100%

90%

Masukkan Timbangan

110%

100%

Keluar dari Memudar

100%

0%

Memudar ke target nilai pada nilai minimum progres 35%

Masukkan Fade

0%

100%

Masukkan mode fade dimulai pada nilai minimum progres 35%

Video 3. Menambahkan overshoot halus untuk menyerap tegangan pegas yang timbul selama gestur

Transisi elemen bersama (Cross-View)

Jika aplikasi Anda membuat transisi kustom dalam aplikasi untuk transisi elemen bersama untuk View, gunakan panduan desain berikut.

Saat pengguna melakukan gestur kembali pada transisi elemen bersama, platform akan terlepas sepenuhnya dari tepi layar selama pratinjau kembali, dan pengguna dapat langsung memanipulasinya. Namun, desain tidak boleh menunjukkan secara visual kepada pengguna bahwa menyelesaikan gestur kembali akan menutup item ke arah gestur kembali.

Misalnya, Anda dapat menggunakan transisi elemen bersama saat menutup layar detail kembali ke daftar vertikal untuk menunjukkan secara visual kepada pengguna bahwa mereka mengurungkan tindakan sebelumnya. Di video 3, acara kalender ditutup kembali ke tampilan hari. Untuk meningkatkan taktilitas, desain menambahkan overshoot halus untuk menyerap sebagian tegangan pegas yang terbentuk selama gestur.


Pratinjau kembali

Saat menampilkan animasi prediktif kepada pengguna, status pra-commit yang dikelola oleh aplikasi Anda mengukur saat pengguna telah melakukan gestur kembali dari tepi ke tepi, tetapi belum berkomitmen untuk melakukannya dengan melepaskannya. Anda harus menyediakan parameter yang berlaku untuk status pra-commit ini.

Jumlah gerakan yang ditampilkan didasarkan pada jarak terjauh pengguna dapat berpindah dari lokasi tempat gestur dimulai.

Video 4. Contoh pratinjau kembali

Spesifikasi gerakan

Transisi elemen bersama dipengaruhi langsung oleh pergeseran x dan y dari awal gestur. Bagian ini menjelaskan spesifikasi dan nilai yang mengatur mekanisme yang digunakan untuk masukan di layar.

Gambar berikut menampilkan spesifikasi gerakan yang direkomendasikan untuk animasi permukaan.

Gambar 2: Parameter pergeseran permukaan, skala, dan margin untuk menggeser dari tepi kiri"

1 Margin: 5% dari lebar di kedua sisi (terkait dengan luas permukaan yang dijelaskan pada 3)

2 Pergeseran yang dihitung jika menskalakan jendela ke tengah. Menghitung margin 8dp yang diperlukan: ((lebar layar / 20) - 8) dp

3 Skala platform hingga ukuran 90%, sehingga menyisakan 10% untuk margin (lihat 1)

4 Sisakan jarak 8 dp dari tepi layar

Sebaiknya pertahankan parameter yang tercantum untuk pengalaman yang konsisten, tetapi Anda dapat mengubah spesifikasi untuk membuat animasi kustom.

Pada gambar sebelumnya, lebar layar adalah 1280, sehingga x-shift 56 dp. Rumusnya adalah:

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

Gambar 3: Parameter pergeseran dan skala Y untuk menggeser dari tepi kiri. Platform layar penuh menampilkan pratinjau kembali.

1 Ruang antara margin perangkat dan tepi tersedia untuk y-shift

2 Jika permukaan bergeser dari layar, skalakan permukaan ke bawah tidak lebih dari 50%.

2 Permukaan dimulai secara vertikal, dengan y-shift ditentukan sebagai berikut:

  • Batasi y-shift sehingga permukaan tidak pernah melewati margin layar 8 dp
  • Agar permukaan tidak tiba-tiba berhenti, gunakan interpolator perlambatan dan petakan ke batas y-shift

3 Pertahankan margin 8 dp setelah permukaan cukup pendek

Untuk animasi kustom, Anda harus menentukan semua parameter berikut.

Parameter

Nilai

Konteks

Shift X

((lebar layar / 20) - 8) dp

Pergeseran maksimum, menyisakan margin 8dp

Shift Y

((tinggi layar yang tersedia / 20) -8) dp

Pergeseran maksimum, menyisakan margin 8dp

Skala

90%

Skala minimum ukuran jendela

Developer yang menerapkan animasi kustom menggunakan Predictive Back Progress API menggunakan parameter ini.

Menginterpolasi progres gestur

Nilai progres linear dapat diperoleh dari gestur pengguna, tetapi tidak boleh digunakan langsung untuk animasi pratinjau. Sebaliknya, masukan harus disesuaikan dengan apa yang membantu pengguna selama tindakan mundur. Beri nilai progres dengan token STANDARD_DECELERATE atau PathInterpolator(0f, 0f, 0f, 1f) sehingga gesturnya lebih terlihat di awal. Masukan ini meningkatkan deteksi gerakan di awal gestur dan menggunakan deselerasi untuk mengontrol masukan dengan cara yang menyenangkan dan jelas secara visual.

Komitmen untuk tindakan

Video 5. Contoh proses ayunkan jari untuk berkomitmen

Saat pengguna melakukan gestur melewati titik commit dan melepaskannya, animasi akan ditampilkan untuk mengonfirmasi penyelesaian tindakan.

Saat pengguna melakukan gestur dengan cepat, ini umumnya diartikan sebagai ayunkan jari. Interaksi semacam ini dapat menerapkan kecepatan tinggi ke elemen di layar, sehingga dalam konteks pratinjau kembali, sistem menyerap kecepatan tersebut dengan sebentar menganimasikan permukaan menuju status pratinjau maksimumnya sebelum menjalankan animasi commit.

Kekuatan ayunkan jari menentukan jumlah animasi pratinjau yang ditampilkan sebelum menjalankan animasi commit. Jenis animasi yang ditampilkan bergantung pada konten yang ditutup, seperti yang ditunjukkan di video 2.

Batalkan tindakan

Video 6. Contoh pembatalan tindakan

Video 6 menunjukkan contoh hal yang terjadi jika pengguna merilis sebelum batas, yang menampilkan animasi yang mengonfirmasi bahwa tindakan telah dibatalkan. Untuk transisi elemen bersama, jendela akan bergerak dengan cepat dan diskalakan kembali ke status tepi-ke-tepi aslinya sebelum gestur dimulai.