Penskalakan teks

Contoh penskalaan teks dalam Windows 11 (100% hingga 225%)

Gambaran Umum

Membaca teks di layar komputer 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 umum), pengguna dapat dengan cepat access pengaturan untuk mengubah ukuran hanya teks, mulai dari 100% (ukuran default) hingga 225%.

Support

Aplikasi WinUI 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 -> Penglihatan/Tampilan.

Pengaturan skala teks dari Pengaturan -> Kemudahan Akses -> Visi/Tampilan Layar

Panduan UX

Saat teks diubah ukurannya, kontrol dan kontainer pun harus menyesuaikan ukuran mereka dan mengalir ulang untuk mengakomodasi teks beserta 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 hal itu tidak demikian.

Gunakan kontrol platform

Apakah kita sudah mengatakan ini? Perlu diulang: Jika memungkinkan, selalu gunakan kontrol bawaan yang disediakan dengan berbagai kerangka kerja Windows app untuk mendapatkan pengalaman pengguna yang paling komprehensif yang mungkin untuk jumlah upaya paling sedikit.

Misalnya, semua kontrol teks WinUI mendukung pengalaman penskalaan teks lengkap tanpa kustomisasi atau templat.

Berikut adalah cuplikan dari aplikasi WinUI 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

Gunakan 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 nilai lebar Auto dan * untuk kolom dalam grid dan membiarkan platform menyesuaikan tata letak aplikasi berdasarkan ukuran elemen yang terkandung dalam grid.

<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 properti AcceptsReturn dan TextWrapping TextBox untuk memastikan tata letak kami seflesibel 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 daripada elipsis, karena elipsis memakan ruang tersendiri.

Nota

Jika Anda perlu memotong teks, potong akhir dari 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 tooltip

Jika Anda mengklip teks, gunakan tipsalat untuk memberikan teks lengkap kepada pengguna Anda.

Di sini, kami menambahkan tooltip 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. Peristiwa ini dipicu setiap kali pengguna mengatur faktor penskalaan 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 Antarmuka Pemrograman Aplikasi (API)

• IsTextScaleFactorEnabled
• TextScaleFactorChanged