10 savjeta za izvoz vektorske imovine sa Sketch-a na Android

Prednosti vektora u odnosu na rastere su očite. Vektorski snimci su manji, lako se uređuju i puno ih je lakše upravljati (posebno u pogledu veličine i boje).

Radim na relativno složenoj aplikaciji koja podržava mnogo različitih platformi. S povećanjem veličine i rezolucije zaslona (gledamo vas, Nexus 6P) za Android, smatrali smo da je potrebno ažurirati postojeću imovinu od rasterskih do vektorskih formata kako bi se imovina održavala skalabilnom zbog potrebe za podrškom različitih rezolucija.

Većina sredstava koja trenutno koristimo izvorno je stvorena pomoću programa Sketch. To je izazvalo zanimljive probleme prilikom pokušaja pretvorbe. Budući da Android vektorski snimci samo djelomično podržavaju Android u njegovom trenutnom API-ju (Android 24), izvezeni elementi probili su se na mnogo neočekivanih načina.

Ovo služi kao istraživački dnevnik s gledišta dizajnera, za nekoliko stvari koje smo naučili dok smo pokušavali pretvoriti svu rastersku imovinu u aplikaciju u vektore za Android. Korisnički vodiči za Android Studio nisu bili osobito korisni kada je riječ o rješavanju problema.

Ne baš

Mnoga ovdje napisana pravila specifična su za izvoz vektorskih sredstava pomoću Sketch-a. No dobre su smjernice za izvoz čistih i funkcionalnih vektorskih sredstava za upotrebu na svim platformama.

1. Neka bude jednostavno glupo

Ovo osnovno načelo za dizajn softvera vrijedi i za imovinu: što su oblici jednostavniji, to su bolji. Pokušajte i koristite jednostavne oblike za stvaranje složenih potrebnih sredstava. Opće je pravilo: što se manje staza i sidrišta koriste, to je "čistije". Upotreba jednog oblika uvijek je poželjnija uporaba više oblika preklapanja za stvaranje imovine.

2. Izbjegavajte upotrebu maski

Maske napravljene pomoću programa Sketch ne podržavaju trenutačna verzija Android API-ja. Sve maske napravljene na Sketch-u zanemaruju Android VectorDrawble (AVD), a maske napravljene na Sketch-u ponekad bi srušile Adobe Illustrator. Ako postoji situacija u kojoj treba stvoriti efekt zasjenjenja, oblik preklapanja na vrhu postojećeg sloja treba koristiti u korist maski.

Upotrijebite operaciju usmjeravanja puta

3. Napravite obrise, a ne poteze

U situacijama kad je to moguće, pokušajte izbjeći korištenje udaraca za stvaranje željenih oblika. Potezi ne odgovaraju uvijek ispravno na ostatku slike. Pored toga, AVD ne razlikuje različite granične položaje i sve granice tretira kao "središnji" hod.

Dakle, to znači da unutarnja granica debljine 10 na Skici postaje središnji hod debljine 20 kada je prikazan na AVD-u.

Budući da su obrisi oblika, oni uvijek pokazuju željeni izgled kada se skaliraju ili transformiraju. Obrisi su također mnogo lakši za rad ako želite primijeniti operacije usmjeravanja puta.

Pomoću CMD + Shift + O možete lako promijeniti obrise u konture.

4. Pathfinderi su vam prijatelji

Najsloženiji oblici mogu se stvoriti iz kompozicije jednostavnijih oblika pomoću operacija pronalaska puta. Upoznajte se s njima. Oblici stvoreni na ovaj način mogu se pravilno prikazati na svakom uređaju.

5. Adobe Illustrator je najbolji alat za rješavanje problema

Adobe Illustrator prikazuje vektorska sredstva na isti način kao i Androidova VectorDravable (iz anegdotskog iskustva). Ako se materijal ne prikazuje pravilno u AVD-u, pokušajte dijagnosticirati problem pomoću Illustratora. Često je rješenje jednostavno kao jednostavno uklanjanje ispunjavanja.

Čest problem za izvoz sredstava za Android pomoću programa Sketch.

6. Kombinirani i transformirani oblici se možda neće činiti onakvima kako izgledaju

Transformacije poput refleksija i rotacija napravljenih u Sketch-u nisu u potpunosti podržane u Android VectorDravable. Kao rezultat, transformirani slojevi ne izgledaju uvijek onako kako očekujete. Najlakše rješenje za to bilo bi jednostavno spljoštiti svaki put koji ima transformaciju, pa transformacija postaje dio puta.

Međutim, u situacijama kada se transformacije primjenjuju na čitave grupe, jedini način da se to postigne bilo bi ručno transformiranje i pozicioniranje svakog pojedinog sloja.

7. Transparenti su vaš prijatelj ...

Prozirne folije pravilno su podržane i prikazane na svim uređajima i platformama, koristite ih za stvaranje sjene / istaknutosti, ako je prikladno.

Obratite pažnju na sjenu ispod odrezaka

8.… a gradijenti nisu

S druge strane, AVD trenutno ne podržava gradijente. Ovako napravljena imovina gotovo će se sigurno slomiti tijekom uvoza. Korištenje sjenila celula treba koristiti u korist tehnika gradijentskih sjenčanja.

Ispada sjenka ispod odrezaka

9. Izvezite ploče, a ne slojevi

Korištenje graničnog okvira u Sketch-u za definiranje dimenzija vektorskog sredstva je tehnika stare škole. Iako je još uvijek korisna metoda definiranja granica za izvoz vektora, bolji je pristup stvaranju ploče s umjetničkim dimenzijama koja ima iste dimenzije kao i prikazno polje koje pokušavate definirati. Ograničavajući sloj okvira u sredstvu tretira se kao zaseban, ali transparentan put kad se prevodi u VectorDravable xml.

10. Izravnavanje oblika riješit će većinu problema

Izvezena imovina sadrži metapodatke koji opisuju njezine transformacije i sastave dok se uređuju, jer to upućuje na korisnike "kako" je stvorena. Međutim, kada je u pitanju izvoz i vraćanje ove imovine, ove vanjske informacije o tome kako su sastavljene često uzrokuju više problema nego što ih rješava (rotacije i refleksije izvedeni u Sketch-u nisu podržani), osim povećanja veličine datoteke.

Krajnje stanje imovine je jedino što se prikazuje, tako da je u ovom slučaju važno samo pojavljivanje krajnjeg stanja.

Izravnavanje oblika učinit će transformacije i operacije usmjerivača puta u imovinu. Ovo smanjuje veličinu datoteke uklanjanjem zastarjelih podataka i omogućuje vam precizan pregled slike.