Platformlara uyum sağlayan uygulama simgeleri.
Maskelenebilir simge nedir?
Son zamanlarda kullandığınız bir Android telefona Progresif Web Uygulaması (PWA) yüklediyseniz simgenin beyaz bir arka planla göründüğünü fark edebilirsiniz. Android Oreo, uygulama simgelerini farklı cihaz modellerinde çeşitli şekillerde gösteren uyarlanabilir simgeleri kullanıma sundu. Bu yeni biçime uymayan simgelere beyaz arka planlar verilir.
Maskelenebilir simgeler, size daha fazla kontrol sağlayan ve Progresif Web Uygulamanızın uyarlanabilir simgeler kullanmasına olanak tanıyan yeni bir simge biçimidir. Maskelenebilir bir simge sağlarsanız, simgeniz şeklin tamamını doldurabilir ve tüm Android cihazlarda mükemmel görünebilir. Firefox ve Chrome yakın zamanda bu yeni biçim için destek sağladı. Bu biçimi uygulamalarınızda da kullanabilirsiniz.
Mevcut simgelerim hazır mı?
Maskelenebilir simgelerin çeşitli şekilleri desteklemesi gerektiğinden, tarayıcının gerekli şekle ve boyuta göre kırpabileceği dolgulu opak bir resim sağlarsınız. Nihai şekil tarayıcıya ve platforma göre değiştiğinden belirli bir şekle güvenmemek en iyisidir.
Neyse ki tüm platformların iyi tanımlanmış ve standartlaştırılmış bir "minimum güvenli alt bölgesi" vardır. Simgenizin, logonuz gibi önemli kısımları, simgenin merkezinde, simge genişliğinin% 40'ına eşit olan dairesel bir alanda olmalıdır. Dış% 10'luk kenar kırpılabilir.
Simgelerinizin hangi bölümlerinin güvenli bölgede yer aldığını Chrome Geliştirici Araçları ile kontrol edebilirsiniz. Progresif Web Uygulamanız açıkken Geliştirici Araçları'nı başlatın ve Uygulama paneline gidin. Simgeler bölümünde Maskelenebilir simgeler için yalnızca minimum güvenli alanı göster'i seçebilirsiniz. Simgeleriniz, yalnızca güvenli alan görünecek şekilde kırpılır. Logonuz bu güvenli alanda görünür durumdaysa devam edebilirsiniz.
Maskelenebilir simgenizi çeşitli Android şekilleriyle test etmek için Tiger'ın oluşturduğu Maskable.app aracını kullanın. Bir simge açtığınızda Maskable.app çeşitli şekil ve boyutları denemenize olanak verir ve önizlemeyi ekibinizdeki diğer kişilerle paylaşabilirsiniz.
Maskelenebilir simgeleri nasıl benimseyebilirim?
Mevcut bir simgeye dayanarak maskelenebilir simge oluşturmak istiyorsanız Maskable.app Editor'ı kullanabilirsiniz. Simgenizi yükleyin, renk ve boyutu ayarlayın, ardından resmi dışa aktarın.
Maskelenebilir bir simge oluşturup bunu Geliştirici Araçları'nda test ettikten sonra web uygulaması manifestinizi yeni öğeye işaret edecek şekilde güncellemeniz gerekir. Web uygulaması manifest dosyası, web uygulamanızla ilgili bilgileri JSON dosyasında sağlar ve bir icons dizisi içerir.
Maskelenebilir simgelerin eklenmesi için purpose alanı, tarayıcıya simgenizin nasıl kullanılması gerektiğini bildirir. Simgelerin varsayılan olarak "any" amacı olacaktır. Bu simgeler Android'de beyaz arka plan
üzerine yeniden boyutlandırılacak.
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
Maskelenebilir simgeler purpose için farklı bir değer kullanmalıdır: "maskable". Bu durum, bir resmin simge maskeleriyle kullanılmak üzere tasarlandığını gösterir ve sonuç üzerinde daha fazla kontrol sahibi olmanızı sağlar.
Bu şekilde, simgelerinizin arka planı beyaz olmaz. Maskelenebilir simgenizin diğer cihazlarda maske olmadan kullanılmasını istiyorsanız boşlukla ayrılmış birden fazla amaç da (örneğin, "any maskable") belirtebilirsiniz.
Bu sayede, kendi maskelenebilir simgelerinizi oluşturabilir ve uygulamanızın uçtan uca mükemmel görünmesini sağlayabilirsiniz.
Teşekkür
Bu makale Joe Medley tarafından incelendi.