Advertisement
  1. Web Design
  2. Sketch

Wie man benutzerfreundliche und wiederverwendbare Skizzendateien erstellen kann

by
Read Time:11 minsLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Vor einiger Zeit haben wir ein Tutorial zum Erstellen einer benutzerdefinierten Skizzendatei mit wiederverwendbaren Flussdiagrammen veröffentlicht. Es ist eine großartige Ressource zum Erstellen eigener Benutzerflüsse oder Sitemaps. In diesem Tutorial werden wir diese Skizzendatei verbessern, um sie für andere benutzerfreundlicher zu machen.

Vielleicht haben Sie Kollegen, die Ihre Datei verwenden möchten, oder zahlende Kunden. In jedem Fall bedeuten die Verbesserungen, die wir an der Datei vornehmen, dass andere sie öffnen, verstehen und verwenden können.

Ich empfehle Ihnen, das Original-Tutorial durchzulesen. Nehmen Sie zumindest die endgültige Skizzendatei, um mit dem rechten Fuß zu beginnen, und folgen Sie diesem zweiten Teil. Dieses Tutorial ist vollgepackt mit Sketch-Tipps und Tricks, einigen Pro-Tipps hier und da sowie einigen verwandten Plugins, die Sie selbst ausprobieren müssen.

Das Benutzerhandbuch

Als erstes richten wir eine neue Seite ein. Ich nenne mein "Benutzerhandbuch". Diese Seite dient als kurze Anleitung zur Verwendung der Flussdiagrammelemente. Wir werden es verwenden, um die Rolle jedes Elements zu erklären, wie man sie verwendet und wie man ihre Eigenschaften wie die Startpunkte für Pfeile manipuliert.

"Wie man die Pfeile benutzt"

Wir beginnen mit einer neuen Zeichenfläche. Ich nenne meine "Verwendung von Pfeilen". Drücken Sie A, um eine neue Zeichenfläche zu erstellen, und wählen Sie in der oberen rechten Ecke Papiergröße und Buchstabe aus. Sketch platziert automatisch die Zeichenfläche in der richtigen Größe für Sie (dies funktioniert auch mit Desktop- und mobilen Bildschirmgrößen!).

Paper sizes for Artboards in SketchPaper sizes for Artboards in SketchPaper sizes for Artboards in Sketch
Papierformate für Zeichenflächen in Sketch

Ich möchte, dass neue Benutzer einige Dinge verstehen, darunter das Auswählen einer Linie und das Platzieren auf einer Zeichenfläche, das Ändern ihrer Form sowie das Ändern ihrer Start- und Endpunkte. Wie Sie diese Dinge erklären, ist Ihre Wahl; Die spezifischen Beschreibungen und Anweisungen liegen bei Ihnen. Ich habe meine Beschreibungen um einige Screenshots erweitert.

Organisierung von den Textstilen

Genau wie bei Symbolen oder Ebenenstilen können wir auch Textstile organisieren. Für diese Handbuchseiten habe ich drei verschiedene Textstile: H1, H2 und body.

Mein H1 ist Helvetica Neue, Regular, 24px groß mit einer Zeilenhöhe von 30px. Der H2 ist Helvetica Neue, Bold, 14px groß mit einer Linienhöhe von 20px. Der body ist Helvetica Neue, Regular, 12px groß mit einer Linienhöhe von 20px. Alle drei verwenden die Farbe #325372.

Wir können die Organisationssyntax von Sketch verwenden, um diese Stile in der Dropdown-Liste zu organisieren. Ich habe sie wie folgt benannt, was Sie in der obigen Dropdown-Liste sehen können:

  • Manuelle Texte/Überschrift/H1
  • Manuelle Texte/Überschrift/H2
  • Manuelle Texte/Körper

Ich mag das - es macht meine Sketch-Dateien so viel besser organisiert!

"So verwenden Sie die Anmerkungen"

Auf der nächsten Seite im Benutzerhandbuch werden Anmerkungen erläutert. Um Zeit zu sparen, kopieren Sie die Seite des Pfeils und bearbeiten Sie den Text und die Bilder entsprechend den Anmerkungen. Für Anmerkungen müssen wir Folgendes besprechen: Hinzufügen zu einer Seite, Auswählen einer anderen Anmerkung und Ändern der Größe.

Automatisch anpassbare Schaltfläche

