10 tipov na export vektorových aktív z aplikácie Sketch do systému Android

Výhody vektorov pre rastre sú zrejmé. Prvky vektorov sú menšie, ľahko upraviteľné a oveľa ľahšie sa spravujú mikromanažérmi (konkrétne z hľadiska veľkosti a farby).

Pracujem na relatívne komplexnej aplikácii, ktorá podporuje mnoho rôznych platforiem. S rastúcou veľkosťou obrazovky a rozlíšením (pri pohľade na vás, Nexus 6P) pre Android sme sa domnievali, že je potrebné aktualizovať existujúce diela z rastrových do vektorových formátov, aby boli diela škálovateľné kvôli potrebe podporovať rôzne rozlíšenia.

Väčšina aktív, ktoré momentálne používame, bola pôvodne vytvorená pomocou aplikácie Sketch. Počas pokusu o konverziu to spôsobilo niekoľko zaujímavých problémov. Keďže v súčasnom API (Android 24) Android podporuje prvky vektora iba čiastočne, exportované prvky sa zlomili mnohými neočakávanými spôsobmi.

Slúži ako vyšetrovací denník z hľadiska dizajnéra pre pár vecí, ktoré sme sa naučili pri pokuse previesť všetky rastrové aktíva v aplikácii na vektory pre Android. Používateľské príručky pre Android Studio neboli veľmi užitočné pri riešení problémov.

Nie celkom „úplná podpora“

Mnoho tu napísaných pravidiel je špecifických pre export vektorových aktív pomocou aplikácie Sketch. Sú však tiež dobrými usmerneniami pre export čistých a funkčných prvkov vektora na použitie na všetkých platformách.

1. Nechaj to Simple Stupid

Tento základný princíp pre návrh softvéru platí aj pre aktíva: čím jednoduchšie tvary, tým lepšie. Vyskúšajte a pomocou jednoduchých tvarov vytvorte zložité aktíva, ktoré potrebujete. Všeobecným pravidlom je, že sa používa menej chodníkov a kotiev, čím je „čistejší“. Na vytvorenie prvku sa vždy uprednostňuje použitie jedného tvaru pred použitím viacerých prekrývajúcich sa tvarov.

2. Nepoužívajte masky

Masky vytvorené pomocou aplikácie Sketch nie sú súčasnou verziou rozhrania Android API podporované. Aplikácia Android VectorDrawble (AVD) ignoruje všetky maskovania vykonané v aplikácii Sketch a masky vytvorené v aplikácii Sketch by niekedy poškodili program Adobe Illustrator. Ak sa vyskytne situácia, keď je potrebné vytvoriť tieňový efekt, mal by sa pre masky použiť prekrývajúci sa tvar na hornej časti existujúcej vrstvy.

Na vytvorenie požadovaného tvaru použite operáciu hľadáčika „Priesečník“ na tieňovacej vrstve so základnou vrstvou

3. Vytvárajte obrysy, nie ťahy

V situáciách, kde je to možné, sa pokúste vyhnúť použitiu ťahov na vytvorenie požadovaných tvarov. Zdvihy nie sú vždy so zvyškom obrázka správne. AVD okrem toho nerozlišuje medzi rôznymi hraničnými pozíciami a zaobchádza so všetkými hranicami ako so „strednými“ ťahmi.

To znamená, že vnútorný okraj hrúbky 10 na náčrte sa pri vykreslení na AVD stane stredným zdvihom hrúbky 20.

Pretože obrysy sú tvary, pri zmene mierky alebo transformácie vykazujú vždy požadovaný vzhľad. Obrysy sú tiež omnoho ľahšie pracovať, ak si prajete použiť operácie hľadáčika.

Ťahy môžete ľahko zmeniť na obrysy pomocou CMD + Shift + O.

4. Pathfinders sú tvoji priatelia

Najzložitejšie tvary sa dajú vytvoriť zo zloženia jednoduchších tvarov pomocou operácií hľadáčika. Oboznámte sa s nimi. Takto vytvorené tvary sa dajú správne zobraziť na každom zariadení.

5. Adobe Illustrator je najlepší nástroj na riešenie problémov

Adobe Illustrator vykresľuje vektorové prvky rovnakým spôsobom ako VectorDrawable systému Android (z neoficiálnych skúseností). Ak sa diel v AVD nezobrazuje správne, skúste diagnostikovať problém pomocou aplikácie Illustrator. Riešenie je často také jednoduché, ako odstránenie výplne.

Bežný problém pri exportovaní diel pre Android pomocou aplikácie Skica.

6. Kombinované a transformované tvary sa nemusia javiť tak, ako vyzerajú

Transformácie, ako sú odrazy a rotácie vykonané v aplikácii Sketch, nie sú v systéme Android VectorDrawable úplne podporované. Výsledkom je, že transformované vrstvy sa vždy nezobrazia tak, ako očakávate. Najjednoduchším riešením by bolo vyrovnať každú cestu, ktorá má transformáciu, takže transformácia sa stane súčasťou cesty.

Avšak v situáciách, keď sú transformácie aplikované na celé skupiny, by jediný spôsob, ako to obísť, bolo ručne transformovať a umiestniť každú jednotlivú vrstvu.

7. Priehľadné fólie sú vaším priateľom ...

Priehľadné fólie sú správne podporované a zobrazené na všetkých zariadeniach a platformách a podľa potreby ich používajú na vytváranie tieňov / svetiel.

Všimnite si tieň pod steakom

8.… a prechody nie sú

Na druhej strane AVD v súčasnosti nepodporuje prechody. Takto vyrobené aktíva sa počas dovozu takmer určite zlomia. Celé tieňovanie by sa malo používať v prospech techník gradientného tieňovania.

Vtieň pod steak zmizne

9. Export kresiel, nie vrstiev

Použitie ohraničujúceho rámčeka v aplikácii Skica na definovanie rozmerov vektorového diela je technika starej školy. Aj keď je to stále použiteľná metóda definovania hraníc pre export vektorov, lepším prístupom je vytvorenie kresleného plátna, ktorý má rovnaké rozmery ako výrez, ktorý sa snažíte definovať. Vrstva ohraničujúceho rámčeka v prvku sa pri preklade do súboru VectorDrawable xml považuje za samostatnú, ale transparentnú cestu.

10. Sploštenie tvarov vyrieši väčšinu problémov

Exportované diela obsahujú metaúdaje popisujúce jeho transformácie a zloženia počas ich úpravy, pretože to používateľom povie, ako „ako“ bolo vytvorené. Pokiaľ však ide o export a vykreslenie týchto aktív, táto vonkajšia informácia o tom, ako bola zložená, spôsobuje okrem zväčšenia veľkosti súboru často viac problémov, ako rieši (rotácie a odrazy vykonávané v aplikácii Skica nie sú podporované).

Konečný stav majetku je jediná zobrazená vec, takže v tomto prípade je dôležitý iba vzhľad konečného štátu.

Vyrovnanie tvaru spôsobí, že sa operácie transformácie a hľadáčika transformujú do diela. To zmenšuje veľkosť súboru odstránením zastaraných informácií a umožňuje vám presne si prezrieť ukážku obrázka.