Accentsconagua
Share
Was Sie erstellen werdenVor einiger Zeit haben wir ein Tutorial zum Erstellen einer benutzerdefinierten Sketch-Datei mit wiederverwendbaren Flussdiagrammen veröffentlicht. Es ist eine großartige Ressource, um eigene Benutzerabläufe oder Sitemaps zu erstellen. In diesem Tutorial werden wir die Sketch-Datei verbessern, um sie für andere nutzbarer zu machen.
Möglicherweise haben Sie Kollegen, die Ihre Datei verwenden möchten, oder möglicherweise 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 ursprüngliche Tutorial durchzulesen. Zumindest schnappen Sie sich die letzte Sketch-Datei, um auf dem rechten Fuß zu beginnen, und folgen Sie diesem zweiten Teil. Dieses Tutorial ist vollgepackt mit Sketch-Tipps und -Tricks, ein paar Profi-Tipps hier und da sowie ein paar verwandte Plugins, die Sie selbst ausprobieren müssen.
Das allererste, was wir tun werden, ist eine neue Seite einzurichten. Ich rufe mein "Benutzerhandbuch" an. Diese Seite dient als schnelle Einführung in die Verwendung der Flussdiagrammelemente. Wir werden es verwenden, um die Rolle der einzelnen Elemente zu erklären, wie sie verwendet werden und wie ihre Eigenschaften wie die Startpunkte für Pfeile geändert werden können.
Wir beginnen mit einer neuen Zeichenfläche, ich nenne sie "Wie benutze ich Pfeile?". Drücken Sie EIN Um eine neue Zeichenfläche zu erstellen, wählen Sie aus der oberen rechten Ecke Papier größe und Brief. Sketch platziert automatisch die Zeichenfläche in der richtigen Größe (dies funktioniert auch bei Desktop- und mobilen Bildschirmgrößen!).
Papierformate für Zeichenflächen in SkizzeIch möchte, dass neue Benutzer einige Dinge verstehen, z. B. wie eine Linie ausgewählt und auf einer Zeichenfläche platziert wird, wie die Form geändert wird und wie Start- und Endpunkte geändert werden. Wie Sie diese Dinge erklären, ist Ihre Entscheidung. Die spezifischen Beschreibungen und Anweisungen liegen bei Ihnen. Ich habe meine Beschreibungen um ein paar Screenshots erweitert.
Wie bei Symbolen oder Ebenenstilen können auch Textstile organisiert werden. Für diese Handbuchseiten habe ich drei verschiedene Textstile, H1, H2, und Karosserie.
Meine H1 ist Helvetica Neue, Regular, 24px groß mit einer Zeilenhöhe von 30px. Das H2 ist Helvetica Neue, Bold, 14px groß mit einer Linienhöhe von 20px. Das Karosserie 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 im Dropdown-Menü zu organisieren. Ich habe sie wie folgt benannt, was Sie im Dropdown oben sehen können:
Ich liebe das - es macht meine Sketch-Dateien so viel übersichtlicher!
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 so, dass sie Anmerkungen enthalten. Für Anmerkungen müssen wir Folgendes besprechen: Hinzufügen zu einer Seite, Auswählen einer anderen Anmerkung und Größenänderung.
Im ersten Lernprogramm haben wir sichergestellt, dass die Action- und Label-Annotationen mit den systemeigenen Eigenschaften von Sketch manuell in der Größe geändert wurden. Wenn Sie jedoch ein cooles Plugin verwenden möchten, um die Größenänderung für Sie vorzunehmen, kann ich vorschlagen, den Rebellen-Button oder Paddy herunterzuladen und zu verwenden?
Als letztes füge ich eine Seite für "Wie benutze ich Seiten" hinzu. Ich habe die Standardanweisungen zum Hinzufügen einer Seite zur Zeichenfläche sowie zum Ändern des Standardtextes für die Startseite hinzugefügt.
Spitze: Wenn Sie Ihre Elemente jemals richtig platzieren müssen, wählen Sie ein Element aus und drücken Sie Möglichkeit auf deiner Tastatur. Wenn sich Ihre Maus über den anderen Elementen auf der Zeichenfläche befindet, werden die genauen Pixelabstände zwischen den Anzeigen angezeigt.
Als nächstes müssen wir den Style Guide einrichten. Ich habe eine neue Seite erstellt, und Sie haben es erraten, ich habe es "Styleguide" genannt. Wie in jedem anderen Style-Guide soll der Benutzer mit den verschiedenen in der Datei verwendeten Styles vertraut gemacht werden. Im Styleguide werde ich die Farben, die Typografie und die Ebenenstile einschließlich Pfeillinienstilen (durchgehend oder gestrichelt) besprechen..
Bei der ursprünglichen Gestaltung der Flussdiagramme habe ich schließlich neun verschiedene Farben verwendet, also erstellen wir 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!
Ich werde jetzt diese Farben als Stile hinzufügen. Auf diese Weise kann jeder, der die Farben der verschiedenen Elemente anpassen möchte, dies tun.
Zuerst die Syntax: Stile / Farbe / Name der Farbe. So, Stile / Farbe / Fehler rot oder Styles / Farbe / Hintergrund blau. Wenn Sie mit dem Hinzufügen fertig sind, können Sie sehen und bewundern, wie ordentlich diese Farben in den Farben angezeigt werden Ebenenstil Dropdown-Liste! Außerdem können Sie sehen, dass im ursprünglichen Lernprogramm noch Stile übrig sind. Wir werden später etwas organisieren.
Der erste Grund für alle aufgebrachten Farben ist, zu zeigen, was verwendet wird (wie ein Styleguide). Der zweite Grund ist für die einfache Umfärbung. Dies gilt nicht für die verschiedenen verwendeten Elemente (wie z. B. Text), es kann sich jedoch leicht auf Elemente mit einem Hintergrund wie dem auswirken Ja und Nein Anmerkungen. Wir werden genau das als nächstes versuchen.
Gehe zurück zur Symbolseite. Wenden Sie anschließend die gleichen Stile an, die wir gerade für die Elemente Action, Label, Yes und No erstellt haben. Wenn Sie also entscheiden, dass das Ja nicht mehr gelb, sondern grün sein soll, müssen Sie lediglich die Farbe im Style Guide aktualisieren und alle Ja-Werte in der gesamten Sketch-Datei ändern die Farbe.
Um Ihren Arbeitsablauf etwas zu vereinfachen, möchten Sie möglicherweise Ihre Farben in den Dokumentfarben speichern. Dies erleichtert den jederzeitigen Zugriff.
Wenn Sie gerne organisiert sind, empfehle ich das Sort Me-Plugin herunterzuladen. Es sortiert sowohl Layer als auch Zeichenflächen alphabetisch und numerisch (oder auch umgekehrt). Hier einige weitere Ressourcen zur Effizienzsteigerung für Sketch:
Der nächste Style Guide, den wir erstellen müssen, bezieht sich auf die Typografie. Wir möchten alle Textstile im Dokument anzeigen, und ich möchte sie in zwei Kategorien einteilen: Dokumenttexte (wie hier im Handbuch und Stilhandbuch hier) und diejenigen in den Flussdiagrammen.
Ich möchte Ihnen jetzt zeigen, wie Sie Ihre aktuellen Textstile neu organisieren und umbenennen können (falls erforderlich). Von dem Textstil Wählen Sie die letzte Option aus Textstile organisieren… Daraufhin wird ein neues Fenster angezeigt, das mit jedem einzelnen Textstil gefüllt ist. Wenn Sie auf einen Doppelklick klicken, können Sie ihn umbenennen. Ich möchte, dass Sie sie wie folgt umbenennen:
Ich möchte auch, dass Sie alle drei "Manuellen Texte" in "Dokumenttext" umbenennen. Wir haben die ursprünglichen Namen mit der Absicht erstellt, sie nur in der Dokumentation des Benutzerhandbuchs zu verwenden. Seitdem haben wir jedoch den Style Guide hinzugefügt, der dazu führt, dass die Namenskonvention nicht mehr genau ist. Wie Sie sehen, ist das Umbenennen der Textstile einfach. Wenn Sie einen Namen falsch schreiben oder Ihre Namenskonvention aktualisiert werden muss, ist dies kein Problem!
Spitze: Das kleine Minuszeichen [-] in der unteren linken Ecke löscht den ausgewählten Stil. Aber seien Sie vorsichtig: Es gibt kein Undo und es fragt nicht, ob Sie sich sicher sind.
Aktualisieren Sie den Textstil im Style Guide, um die Typografie in der gesamten Datei zu aktualisieren (genau wie bei den Farben)..
Dies wird die letzte Zeichenfläche unter der Style Guide-Sektion sein. Hier besprechen wir, wie die restlichen Elemente, das Seitensymbol und das Symbol für Entscheidungskommentare neu eingefärbt und behandelt werden. Die Pfeile werden direkt besprochen, nachdem der Abschnitt mit den freigegebenen Stilen beendet wurde.
Wenn Sie zurück zum Farbbereich schauen, werden Sie sich daran erinnern, dass wir einige zusätzliche Stile hatten, von denen ich sagte, dass wir sie später organisieren werden. Nun ist es an der Zeit! Die Idee ist genauso wie beim Organisieren von Textstilen. Wählen Sie, um den Ebenenstil zu organisieren. Sie können sie wie bei Textstilen umbenennen, organisieren und löschen.
Für die Ebenenstile möchte ich, dass Sie jeden der zuvor erstellten Stile / Farben /… beibehalten. Benennen Sie dann den Rest wie folgt um:
Spitze: Wenn Sie die Tabulatortaste drücken, navigieren Sie nicht in der Liste der Stilnamen wie in der Ebenenliste. In diesem Fenster kann der Name des ausgewählten Stils mit der Tabulatortaste bearbeitet werden oder nicht. Wechseln Sie ein- oder zweimal, um genau zu sehen, was ich meine!
Erinnern Sie sich an das Minus-Symbol [-], das ich zuvor erwähnt habe? Es ist zum Löschen von Stilen. Ich brauche dich zu löschen Hintergrund grau. Es ist ein Überbleibsel aus meiner ersten Designerkundung und wird nirgendwo verwendet.
Schließen Sie das Fenster, wählen Sie den Hintergrund der Decision Annotation aus und wählen Sie Erstellen Sie einen neuen Ebenenstil, aus dem Dropdown. Nennen Sie den neuen Stil "Hintergrund / Entscheidung". Wir gehen jetzt weiter und passen die Stile dieser Elemente auf der Style Guide-Seite an. Kopieren Sie die Hintergründe aus der Decision Annotation und den Page-Elementen.
Fügen Sie die beiden Hintergründe in der Stilübersicht wieder in die Zeichenfläche "Pfeile und Elemente" ein. (Ich werde nur die Seite und die Decision Annotation kopieren.)
Um Ihnen ein konkretes Beispiel für die Änderung des Stils und die universelle Aktualisierung zu geben, möchten wir, dass wir die Hintergrunddarstellung der Decision Annotation ändern. Aus diesem Grund habe ich Sie dazu veranlasst, einen eigenen Ebenenstil für ihn zu erstellen, sodass er die Aktionsannahme nicht beeinflusst. Ändern Sie es nach Belieben, es muss nicht zum Design passen. Fügen Sie einen 1px-Rahmen mit einer Farbe Ihrer Wahl und einer neuen Hintergrundfarbe hinzu.
Sobald Sie fertig sind, aus dem Ebenenstil Dropdown auswählen Ebenenstil aktualisieren. Wenn Sie zur Beispiel-Flussdiagrammseite oder zurück zur Symbolseite gehen, werden die Stile aktualisiert. Das ist ein großartiges Beispiel für die Aktualisierung von Styles in Aktion. Das ist genau das, was Sie erwarten sollten, wenn Sie das Dokument für einen neuen Designstil aktualisieren, z. B. für verschiedene Markenfarben.
Spitze: Wenn Sie den Stil eines Elements mit einem Ebenenstil ändern, können Sie es durch Auswahl auf den ursprünglichen Stil zurücksetzen Ebenenstil zurücksetzen.
Okay, wir haben die letzten Assets gefunden und es geht nur um die Pfeile! Ich habe natürlich das Beste zum Schluss gelassen. Zuerst müssen wir unserem Style Guide Pfeile hinzufügen. Momentan steht uns nur eine Art Pfeil zur Verfügung. Wenn Sie sich jedoch daran erinnern, wie der Layer-Stil bereinigt wurde, hatten wir eine durchgezogene Linie und eine gepunktete Linie. Fügen wir die gepunkteten Pfeile unserer Sammlung hinzu.
Ich möchte, dass Sie auf der Symbolseite den ersten Pfeil, den Pfeil / Standard / Rechts, kopieren und ihn in Pfeil / Punkt / Standard / Rechts umbenennen. Wählen Sie die Linie des Pfeils und aus Ebenenstile Dropdown auswählen Pfeillinie dann Gepunktet. Und das ist es! Wir haben unseren ersten gepunkteten Pfeil.
Zwei weitere Dinge hier. Gehen Sie zuerst zu den übrigen Pfeilen. Halten Sie sich an die Namenskonvention Pfeil / Punkt /…, um einen Überblick zu behalten Symbole Dropdown-Liste. Wenn Sie von Namenskonventionen und -syntax sprechen, müssen Sie als Nächstes jeden der ursprünglichen durchgezogenen Linienpfeile umbenennen. Das Symbole Dropdown wird chaotisch sein, wenn Sie dies nicht tun.
Verwenden Sie das Rename-It-Sketch-Plugin, um den Vorgang für Sie glatter zu gestalten! Wählen Plugins> Umbenennen> Suchen und Ersetzen von Layern / Artboard-Namen. Oder Sie drücken die Strg + Wahltaste + Befehlstaste + R damit das Plugin-Fenster erscheint. Geben Sie dort Arrow / Default oder Arrow / S-Shape ein und ersetzen Sie es durch Arrow / Solid / Default und Arrow / Solid / S-Shape usw. Stellen Sie sicher, dass der aktuelle Suchbereich ausgewählt ist Aktuelle Seite anstatt Schicht.
Das letzte, was bei Pfeilen der Fall ist, sind der Start- und Endpunkt. Im ersten Tutorial habe ich Ihnen gezeigt, wie Sie verschiedene Beispiele hinzufügen, z. B. eine Gliederung. Fügen Sie so viele Stile hinzu, wie Sie möchten, und vergessen Sie nicht, alle neuen und fantastischen Start- und Endpunkte in den Style Guide aufzunehmen.
Und damit haben wir den Style Guide erstellt!
Der Zweck dieses Tutorials bestand darin, das ursprüngliche Tutorial aufzubauen und Ihnen die großartigeren Möglichkeiten zur Verwendung von Sketch beizubringen. Gleichzeitig wurden auf diese Weise praktische Möglichkeiten aufgezeigt, wie Sie alle Ihre Sketch-Dateien verbessern und zusammenfassen können, um sie für Teammitglieder und Kunden nutzbarer zu machen.
