Akrilik malzeme

Akrilik, yarı saydam bir doku oluşturan bir Fırça türüdür. Derinlik eklemek ve görsel hiyerarşi oluşturmaya yardımcı olmak için uygulama yüzeylerine akrilik uygulayabilirsiniz.

Önemli API'ler: Akrilik Fırça sınıfı, Background özelliği, Window.SystemBackdrop özelliği, DesktopAcrylicBackdrop sınıfı

Işık temasında akrilik

Koyu temada akrilik

Akrilik ve Fluent Tasarım Sistemi

Fluent Design System ışık, derinlik, hareket, malzeme ve ölçek içeren modern, kalın kullanıcı arabirimi oluşturmanıza yardımcı olur. Akrilik, uygulamanıza fiziksel doku (malzeme) ve derinlik ekleyen bir Fluent Design System bileşenidir. Daha fazla bilgi edinmek için bkz. Fluent Design - Material.

Akrilik karışım türleri

Akrilikin en belirgin özelliği saydamlığıdır. Malzemeden görüneni değiştiren iki akrilik karışım türü vardır:

• Background akrilik, kullanıcının kişiselleştirme tercihlerini kutlarken uygulama pencereleri arasında derinlik ekleyerek masaüstü duvar kağıdını ve o anda etkin olan uygulamanın arkasındaki diğer pencereleri ortaya koyuyor.
• Uygulama içi akrilik, uygulama çerçevesinde hem odak hem de hiyerarşi sağlayan bir derinlik hissi ekler.

Birden çok akrilik yüzeyi katmanlamaktan kaçının: arka plan akrilikinin birden çok katmanı dikkat dağıtıcı optik illüzyonlar oluşturabilir.

Akrilik ne zaman kullanılır?

Uygulamanıza akrilik eklemenin en iyi yöntemine karar vermek için aşağıdaki kullanım düzenlerini göz önünde bulundurun.

Geçici yüzeyler

• Geçici kullanıcı arabirimi öğeleri için arka plan akrilik kullanın.

Bağlam menüleri, uçan pencereler, modalsiz açılan pencereler veya hafif bir şekilde kapatılabilir paneller içeren uygulamalar için, özellikle bu yüzeyler ana uygulama penceresi çerçevesinin dışına taşarsa arka plan akritiği kullanmanızı öneririz. Geçici senaryolarda akrilik kullanmak, geçici kullanıcı arabirimini tetikleyen içerikle görsel bir ilişki sağlamaya yardımcı olur.

kullanılarak açık bir bağlam menüsünden gösterilen masaüstü arka planı.

Birçok XAML denetimi varsayılan olarak akrilik çizer. MenuFlyout, AutoSuggestBox, ComboBoxve diğer hafif-dismiss açılır pencerelere sahip benzer denetimlerin tümü açıkken akrilik kullanır.

Kullanıcı arabirimini ve dikey bölmeleri destekleme

• Kullanıcı arayüzünü desteklemek için uygulama içi akrilik kullanın, örneğin kaydırıldığında veya etkileşime geçildiğinde içerikle çakışabilecek yüzeylerde.

Gezinti yüzeylerinde uygulama içi akrilik kullanıyorsanız uygulamanızdaki akışı iyileştirmek için akrilik bölmesinin altındaki içeriği genişletmeyi göz önünde bulundurun. NavigationView kullanmak bunu sizin için otomatik olarak yapar. Ancak, bir şeritleme efekti oluşturmaktan kaçınmak için, kenardan kenara akrilik birden çok parça yerleştirmemeye çalışın - bu, bulanık iki yüzey arasında istenmeyen bir dikiş oluşturabilir. Akrilik, tasarımlarınıza görsel uyum sağlamak için kullanılan bir araçtır, ancak yanlış kullanıldığında görsel gürültüye neden olabilir.

Uygulamanızın içeriğinin kesilmesine yardımcı olan dikey bölmeler veya yüzeyler için akrilik yerine opak bir arka plan kullanmanızı öneririz. NavigationView'un Compact veya Minimal modlarında olduğu gibi dikey bölmeleriniz içeriğin üzerinde açılırsa, kullanıcı bu bölmeyi açtığında sayfanın bağlamını korumaya yardımcı olmak için uygulama içi akrilik kullanmanızı öneririz.

Not

