Panduan untuk target sentuhan

  • Artikel

Semua elemen UI interaktif di aplikasi Windows Anda harus cukup besar bagi pengguna untuk mengakses dan menggunakan secara akurat, terlepas dari jenis perangkat atau metode input.

Mendukung input sentuhan (dan sifat area kontak sentuh yang relatif tidak tepat) memerlukan pengoptimalan lebih lanjut sehubungan dengan ukuran target dan tata letak kontrol sebagai kumpulan data input yang lebih besar dan lebih kompleks yang dilaporkan oleh digitizer sentuh digunakan untuk menentukan target yang dimaksudkan (atau kemungkinan besar) pengguna.

Semua kontrol UWP telah dirancang dengan ukuran dan tata letak target sentuh default yang memungkinkan Anda membangun aplikasi yang seimbang dan menarik secara visual yang nyaman, mudah digunakan, dan menginspirasi kepercayaan diri.

Dalam topik ini, kami menjelaskan perilaku default ini sehingga Anda dapat merancang aplikasi untuk kegunaan maksimum menggunakan kontrol platform dan kontrol kustom (jika aplikasi Anda memerlukannya).

API penting: Windows.UI.Core, Windows.UI.Input, Windows.UI.Xaml.Input

Ukuran Standar Fasih

Ukuran Standar Fasih dibuat untuk memberikan keseimbangan antara kepadatan informasi dan kenyamanan pengguna. Secara efektif, semua item di layar selaras dengan target piksel efektif (epx) 40x40, yang memungkinkan elemen UI selaras dengan kisi dan menskalakan dengan tepat berdasarkan penskalaan tingkat sistem.

Catatan

Untuk informasi selengkapnya tentang piksel dan penskalaan yang efektif, lihat Ukuran layar dan titik henti

Untuk informasi selengkapnya tentang penskalaan tingkat sistem, lihat Perataan, margin, padding.

Ukuran Ringkas Lancar

Aplikasi dapat menampilkan tingkat kepadatan informasi yang lebih tinggi dengan ukuran Ringkas Lancar. Ukuran ringkas menyelaraskan elemen UI ke target epx 32x32, yang memungkinkan elemen UI untuk menyelaraskan ke kisi yang lebih ketat dan menskalakan dengan tepat berdasarkan penskalaan tingkat sistem.

Contoh

Ukuran ringkas dapat diterapkan di tingkat halaman atau kisi.

Tingkat halaman

<Page.Resources>
    <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
</Page.Resources>

Tingkat kisi

<Grid>
    <Grid.Resources>
        <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
    </Grid.Resources>
</Grid>

Ukuran target

Secara umum, atur ukuran target sentuh Anda ke rentang persegi 7,5mm (40x40 piksel pada layar 135 PPI pada dataran tinggi penskalan 1,0x). Biasanya, kontrol UWP selaras dengan target sentuh 7,5mm (ini dapat bervariasi berdasarkan kontrol tertentu dan pola penggunaan umum). Lihat Ukuran dan kepadatan kontrol untuk detail selengkapnya.

Rekomendasi ukuran target ini dapat disesuaikan sesuai kebutuhan skenario khusus Anda. Beberapa hal yang perlu dipertimbangkan:

  • Frekuensi Sentuhan - pertimbangkan untuk membuat target yang berulang kali atau sering ditekan lebih besar dari ukuran minimum.
  • Konsekuensi Kesalahan - target yang memiliki konsekuensi parah jika disentuh dalam kesalahan harus memiliki padding yang lebih besar dan ditempatkan lebih jauh dari tepi area konten. Ini terutama berlaku untuk target yang sering disentuh.
  • Posisi di area konten.
  • Faktor formulir dan ukuran layar.
  • Postur jari.
  • Visualisasi sentuh.

Sampel

Sampel arsip