Interaksi sentuh

Topik ini menyediakan panduan desain untuk membangun pengalaman kustom yang dioptimalkan untuk sentuhan di aplikasi Windows.

Gambaran Umum

Sentuhan adalah bentuk utama input di seluruh aplikasi Windows dan Windows yang melibatkan penggunaan satu atau beberapa jari (atau kontak sentuh). Kontak sentuh ini, dan gerakannya, ditafsirkan sebagai gerakan sentuh dan manipulasi yang mendukung berbagai interaksi pengguna.

SDK Windows dan Windows App SDK mencakup koleksi komprehensif kontrol yang dioptimalkan sentuhan yang memberikan pengalaman yang kuat dan konsisten di seluruh aplikasi Windows.

Gunakan panduan ini saat membuat kontrol, pengalaman, dan kerangka kerja kustom untuk aplikasi Windows Anda.

Prinsip desain

Pertimbangkan hal berikut saat Anda merancang pengalaman sentuh di aplikasi Windows Anda.

Sentuhan Dioptimalkan

Pengalaman aplikasi Windows harus merasa mengundang untuk menyentuh, memungkinkan manipulasi langsung, dan mengakomodasi interaksi yang kurang tepat. Pertimbangkan akselerator untuk antarmuka sentuh, termasuk gestur serta integrasi pena dan suara.

Konsisten pada Berbagai Postur

Aplikasi Anda harus memiliki pengalaman yang konsisten terlepas dari metode input atau postur pengguna. Perubahan dari postur desktop tradisional ke postur tablet (lihat Pengaturan yang direkomendasikan untuk pengalaman tablet yang lebih baik), serta perubahan orientasi, seharusnya tidak membingungkan, melainkan dilakukan dengan halus dan hanya jika perlu. Aplikasi Anda harus mengatur ulang aliran UI dengan cara yang halus untuk menciptakan pengalaman kohesif yang sudah dikenal pengguna dan sesuai dengan kebutuhan pengguna.

Responsif

Aplikasi dan interaksi harus memberi pengguna umpan balik di setiap fase (Sentuh ke bawah, tindakan, sentuhan) interaksi menggunakan animasi yang merespons status pengguna yang ada sambil menunjukkan kemungkinan tindakan. Animasi juga harus mempertahankan setidaknya 60 fps agar terasa halus dan modern.

Menghormati Konvensi Sentuhan

Umpan Balik Responsif

Umpan balik visual yang sesuai selama interaksi dengan aplikasi Anda membantu pengguna mengenali, mempelajari, dan beradaptasi dengan bagaimana interaksi mereka ditafsirkan oleh aplikasi dan platform Windows. Berikan umpan balik langsung dan berkelanjutan sebagai respons terhadap sentuhan pengguna, yang terlihat, dapat dipahami, dan tidak hilang oleh gangguan. Umpan balik langsung ini adalah bagaimana pengguna akan mempelajari dan menjelajahi elemen interaktif aplikasi Anda.

• Umpan balik harus segera diberikan saat disentuh, dan objek bergerak harus menempel pada jari pengguna.
• UI harus merespons gerakan dengan mencocokkan kecepatan dan gerakan pengguna, hindari menggunakan animasi keyframe.
• Umpan balik visual harus menyampaikan kemungkinan hasil sebelum pengguna berkomitmen pada tindakan.

Lakukan

Jangan

Untuk informasi selengkapnya, lihat Panduan untuk umpan balik visual dan Gerakan di Windows 11

Pola Interaksi Sentuh

Hormati pola interaksi dan gerakan umum ini untuk menghadirkan konsistensi dan dapat diprediksi untuk pengalaman Anda.

Interaksi Umum

Ada serangkaian perilaku dan gerakan sentuh umum yang dikenal oleh pengguna dan diharapkan berfungsi konsisten di semua antarmuka Windows.

• Ketuk untuk mengaktifkan atau memilih item
• Tekan sebentar dan seret untuk memindahkan objek
• Tekan dan tahan untuk mengakses menu perintah sekunder dan kontekstual
• Gesek (atau seret dan lepaskan) untuk perintah kontekstual
• Putar searah jarum jam atau berlawanan arah jarum jam untuk pivot

Interaksi

Ketuk

Gesek (atau seret dan lepaskan)

Tekan dan seret pendek

Memutar

Tekan dan tahan

Untuk informasi selengkapnya, lihat Panduan untuk umpan balik visual dan Gerakan di Windows 11

Gerakan

Gerakan menurunkan upaya yang diperlukan oleh pengguna untuk menavigasi dan bertindak atas interaksi umum. Jika memungkinkan, dukung UI dengan gerakan sentuh untuk memudahkan pengguna menavigasi dan bertindak dalam aplikasi.

Jika berpindah antar tampilan, gunakan animasi yang tersambung sehingga status yang sudah ada dan status baru keduanya terlihat saat menyeret. Jika berinteraksi dengan UI, item harus mengikuti pergerakan pengguna, memberikan umpan balik dan, setelah dilepaskan, melakukan tindakan tambahan berdasarkan ambang posisi seret.

Gerakan juga harus dapat ditindak dengan jentikkan dan gesek berdasarkan inertia dan berada dalam rentang gerakan yang nyaman.

• Seret atau usap untuk memindahkan antar halaman
• Seret untuk menutup
• Tarik untuk menyegarkan

Gerakan

Seret atau usap untuk berpindah bolak-balik

Tarik untuk menyegarkan

Seret untuk menutup

Untuk informasi selengkapnya, lihat Transisi halaman dan Tarik untuk merefresh.

Gerakan kustom

