Bagikan melalui

Panduan untuk slide silang

API penting

Gunakan slide silang untuk mendukung pilihan dengan gerakan gesek dan seret (pindahkan) interaksi dengan gerakan slide.

Dos dan don'ts

  • Gunakan slide silang untuk daftar atau koleksi yang menggulir dalam satu arah.
  • Gunakan slide silang untuk pemilihan item saat interaksi ketukan digunakan untuk tujuan lain.
  • Jangan gunakan lintas slide untuk menambahkan item ke antrean.

Panduan penggunaan tambahan

Pemilihan dan seret hanya dimungkinkan dalam area konten yang dapat dipanen dalam satu arah (vertikal atau horizontal). Agar interaksi berfungsi, satu arah panning harus dikunci dan gerakan harus dilakukan ke arah tegak lurus dengan arah panning.

Di sini kami menunjukkan memilih dan menyeret objek menggunakan slide silang. Gambar di sebelah kiri menunjukkan bagaimana item dipilih jika gerakan gesek tidak melewati ambang jarak sebelum kontak diangkat dan objek dilepaskan. Gambar di sebelah kanan menunjukkan gerakan geser yang melewati ambang jarak dan menghasilkan objek yang diseret.

diagram memperlihatkan proses pilih dan seret dan letakkan.

Jarak ambang batas yang digunakan oleh interaksi lintas slide diperlihatkan dalam diagram berikut.

cuplikan layar memperlihatkan proses pilih dan seret dan letakkan.

Untuk mempertahankan fungsionalitas panning, ambang kecil 2,7mm (sekitar 10 piksel pada resolusi target) harus disilangkan sebelum interaksi pilih atau seret diaktifkan. Ambang kecil ini membantu sistem membedakan geser silang dari panning, dan juga membantu memastikan bahwa gerakan ketuk dibedakan dari geser silang dan panning.

Gambar ini menunjukkan bagaimana pengguna menyentuh elemen di UI, tetapi menggerakkan jari mereka sedikit ke bawah saat kontak. Tanpa ambang batas, interaksi akan ditafsirkan sebagai slide silang karena gerakan vertikal awal. Dengan ambang batas, gerakan ditafsirkan dengan benar sebagai panning horizontal.

cuplikan layar memperlihatkan ambang disambiguasi pilih atau seret dan letakkan.

Berikut adalah beberapa panduan yang perlu dipertimbangkan saat menyertakan fungsionalitas lintas slide di aplikasi Anda.

Gunakan slide silang untuk daftar atau koleksi yang menggulir dalam satu arah. Untuk informasi selengkapnya, lihat Menambahkan kontrol ListView.

Catatan Dalam kasus di mana area konten dapat digerakkan ke dua arah, seperti browser web atau e-reader, interaksi berwaktu tekan dan tahan harus digunakan untuk memanggil menu konteks untuk objek seperti gambar dan hyperlink.

horizontal-panning, daftar dua dimensi

Daftar dua dimensi yang di-panning secara horizontal. Seret secara vertikal untuk memilih atau memindahkan item.

panning vertikal, daftar satu dimensi

Daftar satu dimensi yang di-panning secara vertikal. Seret secara horizontal untuk memilih atau memindahkan item.

Memilih

Pilihan adalah penandaan, tanpa meluncurkan atau mengaktifkan, dari satu atau beberapa objek. Tindakan ini dianalogikan dengan satu klik mouse, atau tombol Shift dan klik mouse, pada satu atau beberapa objek.

Pemilihan lintas slide dicapai dengan menyentuh elemen dan melepaskannya setelah interaksi yang menyeret singkat. Metode pembuangan pilihan ini dengan mode pemilihan khusus dan interaksi berwaktu tekan dan tahan yang diperlukan oleh antarmuka sentuh lainnya dan tidak bertentangan dengan interaksi ketuk untuk aktivasi.

Selain ambang jarak, pemilihan lintas slide dibatasi ke area ambang 90°, seperti yang ditunjukkan pada diagram berikut. Jika objek diseret ke luar area ini, objek tidak dipilih.

