Interaksi mouse

Artikel
07/05/2024

Optimalkan desain aplikasi Windows Anda untuk input sentuhan dan dapatkan dukungan mouse dasar secara default.

tikus

Input mouse paling cocok untuk interaksi pengguna yang memerlukan presisi saat menunjuk dan mengklik. Presisi yang melekat ini secara alami didukung oleh UI Windows, yang dioptimalkan untuk sifat sentuhan yang tidak tepat.

Di mana mouse dan sentuhan input menyimpang adalah kemampuan untuk menyentuh lebih dekat meniru manipulasi langsung elemen UI melalui gerakan fisik yang dilakukan langsung pada objek tersebut (seperti menggesek, menggeser, menyeret, memutar, dan sebagainya). Manipulasi dengan mouse biasanya memerlukan beberapa keseimbangan UI lainnya, seperti penggunaan handel untuk mengubah ukuran atau memutar objek.

Topik ini menjelaskan pertimbangan desain untuk interaksi mouse.

Bahasa mouse aplikasi UWP

Sekumpulan interaksi mouse ringkas digunakan secara konsisten di seluruh sistem.

Persyaratan	Deskripsi
Arahkan mouse ke pembelajaran	Arahkan mouse ke atas elemen untuk menampilkan info atau visual pengajaran yang lebih rinci (seperti tipsalat) tanpa komitmen terhadap tindakan.
Klik kiri untuk tindakan utama	Klik kiri elemen untuk memanggil tindakan utamanya (seperti meluncurkan aplikasi atau menjalankan perintah).
Gulir untuk mengubah tampilan	Tampilkan bilah gulir untuk berpindah ke atas, bawah, kiri, dan kanan dalam area konten. Pengguna dapat menggulir dengan mengklik bilah gulir atau memutar roda mouse. Bilah gulir dapat menunjukkan lokasi tampilan saat ini di dalam area konten (panning dengan sentuhan menampilkan UI serupa).
Klik kanan untuk memilih dan memerintahkan	Klik kanan untuk menampilkan bilah navigasi (jika tersedia) dan bilah aplikasi dengan perintah global. Klik kanan elemen untuk memilihnya dan menampilkan bilah aplikasi dengan perintah kontekstual untuk elemen yang dipilih. Catatan Klik kanan untuk menampilkan menu konteks jika perintah pilihan atau bilah aplikasi tidak sesuai perilaku UI. Tetapi kami sangat menyarankan Anda menggunakan bilah aplikasi untuk semua perilaku perintah.
Perintah UI untuk memperbesar tampilan	Tampilkan perintah UI di bilah aplikasi (seperti + dan -), atau tekan Ctrl dan putar roda mouse, untuk meniru gerakan mencubit dan meregangkan untuk memperbesar tampilan.
Perintah UI untuk memutar	Tampilkan perintah UI di bilah aplikasi, atau tekan Ctrl+Shift dan putar roda mouse, untuk meniru gerakan belokan untuk memutar. Putar perangkat itu sendiri untuk memutar seluruh layar.
Klik kiri dan seret untuk menyusun ulang	Klik kiri dan seret elemen untuk memindahkannya.
Klik kiri dan seret untuk memilih teks	Klik kiri dalam teks yang dapat dipilih dan seret untuk memilihnya. Klik ganda untuk memilih kata.

Peristiwa input mouse

Sebagian besar input mouse dapat ditangani melalui peristiwa input rute umum yang didukung oleh semua objek UIElement. Ini termasuk:

Namun, Anda dapat memanfaatkan kemampuan spesifik setiap perangkat (seperti peristiwa roda mouse) menggunakan penunjuk, gerakan, dan peristiwa manipulasi di Windows.UI.Input.

Sampel: Lihat sampel BasicInput kami, untuk .

Panduan untuk umpan balik visual

Saat mouse terdeteksi (melalui peristiwa pemindahan atau arahkan kursor), tampilkan UI khusus mouse untuk menunjukkan fungsionalitas yang diekspos oleh elemen. Jika mouse tidak bergerak untuk waktu tertentu, atau jika pengguna memulai interaksi sentuh, buat UI mouse secara bertahap memudar. Ini menjaga UI tetap bersih dan tidak berantakan.
Jangan gunakan kursor untuk umpan balik hover, umpan balik yang diberikan oleh elemen sudah cukup (lihat Kursor di bawah).
Jangan tampilkan umpan balik visual jika elemen tidak mendukung interaksi (seperti teks statis).
Jangan gunakan persegi panjang fokus dengan interaksi mouse. Pesan ini untuk interaksi keyboard.
Tampilkan umpan balik visual secara bersamaan untuk semua elemen yang mewakili target input yang sama.
Sediakan tombol (seperti + dan -) untuk meniru manipulasi berbasis sentuhan seperti panning, memutar, memperbesar tampilan, dan sebagainya.

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

Kursor

Sekumpulan kursor standar tersedia untuk penunjuk mouse. 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. Tentukan gambar kursor melalui fungsi PointerCursor.

Jika Anda perlu menyesuaikan kursor mouse:

Selalu gunakan kursor panah () untuk elemen yang dapat diklik. jangan gunakan kursor tangan penunjuk () untuk tautan atau elemen interaktif lainnya. Sebagai gantinya, gunakan efek hover (dijelaskan sebelumnya).
Gunakan kursor teks () untuk teks yang dapat dipilih.
Gunakan kursor pemindahan () saat memindahkan adalah tindakan utama (seperti menyeret atau memotong). Jangan gunakan kursor pemindahan untuk elemen di mana tindakan utama adalah navigasi (seperti Petak peta Mulai).
Gunakan kursor ubah ukuran horizontal, vertikal, dan diagonal (, , , ), saat objek dapat diubah ukurannya.
Gunakan kursor tangan menggenggam (, ) saat menggeser konten dalam kanvas tetap (seperti peta).