Panduan untuk gerakan kamera horizontal (panning)

Penggeseran atau pengguliran memungkinkan pengguna menavigasi dalam sebuah tampilan, untuk menampilkan konten tampilan yang tidak muat di dalam viewport. Contoh tampilan termasuk struktur folder komputer, pustaka dokumen, atau album foto.

API Penting: Windows.UI.Input, Windows.UI.Xaml.Input

Hal yang boleh dan tidak boleh dilakukan

Indikator penggeseran dan bilah gulir

  • Pastikan pengalihan/pengguliran dimungkinkan sebelum memuat konten ke aplikasi Anda.

  • Tampilkan indikator panning dan bilah gulir untuk memberikan petunjuk lokasi dan ukuran. Sembunyikan jika Anda menyediakan fitur navigasi kustom.

    Nota Tidak seperti bilah gulir standar, penunjuk panning murni informatif. Mereka tidak terekspos ke perangkat input dan tidak dapat dimanipulasi dengan cara apa pun.

     

Panning sumbu tunggal (luapan satu dimensi)

  • Gunakan panning satu sumbu untuk wilayah konten yang melampaui satu batas viewport (vertikal atau horizontal).

    • Panning vertikal untuk daftar item satu dimensi.
    • Panning horizontal untuk kisi item.

  • Jangan gunakan snap-point wajib dengan panning sumbu tunggal jika pengguna harus dapat menggeser dan berhenti di antara snap-point tersebut. Titik bentur wajib memastikan bahwa pengguna akan berhenti pada titik bentur. Gunakan titik jepret kedekatan sebagai gantinya.

Panning bentuk bebas (luapan dua dimensi)

  • Gunakan panning dua sumbu untuk wilayah konten yang melampaui batas viewport (vertikal dan horizontal).

    • Ambil alih perilaku rel default dan gunakan panning bentuk bebas untuk konten yang tidak terstruktur di mana pengguna cenderung bergerak ke beberapa arah.

  • Panning bentuk bebas biasanya cocok untuk menavigasi dalam gambar atau peta.

Tampilan halaman

  • Gunakan snap-point wajib saat konten terdiri dari elemen diskrit atau Anda ingin menampilkan seluruh elemen. Ini dapat mencakup halaman buku atau majalah, kolom item, atau gambar individual.

    • Titik jepret harus ditempatkan di setiap batas logis.
    • Setiap elemen harus berukuran atau diskalakan agar sesuai dengan tampilan.

Titik logika dan kunci

  • Gunakan titik jepret kedekatan jika ada poin utama atau tempat logis dalam konten yang kemungkinan akan dihentikan pengguna. Misalnya, header bagian.

  • Jika batasan atau batas ukuran maksimum dan minimum ditentukan, gunakan umpan balik visual untuk menunjukkan kapan pengguna mencapai atau melebihi batas-batas tersebut.

Menautkan konten yang disematkan atau berlapis

  • Gunakan panning sumbu tunggal (biasanya horizontal) dan tata letak kolom untuk konten berbasis teks dan grid. Dalam kasus ini, konten biasanya membungkus dan mengalir secara alami dari kolom ke kolom dan menjaga pengalaman pengguna tetap konsisten dan dapat ditemukan di seluruh aplikasi Windows.

  • Jangan gunakan area yang dapat digeser yang disematkan untuk menampilkan teks atau daftar item. Karena indikator panning dan bilah gulir ditampilkan hanya ketika kontak input terdeteksi dalam wilayah tersebut, itu bukan pengalaman pengguna yang intuitif atau dapat ditemukan.

  • Jangan menggabungkan atau meletakkan satu wilayah geser dalam wilayah geser lain jika keduanya bergerak ke arah yang sama, seperti yang diperlihatkan di sini. Hal ini dapat mengakibatkan area induk dipindahkan tidak sengaja ketika batas untuk area anak tercapai. Pertimbangkan untuk membuat sumbu panning menjadi tegak lurus.

    gambar yang menunjukkan area tertanam yang dapat dipindahkan dan menggulir ke arah yang sama dengan kontainernya.

Panduan penggunaan tambahan

Menggeser dengan menyentuh, dengan menggunakan gerakan menyapu atau menggeser dengan satu atau beberapa jari, seperti menggulir menggunakan mouse. Interaksi panning paling mirip dengan memutar roda mouse atau menggeser kotak gulir, daripada mengklik bilah gulir. Kecuali jika perbedaan dibuat dalam API atau diperlukan oleh UI Windows yang khusus untuk perangkat tertentu, kami hanya merujuk ke kedua interaksi sebagai panning.

