Vektor aktivlarini Sketch-dan Android-ga eksport qilish bo'yicha 10 ta maslahatlar

Vektorlarning rasterlarga nisbatan afzalliklari ravshan. Vektor aktivlari kichikroq, oson tahrirlanadigan va mikromanajga nisbatan ancha oson (xususan o'lcham va rang jihatidan).

Men juda ko'p turli xil platformalarni qo'llab-quvvatlaydigan nisbatan murakkab dasturda ishlayman. Android uchun ekran o'lchamlari va o'lchamlari o'sib borishi bilan (sizga qarab, Nexus 6P), biz turli xil qarorlarni qo'llab-quvvatlash zarurati tufayli aktivlarni miqyosda ushlab turish uchun mavjud aktivlarni rastrdan vektor formatiga yangilash zarurligini his qildik.

Hozirda biz foydalanadigan aksariyat narsalar avval Sketch-dan foydalangan holda yaratilgan. Bu konvertatsiya paytida ba'zi qiziqarli muammolarni keltirib chiqardi. Vektor aktivlari qisman Android tomonidan qisman joriy API (Android 24) tomonidan qo'llab-quvvatlanganligi sababli, eksport qilingan aktivlar kutilmagan tarzda buzildi.

Bu dizayner nuqtai nazaridan tergov kundaligi bo'lib xizmat qiladi, chunki ilovadagi barcha rastrli aktivlarni Android uchun vektorga aylantirishga urinib ko'rganimizda. Muammoni bartaraf etish haqida gap ketganda, Android Studio foydalanuvchi qo'llanmalari ayniqsa foydali emas edi.

Emas, balki

Bu erda yozilgan ko'plab qoidalar Sketch-dan foydalanib, vektor aktivlarini eksport qilish uchun xosdir. Shu bilan birga, ular barcha platformalarda foydalanish uchun toza va funktsional vektor aktivlarini eksport qilish uchun yaxshi ko'rsatmalardir.

1. Oddiy ahmoqona tuting

Dasturiy ta'minotni loyihalash uchun ushbu asosiy printsip aktivlarga ham tegishli: shakllar qanchalik sodda bo'lsa, shunchalik yaxshi bo'ladi. Kerakli murakkab aktivlarni yaratish uchun oddiy shakllardan foydalaning. Bosh barmog'ining umumiy qoidasi shundan iboratki, yo'llar va langarlar qancha kam bo'lsa, shunchalik “toza” bo'ladi. Biror shaklni ishlatish har doim aktivlarni yaratish uchun bir-birining ustiga chiqqan shakllarni ishlatishdan afzalroqdir.

2. Maskalarni ishlatishdan saqlaning

Sketch-dan foydalangan holda tayyorlangan niqoblar Android API-ning joriy versiyasida qo'llab-quvvatlanmaydi. Sketch-da qilingan har qanday niqoblar Android VectorDrawble (AVD) tomonidan e'tiborga olinmaydi va Sketch-da tayyorlangan niqoblar ba'zan Adobe Illustrator-ni ishdan chiqarishi mumkin. Agar soya effektini yaratish kerak bo'lgan vaziyat mavjud bo'lsa, mavjud qatlamning ustidagi ustki qatlamni niqoblar foydasiga ishlatish kerak.

Kerakli shaklni yaratish uchun soyali qavatdagi

3. Satrlarni emas, balki rejalarni tuzing

Mumkin bo'lgan holatlarda, kerakli shakllarni yaratish uchun zarbalardan foydalanmaslikka harakat qiling. Kesish rasmning qolgan qismi bilan har doim ham to'g'ri o'lchanmaydi. Bundan tashqari, AVD turli xil chegara pozitsiyalarini farq qilmaydi va barcha chegaralarni "markaziy" chiziqlar sifatida qabul qiladi.

Bu nimani anglatadi, qalinligi 10 bo'lgan ichki chegara Sketchda 20 qalinlikdagi markaziy zarbaga aylanadi.

Konturlar shakli bo'lganligi sababli, ular har doim kengaytirilganda yoki o'zgartirilganda kerakli ko'rinishni namoyish etadi. Agar siz yo'l o'tkazgich operatsiyalarini qo'llamoqchi bo'lsangiz, konturlarni ishlash osonroq bo'ladi.

CMD + Shift + O tugmalarini bosib, konturlarni osongina o'zgartirishingiz mumkin.

4. Pathfinders sizning do'stingiz

Ko'pgina murakkab shakllar yo'lni aniqlash vositalaridan foydalangan holda sodda shakllar tarkibidan yaratilishi mumkin. Ular bilan tanishing. Shu tarzda yaratilgan shakllar har bir qurilmada to'g'ri aks ettirilishi mumkin.

5. Adobe Illustrator - muammolarni bartaraf etishning eng yaxshi usuli

Adobe Illustrator vektor aktivlarini Android-ning VectorDrawable-ga o'xshagan tarzda taqdim etadi (odatiy tajribadan kelib chiqqan holda). Agar aktiv AVD-da yaxshi ko'rinmasa, Illustrator-dan foydalanib muammoni aniqlashga harakat qiling. Ko'pincha echimlar to'ldirishni olib tashlash kabi oddiy.

Sketch-dan foydalanib, Android uchun aktivlarni eksport qilishda keng tarqalgan muammo.

6. Birlashtirilgan va o'zgartirilgan shakllar ular ko'rinadigan ko'rinmasligi mumkin

Sketch-da qilingan aks ettirish va burilishlar kabi o'zgartirishlar Android VectorDrawable-da to'liq qo'llab-quvvatlanmaydi. Natijada, o'zgartirilgan qatlamlar har doim siz kutganingizdek ko'rinmaydi. Buning eng oson echimi bu o'zgarishga ega bo'lgan har bir yo'lni tekislashdir, shuning uchun transformatsiya bu yo'lning bir qismiga aylanadi.

Biroq, transformatsiyalar butun guruhlarga tatbiq etiladigan vaziyatlarda, har bir qatlamni qo'lda o'zgartirish va joylashtirish bu atrofida ishlashning yagona yo'li bo'ladi.

7. Shaffofliklar sizning do'stingiz ...

Shaffofliklar to'g'ri qo'llab-quvvatlanadi va barcha qurilmalar va platformalarda namoyish etiladi, ulardan foydalanib, kerak bo'lganda soyalar / yoritgichlarni yarating.

Biftek ostida tushadigan soyaga e'tibor bering

8.… va gradientlar unchalik emas

Boshqa tomondan, AVD hozirda gradientlarni qo'llab-quvvatlamaydi. Shu tarzda qilingan aktivlar import paytida deyarli buziladi. Cel soyasini gradient soya usullari foydasiga ishlatish kerak.

Biftek ostidagi tomchilar soyasi yo'qoladi

9. Qatlamlarni emas, balki artboardlarni eksport qiling

Vektor aktivining o'lchamlarini aniqlash uchun Sketch-dagi chegara qutisidan foydalanish eski maktab uslubidir. Vektorlarni eksport qilish uchun chegaralarni aniqlashning xizmat ko'rsatadigan usuli hali ham mavjud bo'lsa-da, siz aniqlamoqchi bo'lgan ko'rinishga ega bo'lgan o'lchamlarga ega bo'lgan artboardni yaratish yaxshiroqdir. VirtualDrawable xml-ga tarjima qilinganida aktivdagi cheklash oynasi qatlami alohida, ammo shaffof yo'l sifatida ko'rib chiqiladi.

10. Yassi shakllar ko'p muammolarni hal qiladi

Eksport qilinadigan aktivlar tarkibida tahrir qilinayotganda uning o'zgarishi va tarkibini tavsiflovchi meta-ma'lumotlar mavjud, chunki bu foydalanuvchilarga "qanday" yaratilganligi haqida ma'lumot beradi. Biroq, ushbu aktivlarni eksport qilish va namoyish qilish haqida gap ketganda, uning qanday tuzilganligi to'g'risida tashqi ma'lumot, fayl hajmini oshirish bilan bir qatorda, hal qilinganidan ko'ra ko'proq muammolarni keltirib chiqaradi (Sketch-da bajarilgan aylanishlar va ko'zgular qo'llab-quvvatlanmaydi).

Aktivning so'nggi holati ko'rsatilayotgan yagona narsa va shuning uchun bu holatda faqat oxirgi holatning ko'rinishi muhimdir.

Shaklni tekislash aktivga o'zgartiruvchi va buzuvchi operatsiyalarni amalga oshiradi. Bu eskirgan ma'lumotni olib tashlash orqali fayl hajmini kamaytiradi va tasvirni aniq ko'rib chiqishga imkon beradi.