Dünnheit und Dicke der Symbole. Sketch Pro, Rendering-Funktionen und ein Spiel mit Linienstärke

In diesem Artikel analysieren wir die Nuancen des Exportierens von Vektorsymbolen aus Grafikpaketen. Trotz der Tatsache, dass Vektorsymbole seit mehr als einem Jahr erfolgreich betrieben werden, gibt es immer noch unglückliche Situationen, in denen die Anzeige von Symbolen falsch ist: Die Dicke der Linien wird tanzen, Unschärfen werden angezeigt, die Verrundungen verschwinden oder umgekehrt - Verrundungen erscheinen dort, wo scharfe Ecken erwartet wurden.

Es gibt drei Hauptgründe: Funktionen (oder sogar Fehler) beim Exportieren und Optimieren von Symbolen aus Grafikpaketen, Funktionen und Renderfehler (wir konzentrieren uns auf das Rendern mit dem Chrome-Browser oder der Electron- Shell) und Fehler des Designers aufgrund von Unerfahrenheit. Im Grafikpaket selbst sah zwar alles gut aus (in diesem Fall ziehen wir Sketch in Betracht, aber es gibt überall ähnliche Probleme).




In den folgenden Fällen (und deren Kombinationen) treten in der Regel Verzerrungen auf den Symbolen auf:

1. Dünne (Einzelpixel-) Elemente (entweder verschwimmen oder die Linien brechen oder die Einzelpixellinie wird zu fett).
2. Die Füllbereiche füllen die Bereiche aus, die im Design leer sein sollten.
3. Das Symbol sieht auf dem Retina-Display gut aus, ist aber extrem schlecht - beim Anschließen eines externen Monitors. Es ist klar, dass ein Qualitätsverlust bei Nicht-Retina-Displays unvermeidlich ist, aber in einigen Fällen geht die "Pixelung" eindeutig über die Grenzen von Gut und Böse hinaus.

Für Websites sind kleine Kosyachki auf den Symbolen nicht besonders kritisch. Jeder ist daran gewöhnt, und selten ist jemand bereit, eine Menge Ressourcen für die Lösung sekundärer perfektionistischer Probleme aufzuwenden. In Anwendungen, insbesondere solchen, die häufig und häufig verwendet werden, wird dies möglicherweise sorgfältiger behandelt. Vor allem, wenn Sie auf einen Perfektionisten gestoßen sind (siehe Artikel " Arbeiten mit Einwänden bei der Demonstration von Design ").

Papierkorb in einer SVG-Datei und Optimierern

Wenn die Symbole beim Entladen einen Teil der Linien verlieren, sich drehen, in Komponenten zerlegen, ist es sinnvoll, in die SVG-Datei zu schauen. Dies ist für Programmierer kein Problem: Das Format selbst ist eine XML-Datei mit einer ziemlich klaren Struktur und einer Reihe von Befehlen zum Rendern von Inhalten. In einfachen Fällen können Sie anhand dieses Codes häufig nachvollziehen, was genau das "Grafik" -Paket beim Speichern "gespeichert" wurde. Zum Beispiel, um Bruchwerte zu sehen, wo sie offensichtlich nicht sein sollten. Oder zusätzliche Pfade. Oder irgendein Müll. Bearbeiten Sie die SVG-Datei von Hand - ein Amateurberuf, und er hat keine Aussichten. Es ist jedoch oft möglich zu verstehen, was genau in der Quelldatei schief gelaufen ist.

Bei der Arbeit mit dem klassischen Sketch + Zeplin-Bundle verschwindet das Problem des „Mülls“ in SVG-Dateien nicht nur nicht, sondern kann sich auch verschlimmern. Der Punkt ist, wie Zeplin den SVG-Dateicode über das integrierte Optimierungsprogramm ausführt. Nach dem von ihm generierten Code zu urteilen, wird wahrscheinlich SVGO verwendet.

