Panduan desain touchpad

Desain aplikasi Anda sehingga pengguna dapat berinteraksi dengannya melalui touchpad. Touchpad menggabungkan input multi-sentuh tidak langsung dengan perangkat penunjuk berpresisi tinggi, seperti mouse. Kombinasi ini membuat touchpad cocok untuk UI yang dioptimalkan sentuhan dan target aplikasi produktivitas yang lebih kecil.

Interaksi touchpad memerlukan tiga hal:

  • Touchpad standar atau Touchpad Presisi Windows.

    Touchpad presisi dioptimalkan untuk perangkat Windows app. Mereka memungkinkan sistem untuk menangani aspek tertentu dari pengalaman touchpad secara asli, seperti pelacakan jari dan deteksi telapak tangan, untuk pengalaman yang lebih konsisten di seluruh perangkat.

  • Kontak langsung satu atau beberapa jari di touchpad.

  • Pergerakan kontak sentuhan (atau ketiadaannya, sesuai dengan batas waktu).

Data input yang disediakan oleh sensor touchpad dapat berupa:

  • Ditafsirkan sebagai gerakan fisik untuk manipulasi langsung pada satu atau beberapa elemen UI (seperti memutar, menggeser, mengubah ukuran, atau memindahkan). Sebaliknya, berinteraksi dengan elemen melalui properties window atau kotak dialog lainnya dianggap sebagai manipulasi tidak langsung.
  • Dikenali sebagai metode input alternatif, seperti mouse atau pena.
  • Digunakan untuk melengkapi atau memodifikasi aspek metode input lainnya, seperti mengaburkan goresan tinta yang digambar dengan pena.

Touchpad menggabungkan input multi-sentuh secara tidak langsung dengan input presisi dari perangkat penunjuk, seperti mouse. Kombinasi ini membuat touchpad cocok untuk UI yang dioptimalkan sentuhan dan target aplikasi produktivitas dan lingkungan desktop yang biasanya lebih kecil. Optimalkan desain Windows app Anda untuk input sentuh dan dapatkan dukungan touchpad secara default.

Karena konvergensi pengalaman interaksi yang didukung oleh touchpad, sebaiknya gunakan peristiwa PointerEntered untuk menyediakan perintah UI gaya mouse selain dukungan bawaan untuk input sentuh. Misalnya, gunakan tombol sebelumnya dan berikutnya untuk memungkinkan pengguna membalik halaman konten serta menelusuri konten.

Gerakan dan panduan yang dibahas dalam topik ini dapat membantu memastikan bahwa aplikasi Anda mendukung input touchpad dengan mulus dan dengan kode minimal.

Bahasa touchpad

Serangkaian interaksi touchpad ringkas digunakan secara konsisten di seluruh sistem. Optimalkan aplikasi Anda untuk input sentuhan dan mouse dan bahasa ini membuat aplikasi Anda merasa terbiasa secara instan bagi pengguna Anda, meningkatkan kepercayaan diri mereka, dan membuat aplikasi Anda lebih mudah dipelajari dan digunakan.

Pengguna dapat mengatur gerakan Touchpad presisi dan perilaku interaksi yang jauh lebih presisi daripada yang mereka bisa untuk touchpad standar. Kedua gambar ini menunjukkan halaman pengaturan touchpad yang berbeda dari Pengaturan > Perangkat > Mouse dan touchpad untuk sebuah touchpad standar dan sebuah Touchpad Presisi.

pengaturan touchpad standar

Pengaturan Standard\ touchpad\

pengaturan touchpad presisi windows

Pengaturan Windows\ Presisi\ Touchpad\

Berikut adalah beberapa contoh gestur touchpad yang dioptimalkan untuk melakukan tugas umum.