Pembaruan Windows 10 Fall Creators - Perubahan perilaku Secara default, alih-alih pemilihan teks, pena aktif sekarang menggulir/menggeser di aplikasi Windows (seperti sentuhan, touchpad, dan pena pasif). Jika aplikasi Anda bergantung pada perilaku sebelumnya, Anda dapat mengganti pengguliran pena serta memulihkan ke perilaku sebelumnya. Untuk detailnya, lihat topik referensi API untuk Kelas ScrollViewer.

Tergantung pada perangkat input, pengguna menggeser dalam wilayah yang dapat dipindahkan dengan menggunakan salah satu dari yang berikut:

  • Gunakan tetikus, touchpad, atau pena/stylus aktif untuk mengklik panah gulir, menyeret kotak gulir, atau mengklik di dalam bilah gulir.
  • Tombol roda mouse untuk mengemulasikan fungsi seret kotak gulir.
  • Tombol tambahan (XBUTTON1 dan XBUTTON2), jika didukung oleh mouse.
  • Tombol panah keyboard untuk meniru menyeret kotak gulir atau tombol navigasi halaman untuk meniru mengklik di dalam bilah gulir.
  • Sentuh, touchpad, atau pena/stylus pasif untuk menggeser atau menggesek jari ke arah yang diinginkan.

Geser melibatkan menggerakkan jari-jari perlahan ke arah panning. Ini menghasilkan hubungan satu-ke-satu, di mana konten bergerak pada kecepatan dan jarak yang sama dengan jari. Menggesek, yang melibatkan menggeser dengan cepat dan mengangkat jari, menghasilkan prinsip fisika berikut yang berlaku untuk animasi panning.

  • Deselerasi (inertia): Mengangkat jari menyebabkan panning mulai melambat. Ini mirip dengan meluncur sampai berhenti pada permukaan yang licin.
  • Penyerapan: Momentum gerakan menggulir selama perlambatan menyebabkan efek bouncing balik yang sedikit jika titik snap atau batas area konten tercapai.

Jenis panning

Windows mendukung tiga jenis panning:

  • Sumbu tunggal - panning hanya didukung dalam satu arah (horizontal atau vertikal).
  • Rails - panning didukung di semua arah. Namun, setelah pengguna melewati ambang jarak dalam arah tertentu, maka panning dibatasi pada arah tersebut.
  • Bentuk bebas - panning didukung di semua arah.

Panning UI

Pengalaman interaksi untuk panning berbeda-beda tergantung perangkat input, namun tetap menyediakan fungsionalitas yang sama.

Ada dua mode tampilan panning berdasarkan perangkat input yang terdeteksi:

  • Indikator geser untuk sentuhan.
  • Bilah gulir untuk perangkat input lainnya, termasuk mouse, touchpad, keyboard, dan stylus.

Nota Indikator panning hanya terlihat ketika kontak sentuh berada di dalam wilayah pannable. Demikian pula, bilah gulir hanya terlihat ketika kursor mouse, kursor pena/stylus, atau fokus keyboard berada dalam wilayah yang dapat digulir.

 

Indikator panning mirip dengan elemen kotak gulir pada bilah gulir. Mereka menunjukkan proporsi konten yang ditampilkan ke total area pannable dan posisi relatif konten yang ditampilkan di area pannable.

Diagram berikut memperlihatkan dua area yang dapat digeser dengan panjang yang berbeda dan indikator penggeserannya.

gambar yang menunjukkan dua area dapat digeser dengan panjang yang berbeda dan indikator pergeserannya.

Perilaku panningTitik jepret Panning dengan gerakan geser memperkenalkan perilaku inersia saat kontak sentuhan diangkat. Dengan adanya inersia, konten terus bergerak hingga batas jarak tertentu tercapai tanpa input langsung dari pengguna. Gunakan titik rekam jepret untuk mengubah perilaku inertia ini.

Titik snap menentukan perhentian logis di konten aplikasi Anda. Secara kognitif, titik snap bertindak sebagai mekanisme pengganda halaman bagi pengguna dan meminimalkan kelelahan dari penggeseran atau pengusapan berlebihan di wilayah yang dapat diusap dengan ukuran besar. Dengan mereka, Anda dapat menangani input pengguna yang tidak tepat dan memastikan subset tertentu dari konten atau informasi kunci ditampilkan di viewport.

