10 tips for eksport av vektordeler fra Sketch til Android

Fordelene med vektorer til rasters er åpenbare. Vektordeler er mindre, lett redigerbare og mye enklere å administrere (spesielt når det gjelder størrelse og farge).

Jeg jobber med en relativt kompleks applikasjon som støtter mange forskjellige plattformer. Med de voksende skjermstørrelsene og oppløsningene (ser på deg, Nexus 6P) for Android, følte vi at det var nødvendig å oppdatere eksisterende eiendeler fra raster til vektorformat for å holde eiendelene skalerbare på grunn av behovet for å støtte forskjellige oppløsninger.

De fleste av eiendelene vi bruker for øyeblikket ble opprinnelig opprettet ved hjelp av Sketch. Dette forårsaket noen interessante problemer mens du prøvde konverteringen. Siden vektordeler bare støttes delvis av Android i dets nåværende API (Android 24), brøt de eksporterte eiendelene på mange uventede måter.

Dette fungerer som en undersøkende dagbok fra et designer synspunkt, for et par ting vi lærte mens vi prøvde å konvertere alle rastereiendommene i appen til vektorer for Android. Brukerhåndbøkene til Android Studio var ikke spesielt nyttige når det gjelder feilsøking.

Ikke helt

Mange av reglene som er skrevet her er spesifikke for å eksportere vektordeler ved hjelp av Sketch. De er imidlertid også gode retningslinjer for å eksportere rene og funksjonelle vektordeler til bruk på alle plattformer.

1. Hold det enkelt dumt

Dette kjerneprinsippet for programvaredesign gjelder også for eiendeler: jo enklere formene jo bedre. Prøv å bruke enkle former for å lage de komplekse eiendelene du trenger. Den generelle tommelfingerregelen er at jo færre stier og ankere brukes, jo “renere”. Å bruke en enkelt form er alltid å foretrekke fremfor å bruke flere overlappende former for å lage en eiendel.

2. Unngå å bruke masker

Masker laget med Sketch støttes ikke av den nåværende versjonen av Android API. Eventuelle maskeringer laget i Sketch blir ignorert av Android VectorDrawble (AVD), og masker laget i Sketch vil noen ganger krasje Adobe Illustrator. Hvis det er en situasjon hvor en skyggeleggeeffekt må opprettes, bør en overlappende form på toppen av det eksisterende laget brukes til fordel for masker.

Bruk stifinneroperasjonen “Kryss” på skyggelaget med basissjiktet for å lage den formen du trenger

3. Lag konturer, ikke slag

I situasjoner der det er mulig, prøv å unngå å bruke streker for å lage de ønskede formene. Slag skalerer ikke alltid skikkelig med resten av bildet. I tillegg skiller ikke AVD mellom de forskjellige grenseposisjonene, og behandler alle grenser som ”midtre” streker.

Så hva dette betyr er at en innvendig kant med tykkelse 10 på Sketch blir et midtstrek på tykkelse 20 når den er gjengitt på AVD.

Siden konturer er former, viser de alltid ønsket utseende når de skaleres eller transformeres. Konturer er også mye lettere å jobbe med hvis du ønsker å bruke stifinneroperasjoner.

Du kan enkelt endre streker til konturer ved å bruke CMD + Shift + O.

4. Stifinner er din venn

De fleste komplekse former kan lages fra en sammensetning av enklere former ved å bruke stifinner-operasjonene. Bli kjent med dem. Former som er opprettet på denne måten, kan vises riktig på alle enheter.

5. Adobe Illustrator er den beste feilsøkeren

Adobe Illustrator gjengir vektordeler på samme måte som Android's VectorDrawable (fra anekdotisk erfaring). Hvis en eiendel ikke vises riktig i AVD, kan du prøve å diagnostisere problemet ved hjelp av Illustrator. Ofte er løsningen så enkel som bare å fjerne et fyll.

Et vanlig problem for å eksportere eiendeler til Android ved hjelp av Sketch.

6. Kombinerte og transformerte former kan ikke se ut som de ser ut

Transformasjoner som refleksjoner og rotasjoner gjort i Sketch støttes ikke fullt ut i Android VectorDrawable. Som et resultat vises ikke transformerte lag som du forventer at de skal gjøre. Den enkleste løsningen på dette ville være å bare flate ut hver bane som har en transformasjon, så transformasjonen blir en del av banen.

I situasjoner der transformasjoner brukes på hele grupper, vil imidlertid den eneste måten å jobbe rundt dette være å manuelt transformere og plassere hvert enkelt lag.

7. Transparenter er din venn ...

Transparenter støttes riktig og vises på alle enheter og plattformer, bruk dem til å lage skygger / høydepunkter der det er aktuelt.

Legg merke til fallskyggen under biffen

8.… og gradienter er det ikke

På den annen side støtter ikke AVD for øyeblikket gradienter. Eiendelene som er laget på denne måten vil nesten helt sikkert bryte under importen. Cel skyggelegging bør brukes til fordel for gradient skyggeteknikker.

Dråpeskygge under biffen forsvinner

9. Eksporter tegnebrett, ikke lag

Å bruke en avgrensningsboks i Sketch for å definere dimensjonene til en vektortype er en old-school-teknikk. Selv om det fremdeles er en brukbar metode for å definere grenser for eksport av vektorer, er den bedre tilnærmingen å lage et tegnebrett som har samme dimensjoner som visningsområdet du prøver å definere. Avgrensningsbokslaget i eiendelen blir behandlet som en egen, men gjennomsiktig bane når det oversettes til VectorDrawable xml.

10. Å flate former vil løse de fleste problemer

Eksporterte eiendeler inneholder metadata som beskriver transformasjonene og komposisjonene mens de redigeres, siden dette forteller brukerne om hvordan de ble opprettet. Når det gjelder eksport og gjengivelse av disse eiendelene, forårsaker denne fremmede informasjonen om hvordan den ble sammensatt ofte flere problemer enn den løser (rotasjoner og refleksjoner utført i Sketch støttes ikke), i tillegg til å øke filstørrelsen.

Slutttilstanden til eiendelen er det eneste som vises, og i dette tilfellet er det bare utseendet til sluttstatene som betyr noe.

Å flate ut en form vil gjøre transformasjoner og stifinneroperasjoner til eiendelen. Dette reduserer filstørrelsen ved å fjerne foreldet informasjon, og lar deg forhåndsvise bildet nøyaktig.