Sketch öğesinden Android'e vektör varlıklarının aktarılması için 10 ipucu

Vektörlerin rasterlere avantajları açıktır. Vektör varlıkları daha küçük, kolayca düzenlenebilir ve mikromanyaj için çok daha kolaydır (özellikle boyut ve renk açısından).

Birçok farklı platformu destekleyen nispeten karmaşık bir uygulama üzerinde çalışıyorum. Android için artan ekran boyutları ve çözünürlükleriyle (size, Nexus 6P'ye bakmakla), varlıkları farklı çözünürlükleri destekleme ihtiyacı nedeniyle ölçeklenebilir tutmak için rasterden vektör biçimlerine güncellemenin gerekli olduğunu düşündük.

Şu anda kullanmakta olduğumuz varlıkların çoğu, aslında Eskiz kullanılarak yaratıldı. Bu dönüşüm girişiminde bazı ilginç sorunlara neden oldu. Vektör varlıkları Android tarafından yalnızca mevcut API'sinde (Android 24) kısmen desteklendiğinden, dışa aktarılan varlıklar beklenmeyen şekillerde ortaya çıktı.

Bu, uygulamadaki tüm raster varlıkları Android için vektörlere dönüştürmeye çalışırken öğrendiğimiz birkaç şey için bir tasarımcı açısından araştırmacı bir günlük olarak hizmet vermektedir. Android Studio kullanım kılavuzları, sorun giderme konusunda özellikle yardımcı olmadı.

Tam olarak değil “Tam Destek”

Burada yazılan kuralların çoğu, Sketch kullanarak vektör varlıkları dışa aktarmaya özgüdür. Ancak, tüm platformlarda kullanılmak üzere temiz ve fonksiyonel vektör varlıklarını dışa aktarmak için de iyi kurallardır.

1. Basit Aptal Tutun

Yazılım tasarımı için bu temel ilke, varlıklar için de geçerlidir: ne kadar basit olursa, o kadar iyi şekillendirir. İhtiyacınız olan karmaşık varlıkları oluşturmak için basit şekilleri deneyin ve kullanın. Genel kural, genel olarak daha az yol ve çapa kullanılması, “temizleyici” olmasıdır. Tek bir şekil kullanmak, bir varlık oluşturmak için birden çok çakışan şekil kullanmaktan her zaman tercih edilir.

2. Maske kullanmaktan kaçının

Çizim kullanılarak yapılan maskeler, Android API'nin geçerli sürümü tarafından desteklenmiyor. Eskizde yapılan tüm maskeler Android VectorDrawble (AVD) tarafından yok sayılır ve Eskiz'de yapılan maskeler bazen Adobe Illustrator uygulamasının çökmesine neden olabilir. Gölgelendirme efektinin yaratılması gereken bir durum varsa, mevcut katmanın üstüne örtüşen bir şekil maskeler lehine kullanılmalıdır.

İhtiyacınız olan şekli oluşturmak için gölgelendirme katmanı üzerindeki “Kesişme” yolunu taban katmanıyla kullanın

3. Konturları değil anahatları çiz

Mümkün olan durumlarda, istenen şekilleri oluşturmak için konturları kullanmaktan kaçının. Konturlar her zaman görüntünün geri kalanıyla düzgün şekilde ölçeklenmez. Ek olarak, AVD farklı sınır konumları arasında ayrım yapmaz ve tüm sınırları “merkez” darbeleri olarak görür.

Öyleyse bunun anlamı, Sketch üzerinde bir kalınlık 10 iç kenarının AVD üzerinde oluşturulduğunda 20 kalınlığında bir merkez darbesi haline gelmesidir.

Ana hatlar şekiller olduğundan, ölçeklendiğinde veya dönüştürüldüğünde istenen görünümü her zaman gösterirler. Yol gösterici işlemlerini uygulamak istiyorsanız ana hatlarıyla çalışmak çok daha kolaydır.

CMD + Shift + O tuşlarını kullanarak konturları anahatlara kolayca değiştirebilirsiniz.

4. Pathfinders senin arkadaşın

En karmaşık şekiller, yol gösterici işlemleri kullanılarak daha basit şekillerin bir bileşiminden oluşturulabilir. Onlara aşina olun. Bu şekilde oluşturulan şekiller her cihazda düzgün şekilde görüntülenebilir.

5. Adobe Illustrator en iyi sorun gidericidir

Adobe Illustrator, vektör varlıklarını Android'in VectorDrawable ile aynı şekilde işler (anekdot deneyiminden). Bir varlık AVD'de düzgün görünmüyorsa, sorunu Illustrator kullanarak teşhis etmeyi deneyin. Çoğu zaman çözüm, sadece bir doldurma işlemini kaldırmak kadar basittir.

Sketch kullanarak Android için varlıkları dışa aktarmada yaygın bir sorun.

6. Birleştirilmiş ve dönüştürülmüş şekiller göründüğü gibi görünmeyebilir

Çizimde yapılan yansımalar ve rotasyonlar gibi dönüşümler Android VectorDrawable'da tam olarak desteklenmiyor. Sonuç olarak, dönüştürülmüş katmanlar her zaman beklediğiniz gibi görünmez. Bunun en kolay çözümü, dönüşümü olan her yolu düzleştirmek olacaktır, bu yüzden dönüşüm yolun bir parçası haline gelir.

Bununla birlikte, dönüşümlerin tüm gruplara uygulandığı durumlarda, bunun etrafında çalışmanın tek yolu, her bir katmanı elle dönüştürmek ve konumlandırmak olacaktır.

7. Asetatlar arkadaşınız…

Asetatlar, tüm cihazlarda ve platformlarda doğru şekilde desteklenir ve görüntülenir; uygun olan yerlerde gölgeler / vurgulamalar oluşturmak için bunları kullanın.

Biftek alt gölge

8.… ve degradeler değil

Öte yandan, AVD şu anda degradeleri desteklemiyor. Bu şekilde yapılan varlıklar ithalat sırasında neredeyse kesin olarak kesilecektir. Degrade gölgeleme teknikleri lehine Cel gölgeleme kullanılmalıdır.

Biftek altında alt gölge kaybolur

9. Çalışma yüzeylerini katmanlara değil dışa aktarın

Vektör öğesinin boyutlarını tanımlamak için Eskizde sınırlayıcı bir kutu kullanmak eski bir tekniktir. Vektörleri dışa aktarmak için sınırları tanımlamanın hala uygulanabilir bir yöntemi olmasına rağmen, daha iyi yaklaşım, tanımlamaya çalıştığınız görünüm alanıyla aynı boyutta bir çalışma yüzeyi oluşturmaktır. Varlıktaki sınırlayıcı kutu katmanı, VectorDrawable xml'ye çevrildiğinde ayrı, ancak saydam bir yol olarak değerlendirilir.

10. Düzleştirme şekilleri çoğu sorunu çözecektir

Dışa aktarılan varlıklar, düzenlenirken dönüşümlerini ve kompozisyonlarını tanımlayan meta veriler içerir, çünkü bu kullanıcılara "nasıl" oluşturulduğunu anlatır. Bununla birlikte, söz konusu varlıkları dışa aktarma ve sunma söz konusu olduğunda, nasıl oluşturulduğuna dair bu gereksiz bilgi, dosya boyutunun arttırılmasının yanı sıra, çoğunlukla çözdüğünden daha fazla soruna neden olur (Sketch'de yapılan dönüşler ve yansımalar desteklenmez).

Varlığın bitiş durumu, gösterilen tek şeydir ve bu durumda sadece bitiş durumunun ortaya çıkması önemlidir.

Bir şeklin düzleştirilmesi, dönüşüme ve yol bulucu işlemlerini öğeye dönüştürür. Bu, eski bilgileri kaldırarak dosya boyutunu küçültür ve görüntüyü doğru şekilde önizlemenizi sağlar.