Akrilik yüzeylerin işlenmesi gpu yoğunlukludur ve bu da cihaz güç tüketimini artırabilir ve pil ömrünü kısaltabilir. Cihaz Pil Tasarrufu moduna girdiğinde akrilik efektler otomatik olarak devre dışı bırakılır. Kullanıcılar Ayarlar Kişiselleştirme > Renkler'de saydamlık efektleri > kapatarak tüm uygulamalar için akrilik efektleri devre dışı bırakabilir.

Kullanılabilirlik ve uyarlanabilirlik

Akrilik, görünümünü çok çeşitli cihazlar ve bağlamlar için otomatik olarak uyarlar.

Yüksek Karşıtlık modunda, kullanıcılar akrilik yerine seçtikleri tanıdık arka plan rengini görmeye devam ediyor. Ayrıca, hem arka plan akrilik hem de uygulama içi akrilik düz bir renk olarak görünür:

• Kullanıcı Ayarlar Kişiselleştirme > Renkler'de > Saydamlık efektlerini kapattığında.
• Pil Tasarrufu modu etkinleştirildiğinde.
• Uygulama düşük uç donanımda çalıştırıldığında.

Buna ek olarak, yalnızca arka plan akrilik saydamlığını ve dokusunu düz bir renkle değiştirecektir:

• Masaüstündeki bir uygulama penceresi devre dışı bırakıldığında.
• Uygulama Xbox, HoloLens veya tablet modunda çalışırken.

Okunabilirlik hususları

Uygulamanızın kullanıcılara sunduğu tüm metinlerin karşıtlık oranlarını karşıladığından emin olmak önemlidir (bkz. Erişilebilir metin gereksinimleri). Metnin akrilik üzerine karşıtlık oranlarına uygun olması için akrilik kaynakları iyileştirdik. Akrilik yüzeylerinize vurgu renkli metin yerleştirmenizi önermiyoruz çünkü bu bileşimler varsayılan 14 piksel yazı tipi boyutunda minimum karşıtlık oranı gereksinimlerini geçmeyecektir. Akrilik elemanlar üzerine köprü yerleştirmemeye çalışın. Ayrıca, akrilik renk tonu rengini veya opaklık düzeyini özelleştirmeyi seçerseniz, okunabilirlik üzerindeki etkiyi göz önünde bulundurun.

Uygulamanıza akrilik uygulama

Uygulamanızda arka plan akrilik veya uygulama içi akrilik uygulamayı, özel akrilik fırçaların nasıl oluşturulacağı dahil, öğrenmek için Windows 11 için masaüstü uygulamalarında Mica veya Akrilik malzemelerini uygulama konusuna bakın.

Yapılacaklar ve Yapılmayacaklar

• Geçici yüzeylerde akrilik kullanın.
• Uygulamanın çevresiyle alt düzeyde harmanlayarak sorunsuz bir deneyim sağlamak için akrilik uygulamanızın en az bir kenarına genişletin.
• Uygulamanızın büyük arka plan yüzeylerine masaüstü akrilik koymayın.
• birden fazla akrilik bölmeyi yan yana yerleştirmeyin çünkü bu istenmeyen görünür bir dikişle sonuçlanabilir.
• Akrilik yüzeylerin üzerine belirgin renkli metin yerleştirmeyin.

Akriliği nasıl tasarladık

Akrilikin ana bileşenlerini benzersiz görünümüne ve özelliklerine ulaşacak şekilde hassas bir şekilde ayarlamış olduk. Düz yüzeylere görsel derinlik ve boyut eklemek için saydamlık, bulanıklık ve gürültü ile başladık. Akrilik arka plan üzerinde yer alan kullanıcı arabirimi öğesinin kontrast ve okunabilirliğini sağlamak için bir hariç tutma karışım modu katmanı ekledik. Son olarak kişiselleştirme fırsatları için renk tonu ekledik. Bu katmanlar birlikte taze ve kullanılabilir bir malzeme oluşturur.

Akrilik tarif: arka plan, bulanıklık, dışlama karışımı, renk/ton katmanı, gürültü

Örnekler

WinUI 3 Galeri uygulamasını açın ve arka planda Akrilik etkinliğini görün

WinUI 3 Galeri uygulamasını açın ve uygulama içi AkrilikFırça'nın aktif durumda olduğunu görün.

WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

İlgili makaleler

Fluent Design'a genel bakış