Desain kembali prediktif

Kembali prediktif adalah hasil dari operasi navigasi gestur saat pengguna telah menggeser kembali untuk melihat pratinjau tujuan gestur kembali mereka sebelum menyelesaikan sepenuhnya. Hal ini memungkinkan pengguna memutuskan apakah akan melanjutkan—dengan kata lain, "commit" ke gestur kembali—atau tetap berada di 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 memerlukan penyediaan navigasi kembali untuk transisi dan animasi kustom untuk momen penting. Untuk sebagian besar aplikasi, Anda tidak perlu menerapkan navigasi kembali kustom karena animasi kembali prediktif bawaan menunjukkan kepada pengguna ke mana mereka akan pergi.

Dukungan untuk kembali prediktif

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

Setelah 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:

Desain untuk navigasi {i>gesture<i}

Pastikan aplikasi Anda memiliki dukungan dari tepi ke tepi

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

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

Platform layar penuh

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

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

Misalnya, Anda dapat menggunakan transisi platform layar penuh saat menutup layar detail kembali ke daftar vertikal untuk memberi petunjuk visual kepada pengguna bahwa mereka mengurungkan tindakan sebelumnya. Dalam video 1, acara kalender ditutup kembali ke tampilan hari. Untuk meningkatkan taktilitas, desain ini menambahkan overshoot halus untuk menyerap sebagian tegangan pegas yang terbentuk selama gestur.

Video 1. Menambahkan overshoot halus untuk menyerap ketegangan pegas yang timbul selama gestur

Pratinjau kembali

Video 2. Contoh pratinjau kembali

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

Jumlah gerakan yang ditampilkan didasarkan pada jarak paling jauh pengguna dapat bergerak dari lokasi tempat gestur dimulai.

Spesifikasi Motion

Platform layar penuh secara langsung dipengaruhi 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 menunjukkan 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 luas permukaan yang dijelaskan dalam 3)

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

3 Skala permukaan ke ukuran 90%, menyisakan 10% tersedia untuk margin (lihat 1)

4 Sisakan celah 8 dp dari tepi layar

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

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

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

Gambar 3: Pergeseran Y dan parameter skala untuk menggeser dari tepi kiri. Permukaan 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 di tengah secara vertikal, dengan y-shift ditentukan sebagai berikut:

  • Membatasi pergeseran y agar permukaan tidak melewati margin layar 8 dp
  • Agar permukaan tidak berhenti tiba-tiba, 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

Pergeseran 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.

Berkomitmen untuk melakukan tindakan

Video 3. Contoh flinging untuk berkomitmen

Saat gestur pengguna melewati titik commit dan melepas, sebuah animasi akan ditampilkan yang mengonfirmasi penyelesaian tindakan.

Saat pengguna melakukan gestur dengan cepat, ini umumnya diartikan sebagai fling. Jenis interaksi ini dapat menerapkan kecepatan tinggi ke elemen di layar, sehingga dalam konteks pratinjau kembali, sistem menyerap kecepatan tersebut dengan sedikit 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 pada video 2.

Batalkan tindakan

Video 4. Contoh membatalkan tindakan

Video 4 menunjukkan contoh hal yang terjadi jika pengguna merilis sebelum batas, yang menampilkan animasi yang mengonfirmasi bahwa tindakan telah dibatalkan. Untuk platform layar penuh, jendela dengan cepat bergerak dan diskalakan kembali ke status dari tepi ke tepi aslinya sebelum gestur dimulai.