Bahan akrilik

Akrilik adalah jenis Brush yang menciptakan tekstur tembus. Anda dapat menerapkan akrilik ke permukaan aplikasi untuk menambahkan kedalaman dan membantu membangun hierarki visual.

API Penting: Kelas AcrylicBrush, Properti latar belakang, properti Window.SystemBackdrop, kelas DesktopAcrylicBackdrop

Akrilik dalam tema terang

Akrilik dalam tema gelap

Akrilik dan Sistem Fluent Design

Sistem Fluent Design membantu Anda membuat UI modern dan tegas yang menggabungkan cahaya, kedalaman, gerakan, bahan, dan skala. Akrilik adalah komponen Sistem Fluent Design yang menambahkan tekstur fisik (material) dan kedalaman ke aplikasi Anda. Untuk mempelajari lebih lanjut, lihat Desain Fasih - Bahan.

Jenis campuran akrilik

Karakteristik Akrilik yang paling terlihat adalah transparansinya. Ada dua jenis campuran akrilik yang mengubah penampilan melalui bahan tersebut.

• Akrilik latar belakang memperlihatkan wallpaper desktop dan jendela lain yang berada di belakang aplikasi aktif saat ini, menambah dimensi di antara jendela aplikasi dengan merayakan preferensi personalisasi pengguna.
• Akrilik dalam aplikasi menambahkan rasa kedalaman dalam bingkai aplikasi, memberikan fokus dan hierarki.

Hindari melapisi beberapa permukaan akrilik: beberapa lapisan akrilik latar belakang dapat membuat ilusi optik yang mengganggu.

Kapan menggunakan akrilik

Pertimbangkan pola penggunaan berikut untuk memutuskan cara terbaik untuk menggabungkan akrilik ke dalam aplikasi Anda.

Permukaan sementara

• Gunakan akrilik sebagai latar belakang untuk elemen UI sementara.

Untuk aplikasi dengan menu konteks, flyout, popup non-modal, atau panel yang dapat ditutup dengan mudah, kami sarankan Anda menggunakan akrilik latar belakang, terutama jika permukaan ini berada di luar batas jendela aplikasi utama. Menggunakan efek akrilik dalam kondisi sementara membantu mempertahankan hubungan visual dengan konten yang memicu antarmuka pengguna sementara.

Banyak kontrol XAML menggambar akrilik secara default. MenuFlyout, AutoSuggestBox, ComboBox, dan kontrol serupa dengan popup pengabaian cahaya semuanya menggunakan akrilik saat terbuka.

Mendukung antarmuka pengguna dan panel vertikal

• Gunakan akrilik dalam aplikasi untuk mendukung antarmuka pengguna, seperti pada permukaan yang mungkin tumpang tindih dengan konten saat digulir atau berinteraksi.

Jika Anda menggunakan akrilik dalam aplikasi pada permukaan navigasi, pertimbangkan untuk memperluas konten di bawah panel akrilik untuk meningkatkan alur di aplikasi Anda. Menggunakan NavigationView akan melakukan ini untuk Anda secara otomatis. Namun, untuk menghindari menciptakan efek striping, sebaiknya tidak menempatkan beberapa bagian akrilik saling berdampingan - hal ini dapat menciptakan sambungan yang tidak diinginkan antara dua permukaan kabur. Akrilik adalah alat untuk membawa harmoni visual ke desain Anda, tetapi ketika digunakan dengan tidak benar dapat mengakibatkan kebisingan visual.

Untuk panel vertikal atau permukaan yang membantu memisahkan konten aplikasi Anda, kami sarankan Anda menggunakan latar belakang buram alih-alih akrilik. Jika panel vertikal Anda terbuka di atas konten, seperti dalam mode Ringkas atau Minimal NavigationView, kami sarankan Anda menggunakan akrilik dalam aplikasi untuk membantu mempertahankan konteks halaman saat pengguna membuka panel ini.

Catatan