Übrigens kann genau diese Bibliothek in späteren Phasen sehr häufig zu fehlerhaften Symbolen führen, beispielsweise beim Erstellen von Projekten über ein Webpack (genauer gesagt, Image-Webpack-Loader , der SVGO bereits auf der unteren Ebene verwendet). Müll kann bleiben, aber wichtige Elemente können weggeworfen werden. Wenn Sie plötzlich auf ein Problem mit defekten Symbolen stoßen, können Sie zunächst versuchen, das Optimierungsprogramm zu entfernen und festzustellen, ob das Problem behoben wurde.

Darüber hinaus liefern die Online-Version von Zeplin und seine Desktop-Anwendung beim Entladen unterschiedliche Ergebnisse. Während der Optimierung können abhängig vom Quellcode des Symbols wichtige Teile des Symbols verloren gehen. Und in verschiedenen Versionen auf unterschiedliche Weise. Es macht wütend.

Vergleichen Sie den Code - unter dem von Sketch heruntergeladenen Symbol, noch niedriger - aus der Online-Version von Zeplin. Es ist ersichtlich, dass im zweiten Fall Codeteile fehlten:




Und so sieht es aus:

Das erste Symbol wird direkt von Sketch heruntergeladen, das zweite aus der Online-Version von Zeplin, das dritte ist das, was es sein sollte

Renderfehler

Leider kann nicht nur der Designer, das Grafikpaket oder der Optimierer für die krummen Symbole verantwortlich sein. Je nachdem, welche Software für das Rendern verantwortlich ist, kann das Ergebnis sehr unterschiedlich sein. Es gibt auch ärgerliche Fehler, zum Beispiel beim Rendern des Chrome-Browsers gegen Aliasing von Einzelpixel-Zeilen - das Problem ist seit mindestens 2016 bekannt, aber es gibt noch keine Lösung (Oktober 2018). Sehr schade!

Einschränkungen und Hacks im Kampf um die Reinheit der Ikonen

Dann haben wir eine Reihe von Tipps, Einschränkungen und Life-Hacks gesammelt, die entweder dazu beitragen, die Probleme beim Rendern vollständig zu lösen oder zumindest ein anständiges Ergebnis zu erzielen.

1. Transformieren Sie keine Symbolelemente

Je mehr Transformationen mit dem Symbol (Skalierung, Drehung entlang der Achse oder horizontale / vertikale Reflexion) erfolgen, desto mehr Pfadattribute (oder einfach eine Folge von Punkten) werden im Code angezeigt. Mehr Pfade - wahrscheinlicher, dass die Symbole nach Optimierungen beim Rendern durch den Browser schief aussehen.


Anstelle des Symbols „Gruppen“ - etwas, das einem fünften Punkt ähnelt

2. Konvertieren Sie Elemente und Text vom Vektor in Konturen (In Konturen konvertieren).
und füge alle Ebenen mit Elementen zu einer zusammen (Formen kombinieren)

Wenn Sie den Text als Text und die Ebenen getrennt belassen, wird die Hauptfolge von Punkten (Pfad) wahrscheinlich in mehrere unterteilt, die beim Exportieren für sich selbst bestimmt sind.

3. Die Verhütungsregel: Benennen Sie jedes Symbol - einzigartig

Eine offensichtliche Regel für Programmierer. Leider kann es durch unerfahrene oder schlampige zu kreative Designer gestört werden. Wenn der Name eines Symbols mit einem anderen übereinstimmt, kann Sketch sie zu einem Objekt kombinieren. Denken Sie der Einfachheit halber an ein vernünftiges Benennungssystem. Beispielsweise kann der Name das Format Popup-Symbol-Schließen haben, wobei Popup der Block ist, in dem das Symbol verwendet wird, Symbol das Symbol selbst ist, Schließen ist das, was dieses Symbol bedeutet. Auch am Ende des Dateinamens können Sie seine Größe hinzufügen - zum Beispiel 16x16.

