10 consigli per esportare risorse vettoriali da Sketch ad Android

I vantaggi dei vettori rispetto ai raster sono evidenti. Le risorse vettoriali sono più piccole, facilmente modificabili e molto più facili da gestire (in particolare in termini di dimensioni e colore).

Lavoro su un'applicazione relativamente complessa che supporta molte piattaforme diverse. Con le crescenti dimensioni e risoluzioni dello schermo (guardando a te, Nexus 6P) per Android, abbiamo ritenuto necessario aggiornare le risorse esistenti da formati raster a formati vettoriali per mantenere scalabili le risorse a causa della necessità di supportare risoluzioni diverse.

La maggior parte delle risorse che attualmente utilizziamo sono state originariamente create utilizzando Sketch. Ciò ha causato alcuni problemi interessanti durante il tentativo di conversione. Poiché le risorse vettoriali sono supportate solo parzialmente da Android nell'attuale API (Android 24), le risorse esportate si sono rotte in molti modi inaspettati.

Questo funge da diario investigativo dal punto di vista di un designer, per un paio di cose che abbiamo imparato cercando di convertire tutti i beni raster nell'app in vettori per Android. Le guide per l'utente di Android Studio non sono state particolarmente utili quando si tratta di risoluzione dei problemi.

Non proprio

Molte delle regole scritte qui sono specifiche per esportare risorse vettoriali usando Sketch. Tuttavia, sono anche buone linee guida per l'esportazione di risorse vettoriali pulite e funzionali da utilizzare su tutte le piattaforme.

1. Keep it Simple Stupid

Questo principio fondamentale per la progettazione del software si applica anche agli asset: più semplici sono le forme, meglio è. Prova a utilizzare forme semplici per creare le risorse complesse di cui hai bisogno. La regola generale è, minore è il numero di percorsi e ancore, più "pulito" è. L'utilizzo di una singola forma è sempre preferibile all'uso di più forme sovrapposte per creare una risorsa.

2. Evitare l'uso di maschere

Le maschere realizzate con Sketch non sono supportate dalla versione corrente dell'API Android. Eventuali mascherature realizzate in Sketch vengono ignorate da Android VectorDrawble (AVD) e le maschere realizzate in Sketch talvolta bloccano Adobe Illustrator. Se c'è una situazione in cui è necessario creare un effetto di ombreggiatura, una forma sovrapposta sopra il livello esistente dovrebbe essere utilizzata a favore delle maschere.

Utilizzare l'operazione Pathfinder

3. Crea contorni, non tratti

Laddove possibile, cerca di evitare di usare i tratti per creare le forme desiderate. I tratti non si adattano sempre correttamente al resto dell'immagine. Inoltre, AVD non distingue tra le diverse posizioni dei bordi e tratta tutti i bordi come tratti "centrali".

Ciò significa che un bordo interno di spessore 10 su Sketch diventa un tratto centrale di spessore 20 quando viene eseguito il rendering su AVD.

Poiché i contorni sono forme, esibiscono sempre l'aspetto desiderato quando ridimensionati o trasformati. I contorni sono anche molto più facili da utilizzare se si desidera applicare le operazioni di Pathfinder.

Puoi facilmente cambiare i tratti in contorni usando CMD + Maiusc + O.

4. I Pathfinder sono tuoi amici

Le forme più complesse possono essere create da una composizione di forme più semplici utilizzando le operazioni del pathfinder. Familiarizzare con loro. Le forme create in questo modo possono essere visualizzate correttamente su ogni dispositivo.

5. Adobe Illustrator è il miglior strumento per la risoluzione dei problemi

Adobe Illustrator esegue il rendering delle risorse vettoriali allo stesso modo di VectorDrawable di Android (per esperienza aneddotica). Se una risorsa non viene visualizzata correttamente in AVD, prova a diagnosticare il problema utilizzando Illustrator. Spesso la soluzione è semplice come rimuovere un riempimento.

Un problema comune per l'esportazione di risorse per Android utilizzando Sketch.

6. Le forme combinate e trasformate potrebbero non apparire come sembrano

Trasformazioni come riflessi e rotazioni eseguite in Sketch non sono completamente supportate in Android VectorDrawable. Di conseguenza, i livelli trasformati non appaiono sempre nel modo previsto. La soluzione più semplice sarebbe quella di appiattire ogni percorso che ha una trasformazione, quindi la trasformazione diventa parte del percorso.

Tuttavia, nelle situazioni in cui le trasformazioni vengono applicate a interi gruppi, l'unico modo per aggirare il problema sarebbe quello di trasformare manualmente e posizionare ogni singolo livello.

7. I lucidi sono i tuoi amici ...

I lucidi sono adeguatamente supportati e visualizzati su tutti i dispositivi e piattaforme, usali per creare ombre / luci laddove appropriato.

Nota l'ombra esterna sotto la bistecca

8. ... e gradienti non lo sono

D'altra parte, AVD attualmente non supporta i gradienti. Le risorse create in questo modo si romperanno quasi certamente durante l'importazione. L'ombreggiatura Cel dovrebbe essere utilizzata a favore delle tecniche di sfumatura gradiente.

Scende l'ombra sotto la bistecca

9. Esporta le tavole da disegno, non i livelli

L'uso di un rettangolo di selezione in Sketch per definire le dimensioni di una risorsa vettoriale è una tecnica di vecchia scuola. Sebbene sia ancora un metodo utile per definire i limiti per l'esportazione di vettori, l'approccio migliore è quello di creare una tavola da disegno che abbia le stesse dimensioni della finestra che si sta tentando di definire. Il livello del riquadro di delimitazione nell'asset viene trattato come un percorso separato, ma trasparente quando tradotto in VectorDrawable xml.

10. Le forme appiattenti risolveranno la maggior parte dei problemi

Le risorse esportate contengono metadati che descrivono le sue trasformazioni e composizioni durante la modifica, poiché ciò indica agli utenti come "come" è stato creato. Tuttavia, quando si tratta di esportare e rendere queste risorse, queste informazioni estranee su come è stata composta spesso causano più problemi di quanti ne risolva (le rotazioni e le riflessioni eseguite in Sketch non sono supportate), oltre ad aumentare le dimensioni del file.

Lo stato finale dell'asset è l'unica cosa mostrata, quindi in questo caso conta solo l'aspetto dello stato finale.

L'appiattimento di una forma renderà trasformazioni e operazioni del pathfinder nell'asset. Ciò riduce le dimensioni del file rimuovendo informazioni obsolete e consente di visualizzare in anteprima l'immagine con precisione.