Rendering permukaan akrilik intensif GPU, yang dapat meningkatkan konsumsi daya perangkat dan mempersingkat masa pakai baterai. Efek akrilik secara otomatis dinonaktifkan ketika perangkat memasuki mode Penghemat Baterai. Pengguna dapat menonaktifkan efek akrilik untuk semua aplikasi dengan menonaktifkan Efek transparansi di Pengaturan > Warna Personalisasi > .

Kegunaan dan kemampuan beradaptasi

Akrilik secara otomatis menyesuaikan penampilannya untuk berbagai perangkat dan konteks.

Dalam mode Kontras Tinggi, pengguna terus melihat warna latar belakang yang akrab dari pilihan mereka sebagai pengganti akrilik. Selain itu, akrilik latar belakang dan akrilik dalam aplikasi muncul sebagai warna solid:

• Saat pengguna menonaktifkan Efek Transparansi di Pengaturan > Personalisasi > Warna.
• Ketika mode Penghemat Baterai diaktifkan.
• Saat aplikasi berjalan pada perangkat keras kelas bawah.

Selain itu, hanya akrilik latar belakang yang akan menggantikan transparansi dan teksturnya dengan warna solid:

• Saat jendela aplikasi di desktop dinonaktifkan.
• Saat aplikasi berjalan di Xbox, HoloLens, atau dalam mode tablet.

Pertimbangan legibilitas

Penting untuk memastikan bahwa teks apa pun yang disajikan aplikasi Anda kepada pengguna memenuhi rasio kontras (lihat Persyaratan teks yang dapat diakses). Kami telah mengoptimalkan sumber daya akrilik sehingga teks memenuhi rasio kontras pada permukaan akrilik. Kami tidak menyarankan penempatan teks berwarna aksen pada permukaan akrilik Anda karena kombinasi ini kemungkinan tidak akan melewati persyaratan rasio kontras minimum pada ukuran font default 14px. Cobalah untuk menghindari menempatkan hyperlink di atas elemen akrilik. Selain itu, jika Anda memilih untuk menyesuaikan warna warna akrilik atau tingkat keburaman, ingatlah dampaknya pada legibilitas.

Menerapkan akrilik di aplikasi Anda

Untuk mempelajari cara menerapkan akrilik latar belakang atau akrilik dalam aplikasi Anda, termasuk cara membuat kuas akrilik kustom, lihat menerapkan materi Mica atau Acrylic di aplikasi desktop untuk Windows 11.

Hal yang boleh dan tidak boleh dilakukan

• Gunakan akrilik pada permukaan sementara.
• Perluas akrilik ke minimal satu sisi aplikasi Anda untuk memberikan pengalaman yang mulus dengan berpadu secara halus dengan lingkungan aplikasi.
• Jangan letakkan akrilik desktop pada permukaan latar belakang aplikasi Anda yang besar.
• Jangan letakkan beberapa panel akrilik di samping satu sama lain karena ini menghasilkan jahitan yang terlihat tidak diinginkan.
• Jangan menempatkan teks berwarna aksen di atas permukaan akrilik.

Bagaimana kami merancang akrilik

Kami menyempurnakan komponen utama akrilik untuk tiba pada penampilan dan properti uniknya. Kami mulai dengan transparansi, kabur, dan kebisingan untuk menambahkan kedalaman dan dimensi visual ke permukaan datar. Kami menambahkan lapisan mode campuran pengecualian untuk memastikan kontras dan legibilitas UI yang ditempatkan pada latar belakang akrilik. Akhirnya, kami menambahkan warna warna untuk peluang personalisasi. Dalam kesatuan, lapisan-lapisan ini membentuk bahan baru yang bermanfaat.

Resep akrilik: latar belakang, kabur, campuran ekslusif, lapisan warna/tint, derau

Contoh

Buka aplikasi Galeri WinUI 3 dan lihat latar belakang Acrylic sedang berfungsi

Buka aplikasi Galeri WinUI 3 dan lihat AkrilikBrush dalam aplikasi beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.

Artikel terkait

Gambaran umum Fluent Design