Penskalakan teks
Contoh penskalaan teks di Windows 11 (100% hingga 225%)
Gambaran Umum
Membaca teks di layar komputer (dari perangkat seluler ke laptop ke monitor desktop ke layar raksasa Surface Hub) bisa menjadi tantangan bagi banyak orang. Sebaliknya, beberapa pengguna menemukan ukuran font yang digunakan dalam aplikasi dan situs web menjadi lebih besar dari yang diperlukan.
Untuk memastikan teks sebagus mungkin untuk rentang pengguna terluas, Windows menyediakan kemampuan bagi pengguna untuk mengubah ukuran font relatif di seluruh OS dan aplikasi individual. Alih-alih menggunakan aplikasi pembesar (yang biasanya hanya memperbesar semuanya dalam area layar dan memperkenalkan masalah kegunaannya sendiri), mengubah resolusi tampilan, atau mengandalkan penskalaan DPI (yang mengubah ukuran semuanya berdasarkan tampilan dan jarak pandang khas), pengguna dapat dengan cepat mengakses pengaturan untuk mengubah ukuran hanya teks, mulai dari 100% (ukuran default) hingga 225%.
Dukungan
Aplikasi Universal Windows (baik standar maupun PWA), mendukung penskalakan teks secara default.
Jika aplikasi Windows Anda menyertakan kontrol kustom, permukaan teks kustom, tinggi kontrol yang dikodekan secara permanen, kerangka kerja yang lebih lama, atau kerangka kerja pihak ke-3, Anda mungkin harus membuat beberapa pembaruan untuk memastikan pengalaman yang konsisten dan berguna bagi pengguna Anda.
DirectWrite, GDI, dan XAML SwapChainPanels tidak secara asli mendukung penskalaan teks, sementara dukungan Win32 terbatas pada menu, ikon, dan toolbar.
Pengalaman pengguna
Pengguna dapat menyesuaikan skala teks dengan penggeser Buat teks lebih besar di layar Pengaturan -> Kemudahan Akses -> Visi/Tampilan.
Pengaturan skala teks dari Pengaturan -> Kemudahan Akses -> Layar Visi/Tampilan
Panduan UX
Saat teks diubah ukurannya, kontrol dan kontainer juga harus mengubah ukuran dan reflow untuk mengakomodasi teks dan tata letak barunya. Seperti disebutkan sebelumnya, tergantung pada aplikasi, kerangka kerja, dan platform, sebagian besar pekerjaan ini dilakukan untuk Anda. Panduan UX berikut mencakup kasus-kasus di mana tidak.
Menggunakan kontrol platform
Apakah kita sudah mengatakan ini? Perlu diulang: Jika memungkinkan, selalu gunakan kontrol bawaan yang disediakan dengan berbagai kerangka kerja aplikasi Windows untuk mendapatkan pengalaman pengguna paling komprehensif yang mungkin untuk jumlah upaya paling sedikit.
Misalnya, semua kontrol teks UWP mendukung pengalaman penskalaan teks lengkap tanpa kustomisasi atau templat apa pun.
Berikut adalah cuplikan dari aplikasi UWP dasar yang menyertakan beberapa kontrol teks standar:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Style="{ThemeResource TitleTextBlockStyle}"
Text="Text scaling test"
HorizontalTextAlignment="Center" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0"
Source="Assets/StoreLogo.png"
Width="450" Height="450"/>
<StackPanel Grid.Column="1"
HorizontalAlignment="Center">
<TextBlock TextWrapping="WrapWholeWords">
The quick brown fox jumped over the lazy dog.
</TextBlock>
<TextBox PlaceholderText="Type something here" />
</StackPanel>
<Image Grid.Column="2"
Source="Assets/StoreLogo.png"
Width="450" Height="450"/>
</Grid>
<TextBlock Grid.Row="2"
Style="{ThemeResource TitleTextBlockStyle}"
Text="Text scaling test footer"
HorizontalTextAlignment="Center" />
</Grid>
Penskalakan teks animasi
Menggunakan ukuran otomatis
Jangan tentukan ukuran absolut untuk kontrol Anda. Jika memungkinkan, biarkan platform mengubah ukuran kontrol Anda secara otomatis berdasarkan pengaturan pengguna dan perangkat.
Dalam cuplikan ini dari contoh sebelumnya, kita menggunakan Auto
nilai lebar dan *
untuk sekumpulan kolom kisi dan membiarkan platform menyesuaikan tata letak aplikasi berdasarkan ukuran elemen yang terkandung dalam kisi.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
Menggunakan pembungkusan teks
Untuk memastikan tata letak aplikasi Anda fleksibel dan dapat disesuaikan mungkin, aktifkan pembungkusan teks dalam kontrol apa pun yang berisi teks (banyak kontrol tidak mendukung pembungkusan teks secara default).
Jika Anda tidak menentukan pembungkusan teks, platform menggunakan metode lain untuk menyesuaikan tata letak, termasuk kliping (lihat contoh sebelumnya).
Di sini, kami menggunakan AcceptsReturn
properti TextBox dan TextWrapping
untuk memastikan tata letak kami seleksi mungkin.
<TextBox PlaceholderText="Type something here"
AcceptsReturn="True" TextWrapping="Wrap" />
Penskalaan teks animasi dengan pembungkusan teks
Menentukan perilaku pemangkasan teks
Jika pembungkusan teks bukan perilaku yang disukai, sebagian besar kontrol teks memungkinkan Anda mengklip teks atau menentukan elipsis untuk perilaku pemangkasan teks. Kliping lebih disukai untuk elips karena elipsis mengambil ruang sendiri.
Catatan
Jika Anda perlu mengklip teks Anda, klip akhir string, bukan awal.
Dalam contoh ini, kami menunjukkan cara mengklip teks dalam TextBlock menggunakan properti TextTrimming .
<TextBlock TextTrimming="Clip">
The quick brown fox jumped over the lazy dog.
</TextBlock>
Penskalaan teks dengan kliping teks
Menggunakan tipsalat
Jika Anda mengklip teks, gunakan tipsalat untuk memberikan teks lengkap kepada pengguna Anda.
Di sini, kami menambahkan tipsalat ke TextBlock yang tidak mendukung pembungkusan teks:
<TextBlock TextTrimming="Clip">
<ToolTipService.ToolTip>
<ToolTip Content="The quick brown fox jumped over the lazy dog."/>
</ToolTipService.ToolTip>
The quick brown fox jumped over the lazy dog.
</TextBlock>
Jangan skalakan ikon atau simbol berbasis font
Saat menggunakan ikon berbasis font untuk penekanan atau dekorasi, nonaktifkan penskalaan pada karakter ini.
Atur properti IsTextScaleFactorEnabled ke false
untuk sebagian besar kontrol XAML.
Mendukung penskalakan teks secara asli
Tangani peristiwa sistem TextScaleFactorChanged UISettings dalam kerangka kerja dan kontrol kustom Anda. Kejadian ini dinaikkan setiap kali pengguna mengatur faktor penskalakan teks pada sistem mereka.
Ringkasan
Topik ini memberikan gambaran umum tentang dukungan penskalaan teks di Windows dan menyertakan panduan UX dan pengembang tentang cara menyesuaikan pengalaman pengguna.
Artikel terkait
Referensi API
Windows developer