10 tipp a vektor eszközök exportálásához a Sketch-ből az Android-ba

A vektorok előnyei a raszterekkel szemben nyilvánvalóak. A vektor eszközök kisebbek, könnyen szerkeszthetők és sokkal könnyebben mikromanyhatathatók (különösen méret és szín szempontjából).

Egy viszonylag összetett alkalmazáson dolgozom, amely számos különféle platformot támogat. Az Android képernyőn megjelenő növekvő képernyőméretek és felbontások mellett (rád nézve, Nexus 6P) úgy éreztük, hogy a meglévő eszközöket raszterről vektor formátumra kell frissíteni, hogy az eszközök méretezhetők maradjanak, mivel a különféle felbontásokat támogatni kell.

A jelenleg használt eszközök nagy részét eredetileg a Sketch segítségével hozták létre. Ez érdekes problémákat okozott az átalakítás kísérlete közben. Mivel a vektor eszközöket az Android csak részben támogatja a jelenlegi API-ban (Android 24), az exportált eszközök sok váratlan módon megsérültek.

Ez a tervező szempontjából nyomozónaplóként szolgál. Néhány dologra, amelyet megtanultunk, miközben megpróbáltuk az alkalmazás összes raszteres eszközét átalakítani az Android vektorokká. Az Android Studio felhasználói útmutatói nem voltak különösebben hasznosak a hibaelhárítás során.

Nem egészen „Teljes támogatás”

Az itt írt szabályok nagy része a vektor eszközök Sketch segítségével történő exportálására vonatkozik. Ugyanakkor jó iránymutatások a tiszta és funkcionális vektor eszközök exportálásához is, az összes platformon keresztül történő felhasználásra.

1. Legyen egyszerű hülye

Ez a szoftverfejlesztési alapelv az eszközökre is vonatkozik: minél egyszerűbb az alak, annál jobb. Próbálja ki és használja az egyszerű alakzatokat a szükséges összetett eszközök létrehozásához. Az általános hüvelykujjszabály az, hogy minél kevesebb utat és rögzítőt használnak, annál „tisztább”. Egyetlen alak használata mindig jobb, mint több átfedő alakzat használata az eszköz létrehozásához.

2. Kerülje a maszkok használatát

A vázlat segítségével készített maszkokat az Android API jelenlegi verziója nem támogatja. A Sketch-ben készített maszkolásokat az Android VectorDrawble (AVD) figyelmen kívül hagyja, és a Sketch-ben készített maszkok időnként összeomolhatják az Adobe Illustrator programot. Ha van olyan helyzet, hogy árnyékoló hatást kell létrehozni, akkor a maszkok helyett átfedő alakzatot kell használni a meglévő réteg tetején.

A kívánt alak létrehozásához használja az árnyékoló réteg és az alapréteg közötti „kereszteződés” műveletet

3. Vázolja a körvonalakat, és ne ecsetvonásokat

Ahol lehetséges, próbálja meg kerülni a vonások használatát a kívánt alakzatok létrehozásához. A stroke nem mindig megfelelően méretezi a képet a többi résznél. Ezenkívül az AVD nem tesz különbséget a különböző határpozíciók között, és minden határt „középső” vontatásként kezel.

Ez azt jelenti, hogy a vázlaton a 10 vastagságú belső határ 20-as vastagságú középső lökéssé válik, amikor az AVD-n megjelenítik.

Mivel a körvonalak formák, méretarányos vagy átalakított alakban mindig a kívánt megjelenést mutatják. A körvonalak is sokkal könnyebben kezelhetők, ha alkalmazni akarják az útvonal-kereső műveleteket.

A CMD + Shift + O gombbal könnyedén megváltoztathatja a körvonalakat körvonalakká.

4. Az útkeresők a barátod

A legtöbb bonyolult alakzat egyszerűbb alakzatok összetételéből hozható létre az útvonal-kereső műveletekkel. Ismerje meg őket. Az így létrehozott formák minden eszközön megfelelően megjeleníthetők.

5. Az Adobe Illustrator a legjobb hibaelhárító

Az Adobe Illustrator a vektor eszközöket ugyanúgy jeleníti meg, mint az Android VectorDravable (anekdotikus tapasztalatok alapján). Ha egy eszköz nem jelenik meg megfelelően az AVD-ban, próbálja meg diagnosztizálni a problémát az Illustrator használatával. A megoldás gyakran oly egyszerű, mint a kitöltés eltávolítása.

Gyakori probléma az eszközök Androidra a Sketch segítségével történő exportálásában.

6. Lehet, hogy a kombinált és átalakított formák nem úgy jelennek meg, mint amilyennek látszanak

Az olyan átalakításokat, mint a reflexiók és a Vázlatban elforgatások, az Android VectorDravable nem támogatja teljes mértékben. Ennek eredményeként az átalakult rétegek nem mindig jelennek meg úgy, ahogy elvárják. A legegyszerűbb megoldás az lenne, ha csak síkítaná meg minden olyan utat, amelyben egy transzformáció van, így a transzformáció az út részévé válik.

Azonban olyan helyzetekben, amikor az átalakításokat teljes csoportokra alkalmazzák, az egyetlen módja ennek megkerülésére az egyes rétegek kézi átalakítása és elhelyezése.

7. Az írásvetítő fóliák a barátod

Az írásvetítő fóliákat megfelelő módon támogatják és megjelenítik minden eszközön és platformon. Használják őket árnyékok / kiemelések létrehozásához, ahol szükséges.

Vegye figyelembe az árnyékot a steak alatt

8.… és a színátmenetek nem

Másrészt az AVD jelenleg nem támogatja a színátmeneteket. Az így készített eszközök szinte biztosan megsemmisülnek az import során. A színátmenetet a gradiens árnyékolástechnikák javára kell használni.

A steak alatti árnyék eltűnik

9. Táblák exportálása, nem rétegek exportálása

A vázlatban egy határoló doboz használata a vektor eszköz méreteinek meghatározására egy régi iskola technikája. Noha ez továbbra is használható módszer a határok meghatározására az vektorok exportálása során, a jobb megközelítés egy olyan rajztábla létrehozása, amelynek mérete megegyezik a meghatározni kívánt nézetablak méretével. Az eszköz határoló dobozrétegét külön, de átlátható útvonalként kezelik, amikor lefordítják a VectorDravable xml fájlba.

10. Az alakzatok simítása megoldja a legtöbb problémát

Az exportált eszközök metaadatokat tartalmaznak, amelyek leírják az átalakításokat és az összetételeket szerkesztés közben, mivel ez megmondja a felhasználóknak, hogy "hogyan" készültek. Azonban amikor ezeket az eszközöket exportálják és megjelenítik, az összeállítás módjára vonatkozó idegen információk gyakran több problémát okoznak, mint megoldják (a Sketchben végrehajtott forgatások és reflexiók nem támogatottak), a fájlméret növelése mellett.

Az eszköz végső állapota az egyetlen, amit megmutatnak, így ebben az esetben csak a végállapot megjelenése számít.

Az alak sima elrendezése transzformációkat és útvonalkereső műveleteket eredményez az eszközben. Ez csökkenti a fájl méretét az elavult információk eltávolításával, és lehetővé teszi a kép pontos előnézetét.