Menyesuaikan efek dan pengalaman

WinUI memberikan banyak efek indah, animasi, dan sarana untuk diferensiasi. Namun, memenuhi harapan pengguna untuk performa dan penyesuaian masih merupakan bagian yang diperlukan untuk membuat aplikasi yang berhasil. Aplikasi Windows App SDK dapat berjalan di seluruh keluarga besar perangkat dan konfigurasi Windows yang beragam, yang memiliki fitur dan kemampuan yang berbeda. Untuk memberikan pengalaman inklusif bagi semua pengguna, Anda perlu memastikan aplikasi Anda menskalakan di seluruh perangkat dan menghormati preferensi pengguna. Menyesuaikan UI dapat memberikan cara yang efisien untuk memanfaatkan kemampuan perangkat dan memastikan pengalaman pengguna yang menyenangkan dan inklusif.

Penyesuaian UI adalah kategori luas yang mencakup pekerjaan untuk UI yang berkinerja baik dan indah sehubungan dengan area berikut:

Menghormati dan beradaptasi dengan pengaturan pengguna untuk efek
Mengakomodasi pengaturan pengguna untuk animasi
Mengoptimalkan UI untuk kemampuan perangkat keras yang diberikan

Di sini, kita akan membahas cara menyesuaikan efek dan animasi Anda dengan Visual Layer di area di atas, tetapi ada banyak cara lain untuk menyesuaikan aplikasi Anda untuk memastikan pengalaman pengguna akhir yang hebat. Dokumen panduan tersedia tentang cara menyesuaikan UI Anda untuk berbagai perangkat dan membuat UI responsif.

Pengaturan efek pengguna

Pengguna dapat menyesuaikan pengalaman Windows mereka karena berbagai alasan, aplikasi mana yang harus dihormati dan beradaptasi. Satu aspek yang dapat dikendalikan oleh pengguna akhir adalah mengubah jenis efek yang mereka lihat digunakan di seluruh sistem mereka.

Pengaturan efek transparansi

Salah satu efek yang dapat disesuaikan pengguna adalah mengaktifkan/menonaktifkan efek transparansi. Ini dapat ditemukan di Pengaturan Windows di bawah Warna Personalisasi > , atau melalui Pengaturan > Kemudahan Tampilan Akses > .

Opsi Transparansi di Pengaturan

Saat diaktifkan, efek apa pun yang menggunakan transparansi akan muncul seperti yang diharapkan. Ini berlaku untuk Acrylic, HostBackdropBrush, atau grafik efek kustom apa pun yang tidak sepenuhnya buram.

Ketika dimatikan, bahan akrilik akan secara otomatis kembali ke warna solid karena kuas akrilik XAML telah mendengarkan perubahan ini secara default. Di sini, kita melihat aplikasi kalkulator kembali ke warna solid ketika efek transparansi tidak diaktifkan.

Kalkulator dengan Acrylic Merespons Pengaturan Transparansi

Namun, untuk efek kustom apa pun, aplikasi harus merespons properti UISettings.AdvancedEffectsEnabled atau event AdvancedEffectsEnabledChanged, dan mengganti efek atau grafik efek dengan yang tidak memiliki transparansi. Contohnya adalah di bawah ini:

public MainPage()
{
   var uisettings = new UISettings();
   bool advancedEffects = uisettings.AdvancedEffectsEnabled;
   uisettings.AdvancedEffectsEnabledChanged += Uisettings_AdvancedEffectsEnabledChanged;
}

private void Uisettings_AdvancedEffectsEnabledChanged(UISettings sender, object args)
{
    // TODO respond to sender.AdvancedEffectsEnabled
}

Pengaturan animasi

Demikian pula, aplikasi harus mendengarkan dan merespons properti UISettings.AnimationsEnabled untuk memastikan animasi diaktifkan atau dinonaktifkan berdasarkan pengaturan pengguna di Pengaturan > Kemudahan Tampilan Akses > .

Opsi Animasi di Pengaturan

public MainPage()
{
   var uisettings = new UISettings();
   bool animationsEnabled = uisettings.AnimationsEnabled;
   // TODO respond to animations settings
}

Memanfaatkan API fungsionalitas

