Uyarlanabilir Simgeler Tasarlama

Android O, yeni bir uygulama simgesi formatı sunar: uyarlanabilir simgeler. Uyarlanabilir simgeler, tüm uygulama simgelerinin şeklini birleştirerek ve ilginç görsel efektlere kapıyı açarak cihazları daha tutarlı hale getirebilir. Bu yazı nasıl çalıştıklarını açıklar ve onları tasarlamak için bazı teknikleri inceler.

Bu özelliğin nereden geldiğine bir bakış için, bakınız:

Temelleri

Büyüklük ve şekil

Uyarlanabilir simgeler 108dp * 108dp boyutundadır, ancak maksimum 72dp * 72dp'ye kadar maskelenmiştir. Farklı cihazlar şekil olarak dışbükey olması gereken ve farklı yerlerde merkezden minimum 33dp'ye ulaşabilen farklı maskeler sağlayabilir.

Uygulanan farklı şekilli maskelere örnekler

Maskenin minimum erişimi nedeniyle, ortalanmamış 66dp çapında bir daireyi, kırpılmama garantili güvenli bir bölge olarak düşünebilirsiniz.

Yuvarlak kare maskeli güvenli bölge

Keylines

Simge ana hatları

Anahtar çizgi şekilleri, simgenizin görsel oranlarının diğer uygulamaların simgeleriyle tutarlı olmasına yardımcı olan simge kılavuzunun temelini oluşturur. Anahtar çizgi şekilleri:

  • Daireler: 52dp ve 36dp çap
  • Kare: 44dp * 44dp, 4dp köşe yarıçapı
  • Dikdörtgenler: 52dp * 36dp ve 36dp * 52dp, 4dp köşe yarıçapı

Bu makalenin sonunda yer alan şablonlara bakın.

Katmanlar

Uyarlanabilir simgeler aslında iki katmandan oluşur; bir ön plan ve bir arka plan. Her iki katman 108dp * 108dp'dir; arka plan tamamen opak olmalıdır, ön plan ise saydamlık içerebilir. Bu katmanlar birbiri üzerine istiflenir.

Görüntülenen (boyutlandırılmış) boyuttan daha büyük iki ayrı katmandaki öğelerin sağlanması, ilginç görsel işlemler ve animasyonlar için fırsat yaratır. Tam olarak hangi etkilerin uygulanabileceği ve ne zaman açık bir soruyla ilgili olduğu zaman; karar vermek için cihaz ve fırlatıcı yapımcıları kalmıştır. Hayal edebileceğiniz bazı basit örnekler: maskeyi uygulamadan önce her katmanı bağımsız olarak çevirerek veya ölçekleyerek paralaks veya darbe.

108dp * 108dp simgeleri 72dp * 72dp'ye kadar maskelendiğinden, her iki taraftaki dış 18dp, yalnızca hareket sırasında açığa çıkan "ekstra" içerik olarak kabul edilebilir.

Tasarım konuları

Ürün simgeleri oluşturmak için malzeme tasarım kuralları hala çok fazla geçerlidir. Özellikle simge anatomisi, gölgeler ve bitiş kalır, ancak artık öğeleri farklı efektler veren ön plan veya arka plan katmanlarına yerleştirebilirsiniz.

Şimdi, marka işaretlerini düz renkli bir arka plana yerleştirip bir gün arayarak birçok simgenin iyi hizmet edileceğinden eminim. Bu, simgenizin cihaza tam oturmasını sağlar. Beni heyecanlandıran, bir topluluk olarak bu yeni kısıtlamaları nasıl keşfedeceğimiz ve keyifli ikonlar yapmanın ilginç, eğlenceli ve yenilikçi yollarını bulacağımızdır. Akılda tutulması gereken birkaç şey ve potansiyel olarak keşfedilecek birkaç fikir.

Kırpma

Uyarlanabilir simgelerin dinamik doğası nedeniyle, uygulanacak maske şeklini tam olarak bilemezsiniz. Bu nedenle, marka markanız gibi kritik unsurları güvenli bölgeye yerleştirmek ve maske kenarlarından uzak durmak en iyisidir.

Arkaplan Bağlantısı

Ön planda görünebilecek bazı öğelerin, aslında arka plana yerleştirilmesi, bağımsız hareket edecekleri anlamına gelir. Örneğin, hesap makinesi uygulaması öğelerin çoğunu ön plana yerleştirir, ancak arka planda vurgu renk bloğundaki eşittir düğmesi:

Farklı katmanlardaki öğeler katmanlaşmayı vurgular

Bu, görsel olarak parlak renk bloğunda demirlediğiniz hareket için ilginç fırsatlar yaratır, ancak ön plan elemanlarından daha az hareket eder ve bir derinlik hissi yaratır.

Maskeli maskeler

Maskeleme elemanlarının ön plana yerleştirilmesi için ilginç fırsatlar olabileceğini düşünüyorum - yani alanların kesildiği katı öğeler. Google Play Store için olası bir simge düşünün, bu renkli bir üçgeni beyaz bir arka plan üzerinde ön plana yerleştiren 'bariz' bir şekilde oluşturulabilir.