Gunakan gerakan kustom untuk membawa tombol pintasan keyboard frekuensi tinggi dan gerakan trackpad ke interaksi sentuh. Membantu kemudahan ditemukan dan respons melalui kelengkapan antarmuka khusus dengan animasi dan keadaan visual (misalnya, menempatkan tiga jari di layar membuat jendela menyusut untuk memberikan umpan balik visual).

• Jangan mengesampingkan gerakan umum karena ini dapat menyebabkan kebingungan bagi pengguna.
• Pertimbangkan untuk menggunakan gerakan multi-jari untuk tindakan kustom tetapi ketahuilah bahwa sistem telah mencadangkan beberapa gerakan multi-jari untuk beralih cepat antara aplikasi dan desktop.
• Perhatikan gerakan kustom yang dimulai dari dekat tepi layar karena gerakan tepi disediakan untuk perilaku tingkat OS, yang mungkin secara tidak sengaja dapat diaktifkan.

Hindari navigasi yang tidak disengaja

Jika aplikasi atau game Anda mungkin sering melibatkan interaksi di dekat tepi layar, pertimbangkan untuk menyajikan pengalaman Anda dalam mode Fullscreen Exclusive (FSE) untuk menghindari aktivasi flyout sistem yang tidak disengaja (pengguna harus menggesek langsung pada tab sementara untuk menarik flyout sistem terkait).

Nota

Hindari menggunakan ini kecuali benar-benar diperlukan karena akan menyulitkan pengguna untuk menavigasi jauh dari aplikasi Anda atau menggunakannya bersama dengan orang lain.

Pengalaman papan ketik sentuh

Keyboard sentuh memungkinkan entri teks untuk perangkat yang mendukung sentuhan. Kontrol input teks aplikasi Windows memanggil keyboard sentuh secara default saat pengguna mengetuk bidang input yang dapat diedit.

Memanggil saat bidang teks diketuk

Papan ketik sentuh harus muncul ketika pengguna mengetuk bidang input teks - ini akan berfungsi secara otomatis dengan menggunakan API sistem kami untuk menampilkan dan menyembunyikan keyboard. Lihat Cara merespons keberadaan papan ketik sentuh.

Menggunakan kontrol input teks standar

Menggunakan kontrol umum memberikan perilaku yang diharapkan dan meminimalkan kejutan bagi pengguna.

Kontrol teks yang mendukung Text Services Framework (TSF) menyediakan kemampuan penulisan bentuk (keyboard gesek).

Sinyal papan ketik sentuh

Perhitungkan input, postur, dan sinyal perangkat keras yang menjadikan keyboard sentuh sebagai mode utama input (keyboard perangkat keras dilepaskan, titik masuk diaktifkan dengan sentuhan, dan ada niat pengguna yang jelas untuk mengetik).

Reflow dengan tepat

• Perlu diketahui bahwa keyboard dapat mengambil hingga 50% dari layar di perangkat yang lebih kecil.
• Jangan mengaburkan bidang teks aktif dengan keyboard sentuh.
• Jika keyboard sentuh mengaburkan bidang teks aktif, gulir konten aplikasi ke atas (dengan animasi) hingga bidang terlihat.
• Jika keyboard sentuh mengaburkan bidang teks aktif tetapi konten aplikasi tidak dapat menggulir ke atas, coba pindahkan kontainer aplikasi (dengan animasi).

Target Tercapai

Pastikan sasaran nyaman dan menarik untuk disentuh. Jika target yang terkena terlalu kecil atau terlalu berdesakan, pengguna harus lebih presisi, yang sulit dilakukan dengan sentuhan dan dapat mengakibatkan pengalaman yang buruk.

Dapat Disentuh

Kami mendefinisikan dapat disentuh sebagai minimal 40 x 40 epx, bahkan jika visual lebih kecil, atau tinggi 32 epx jika lebarnya setidaknya 120 epx.

Kontrol umum kami sesuai dengan standar ini (dioptimalkan untuk pengguna mouse dan sentuh).

Dioptimalkan untuk sentuhan

Untuk UI yang dioptimalkan sentuhan, pertimbangkan untuk meningkatkan ukuran target menjadi 44 x 44 epx dengan setidaknya 4 epx ruang yang terlihat di antara target.

Kami merekomendasikan dua perilaku default: Selalu sentuh dioptimalkan atau transisi berdasarkan sinyal perangkat.

Ketika sebuah aplikasi dapat dioptimalkan untuk penggunaan sentuhan tanpa mengorbankan pengguna mouse, terutama jika aplikasi tersebut lebih banyak digunakan dengan sentuhan, maka selalu optimalkan untuk sentuhan.

Jika Anda mengubah UI berdasarkan sinyal perangkat untuk postur perangkat, pastikan selalu memberikan pengalaman yang konsisten pada setiap postur.

Mencocokkan visual untuk menyentuh target

Pertimbangkan untuk memperbarui visual saat dimensi target sentuh berubah. Misalnya, jika target hit meningkat ketika pengguna menggunakan tablet dalam mode postur, UI yang mewakili target hit juga harus diperbarui untuk membantu pengguna memahami perubahan status dan tampilan yang diperbarui. Untuk informasi selengkapnya, lihat Dasar-dasar desain konten untuk aplikasi Windows, Panduan untuk target sentuh, Ukuran kontrol, dan kepadatan.

Pengoptimalan Potret

Mendukung tata letak responsif yang memperhitungkan jendela tinggi dan lebar untuk memastikan aplikasi dioptimalkan untuk orientasi lanskap dan potret.

Ini juga akan memastikan visual inti UI jendela aplikasi ditampilkan dengan benar dalam skenario multitugas (aplikasi dibagi berdampingan dengan rasio aspek potret) terlepas dari orientasi dan ukuran layar.