10 tip til eksport af vektoraktiver fra Sketch til Android

Fordelene ved vektorer til rastere er åbenlyse. Vectoraktiver er mindre, let redigerbare og meget lettere at mikromanage (specifikt med hensyn til størrelse og farve).

Jeg arbejder på en relativt kompleks applikation, der understøtter mange forskellige platforme. Med de voksende skærmstørrelser og opløsninger (ser på dig, Nexus 6P) til Android, følte vi det var nødvendigt at opdatere de eksisterende aktiver fra raster til vektorformater for at holde aktiverne skalerbare på grund af behovet for at understøtte forskellige opløsninger.

De fleste af de aktiver, vi i øjeblikket bruger, blev oprindeligt oprettet ved hjælp af Sketch. Dette skabte nogle interessante problemer, mens du konverterede. Da vektoraktiver kun delvist understøttes af Android i dets nuværende API (Android 24), brød de eksporterede aktiver på mange uventede måder.

Dette fungerer som en undersøgelsesdagbog set ud fra en designer, for et par ting, vi lærte, mens vi forsøgte at konvertere alle rasteraktiver i appen til vektorer til Android. Brugsanvisningerne til Android Studio var ikke særlig nyttige, når det gælder fejlfinding.

Ikke helt

Mange af de regler, der er skrevet her, er specifikke for eksportering af vektoraktiver ved hjælp af Sketch. De er imidlertid også gode retningslinjer for eksport af rene og funktionelle vektoraktiver til brug på alle platforme.

1. Hold det simpelt dumt

Dette kerneprincip for softwaredesign gælder også for aktiver: jo lettere formene er, jo bedre. Prøv at bruge enkle former til at oprette de komplekse aktiver, du har brug for. Den generelle tommelfingerregel er, at jo færre stier og ankre bruges, jo “renere” er det. Brug af en enkelt form foretrækkes altid frem for at bruge flere overlappende figurer for at oprette et aktiv.

2. Undgå at bruge masker

Masker lavet ved hjælp af Sketch understøttes ikke af den aktuelle version af Android API. Eventuelle maskeringer, der er lavet i Sketch, ignoreres af Android VectorDrawble (AVD), og masker, der er lavet i Sketch, kan undertiden gå ned i Adobe Illustrator. Hvis der er en situation, hvor en skyggeeffekt skal oprettes, skal en overlappende form øverst på det eksisterende lag anvendes til fordel for masker.

Brug stifinder-operationen

3. Lav konturer, ikke streger

I situationer, hvor det er muligt, skal du prøve at undgå at bruge streger for at skabe de ønskede former. Slagsmål skaleres ikke altid korrekt sammen med resten af ​​billedet. Derudover skelner AVD ikke mellem de forskellige grænsepositioner og behandler alle grænser som ”center” -slag.

Så hvad dette betyder er, at en indvendig kant med tykkelse 10 på Sketch bliver et centerslag af tykkelse 20, når den gengives på AVD.

Da konturer er former, udviser de altid det ønskede udseende, når de skaleres eller transformeres. Konturer er også meget lettere at arbejde med, hvis du ønsker at anvende stifinder-operationer.

Du kan nemt ændre streger til konturer ved hjælp af CMD + Shift + O.

4. Stifinder er din ven

De fleste komplekse former kan oprettes ud fra en sammensætning af enklere former ved hjælp af stifinder-operationer. Bliv fortrolig med dem. Former oprettet på denne måde kan vises korrekt på alle enheder.

5. Adobe Illustrator er den bedste fejlfinding

Adobe Illustrator gengiver vektoraktiver på samme måde som Android's VectorDrawable (fra anekdotisk oplevelse). Hvis et aktiv ikke vises korrekt i AVD, kan du prøve at diagnosticere problemet ved hjælp af Illustrator. Ofte er løsningen så enkel som bare at fjerne en udfyldning.

Et almindeligt problem for eksportering af aktiver til Android ved hjælp af Sketch.

6. Kombinerede og transformerede figurer vises muligvis ikke som de ser ud

Transformationer som reflektioner og rotationer foretaget i Sketch understøttes ikke fuldt ud i Android VectorDrawable. Som et resultat vises transformerede lag ikke altid, som du forventer dem. Den nemmeste løsning på dette ville være at blot flade hver sti, der har en transformation, så transformationen bliver en del af stien.

I situationer, hvor transformationer anvendes til hele grupper, ville den eneste måde at arbejde omkring dette imidlertid være manuelt at transformere og placere hvert enkelt lag.

7. Transparenter er din ven ...

Transparenter understøttes korrekt og vises på alle enheder og platforme. Brug dem til at oprette skygger / højdepunkter, hvor det er relevant.

Bemærk dråbe skyggen under bøf

8.… og gradueringer er ikke

På den anden side understøtter AVD ikke i øjeblikket gradueringer. De aktiver, der fremstilles på denne måde, vil næsten helt sikkert bryde under importen. Cel-skygge bør bruges til fordel for gradient skyggeteknikker.

Dråbe skygge under bøf forsvinder

9. Eksporter tegnebræt, ikke lag

Det er en old-school teknik at bruge en afgrænsningsboks i Sketch til at definere dimensionerne af et vektoraktiv. Selvom det stadig er en brugbar metode til at definere grænser for eksport af vektorer, er den bedre metode at oprette et tegnebræt, der har de samme dimensioner som det synspunkt, du prøver at definere. Afgrænsningsboksen i aktivet behandles som en separat, men gennemsigtig sti, når det oversættes til VectorDrawable xml.

10. Flad udformning vil løse de fleste problemer

Eksporterede aktiver indeholder metadata, der beskriver dets transformationer og sammensætninger, mens det redigeres, da dette fortæller brugerne, hvordan "hvordan" det blev oprettet. Når det gælder eksport og gengivelse af disse aktiver, forårsager denne fremmede information om, hvordan den blev sammensat, ofte flere problemer, end de løser (rotationer og reflektioner, der udføres i Sketch understøttes ikke), ud over at øge filstørrelsen.

Aktivets sluttilstand er det eneste, der vises, og i dette tilfælde er det kun sluttilstandens betydning.

Udfladning af en form vil gøre transformeringer og stifinderoperationer til aktivet. Dette reducerer filstørrelsen ved at fjerne forældede oplysninger og giver dig mulighed for at forhåndsvise billedet nøjagtigt.