10 padomi vektoru aktīvu eksportēšanai no Sketch uz Android

Pārnēsātāju priekšrocības rastram ir acīmredzamas. Vektoru aktīvi ir mazāki, viegli rediģējami un daudz vieglāk pārvaldāmi (īpaši lieluma un krāsas ziņā).

Es strādāju pie salīdzinoši sarežģītas lietojumprogrammas, kas atbalsta daudzas dažādas platformas. Pieaugot ekrāna izmēriem un izšķirtspējai (skatoties uz jums, Nexus 6P) operētājsistēmai Android, mēs uzskatījām, ka ir nepieciešams atjaunināt esošos aktīvus no rastra uz vektoru formātiem, lai saglabātu aktīvus pielāgojamību, jo ir nepieciešams atbalstīt dažādas izšķirtspējas.

Lielākā daļa aktīvu, kurus mēs šobrīd izmantojam, sākotnēji tika izveidoti, izmantojot skici. Mēģinot pārveidot, tas radīja dažas interesantas problēmas. Tā kā vektora aktīvus tikai daļēji atbalsta Android pašreizējā API (Android 24), eksportētie aktīvi sabojājās daudzos neparedzētos veidos.

No dizainera viedokļa tā kalpo kā izmeklēšanas dienasgrāmata attiecībā uz dažām lietām, kuras mēs uzzinājām, mēģinot pārveidot visus lietotnes rastra aktīvus Android pārnēsātājiem. Android Studio lietotāja rokasgrāmatas nebija īpaši noderīgas problēmu novēršanā.

Ne gluži “Pilns atbalsts”

Daudzi šeit uzrakstītie noteikumi attiecas tikai uz vektoru aktīvu eksportēšanu, izmantojot skici. Tomēr tās ir arī labas vadlīnijas tīru un funkcionālu vektoru aktīvu eksportēšanai lietošanai visās platformās.

1. Turiet to vienkārši stulbi

Šis programmatūras izstrādes pamatprincips attiecas arī uz aktīviem: jo vienkāršākas formas, jo labāk. Izmēģiniet un izmantojiet vienkāršas formas, lai izveidotu nepieciešamos sarežģītos aktīvus. Vispārējs īkšķa noteikums ir, jo mazāk ceļu un enkuru tiek izmantots, jo “tīrāks” tas ir. Lai izveidotu aktīvu, vienmēr ir vēlams izmantot vienu formu, nevis vairākas formas, kas pārklājas.

2. Izvairieties no masku lietošanas

Android API pašreizējā versijā netiek atbalstītas maskas, kas izgatavotas, izmantojot skici. Jebkura skices maskēšana tiek ignorēta Android VectorDrawble (AVD), un skicē izgatavotās maskas dažreiz sagrauj Adobe Illustrator. Ja rodas situācija, kad ir jāizveido ēnojošs efekts, par labu maskām jāizmanto esošā slāņa augšdaļa, kas pārklājas.

Lai izveidotu vajadzīgo formu, izmantojiet ceļa meklētāja darbību “Intersect” ēnojuma slānī ar pamata kārtu

3. Izveidojiet kontūras, nevis sitienus

Situācijās, kad tas ir iespējams, mēģiniet izvairīties no insultu izmantošanas, lai izveidotu vēlamās formas. Svītrojumi ne vienmēr tiek atbilstoši pielāgoti pārējam attēlam. Turklāt AVD nenošķir dažādas robežu pozīcijas un visas robežas traktē kā “centra” sitienus.

Ko tas nozīmē, ka Skices 10 biezuma iekšējā robeža kļūst par vidējo gājienu ar biezumu 20, kad tiek atveidota AVD.

Tā kā kontūras ir formas, mērogojot vai pārveidojot tās vienmēr parāda vēlamo izskatu. Arī kontūras ir daudz vieglāk strādāt, ja vēlaties izmantot ceļa meklētāja darbības.

Izmantojot CMD + Shift + O, varat viegli mainīt insultu kontūrās.

4. Ceļu meklētāji ir tavs draugs

Sarežģītākās formas var izveidot no vienkāršāku formu kompozīcijas, izmantojot ceļa meklētāja darbības. Iepazīstiet viņus. Šādi izveidotas formas var pareizi parādīt katrā ierīcē.

5. Labākais problēmu novēršanas rīks ir Adobe Illustrator

Adobe Illustrator pārveido vektoru aktīvus tāpat kā Android VectorDravable (no anekdotiskas pieredzes). Ja aktīvs netiek pareizi parādīts AVD, mēģiniet diagnosticēt problēmu, izmantojot Illustrator. Bieži vien risinājums ir tikpat vienkāršs kā aizpildīšanas noņemšana.

Izplatīta problēma aktīvu eksportēšanai uz Android, izmantojot skici.

6. Kombinētās un pārveidotās formas var neparādīties tādas, kā izskatās

Pārveidojumi, piemēram, atstarojumi un griešanās, kas veikti skicē, netiek pilnībā atbalstīti operētājsistēmā Android VectorDravable. Tā rezultātā pārveidotie slāņi ne vienmēr parādās tā, kā jūs sagaidāt. Vienkāršākais risinājums tam būtu vienkārši saplacināt katru ceļu, kuram ir transformācija, tāpēc transformācija kļūst par ceļa daļu.

Tomēr situācijās, kad pārvērtības tiek piemērotas veselām grupām, vienīgais veids, kā to novērst, būtu manuāli pārveidot un novietot katru atsevišķo slāni.

7. Transparenti ir jūsu draugs ...

Transparenti tiek pareizi atbalstīti un parādīti visās ierīcēs un platformās, vajadzības gadījumā izmantojiet tos ēnu / izcēlumu izveidošanai.

Ņemiet vērā kritumu ēnu zem steika

8.… un slīpumi nav

No otras puses, AVD pašlaik neatbalsta slīpumus. Šādi izgatavoti aktīvi importēšanas laikā gandrīz noteikti sabojāsies. Celts ēnojums jāizmanto par labu gradientu ēnošanas paņēmieniem.

Pazūd ēna zem steika

9. Eksportējiet tāfeles, nevis slāņus

Vecās skolas paņēmiens ir izmantot iesiešanas rūtiņu Skicē, lai noteiktu vektora aktīva dimensijas. Lai gan tā joprojām ir izmantojama metode, kā noteikt robežas vektoru eksportēšanai, labāka pieeja ir izveidot artboard, kura izmēri ir tādi paši kā skata logam, kuru jūs mēģināt definēt. Aktīva iesiešanas kastes slānis tiek apstrādāts kā atsevišķs, bet caurspīdīgs ceļš, kad tas tiek tulkots uz VectorDravable xml.

10. Formu saplacināšana atrisinās lielāko daļu problēmu

Eksportētajos aktīvos ir metadati, kas apraksta to pārvērtības un kompozīcijas rediģēšanas laikā, jo tas lietotājiem norāda, kā tas tika izveidots. Tomēr, kad runa ir par šo aktīvu eksportēšanu un renderēšanu, papildus informācijai par faila lieluma palielināšanu šī svešā informācija par tā sastādīšanu bieži rada vairāk problēmu nekā atrisina (skicē veiktās rotācijas un refleksijas netiek atbalstītas).

Aktīva beigu stāvoklis ir vienīgais, kas tiek parādīts, un tāpēc šajā gadījumā ir svarīgs tikai beigu stāvokļa izskats.

Formas saplacināšana pārveidos un ceļveža operācijas padarīs aktīvu. Tas samazina faila lielumu, noņemot novecojušu informāciju, un ļauj precīzi priekšskatīt attēlu.