Panduan untuk umpan balik visual

Gunakan umpan balik visual untuk menampilkan pengguna saat interaksi mereka terdeteksi, ditafsirkan, dan ditangani. Umpan balik visual dapat membantu pengguna dengan mendorong interaksi. Ini menunjukkan keberhasilan interaksi, yang meningkatkan rasa kontrol pengguna. Ini juga menyampaikan status sistem dan mengurangi kesalahan.

API Penting: Windows.Devices.Input, Windows.UI.Input, Windows.UI.Core

Rekomendasi

• Cobalah untuk membatasi modifikasi templat kontrol dengan yang terkait langsung dengan niat desain Anda, karena perubahan ekstensif dapat memengaruhi performa dan aksesibilitas kontrol dan aplikasi Anda.
  • Lihat gaya XAML untuk informasi selengkapnya tentang menyesuaikan properti kontrol, termasuk properti status visual.
  • Lihat Kelas UserControl untuk detail tentang membuat perubahan pada templat kontrol
  • Pertimbangkan untuk membuat kontrol templat kustom Anda sendiri jika Anda perlu membuat perubahan signifikan pada templat kontrol. Untuk contoh kontrol templat kustom, lihat sampel Kontrol Edit Kustom.
• Jangan gunakan visualisasi sentuh dalam situasi di mana visualisasi dapat mengganggu penggunaan aplikasi. Untuk informasi selengkapnya, lihat ShowGestureFeedback.
• Jangan tampilkan umpan balik kecuali benar-benar diperlukan. Jaga agar UI tetap bersih dan tidak berantakan dengan tidak menampilkan umpan balik visual kecuali Anda menambahkan nilai yang tidak tersedia di tempat lain.
• Cobalah untuk tidak menyesuaikan perilaku umpan balik visual secara dramatis dari gerakan Windows bawaan, karena ini dapat menciptakan pengalaman pengguna yang tidak konsisten dan membingungkan.

Panduan penggunaan tambahan

Visualisasi kontak sangat penting untuk interaksi sentuh yang membutuhkan akurasi dan presisi. Misalnya, aplikasi Anda harus dengan jelas menunjukkan lokasi ketukan untuk memberi tahu pengguna jika mereka melewatkan target mereka, berapa banyak mereka melewatkannya, dan penyesuaian apa yang harus mereka buat.

Menggunakan kontrol platform XAML default yang tersedia memastikan bahwa aplikasi Anda berfungsi dengan benar di semua perangkat dan dalam semua situasi input. Jika aplikasi Anda menampilkan interaksi kustom yang memerlukan umpan balik yang disesuaikan, Anda harus memastikan umpan balik sesuai, mencakup perangkat input, dan tidak mengalihkan perhatian pengguna dari tugas mereka. Ini bisa menjadi masalah tertentu dalam game atau aplikasi gambar, di mana umpan balik visual mungkin bertentangan dengan atau mengaburkan antarmuka pengguna penting.

Penting

Kami tidak menyarankan untuk mengubah perilaku interaksi gerakan bawaan.

Umpan Balik Di Seluruh Perangkat

Umpan balik visual umumnya tergantung pada perangkat input (sentuhan, touchpad, mouse, pena/stylus, keyboard, dan sebagainya). Misalnya, umpan balik bawaan untuk mouse biasanya melibatkan pemindahan dan perubahan kursor, sementara sentuhan dan pena memerlukan visualisasi kontak, dan input keyboard dan navigasi menggunakan persegi panjang fokus dan penyorotan.

Gunakan ShowGestureFeedback untuk mengatur perilaku umpan balik untuk gerakan platform.

Jika menyesuaikan UI umpan balik, pastikan Anda memberikan umpan balik yang mendukung, dan cocok untuk, semua mode input.

Berikut adalah beberapa contoh visualisasi kontak bawaan di Windows.

Visualisasi sentuhan	Visualisasi mouse/touchpad	Visualisasi pena	Visualisasi keyboard

Visual Fokus Visibilitas Tinggi

Semua aplikasi Windows memiliki visual fokus yang lebih terdefinisi di sekitar kontrol yang dapat berinteraksi dalam aplikasi. Visual fokus baru ini sepenuhnya dapat disesuaikan serta dapat dinonaktifkan saat diperlukan.

Untuk pengalaman 10 kaki khas penggunaan Xbox dan TV, Windows mendukung Ungkapkan fokus, efek pencahayaan yang menganimasikan batas elemen yang dapat difokuskan, seperti tombol, ketika mereka mendapatkan fokus melalui gamepad atau input keyboard.

Branding Warna & Penyesuaian

Properti Batas

Ada dua bagian untuk visual fokus visibilitas tinggi: batas utama dan batas sekunder. Batas utama tebal 2px , dan berjalan di luar perbatasan sekunder. Batas sekunder tebal 1px dan berjalan di sekitar bagian dalam perbatasan utama.

Untuk mengubah ketebalan jenis batas (primer atau sekunder) gunakan FocusVisualPrimaryThickness atau FocusVisualSecondaryThickness, masing-masing:

<Slider Width="200" FocusVisualPrimaryThickness="5" FocusVisualSecondaryThickness="2"/>

Margin adalah properti jenis Ketebalan, dan oleh karena itu margin dapat disesuaikan agar hanya muncul di sisi kontrol tertentu. Lihat di bawah ini:

Margin adalah spasi antara batas visual kontrol dan awal visual fokus batas sekunder. Margin default adalah 1px jauh dari batas kontrol. Anda dapat mengedit margin ini per kontrol, dengan mengubah properti FocusVisualMargin :

<Slider Width="200" FocusVisualMargin="-5"/>

Margin negatif akan mendorong batas menjauh dari pusat kontrol, dan margin positif akan memindahkan batas lebih dekat ke pusat kontrol.

Untuk menonaktifkan visual fokus pada kontrol sepenuhnya, cukup nonaktifkan UseSystemFocusVisuals:

<Slider Width="200" UseSystemFocusVisuals="False"/>

Ketebalan, margin, atau apakah pengembang aplikasi ingin memiliki visual fokus sama sekali, ditentukan berdasarkan per kontrol.

Properti Warna

Hanya ada dua properti warna untuk visual fokus: warna batas utama, dan warna batas sekunder. Warna batas visual fokus ini dapat diubah per kontrol pada tingkat halaman, dan secara global pada tingkat seluruh aplikasi:

Untuk memfokuskan merek visual di seluruh aplikasi, ambil alih sikat sistem:

<SolidColorBrush x:Key="SystemControlFocusVisualPrimaryBrush" Color="DarkRed"/>
<SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="Pink"/>

Untuk mengubah warna per kontrol, cukup edit properti visual fokus pada kontrol yang diinginkan:

<Slider Width="200" FocusVisualPrimaryBrush="DarkRed" FocusVisualSecondaryBrush="Pink"/>

Artikel terkait

Untuk desainer

• Panduan untuk panning

Untuk pengembang

• Interaksi pengguna kustom

Sampel

• Sampel input dasar
• Sampel input latensi rendah
• Sampel mode interaksi pengguna
• Sampel visual fokus

Sampel arsip

• Input: Sampel peristiwa input pengguna XAML
• Input: Sampel kemampuan perangkat
• Input: Sampel pengujian hit sentuhan
• Sampel pengguliran, pengalihan, dan perbesar tampilan XAML
• Input: Sampel tinta yang disederhanakan
• Input: Sampel gerakan Windows 8
• Input: Sampel manipulasi dan gerakan
• Sampel input sentuh DirectX