10 tips voor het exporteren van vectoractiva van Sketch naar Android

De voordelen van vectoren voor rasters zijn duidelijk. Vectorelementen zijn kleiner, gemakkelijk bewerkbaar en veel eenvoudiger te beheren (met name qua grootte en kleur).

Ik werk aan een relatief complexe applicatie die veel verschillende platforms ondersteunt. Met de groeiende schermgroottes en resoluties (kijkend naar jou, Nexus 6P) voor Android, vonden we het noodzakelijk om de bestaande activa bij te werken van raster- naar vectorindelingen om de activa schaalbaar te houden vanwege de noodzaak om verschillende resoluties te ondersteunen.

De meeste middelen die we momenteel gebruiken, zijn oorspronkelijk gemaakt met Sketch. Dit veroorzaakte een aantal interessante problemen tijdens het proberen van de conversie. Aangezien vectoractiva slechts gedeeltelijk worden ondersteund door Android in de huidige API (Android 24), braken de geëxporteerde activa op veel onverwachte manieren.

Dit dient als een onderzoeksdagboek vanuit het oogpunt van een ontwerper, voor een paar dingen die we hebben geleerd tijdens het proberen alle rasterelementen in de app te converteren naar vectoren voor Android. De gebruikershandleidingen voor Android Studio waren niet bijzonder nuttig bij het oplossen van problemen.

Niet helemaal

Veel van de hier geschreven regels zijn specifiek voor het exporteren van vectorelementen met Sketch. Ze zijn echter ook goede richtlijnen voor het exporteren van schone en functionele vectorelementen voor gebruik op alle platforms.

1. Houd het simpel dom

Dit kernprincipe voor softwareontwerp is ook van toepassing op bedrijfsmiddelen: hoe eenvoudiger de vormen, hoe beter. Probeer en gebruik eenvoudige vormen om de complexe elementen te maken die u nodig hebt. De algemene vuistregel is dat hoe minder paden en ankers worden gebruikt, hoe 'schoner' het is. Het gebruik van een enkele vorm heeft altijd de voorkeur boven het gebruik van meerdere overlappende vormen om een ​​actief te maken.

2. Vermijd het gebruik van maskers

Maskers gemaakt met Sketch worden niet ondersteund door de huidige versie van Android API. Alle maskers die in Sketch zijn gemaakt, worden genegeerd door Android VectorDrawble (AVD) en maskers die in Sketch worden gemaakt, laten Adobe Illustrator soms crashen. Als er een situatie is waarbij een schaduweffect moet worden gemaakt, moet een overlappende vorm op de bestaande laag worden gebruikt ten gunste van maskers.

Gebruik de pathfinder-bewerking

3. Maak contouren, geen lijnen

Probeer in situaties waar mogelijk te voorkomen dat u slagen gebruikt om de gewenste vormen te maken. Slagen schalen niet altijd goed met de rest van de afbeelding. Bovendien maakt AVD geen onderscheid tussen de verschillende randposities en behandelt alle randen als "middelste" lijnen.

Dit betekent dus dat een binnenrand van dikte 10 op Sketch een middelste lijn van dikte 20 wordt wanneer deze wordt weergegeven op AVD.

Omdat contouren vormen zijn, vertonen ze altijd het gewenste uiterlijk wanneer ze worden geschaald of getransformeerd. Omtrekken zijn ook veel gemakkelijker om mee te werken als u pathfinder-bewerkingen wilt toepassen.

U kunt lijnen eenvoudig in contouren veranderen met CMD + Shift + O.

4. Pathfinders zijn je vriend

De meeste complexe vormen kunnen worden gemaakt op basis van een compositie van eenvoudigere vormen met behulp van de pathfinder-bewerkingen. Maak kennis met hen. Op deze manier gemaakte vormen kunnen op elk apparaat correct worden weergegeven.

5. Adobe Illustrator is de beste probleemoplosser

Adobe Illustrator geeft vectoractiva op dezelfde manier weer als VectorDrawable van Android (vanuit anekdotische ervaring). Als een item niet correct wordt weergegeven in AVD, probeer dan het probleem te diagnosticeren met Illustrator. Vaak is de oplossing zo simpel als het verwijderen van een invulling.

Een veel voorkomend probleem bij het exporteren van middelen voor Android met Sketch.

6. Gecombineerde en getransformeerde vormen verschijnen mogelijk niet zoals ze lijken

Transformaties zoals reflecties en rotaties in Sketch worden niet volledig ondersteund in Android VectorDrawable. Als gevolg hiervan zien getransformeerde lagen er niet altijd uit zoals u van ze verwacht. De eenvoudigste oplossing hiervoor is om elk pad met een transformatie gewoon af te vlakken, zodat de transformatie een deel van het pad wordt.

In situaties waarin transformaties worden toegepast op hele groepen, is de enige manier om dit te omzeilen, om elke afzonderlijke laag handmatig te transformeren en te positioneren.

7. Transparanten zijn je vriend ...

Transparanten worden op de juiste manier ondersteund en weergegeven op alle apparaten en platforms, gebruik ze om schaduwen / highlights te maken waar nodig.

Let op de slagschaduw onder de biefstuk

8. ... en verlopen niet

Aan de andere kant ondersteunt AVD momenteel geen verlopen. De activa die op deze manier zijn gemaakt, zullen vrijwel zeker tijdens de import breken. Celarcering moet worden gebruikt ten gunste van gradiëntschaduwtechnieken.

Slagschaduw onder de biefstuk verdwijnt

9. Export tekengebieden, geen lagen

Het gebruik van een selectiekader in Sketch om de afmetingen van een vectorelement te definiëren is een old-school techniek. Hoewel het nog steeds een bruikbare methode is om grenzen voor het exporteren van vectoren te definiëren, is de betere aanpak om een ​​tekengebied te maken met dezelfde afmetingen als de viewport die u probeert te definiëren. De grens van het selectiekader in het activum wordt behandeld als een afzonderlijk, maar transparant pad wanneer dit wordt vertaald naar VectorDrawable xml.

10. Het afvlakken van vormen lost de meeste problemen op

Geëxporteerde items bevatten metagegevens die de transformaties en composities beschrijven terwijl deze worden bewerkt, omdat dit gebruikers vertelt over "hoe" het is gemaakt. Als het echter gaat om het exporteren en weergeven van deze middelen, veroorzaakt deze overbodige informatie over hoe het is samengesteld vaak meer problemen dan het oplost (rotaties en reflecties die in Sketch worden uitgevoerd worden niet ondersteund), naast het vergroten van de bestandsgrootte.

De eindstatus van het activum is het enige dat wordt getoond, en dus is in dit geval alleen het uiterlijk van de eindstaat van belang.

Als u een vorm afvlakt, worden transformaties en pathfinder-bewerkingen omgezet in het item. Dit verkleint de bestandsgrootte door verouderde informatie te verwijderen en stelt u in staat om een ​​nauwkeurig voorbeeld van de afbeelding te bekijken.