diagram memperlihatkan area ambang pemilihan.

Interaksi lintas slide dilengkapi dengan interaksi berwaktu tekan dan tahan, juga disebut sebagai interaksi "mengungkapkan diri". Interaksi tambahan ini mengaktifkan animasi yang menunjukkan tindakan apa yang dapat dilakukan pada objek. Untuk informasi selengkapnya tentang UI disambiguasi, lihat Panduan untuk umpan balik visual.

Cuplikan layar berikut menunjukkan cara kerja animasi yang mengungkapkan diri.

  1. Tekan dan tahan untuk memulai animasi untuk interaksi yang mengungkapkan diri. Status item yang dipilih memengaruhi apa yang diungkapkan oleh animasi: tanda centang jika tidak dipilih dan tidak ada tanda centang jika dipilih.

    cuplikan layar memperlihatkan status yang tidak dipilih.

  2. Pilih item menggunakan gerakan gesek (ke atas atau ke bawah).

    cuplikan layar memperlihatkan animasi untuk pilihan.

  3. Item sekarang dipilih. Ambil alih perilaku pemilihan menggunakan gerakan slide untuk memindahkan item.

    cuplikan layar memperlihatkan animasi untuk seret dan letakkan.

Gunakan satu ketukan untuk pilihan dalam aplikasi yang merupakan satu-satunya tindakan utama. Animasi yang mengungkapkan diri lintas slide ditampilkan untuk memisahkan fungsionalitas ini dari interaksi ketuk standar untuk aktivasi dan navigasi.

Seleksi ke dalam keramaian

Ke basket pilihan adalah representasi item yang berbeda dan dinamis secara visual yang telah dipilih dari daftar atau koleksi utama dalam aplikasi. Fitur ini berguna untuk melacak item yang dipilih dan harus digunakan oleh aplikasi di mana:

  • Item dapat dipilih dari beberapa lokasi.
  • Banyak item yang dapat dipilih.
  • Tindakan atau perintah bergantung pada daftar pilihan.

Konten kerajang pemilihan tetap ada di seluruh tindakan dan perintah. Misalnya, jika Anda memilih serangkaian foto dari galeri, terapkan koreksi warna ke setiap foto, dan bagikan foto dalam beberapa mode, item tetap dipilih.

Jika tidak ada ke basket pilihan yang digunakan dalam aplikasi, pilihan saat ini harus dibersihkan setelah tindakan atau perintah. Misalnya, jika Anda memilih lagu dari daftar putar dan menilainya, pilihan harus dihapus.

Pilihan saat ini juga harus dibersihkan ketika tidak ada ke basket pilihan yang digunakan dan item lain dalam daftar atau koleksi diaktifkan. Misalnya, jika Anda memilih pesan kotak masuk, panel pratinjau diperbarui. Kemudian, jika Anda memilih pesan kotak masuk kedua, pemilihan pesan sebelumnya dibatalkan dan panel pratinjau diperbarui.

Antrean

Antrean tidak setara dengan daftar ke basket pilihan dan tidak boleh diperlakukan seperti itu. Perbedaan utama meliputi:

  • Daftar item dalam kerajang pilihan hanya representasi visual; item dalam antrean dirakit dengan mengingat tindakan tertentu.
  • Item hanya dapat diwakili sekali dalam keramaian pilihan tetapi beberapa kali dalam antrean.
  • Urutan item dalam ke basket pilihan mewakili urutan pemilihan. Urutan item dalam antrean terkait langsung dengan fungsionalitas.

Untuk alasan ini, interaksi pemilihan lintas slide tidak boleh digunakan untuk menambahkan item ke antrean. Sebagai gantinya, item harus ditambahkan ke antrean melalui tindakan seret.

Tarik

Gunakan seret untuk memindahkan satu atau beberapa objek dari satu lokasi ke lokasi lainnya.

Jika lebih dari satu objek perlu dipindahkan, biarkan pengguna memilih beberapa item lalu seret semua sekaligus.

Sampel

Sampel arsip