Im ersten Lernprogramm haben wir sichergestellt, dass die Größe der Aktions- und Beschriftungsanmerkungen mit den nativen Eigenschaften von Sketch manuell geändert werden kann. Wenn Sie jedoch ein cooles Plugin verwenden möchten, um die Größenänderung für Sie vorzunehmen, kann ich vorschlagen, Rebel Button oder Paddy herunterzuladen und zu verwenden?

"Wie Sie die Seite verwenden können"

Zuletzt füge ich eine Seite für "Verwendung von Seiten" hinzu. Ich habe die Standardanweisungen zum Hinzufügen einer Seite zur Zeichenfläche sowie zum Ändern des Standardtextes für die Startseite beigefügt.

Tipp: Wenn Sie Ihre Elemente jemals genau platzieren müssen, wählen Sie ein Element aus und drücken Sie die Optionstaste auf Ihrer Tastatur. Wenn Sie mit der Maus über die anderen Elemente auf der Zeichenfläche fahren, geben die Anzeigen die genauen Pixelabstände zwischen ihnen an.

Der Style Guide

Das nächste, was wir einrichten müssen, ist der Styleguide. Ich habe eine neue Seite erstellt und sie, wie Sie es erraten haben, als "Style Guide" bezeichnet. Wie bei jedem anderen Styleguide sollen die Benutzer mit den verschiedenen in der Datei verwendeten Stilen vertraut gemacht werden. Im Styleguide werde ich die Farben, die Typografie und die Ebenenstile erläutern - einschließlich der Pfeillinienstile (durchgehend oder gestrichelt).

Farben

Im ursprünglichen Design der Flussdiagramme habe ich neun verschiedene Farben verwendet. Erstellen wir also eine neue Zeichenfläche nur für sie. Platzieren Sie alle Farben auf der Seite und benennen Sie sie. Das coole Zeug kommt als nächstes!

Erstellung und Organisierung von Farbstilen

Ich werde diese Farben jetzt als Stile hinzufügen. Auf diese Weise kann jeder die Farben der verschiedenen Elemente anpassen.

Zunächst die Syntax: Styles/Colour/{Color name}. Also, Styles/Colour/Error red oder Styles/Colour/Background blue. Wenn Sie mit dem Hinzufügen fertig sind, können Sie bewundern, wie übersichtlich diese Farben in der Dropdown-Liste Ebenenstil angezeigt werden. Außerdem können Sie sehen, dass im ursprünglichen Lernprogramm noch Stile übrig sind. Wir werden diese etwas später organisieren.

Der erste Grund für alle angelegten Farben besteht darin, zu zeigen, was verwendet wird (wie es ein Styleguide tun sollte). Der zweite Grund ist das einfache Umfärben. Dies gilt nicht für alle verwendeten Elemente (z. B. Text), kann sich jedoch leicht auf Elemente mit nur einem Hintergrund wie den Anmerkungen Ja und Nein auswirken. Wir werden versuchen, genau das als nächstes zu tun.

Anpassung von den Farben

Gehen Sie zurück zur Symbolseite. Wenden Sie als Nächstes dieselben Stile an, die wir gerade erstellt haben, auf die Elemente Aktion, Beschriftung, Ja und Nein. Auf diese Weise müssen Sie nur die Farbe im Style Guide aktualisieren, wenn Sie nicht mehr möchten, dass das Ja gelb, sondern grün ist. Alle Ja-Werte in der gesamten Skizzendatei ändern ihre Farbe.

Dokumentfarben

Um Ihren Workflow ein wenig zu vereinfachen, möchten Sie möglicherweise Ihre Farben in den Dokumentfarben speichern. Dadurch sind sie jederzeit leichter zugänglich.

Halten Sie Ihre Zeichenflächen und Ebenen organisiert

Wenn Sie gerne organisiert sind, empfehle ich Ihnen, das Sort Me-Plugin herunterzuladen. Es sortiert sowohl Ebenen als auch Zeichenflächen alphabetisch und numerisch (oder auch umgekehrt). Hier sind einige andere Effizienzressourcen für Sketch:

Typografie

Der nächste Styleguide, den wir erstellen müssen, ist für die Typografie. Wir möchten alle Textstile im Dokument anzeigen und ich möchte sie in zwei Kategorien unterteilen, Dokumenttexte (wie im Handbuch und im Styleguide hier) und die in den Flussdiagrammen.

Organisierung von den Textstilen