Wenn viele Symbole vorhanden sind und diese in mehreren Layouts wiederholt werden, ist es praktisch, jedes in ein Symbol umzuwandeln (Symbol erstellen). Wenn Sie die Größe oder Farbe des Symbols ändern, ändern sich diese Parameter für alle diese Symbole in allen Layouts. Die Exporteinstellungen für diese Symbole werden am besten auch innerhalb des Symbols festgelegt. Verwenden Sie Symbole professionell nicht nur für Symbole, sondern auch für alle gängigen Steuerelemente: Schaltflächen, Textfelder und Kontrollkästchen usw.

4. Installieren Sie SVGO Compressor direkt in Sketch

Dies ist ein Plugin, mit dem Sie optimierte Symbole direkt von Sketch herunterladen können. Dies hilft, den Optimierungsprozess zu steuern (und ihn nicht vom Webpack zum Optimierer fließen zu lassen). Wenn die Pfosten der Optimierung sofort sichtbar sind, können Sie den Quellcode des Symbols unmittelbar nach dem Entladen überprüfen, insbesondere wenn es komplex ist und aus mehreren Teilen besteht. In den meisten Fällen läuft beim Exportieren mit diesem Plugin alles reibungslos.

5. Wählen Sie beim manuellen Exportieren Symbole aus und setzen Sie die Eigenschaft Exportierbar machen auf diese.

Andernfalls kann ein Teil des Symbols beim Export wieder verloren gehen.

6. Deaktivieren Sie im Hintergrund die Option „In Export einbeziehen“

Andernfalls wird das Symbol zusammen mit einem weißen Hintergrund exportiert.

7. Wenn alles andere fehlschlägt: für jede Größe - ein eigenes Symbol

Das ist wildes Wild. Vektorsymbole wurden erfunden, um eines für verschiedene Größen zu verwenden. Leider gibt es Situationen, in denen nach der Skalierung ein vyrviglazny-Ergebnis erzielt wird. Seifenränder, bei denen klare Linien benötigt werden. Dies ist hauptsächlich auf die Tatsache zurückzuführen, dass beim Skalieren einige Linien auf gebrochene Pixelwerte fallen. Wenn das Basissymbol beispielsweise 16 × 16 und die Ableitung 24 × 24 war (mit Zweierpotenzen ist fast immer alles in Ordnung, aber es gibt Ausnahmen mit vertikalen Mittellinien). In solchen Situationen können Sie sich entweder einigen oder leider müssen Sie die Symbole für jede der verwendeten Größen mit den Händen bringen.

Wenn Sie ein Symbol gemäß diesen 7 Regeln erstellen, ist der Export auch über das Zeplin-Plug-In erfolgreich. Aber selbst wenn Sie eine schöne SVG-Quelle des Symbols erhalten und das Symbol nicht auseinander fällt und sich bei der Anzeige im Browser nicht verformt, garantiert dies nicht, dass auf Bildschirmen mit unterschiedlicher Dichte alles in Ordnung ist.

Angenommen, Sie haben auf Ihrem MacBook alles auf ein Retina-Display überprüft. Versuchen Sie, einen mehr oder weniger durchschnittlichen externen Monitor anzuschließen. Höchstwahrscheinlich sind Linien mit 1 Pixel verschwommen. Einfache Mathematik: Wenn Sie eine 1 Pixel dicke Linie in der Mitte eines 4 × 4-Pixel-Quadrats zeichnen, fällt die Linie bei der Anzeige zwischen die Pixel und verwischt. Wenn die Dicke der Linie nicht durch eine Ganzzahl angegeben wird - dasselbe.

