10 Tipps zum Exportieren von Vektorobjekten von Sketch nach Android

Die Vorteile von Vektoren gegenüber Rastern liegen auf der Hand. Vektorassets sind kleiner, leicht bearbeitbar und viel einfacher zu verwalten (insbesondere in Bezug auf Größe und Farbe).

Ich arbeite an einer relativ komplexen Anwendung, die viele verschiedene Plattformen unterstützt. Angesichts der wachsenden Bildschirmgrößen und Auflösungen (Sie sehen Nexus 6P) für Android erschien es uns erforderlich, die vorhandenen Assets von Raster- auf Vektorformate zu aktualisieren, um die Assets skalierbar zu halten, da unterschiedliche Auflösungen unterstützt werden müssen.

Die meisten der derzeit verwendeten Elemente wurden ursprünglich mit Sketch erstellt. Dies verursachte einige interessante Probleme beim Versuch der Konvertierung. Da Vektor-Assets von Android in der aktuellen API (Android 24) nur teilweise unterstützt werden, wurden die exportierten Assets auf viele unerwartete Arten zerstört.

Dies dient aus Sicht eines Designers als Ermittlungstagebuch für einige Dinge, die wir gelernt haben, als wir versuchten, alle Raster-Assets in der App in Vektoren für Android umzuwandeln. Die Android Studio-Benutzerhandbücher waren bei der Fehlerbehebung nicht besonders hilfreich.

Nicht ganz

Viele der hier geschriebenen Regeln beziehen sich speziell auf das Exportieren von Vektorassets mit Sketch. Sie sind jedoch auch gute Richtlinien für den Export sauberer und funktionaler Vektorassets zur Verwendung auf allen Plattformen.

1. Halten Sie es einfach dumm

Dieses Grundprinzip für das Softwaredesign gilt auch für Assets: Je einfacher die Formen, desto besser. Versuchen Sie, mit einfachen Formen die komplexen Assets zu erstellen, die Sie benötigen. Die allgemeine Faustregel lautet: Je weniger Pfade und Anker verwendet werden, desto „sauberer“ ist es. Die Verwendung einer einzelnen Form ist immer der Verwendung mehrerer überlappender Formen zum Erstellen eines Assets vorzuziehen.

2. Vermeiden Sie die Verwendung von Masken

Mit Sketch erstellte Masken werden von der aktuellen Version der Android-API nicht unterstützt. In Sketch erstellte Maskierungen werden von Android VectorDrawble (AVD) ignoriert, und in Sketch erstellte Masken führten manchmal zum Absturz von Adobe Illustrator. In Situationen, in denen ein Schattierungseffekt erzeugt werden muss, sollte eine überlappende Form über der vorhandenen Ebene zugunsten von Masken verwendet werden.

Verwenden Sie die Pathfinder-Operation „Verschneiden“ auf der Schattierungsebene mit der Basisebene, um die gewünschte Form zu erstellen

3. Machen Sie Umrisse, keine Striche

Vermeiden Sie in Situationen, in denen dies möglich ist, die Verwendung von Strichen, um die gewünschten Formen zu erstellen. Striche werden nicht immer richtig mit dem Rest des Bildes skaliert. Außerdem unterscheidet AVD nicht zwischen den verschiedenen Randpositionen und behandelt alle Ränder als „Mittelstriche“.

Das bedeutet also, dass ein innerer Rand der Dicke 10 in Sketch zu einem Mittelstrich der Dicke 20 wird, wenn er in AVD gerendert wird.

Da es sich bei Konturen um Formen handelt, weisen sie beim Skalieren oder Transformieren immer das gewünschte Erscheinungsbild auf. Umrisse sind auch viel einfacher zu bearbeiten, wenn Sie Pathfinder-Operationen anwenden möchten.

Mit CMD + Umschalt + O können Sie Konturen ganz einfach in Konturen umwandeln.

4. Pathfinder sind dein Freund

Die meisten komplexen Formen können mithilfe der Pathfinder-Operationen aus einer Komposition einfacherer Formen erstellt werden. Machen Sie sich mit ihnen vertraut. Auf diese Weise erstellte Formen können auf jedem Gerät korrekt angezeigt werden.

5. Adobe Illustrator ist die beste Fehlerbehebung

Adobe Illustrator rendert Vektorobjekte auf dieselbe Weise wie VectorDrawable von Android (aus anekdotischer Erfahrung). Wenn ein Asset in AVD nicht richtig angezeigt wird, versuchen Sie, das Problem mit Illustrator zu diagnostizieren. Oft ist die Lösung so einfach wie das Entfernen einer Füllung.

Ein häufiges Problem beim Exportieren von Assets für Android mithilfe von Sketch.

6. Kombinierte und transformierte Formen werden möglicherweise nicht so angezeigt, wie sie aussehen

In Sketch vorgenommene Transformationen wie Reflexionen und Rotationen werden in Android VectorDrawable nicht vollständig unterstützt. Aus diesem Grund werden transformierte Ebenen nicht immer so angezeigt, wie Sie es erwarten. Die einfachste Lösung hierfür wäre, einfach jeden Pfad zu reduzieren, für den eine Transformation vorliegt, sodass die Transformation Teil des Pfads wird.

In Situationen, in denen Transformationen auf ganze Gruppen angewendet werden, besteht die einzige Möglichkeit, dies zu umgehen, darin, jede einzelne Ebene manuell zu transformieren und zu positionieren.

7. Folien sind dein Freund ...

Transparenzen werden ordnungsgemäß unterstützt und auf allen Geräten und Plattformen angezeigt. Verwenden Sie diese, um gegebenenfalls Schatten und Lichter zu erzeugen.

Beachten Sie den Schlagschatten unter dem Steak

8.… und Farbverläufe nicht

Andererseits unterstützt AVD derzeit keine Farbverläufe. Die auf diese Weise erstellten Assets brechen mit ziemlicher Sicherheit beim Import. Cel Shading sollte zugunsten von Gradientenschattierungstechniken verwendet werden.

Schlagschatten unter dem Steak verschwindet

9. Exportieren Sie Zeichenflächen, keine Ebenen

Die Verwendung eines Begrenzungsrahmens in Sketch zum Definieren der Abmessungen eines Vektor-Assets ist eine alte Technik. Obwohl es immer noch eine brauchbare Methode zum Definieren von Grenzen für den Export von Vektoren ist, sollten Sie eine Zeichenfläche mit den gleichen Abmessungen wie das Ansichtsfenster erstellen, das Sie definieren möchten. Die Begrenzungsrahmenebene im Asset wird bei der Übersetzung in VectorDrawable-XML als separater, aber transparenter Pfad behandelt.

10. Das Abflachen von Formen löst die meisten Probleme

Exportierte Assets enthalten Metadaten, die die Transformationen und Kompositionen beschreiben, während sie bearbeitet werden, da dies den Benutzern mitteilt, wie sie erstellt wurden. Beim Exportieren und Rendern dieser Assets verursachen diese irrelevanten Informationen zu ihrer Zusammensetzung jedoch häufig mehr Probleme als sie lösen (in Sketch durchgeführte Rotationen und Reflexionen werden nicht unterstützt). Außerdem wird die Dateigröße erhöht.

Es wird nur der Endzustand des Assets angezeigt. In diesem Fall ist nur das Erscheinungsbild des Endzustands von Bedeutung.

Durch Reduzieren einer Form werden Transformationen und Pfadfinderoperationen in das Asset gerendert. Dadurch wird die Dateigröße reduziert, indem veraltete Informationen entfernt werden, und Sie können eine genaue Vorschau des Bildes anzeigen.