Ada dua jenis titik rekam jepret:

  • Kedekatan - Setelah kontak diangkat, titik jepret dipilih jika inertia berhenti dalam ambang jarak titik snap. Panning masih dapat berhenti di antara titik rekam jepret kedekatan.
  • Wajib - Titik snap yang dipilih adalah yang segera mendahului atau mengikuti titik snap terakhir yang dilewati sebelum kontak diangkat (tergantung pada arah dan kecepatan gerakan). Pengalih harus berhenti pada titik rekam jepret wajib.

Titik panning snap berguna untuk aplikasi seperti browser web dan album foto yang meniru konten berhalaman atau memiliki pengelompokan logis item yang dapat dikelompokkan kembali secara dinamis agar sesuai dalam jendela pandang atau layar.

Diagram berikut menunjukkan bagaimana panning ke titik tertentu dan merilis menyebabkan konten secara otomatis menggeser ke lokasi logis.

gambar menunjukkan area yang dapat dipindahkan.

Usap untuk menggeser.

gambar memperlihatkan area yang dapat digeser ke kiri.

Lepaskan kontak sentuh.

gambar yang menunjukkan area pannable yang telah berhenti menggeser pada titik jepret logis.

Wilayah yang dapat digeser berhenti pada titik jepret, bukan pada posisi saat kontak sentuh dilepaskan.

Rails Konten dapat lebih lebar dan lebih tinggi dari dimensi dan resolusi perangkat tampilan. Untuk alasan ini, panning dua dimensi (horizontal dan vertikal) sering diperlukan. Rails meningkatkan pengalaman pengguna dalam kasus ini dengan menekankan pengguliran di sepanjang sumbu gerak (vertikal atau horizontal).

Diagram berikut menunjukkan konsep rel.

diagram layar dengan rel yang membatasi panning

Menautkan konten yang disematkan atau berlapis

Setelah pengguna mencapai batas zoom atau gulir pada elemen yang telah ditumpuk dalam elemen lain yang dapat diperbesar atau dapat digulir, Anda dapat menentukan apakah elemen induk tersebut harus melanjutkan operasi pembesaran atau pengguliran dimulai dalam elemen turunannya. Ini disebut zoom atau penautan gulir.

Penautan digunakan untuk menggeser dalam area konten sumbu tunggal yang berisi satu atau beberapa sumbu tunggal atau wilayah panning bentuk bebas (ketika kontak sentuh berada di salah satu wilayah anak ini). Ketika batas panning wilayah anak tercapai dalam arah tertentu, panning kemudian diaktifkan pada wilayah induk ke arah yang sama.

Ketika wilayah pannable disarangkan di dalam wilayah pannable lain, penting untuk menentukan ruang yang cukup antara kontainer dan konten yang disematkan. Dalam diagram berikut, satu wilayah yang dapat digulir ditempatkan di dalam wilayah lain yang juga dapat digulir, masing-masing bergerak ke arah yang tegak lurus. Ada banyak ruang bagi pengguna untuk menggeser di setiap wilayah.

gambar yang menunjukkan area pannable yang disematkan.

Tanpa cukup ruang, seperti yang ditunjukkan pada diagram berikut, wilayah yang dapat digeser yang disematkan dapat mengganggu penggeseran dalam wadah dan mengakibatkan penggeseran yang tidak disengaja di satu atau beberapa wilayah yang dapat digeser.

gambar yang menunjukkan padding tidak memadai untuk area yang dapat dipindahkan dan tertanam.

Panduan ini juga berguna untuk aplikasi seperti album foto atau aplikasi pemetaan yang mendukung panning yang tidak dibatasi dalam gambar atau peta individual sambil juga mendukung panning sumbu tunggal dalam album (ke gambar sebelumnya atau berikutnya) atau area detail. Dalam aplikasi yang menyediakan area detail atau opsi yang sesuai dengan gambar atau peta panning bebas, disarankan agar tata letak halaman dimulai dengan area detail dan opsi. Hal ini karena area panning pada gambar atau peta yang tidak dibatasi dapat mengganggu proses panning ke area detail.

Sampel

Sampel arsip

  • Last updated on