Ich möchte Ihnen jetzt zeigen, wie Sie Ihre aktuellen Textstile neu organisieren und gegebenenfalls umbenennen können. Wählen Sie in der Dropdown-Liste Textstil die allerletzte Option Textstile organisieren aus. Daraufhin wird ein neues Fenster geöffnet, das mit jedem einzelnen Ihrer Textstile gefüllt ist. Wenn Sie auf eines doppelklicken, können Sie es umbenennen. Ich möchte, dass Sie sie wie folgt umbenennen:

  • Standardtext > Flussdiagrammtexte/Aktion
  • Beschriftungstext > Flussdiagrammtexte/Beschriftung
  • Notizen > Flussdiagrammtexte/Notizen
  • Seitentext > Flussdiagrammtexte/Seite
  • Manuelle Texte/… > Dokumenttexte/…

Ich möchte auch, dass Sie alle drei "Manual texts" in "Document text" umbenennen. Wir haben die ursprünglichen Namen mit der Absicht erstellt, sie nur in der Dokumentation des Benutzerhandbuchs zu verwenden. Seitdem haben wir den Styleguide hinzugefügt, der die Namenskonvention nicht mehr korrekt macht. Wie Sie sehen können, ist das Umbenennen der Textstile einfach. Wenn Sie einen Namen falsch schreiben oder Ihre Namenskonvention aktualisiert werden muss, ist dies kein Problem!

Tipp: Das kleine Minus-Symbol [ - ] in der unteren linken Ecke löscht den ausgewählten Stil. Aber seien Sie vorsichtig: Es gibt kein Rückgängigmachen und es wird nicht gefragt, ob Sie sicher sind.

Aktualisieren Sie den Textstil im Styleguide, um die Typografie in der gesamten Datei zu aktualisieren (genau wie bei Farben).

Gemeinsame Stile in verbleibenden Elementen

Dies wird die letzte Zeichenfläche im Styleguide-Bereich sein. Hier wird erläutert, wie die verbleibenden Elemente, das Seitensymbol und das Entscheidungsanmerkungssymbol neu eingefärbt und behandelt werden. Wir werden die Pfeile gleich nach Abschluss des Abschnitts Gemeinsame Stile besprechen.

Organisierung von den gemeinsamen Ebenenstilen

Wenn Sie auf den Abschnitt Farben zurückblicken, werden Sie sich daran erinnern, dass wir einige zusätzliche Stile hatten, die wir später organisieren werden. Nun ist es soweit! Die Idee ist genau die gleiche wie beim Organisieren von Textstilen. Wählen Sie diese Option, um den Ebenenstil zu organisieren. Sie können sie alle wie bei Textstilen umbenennen, organisieren und löschen.

Für die Ebenenstile möchte ich, dass Sie jeden einzelnen der zuvor erstellten Style/Colour/… beibehalten. Benennen Sie den Rest dann wie folgt um:

  • Aktion bg > Hintergrund/Aktion
  • Pfeil - Gepunktet > Pfeillinie/Gepunktet
  • Pfeil - durchgehend > Pfeillinie/durchgehend
  • Beschriftung bg > Hintergrund/Beschriftung
  • Seite > Hintergrund/Seite

Tipp: Wenn Sie die Tabulatortaste drücken, navigieren Sie nicht wie in der Ebenenliste durch die Liste der Stilnamen. Stattdessen kann in diesem Fenster mit der Tabulatortaste der Name des ausgewählten Stils bearbeitet werden oder nicht. Schalten Sie ein- oder zweimal um, um genau zu sehen, was ich meine!

Erinnerst du dich an das zuvor erwähnte Minus-Symbol [ - ]? Es dient zum Löschen von Stilen. Sie müssen Hintergrund grau löschen. Es ist ein Überbleibsel meiner anfänglichen Designerkundung und wird nirgendwo verwendet.

Schließen Sie zum Schluss das Fenster, wählen Sie den Hintergrund der Entscheidungsanmerkung aus und wählen Sie in der Dropdown-Liste die Option Neuen Ebenenstil erstellen aus. Nennen Sie den neuen Stil "Background/Decision". Wir werden diese Stile jetzt auf der Styleguide-Seite anpassen. Kopieren Sie die Hintergründe aus der Entscheidungsanmerkung und den Seitenelementen.

Hinzufügen und Aktualisieren der freigegebenen Ebenenstile

Fügen Sie die beiden Hintergründe im Styleguide in die Zeichenfläche "Pfeile und Elemente" ein. (Ich werde nur die Seite und die Entscheidungsanmerkung kopieren.)

