10 tips för att exportera vektortillgångar från Sketch till Android

Fördelarna med vektorer för raster är uppenbara. Vektortillgångar är mindre, lätt redigerbara och mycket lättare att hantera (särskilt när det gäller storlek och färg).

Jag arbetar med en relativt komplex applikation som stöder många olika plattformar. Med de växande skärmstorlekarna och upplösningarna (ser på dig, Nexus 6P) för Android, ansåg vi att det var nödvändigt att uppdatera de befintliga tillgångarna från raster till vektorformat för att hålla tillgångarna skalbara på grund av behovet av att stödja olika upplösningar.

De flesta av de tillgångar som vi för närvarande använder skapades ursprungligen med Sketch. Detta orsakade några intressanta problem när du försökte konverteringen. Eftersom vektortillgångar endast delvis stöds av Android i dess nuvarande API (Android 24), bröt de exporterade tillgångarna på många oväntade sätt.

Detta fungerar som en utredningsdagbok ur designerns synvinkel för ett par saker vi lärde oss när vi försökte konvertera alla rastertillgångar i appen till vektorer för Android. Användarhandböckerna för Android Studio var inte särskilt användbara när det gäller felsökning.

Inte riktigt

Många av de här reglerna är specifika för att exportera vektortillgångar med Sketch. De är dock också goda riktlinjer för att exportera rena och funktionella vektortillgångar för användning över alla plattformar.

1. Håll det enkelt dumt

Denna kärnprincip för programvarudesign gäller också för tillgångar: ju enklare former desto bättre. Försök använda enkla former för att skapa de komplexa tillgångar du behöver. Den allmänna tumregeln är att ju färre vägar och ankare används, desto “renare” är det. Att använda en enda form är alltid att föredra framför att använda flera överlappande former för att skapa en tillgång.

2. Undvik att använda masker

Masker tillverkade med Sketch stöds inte av den aktuella versionen av Android API. Eventuella maskeringar som gjorts i Sketch ignoreras av Android VectorDrawble (AVD), och masker som gjorts i Sketch skulle ibland krascha Adobe Illustrator. Om det finns en situation där en skuggningseffekt behöver skapas, bör en överlappande form ovanpå det befintliga lagret användas till förmån för masker.

Använd sökvägsoperationen

3. Gör konturer, inte slag

I situationer där det är möjligt, försök att undvika att använda linjer för att skapa önskade former. Slagor skalas inte alltid ordentligt med resten av bilden. Dessutom skiljer AVD inte mellan de olika gränspositionerna och behandlar alla gränser som "mitterslag".

Så vad detta betyder är att en inre kant med tjocklek 10 på Sketch blir en mitterslag av tjocklek 20 när den återges på AVD.

Eftersom konturerna är former, uppvisar de alltid det önskade utseendet när de skalas eller transformeras. Konturer är också mycket lättare att arbeta med om du vill tillämpa sökfunktioner.

Du kan enkelt ändra linjer i konturer genom att använda CMD + Shift + O.

4. Sökvägar är din vän

De flesta komplexa former kan skapas från en sammansättning av enklare former med hjälp av sökfunktionerna. Bekanta dig med dem. Formar som skapats på detta sätt kan visas korrekt på alla enheter.

5. Adobe Illustrator är den bästa felsökaren

Adobe Illustrator gör vektortillgångar på samma sätt som Android: s VectorDrawable (från anekdotisk erfarenhet). Om en tillgång inte visas korrekt i AVD kan du prova att diagnostisera problemet med Illustrator. Ofta är lösningen lika enkel som att bara ta bort en fyllning.

Ett vanligt problem för att exportera tillgångar till Android med Sketch.

6. Kombinerade och transformerade former kanske inte ser ut som de ser ut

Transformationer som reflektioner och rotationer gjorda i Sketch stöds inte helt i Android VectorDrawable. Som ett resultat visas transformerade lager inte alltid som du förväntar dig att de ska göra. Den enklaste lösningen på detta skulle vara att bara platta ut varje väg som har en omvandling, så att transformationen blir en del av vägen.

Men i situationer där transformationer tillämpas på hela grupper skulle det enda sättet att lösa detta vara att manuellt transformera och placera varje enskilt lager.

7. OH-film är din vän ...

OH-film stöds korrekt och visas på alla enheter och plattformar, använd dem för att skapa skuggor / höjdpunkter där så är lämpligt.

Notera droppskuggan under biffen

8. ... och gradienter är inte

Å andra sidan stöder AVD för närvarande inte lutningar. Tillgångarna på detta sätt kommer nästan säkert att gå sönder under importen. Cel skuggor bör användas till förmån för gradient skuggning tekniker.

Droppskuggan under biffen försvinner

9. Exportera tavlor, inte lager

Att använda en avgränsningsruta i Sketch för att definiera dimensionerna på en vektortillgång är en old-school-teknik. Även om det fortfarande är en användbar metod för att definiera gränser för exportering av vektorer, är den bättre metoden att skapa en tavla som har samma dimensioner som visningsområdet du försöker definiera. Gränslådeskiktet i tillgången behandlas som en separat, men transparent sökväg när den översätts till VectorDrawable xml.

10. Att platta former löser de flesta problem

Exporterade tillgångar innehåller metadata som beskriver dess transformationer och kompositioner medan de redigeras, eftersom detta berättar användarna om hur "det skapades". Men när det gäller att exportera och rendera dessa tillgångar orsakar denna främmande information om hur den komponerades ofta fler problem än den löser (rotationer och reflektioner utförda i Sketch stöds inte), förutom att filstorleken ökar.

Tillgångens sluttillstånd är det enda som visas, och i det här fallet är endast utseendet på sluttillståndet viktigt.

Att platta en form kommer att göra omvandlingar och sökvägsoperationer till tillgången. Detta minskar filstorleken genom att ta bort föråldrad information och låter dig förhandsgranska bilden korrekt.