Dengan memanfaatkan API CompositionCapabilities , Anda dapat mendeteksi fitur komposisi mana yang tersedia dan berkinerja pada perangkat keras tertentu dan menyesuaikan desain untuk memastikan pengguna akhir mendapatkan pengalaman yang berkinerja dan indah di perangkat apa pun. API menyediakan sarana untuk memeriksa kemampuan sistem perangkat keras guna menerapkan penskalaan efek halus di berbagai bentuk dan ukuran. Ini memudahkan untuk menyesuaikan aplikasi dengan tepat untuk menciptakan pengalaman pengguna akhir yang indah dan mulus.

API ini menyediakan metode dan pendengar peristiwa yang dapat digunakan untuk membuat keputusan penskalaan yang berpengaruh untuk UI aplikasi. Fitur ini mendeteksi seberapa baik sistem dapat menangani komposisi kompleks dan operasi penyajian dan kemudian mengembalikan informasi dalam model yang mudah dikonsumsi bagi pengembang untuk digunakan.

Menggunakan kemampuan komposisi

Fungsionalitas CompositionCapabilities sudah dimanfaatkan untuk fitur seperti bahan Acrylic, di mana materi kembali ke efek yang lebih berkinerja tergantung pada skenario dan perangkat keras.

API dapat ditambahkan ke kode yang ada dalam beberapa langkah mudah.

Dapatkan objek kemampuan di konstruktor aplikasi Anda.
```
_capabilities = new CompositionCapabilities();
```
Daftarkan kemampuan pendengar peristiwa yang diubah untuk aplikasi Anda.
```
_capabilities.Changed += HandleCapabilitiesChanged;
```
Tambahkan konten ke metode pemanggilan balik peristiwa untuk menangani berbagai tingkat kemampuan. Ini mungkin atau mungkin tidak mirip dengan langkah berikutnya di bawah ini.
Saat menggunakan efek, periksa objek kemampuan terlebih dahulu. Pertimbangkan untuk menggunakan pemeriksaan kondisional atau pernyataan kontrol pengalihan, tergantung pada bagaimana Anda ingin menyesuaikan efeknya.
```
if (_capabilities.AreEffectsSupported())
{
    // Add incremental effects updates here

    if (_capabilities.AreEffectsFast())
    {
        // Add more advanced effects here where applicable
    }
}
```

Contoh lengkap kode dapat ditemukan pada repositori Windows UI GitHub.

Efek cepat vs. lambat

Berdasarkan umpan balik dari metode AreEffectsSupported dan AreEffectsFast dalam API CompositionCapabilities, aplikasi dapat memutuskan untuk menukar efek mahal atau yang tidak didukung dengan efek lain pilihan sendiri yang dioptimalkan untuk perangkat. Beberapa efek diketahui secara konsisten memerlukan lebih banyak sumber daya daripada yang lain dan harus digunakan dengan hemat, sedangkan efek lain dapat digunakan lebih bebas. Namun, meskipun untuk semua efek, harus berhati-hati saat menautkan dan menganimasikan karena beberapa skenario atau kombinasi dapat mengubah karakteristik kinerja grafik efek. Di bawah ini adalah beberapa pedoman umum karakteristik performa untuk efek individual:

Efek yang diketahui memiliki dampak performa tinggi adalah sebagai berikut – Gaussian Blur, Shadow Mask, BackDropBrush, HostBackDropBrush, dan Layer Visual. Ini tidak disarankan untuk perangkat kelas bawah (tingkat fitur 9.1-9.3), dan harus digunakan dengan bijaksana pada perangkat berkelas tinggi.
Efek dengan dampak performa sedang meliputi Matriks Warna, Mode Pencampuran (Luminositas, Warna, Saturasi, dan Rona), SpotLight, SceneLightingEffect, dan (tergantung pada skenario) BorderEffect. Efek ini dapat bekerja dengan skenario tertentu pada perangkat kelas bawah, tetapi diperlukan kehati-hatian saat menggabungkan dan menganimasikan. Rekomendasikan untuk membatasi penggunaan menjadi dua atau kurang dan hanya menganimasikan pada transisi.
Semua efek lain memiliki dampak performa rendah dan bekerja dalam semua skenario yang wajar saat menganimasikan dan merangkai.

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2026-03-17