Istilah Description
Ketuk tiga jari Preferensi pengguna untuk mencari dengan Cortana atau menampilkan Pusat Tindakan.
Slide tiga jari Preferensi pengguna untuk membuka Tampilan Tugas desktop virtual, menampilkan Desktop, atau beralih di antara aplikasi yang terbuka.
Ketuk satu jari untuk tindakan utama Gunakan satu jari untuk mengetuk elemen dan memanggil tindakan utamanya (seperti meluncurkan aplikasi atau menjalankan perintah).
Ketuk dua jari untuk mengklik kanan Ketuk dengan dua jari secara bersamaan pada elemen untuk memilihnya dan menampilkan perintah kontekstual.
Geser dua jari untuk memindahkan tampilan Slide digunakan terutama untuk interaksi panning tetapi juga dapat digunakan untuk memindahkan, menggambar, atau menulis.
Jepit dan regangkan untuk memperbesar tampilan Gerakan mencubit dan meregangkan umumnya digunakan untuk mengubah ukuran dan Zoom Semantik.
Tekan dan geser satu jari untuk menyusun ulang Seret elemen.
Tekan dan geser satu jari untuk memilih teks Tekan pada teks yang dapat dipilih dan geser untuk menyeleksinya. Ketuk dua kali untuk memilih kata.
Zona klik kiri dan kanan Meniru fungsionalitas tombol kiri dan kanan perangkat mouse.

 

Perangkat keras

Kueri kemampuan perangkat mouse (MouseCapabilities) untuk mengidentifikasi aspek antarmuka pengguna aplikasi Anda yang dapat diakses perangkat keras touchpad secara langsung. Sebaiknya berikan UI untuk input sentuhan dan mouse.

Untuk informasi selengkapnya tentang mengkueri kemampuan perangkat, lihat Mengidentifikasi perangkat input.

Umpan balik visual

  • Saat kursor touchpad terdeteksi (melalui peristiwa pemindahan atau arahkan kursor), tampilkan UI khusus mouse untuk menunjukkan fungsionalitas yang diekspos oleh elemen. Jika kursor touchpad tidak bergerak untuk waktu tertentu, atau jika pengguna memulai interaksi sentuh, buat UI touchpad memudar secara bertahap. Ini menjaga UI tetap bersih dan tidak berantakan.
  • Jangan gunakan kursor untuk umpan balik hover, umpan balik yang diberikan oleh elemen sudah cukup (lihat bagian Kursor di bawah).
  • Jangan tampilkan umpan balik visual jika elemen tidak mendukung interaksi (seperti teks statis).
  • Jangan gunakan bingkai fokus saat menggunakan interaksi touchpad. Cadangkan untuk interaksi keyboard.
  • Tampilkan umpan balik visual secara bersamaan untuk semua elemen yang mewakili target input yang sama.

Untuk panduan umum selengkapnya tentang umpan balik visual, lihat Panduan untuk umpan balik visual.

Kursor

Sekumpulan kursor standar tersedia untuk penunjuk touchpad. Ini digunakan untuk menunjukkan tindakan utama elemen.

Setiap kursor standar memiliki gambar default yang sesuai yang terkait dengannya. Pengguna atau aplikasi dapat menggantikan gambar default yang terkait dengan kursor standar apa pun kapan saja. Aplikasi WinUI menentukan gambar kursor melalui fungsi PointerCursor .

Jika Anda perlu menyesuaikan kursor mouse:

  • Selalu gunakan kursor panah (kursor panah) untuk elemen yang dapat diklik. jangan menggunakan kursor tangan menunjuk untuk tautan atau elemen interaktif lainnya. Sebagai gantinya, gunakan efek hover (dijelaskan sebelumnya).
  • Gunakan kursor teks (kursor teks) untuk teks yang dapat dipilih.
  • Gunakan kursor pemindahan (pindahkan kursor) saat memindahkan adalah tindakan utama (seperti menyeret atau memotong). Jangan gunakan kursor pemindahan untuk elemen yang fungsi utamanya adalah navigasi, seperti petak Mulai.
  • Gunakan kursor ubah ukuran horizontal, vertikal, dan diagonal (kursor ubah ukuran vertikal, kursor ubah ukuran horizontal, kursor ubah ukuran diagonal (kiri bawah, kanan atas), kursor ubah ukuran diagonal (kiri atas, kanan bawah)), saat objek dapat diubah ukurannya.
  • Gunakan kursor tangan menggenggam (menggenggam kursor tangan (terbuka), menggenggam kursor tangan (tertutup)) saat menggeser konten dalam kanvas tetap (seperti peta).

Samples

Sampel Arsip

  • Last updated on