Interaksi mouse

Artikel
07/13/2023

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

Mouse

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

Di mana mouse dan sentuhan input diverge adalah kemampuan untuk sentuhan untuk lebih 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 kesempurnaan 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.

Istilah	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 dalam area konten (panning dengan sentuhan menampilkan UI serupa).
Klik kanan untuk memilih dan perintah	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 adalah perilaku UI yang tidak sesuai. 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 diputar	Tampilkan perintah UI di bilah aplikasi, atau tekan Ctrl+Shift dan putar roda mouse, untuk meniru gerakan giliran 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 di 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 menggeser, 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 mengganti 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 ) 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).