Weitere Informationen zu diesen Problemen finden Sie hier . Als Option zur Lösung des Problems - Symbolvorlagen für Anwendungen von Bjango : Ihr Reiz ist, dass sie die Spezifikationen für Android, iOS, MacOS, TVOS, WatchOS, Windows, Windows Phone usw. sofort berücksichtigen. Sie können sie zumindest als Referenz verwenden. Weitere Informationen zur Liste der Spezifikationen für verschiedene Geräte finden Sie in Google Device Metrics. Sie können die Bildschirmgröße, Pixeldichte und sogar die ungefähre Entfernung ermitteln, in der sich der Bildschirm von den Augen des Benutzers befindet. Eine weitere Möglichkeit, das Problem zu lösen, ist das Designerhandbuch zu DPI und PPI . Es wird Ihnen helfen, noch mehr Feinheiten und praktische Techniken für Designer auf Android und iOS zu lernen.

Gewusst wie:




Wie man nicht:




Übrigens haben wir auf vielen Websites und in Anwendungen Einzelpixel-Symbole auf einem Display mit durchschnittlicher Qualität überprüft - und wir haben hauptsächlich „Seife“ gesehen. Das heißt, die Lösung „Zurücktreten“ ist sehr beliebt, da das Lösen dieses Problems und das Anpassen der Symbole der Weg der Hartnäckigen ist (sehr zeitaufwändig). Die zweitbeliebteste Lösung ist die Verwendung einer Linienbreite von mindestens 2 Pixel (dies ist das, was Google an vielen Stellen tut). Für hartnäckige Perfektionisten mit einem großen Zeitbudget für Projekte liefert eine Lösung mit einer Anpassung an jede Größe die klarsten Ergebnisse.



Unabhängig davon stellen wir fest, dass es sich lohnt, nicht nur das Kontur-Rendering, sondern auch die Füllbereiche zu überprüfen. Insbesondere, wenn die Symbole im Paar "Gefülltes Symbol + Umriss" verwendet werden (z. B. beim Hover).

Exportsymbole (Affinität, Illustrator usw.)

Da das Verbot, Objekte in Sketch umzuwandeln, viel Zeit in Anspruch nimmt, um alle Elemente trostlos zu zeichnen, ist es für einige Designer bequemer, Symbole beispielsweise in Affinity zu zeichnen und sie dann in Sketch hochzuladen.

Alles ist ziemlich einfach:

1. Rendern Sie Affinitätssymbole in einem Pixelraster! Alles für das Gleiche: Damit es nicht zu Verwischungen der Grenzen aufgrund von Fehlern im Raster kommt.
2. Wählen Sie das Symbol in Affinität und kopieren Sie es in die Skizze.
3. Es besteht die Möglichkeit, dass sich die Größe in Sketch innerhalb weniger Pixel unterscheidet. Verwenden Sie dann das Skalierungswerkzeug für die gewünschte Größe und überprüfen Sie, ob die Größe und Dicke der Linien ganzzahlig bleiben.
4. Konvertieren Sie Elemente und Schriftarten in Konturen. Überprüfen Sie erneut Größe und Position.
5. Ebenen zusammenführen.
6. Legen Sie die Eigenschaft Exportierbar machen fest und wählen Sie das Symbol auf der Zeichenfläche aus.
7. Export - voila, Sie haben die perfekte SVG-Datei mit einem einzigen Pfad, der sich sehr vorhersehbar verhält.

Schlussfolgerungen

In den meisten Fällen verursachen kleine Verzerrungen der Symbole, die entweder durch die Besonderheit des Renderns durch den Designer oder durch das Entladen oder Optimieren oder durch die Nuancen des Renderns verursacht werden, keine Beschwerden. Am Ende werden die meisten Symbole aus Symbolpaketen entnommen und "wie sie sind" verwendet. Es gibt jedoch Situationen, in denen eine subtile Abstimmung und Anpassung gerechtfertigt ist. Zum Beispiel, wenn Sie eine Anwendung auf der Electron-Plattform erstellen und auf allen Plattformen maximale Klarheit erzielen möchten. In jedem Fall ist es für Designer sinnvoll, zu einem gemeinsamen Arbeitsstil mit Symbolen zu gelangen (Sie können beispielsweise unsere einfache Checkliste als Grundlage verwenden).

Viel Glück!