Beyaz zemin üzerine yerleştirilmiş ‘standart’ ön plan

Bunu yapmak yerine, aynı statik çıktının üretilmesi için çıkarılan üçgenle renkli bir arka plan ve beyaz bir ön plan kullanabiliriz:

Maskeleme ön plana sahip alternatif bir renkli arka plan

Bu kurulum, 'göz atma' renklerinin, çevrildiğinde veya ölçeklendiğinde arka planın farklı kısımlarını ortaya çıkaran maskeden bağımsız olarak hareket etmesini sağlar.

Sol düzenli bir kompozisyondur; Maskeleme ön planına sahip

Işık ve gölgeler

Işık efektleri ve ayrı katmanlara yerleştirilmiş gölgelerin etkileşimi ilginç sonuçlar doğurabilir. Örneğin, ön plan elemanında uzun gölge tekniğini kullanmak, maskelenmiş alan içinde hareket ederken eğlenceli bir etkileşime sahip olabilir. Benzer şekilde, aydınlatma efektleri arka plana pişirilmek yerine ön plan katmanına yerleştirilebilir. Örneğin, bir ışık kaynağını taklit etmek için ön plana bir "son" kat yerleştirilebilir. Bunu ön plana yerleştirmek, hareket halindeyken arka plan katmanı üzerinde oynayacağı, farklı bir hızda hareket edeceği anlamına gelir.

Ön plan gölge ve (abartılı) ışık kaynağı örneği

Örneğin, mantıklı olmayan bir efekt oluşturmamaya dikkat edin. bir ön plan elemanından ayrılan veya bir arka plan elemanının arkasında hareket eden bir gölge. Ayrıca birçok simgenin birlikte görülmesi muhtemel olduğunu unutmayın; bu nedenle ısmarlama ışık efektleri konusunda muhafazakar olun ve malzeme kurallarına yakın bir yere yapıştırın.

Geride bırak

Arka plan katmanına, ön plan katmanı tarafından tamamen gizlenen ve yalnızca hareket halinde ortaya çıkan öğeleri yerleştirebilirsiniz.

Sadece hareket halinde açığa çıkan elemanlar

Kaynaklar ve araçlar

İşte uyarlanabilir ikonlar yaratırken şablon olarak kullanabileceğiniz taslak dosyam. Simge ızgarasını, anahtar çizgi şekillerini ve güvenli alanı içerir. Bir sembol olarak uygulandığı için ana elemanın değiştirilmesi, kopyaları güncelleyerek size farklı maskeler uygulanmış olarak önizleme yapacaktır.

Dahası senin olayınsa bir Adobe Illustrator şablonu da yükledim.

Ek olarak, karşılaştığım diğer kaynakları da inceleyin:

  • Uyarlanabilir simge önizleme aracı
  • Affinity Designer şablonu
  • Bjango şablonları uyarlanabilir simgeler içerir
  • Figma şablonu (giriş gerektirir)
  • Adobe XD şablonu

Uyarlanabilir Simge Bahçesi

Uyarlanabilir simgeler geliştirirken, inceliklerin birçoğunun hareket efektleri uygulandığında ön plan ile arka plan öğelerinin etkileşiminden geldiğini takdir ediyorum. Bu, hala cihaz ve fırlatıcı üreticilerinin bunu nasıl uygulayacağını göremediğimiz için açık bir sorudur. Bu alanı araştırmanıza yardımcı olmak için, simgenizi oluştururken değerlendirmenize yardımcı olacak küçük bir test uygulaması oluşturdum:

Simgelerinize uygulanan maskeleri ve hareket efektlerini deneyin

Uygulama, cihazınıza yüklü olan tüm uygulamaları uyarlanabilir simgelerle görüntüler. Izgarayı kaydırmak, simgelere paralaks efektleri uygular ve bir simgeye dokunmak, ölçek efekti uygular. Etkilerin gücünü yapılandırabilir ve tüm simgelere uygulanan maskeyi değiştirebilirsiniz. Umarım bu araç, simgenizin nasıl görüneceğini ve farklı cihazlarda nasıl hareket edebileceğini öngörmenize yardımcı olur.

Bir APK indirebilir veya kaynak github üzerinden kontrol edebilirsiniz:

İleri git ve uyum sağla

Umarım bu yazı, uygulamanız için harika bir uyarlanabilir simge tasarlamak için size hem bilgi hem de ilham verdi. Bir kullanıcı olarak uygulamalarımın daha tutarlı hale gelmesini bekleyemiyorum. Yine de beni daha çok heyecanlandıran, bir topluluk olarak hangi yaratıcı çözümlerin ortaya çıktığını görmek.

Adaptif bir simge oluşturmak isteyen bir geliştiriciyseniz, o zaman bölüm 3’e katılın: Uyarlanabilir simgeler uygulama.