Bagikan melalui

Panduan untuk slide silang

API Penting

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

Apa yang harus dan tidak boleh dilakukan

  • 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 gestur geser untuk menambahkan item ke antrean.

Panduan penggunaan tambahan

Pemilihan dan tarik hanya dimungkinkan dalam area konten yang dapat digeser dalam satu arah (vertikal atau horizontal). Agar salah satu interaksi berfungsi, satu arah panning harus dikunci dan gerakan harus dilakukan dalam arah yang tegak lurus terhadap arah panning tersebut.

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 ini memperlihatkan proses pilih serta seret dan lepas.

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 batas kecil sebesar 2,7mm (sekitar 10 piksel pada resolusi target) harus terlampaui 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 menggeser secara horizontal.

cuplikan layar menampilkan ambang batas disambiguasi pilih atau tarik dan lepaskan.

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.

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

daftar dua dimensi dengan gerak mendatar

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

daftar satu dimensi dengan panning vertikal

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 geser melintang dicapai dengan menyentuh elemen dan melepaskannya setelah interaksi seret singkat. Metode pemilihan ini menggantikan mode pemilihan khusus dan interaksi tekan-tahan dengan waktu tertentu yang diperlukan oleh antarmuka sentuh lainnya, serta tidak mengganggu interaksi ketukan untuk aktivasi.

Selain ambang jarak, pemilihan cross-slide dibatasi oleh area ambang sudut 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 lepaskan.

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 keranjang

Keranjang pilihan adalah representasi item yang secara visual berbeda dan dinamis yang 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 keranjang pemilihan tetap ada meskipun ada 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 keranjang pilihan yang digunakan dalam aplikasi, pilihan saat ini harus dihapus setelah tindakan atau perintah. Misalnya, jika Anda memilih lagu dari daftar putar dan menilainya, pilihan tersebut harus dibersihkan.

Pilihan saat ini juga harus dihapus ketika tidak ada keranjang 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.

Queues

Antrean tidak setara dengan daftar keranjang pilihan dan tidak seharusnya diperlakukan demikian. Perbedaan utama meliputi:

  • Daftar item dalam keranjang pilihan hanya representasi visual; item dalam antrean dirakit untuk tujuan tindakan tertentu.
  • Item hanya dapat diwakili sekali dalam keranjang pilihan tetapi beberapa kali dalam antrean.
  • Urutan item dalam keranjang 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 dengan cara menyeret.

Drag

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.

Samples

Contoh arsip

 

  • Last updated on