Um Ihnen ein aktuelles Beispiel für das Ändern und universelle Aktualisieren des Stils zu geben, möchte ich, dass wir das Hintergrund-Styling der Entscheidungsanmerkung ändern. Aus diesem Grund haben Sie einen separaten Ebenenstil dafür erstellt, damit die Aktionsanmerkung nicht beeinträchtigt wird. Ändern Sie es nach Belieben, es muss nicht zum Design passen. Fügen Sie einen 1px-Rand mit einer Farbe Ihrer Wahl und einer neuen Hintergrundfarbe hinzu.

Wenn Sie fertig sind, wählen Sie in der Dropdown-Liste Ebenenstil die Option Ebenenstil aktualisieren. Wenn Sie zur Seite mit dem Beispielflussdiagramm oder zurück zur Symbolseite gehen, werden die Stile aktualisiert. Dies ist ein großartiges Beispiel für die Aktualisierungsstile in Aktion. Genau das sollten Sie erwarten, wenn Sie das Dokument für einen neuen Designstil aktualisieren, z. B. für verschiedene Markenfarben.

Tipp: Wenn Sie den Stil eines Elements mit einem Ebenenstil ändern, können Sie ihn durch Auswahl von Ebenenstil zurücksetzen auf den ursprünglichen Stil zurücksetzen.

"Pfeile, Linienstile, Start- und Endpunkte"

Okay, wir sind auf das endgültige Vermögen gestoßen und es geht nur um die Pfeile! Ich habe natürlich das Beste zum Schluss gelassen. Als erstes müssen wir unserem Styleguide Pfeile hinzufügen. Im Moment haben wir nur eine Art von Pfeil zur Verfügung. Wenn Sie sich jedoch daran erinnern, dass wir während der Bereinigung des Ebenenstils eine durchgezogene und eine gepunktete Linie hatten. Fügen wir die gepunkteten Pfeile unserer Sammlung hinzu.

Erstellung von einem gepunkteten Pfeils

Ich möchte, dass Sie auf der Symbolseite den ersten Pfeil, Pfeil / Standard / Rechts, kopieren und in Pfeil / Gepunktet / Standard / Rechts umbenennen. Wählen Sie die Pfeillinie aus und wählen Sie in der Dropdown-Liste Ebenenstile die Option Pfeillinie und dann Gepunktet. Und das ist es! Wir haben unseren ersten gepunkteten Pfeil.

Zwei weitere Dinge hier. Gehen Sie zuerst weiter und dazu zu den verbleibenden Pfeilen. Halten Sie sich an die Namenskonvention Pfeil / Gepunktet /…, um eine übersichtliche Dropdown-Liste mit Symbolen zu erhalten. Wenn Sie von Namenskonventionen und -syntaxen sprechen, sollten Sie als Nächstes jeden einzelnen der ursprünglichen durchgezogenen Pfeile umbenennen. Das Dropdown-Menü Symbole wird unübersichtlich, wenn Sie dies nicht tun.

Verwenden Sie das Rename It Sketch-Plugin, um dies für Sie reibungsloser zu gestalten! Wählen Sie Plugins > Rename It > Find and Replace Layers/Artboard Names. Oder Sie können Strg + Option + Befehl + R drücken, damit das Plugin-Fenster angezeigt wird. Geben Sie dort Pfeil / Standard oder Pfeil / S-Form ein und ersetzen Sie ihn durch Pfeil / Volumenkörper / Standard und Pfeil / Volumenkörper / S-Form und so weiter. Stellen Sie sicher, dass der aktuelle Suchbereich auf Aktuelle Seite anstelle von Ebene ausgewählt ist.

Die Start- und Endpunkte

Das allerletzte, wenn es um Pfeile geht, sind die Start- und Endpunkte. Im ersten Tutorial habe ich Ihnen gezeigt, wie Sie verschiedene Beispiele wie eine Gliederung hinzufügen können. Fügen Sie so viele Stile hinzu, wie Sie möchten. Wenn Sie fertig sind, vergessen Sie nicht, alle neuen und fantastischen Start- und Endpunkte in den Styleguide aufzunehmen.

Damit sind wir mit der Erstellung des Styleguides fertig!

Abschluss

Der Zweck dieses Tutorials war es, das Original aufzubauen und Ihnen weitere fantastische Möglichkeiten zur Verwendung von Sketch beizubringen. Gleichzeitig wurden einige praktische Möglichkeiten aufgezeigt, wie Sie alle Ihre Sketch-Dateien verbessern und verpacken können, um sie für Teammitglieder und Kunden benutzerfreundlicher zu machen.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.