10 съвета за експортиране на векторни активи от Sketch към Android

Предимствата на векторите пред растри са очевидни. Векторните активи са по-малки, лесно редактируеми и много по-лесни за управление (особено по отношение на размер и цвят).

Работя върху сравнително сложно приложение, което поддържа много различни платформи. С увеличаващите се размери и разделителни способности на екрана (гледайки ви, Nexus 6P) за Android, смятахме, че е необходимо да актуализираме съществуващите активи от растерни до векторни формати, за да запазим мащабируемостта на активите си поради необходимостта от поддържане на различни резолюции.

Повечето от активите, които използваме в момента, са създадени първоначално с помощта на Sketch. Това предизвика някои интересни проблеми при опит за преобразуване. Тъй като векторните активи се поддържат частично само от Android в текущия му API (Android 24), изнесените активи се счупиха по много неочаквани начини.

Това служи като разследващ дневник от гледна точка на дизайнер, за няколко неща, които научихме, докато се опитваме да преобразуваме всички растерни активи в приложението във вектори за Android. Ръководствата за потребители на Android Studio не бяха особено полезни, когато става дума за отстраняване на проблеми.

Не съвсем „Пълна поддръжка“

Много от правилата, написани тук, са специфични за експортирането на векторни активи чрез Sketch. Те обаче са и добри насоки за износ на чисти и функционални векторни активи за използване във всички платформи.

1. Дръжте го просто глупаво

Този основен принцип за софтуерното проектиране се прилага и за активите: колкото по-прости са формите, толкова по-добре. Опитайте и използвайте прости форми, за да създадете необходимите сложни активи. Общото правило е, че колкото по-малко пътища и котви се използват, толкова по-чисти са. Използването на една форма винаги е за предпочитане от използването на множество припокриващи се форми за създаване на актив.

2. Избягвайте използването на маски

Маските, направени с помощта на Sketch, не се поддържат от текущата версия на Android API. Всички маскировки, направени в Sketch, се игнорират от Android VectorDrawble (AVD), а маските, направени в Sketch, понякога биха сривали Adobe Illustrator. Ако има ситуация, в която трябва да се създаде ефект на засенчване, припокриващата се форма върху съществуващия слой трябва да се използва в полза на маски.

Използвайте операцията на пътепоказателя „Пресечете се“ върху засенчващия слой с основния слой, за да създадете нужната форма

3. Правете очертания, а не удари

В ситуации, когато е възможно, опитайте се да избягвате ударите, за да създадете желаните форми. Очертанията не винаги са правилно мащабирани с останалата част от изображението. В допълнение, AVD не прави разлика между различните гранични позиции и третира всички граници като "централни" удари.

Това означава, че вътрешната граница с дебелина 10 на Sketch става централен ход с дебелина 20, когато се изобразява на AVD.

Тъй като очертанията са форми, те винаги проявяват желания външен вид, когато са мащабирани или трансформирани. Очертанията също са много по-лесни за работа, ако искате да приложите операции за намиране на път.

Можете лесно да промените щрихите в контури, като използвате CMD + Shift + O.

4. Pathfinders са ваш приятел

Повечето сложни форми могат да бъдат създадени от композиция от по-прости фигури, използвайки операциите на пътя. Запознайте се с тях. Формите, създадени по този начин, могат да бъдат правилно показани на всяко устройство.

5. Adobe Illustrator е най-добрият инструмент за отстраняване на неизправности

Adobe Illustrator предоставя векторните активи по същия начин като VectorDravable на Android (от анекдотичен опит). Ако активът не се показва правилно в AVD, опитайте да диагностицирате проблема с помощта на Illustrator. Често пъти решението е толкова просто, колкото просто премахване на попълване.

Често срещан проблем при експортирането на активи за Android с помощта на Sketch.

6. Комбинираните и трансформирани форми може да не изглеждат такива, каквито изглеждат

Трансформации като отражения и завъртания, направени в Sketch, не се поддържат напълно в Android VectorDravable. В резултат на това трансформираните слоеве не винаги изглеждат така, както очаквате. Най-лесното решение за това би било просто изравняване на всеки път, който има трансформация, така че трансформацията става част от пътя.

Въпреки това, в ситуации, когато трансформации се прилагат за цели групи, единственият начин да се заобиколи това би било ръчно преобразуване и позициониране на всеки отделен слой.

7. Транспарантите са ваш приятел ...

Транспарантите се поддържат правилно и се показват на всички устройства и платформи, използвайте ги за създаване на сенки / акценти, когато е подходящо.

Обърнете внимание на сянката под пържолата

8.… и градиентите не са

От друга страна, AVD понастоящем не поддържа градиенти. Така направените активи почти сигурно ще се счупят по време на вноса. Засенчването на Cel трябва да се използва в полза на градиентните техники на засенчване.

Капка сянка под пържолата изчезва

9. Експортирайте артбордове, а не слоеве

Използването на ограничаващо поле в Sketch за дефиниране на размерите на векторен актив е стара школа. Въпреки че това все още е полезен метод за определяне на граници за експортиране на вектори, по-добрият подход е да създадете артборд, който има същите размери като прозореца, който се опитвате да определите. Ограничаващият слой на кутията в актива се третира като отделен, но прозрачен път, когато се превежда на VectorDravable xml.

10. Изравняването на формите ще реши повечето проблеми

Експортираните активи съдържат метаданни, описващи нейните трансформации и състави, докато се редактират, тъй като това казва на потребителите как „как” е създадено. Въпреки това, когато става въпрос за експортиране и предоставяне на тези активи, тази външна информация за това как е съставена често причинява повече проблеми, отколкото решава (завъртанията и отраженията, изпълнени в Sketch, не се поддържат), в допълнение към увеличаване на размера на файла.

Крайното състояние на актива е единственото, което се показва, и затова в този случай има значение само появата на крайното състояние.

Изравняването на форма ще превърне преобразуванията и операциите за намиране на път в актива. Това намалява размера на файла чрез премахване на остаряла информация и ви позволява да прегледате изображението точно.