Share
Was Sie erstellen werdenIn diesem Lernprogramm werden wiederverwendbare Benutzerfluss- und Aufgabenflussdiagramme in Sketch erstellt. Wir werden die Kraft von Sketch-Symbolen nutzen, indem wir grundlegende Elemente und einige Anpassungen verwenden, damit unsere Symbole für uns funktionieren.
"[Ein] Flussdiagramm ist ein Diagramm der Bewegungsabläufe oder Handlungen von Personen oder Dingen, die an einem komplexen System oder einer komplexen Tätigkeit beteiligt sind." - Naema Baskanderi
Um unsere Flussdiagramme zu erstellen, benötigen wir Elemente für die Seiten, Pfeile, Aktionen (einschließlich Entscheidungen und Ja / Nein-Indikatoren), Beschriftungen und Notizen. Ich werde jedes dieser Elemente durchgehen, wie sie aussehen sollen (wenn Sie Lust haben, mein Styling zu kopieren), wie sie funktionieren sollen und wie sie in das Gesamtbild passen. Bevor wir das tun, müssen wir jedoch die Namenskonventionen in Sketch durchgehen. Dies ist einer der Schlüsselfaktoren für diese Arbeit. Lass uns gleich eintauchen, sollen wir?
Skizzensymbole eignen sich hervorragend für FlussdiagrammeJa, aus zwei Gründen. Erstens sollten Sie Ihre Layer aus organisatorischen Gründen benannt lassen, insbesondere wenn Sie die Dateien mit anderen Personen bearbeiten. Wenn Sie ein Symbol mit mehreren Textfeldern erstellen, können Sie mit richtig benannten Textebenen feststellen, welcher Text welcher ist, wenn Sie ihn ersetzen oder überschreiben möchten.
Der zweite Grund ist jedoch viel kühler. Sketch fasst Symbole, Textstile und freigegebene Stile automatisch in verschiedenen Ebenen zusammen, vorausgesetzt, Sie folgen einer bestimmten Syntax. Sketch basiert auf URL-ähnlichen und ordnerähnlichen Namenskonventionen. Die folgenden beiden Symbole werden zum Beispiel sauber in Gruppen zusammengefasst.
Wenn wir dann noch einen Namen nennen:
Es wird auch unter Pfeilen gruppiert, jedoch in anderen Unterordnern: Standard. Diese Kategorisierung ermöglicht es uns, genau das Symbol zu finden, das wir benötigen, wenn wir es brauchen:
Organisierte Symbole in der SkizzeBeachten Sie dies bei der Benennung von Elementen, die sich vorwärts bewegen, insbesondere Textebenen, Symbolen und gemeinsame Stile.
Die "Seite" ist ein grundlegender Bestandteil unseres Flussdiagramms. Website- oder App-Benutzer folgen verschiedenen Routen, erledigen verschiedene Aufgaben und die Seiten werden immer im Mittelpunkt stehen.
Um das Seitenelement zu erstellen, benötigen wir ein Rechteck und ein Textfeld darüber. Die Stile des Rechtecks umfassen # 325372 für die Farbe Helvetica Neue, mittleres Gewicht und Schriftgrad 11. Sie können einen Shared Style dafür erstellen, da die anderen Elemente dieselbe Typografie haben, obwohl das Seitenelement Großbuchstaben verwendet. Um dies zu tun, unter der Optionen, Ändern Sie die Texttransformation in Großbuchstaben.
Das Rechteck ist 144 x 96 Pixel mit einem Radius von 5, # F7FCFD für Hintergrund und # B7E7EE für den 1px-Innenrand. Es ist eine gute Idee, mindestens die Gestaltung des Seitenrechtecks in einen gemeinsamen Stil umzuwandeln. Dies ermöglicht später eine einfache Bearbeitung.
Benennen Sie die Textebene in "Seitenname" um. Wenn Sie dieses Element als neues Symbol wiederverwenden, hat die Überschreibung des Textes einen Titel anstelle von "Text". Wählen Sie beide aus und konvertieren Sie sie in ein einzelnes Symbol Symbol erstellen Schaltfläche in der Werkzeugleiste.
In diesem Tutorial werden wir erstellen viel von Symbolen. Sketch hat keinen speziellen Tastaturbefehl für dieses Programm, aber wir können selbst eine benutzerdefinierte Verknüpfung erstellen.
Gehen Sie zuerst zu Systemeinstellungen und geh hinein Tastatur. Wähle aus Tastenkombinationen Registerkarte von oben. Im linken Fenster wählen Sie App-Verknüpfungen und drücken Sie die + Taste. Eine Überlagerung wird angezeigt. in der Anwendungsliste suchen Skizzieren. Unter Menütitel Sie müssen den spezifischen Menüpunktnamen eingeben, den wir anvisieren möchten. Dies ist in diesem Fall der Fall Symbol erstellen (es ist der erste Menüpunkt unter Schicht). Wählen Sie schließlich Ihre Tastenkombination aus und fertig.
Pro-Tipp: Dies kann für jede Anwendung verwendet werden.
Erstellen einer benutzerdefinierten Tastenkombination für SketchSie können so viele verschiedene Pfeilstile erstellen, wie Sie möchten, aber Sie möchten hier zeigen, wie Sie einen einzelnen einstellbaren Pfeil erstellen, um damit zu beginnen. Sie können später Ihr eigenes Styling und Variationen hinzufügen.
Wie Sie im obigen Bild sehen können, nimmt der Pfeil viele Formen an; Wir müssen klug sein, um es zu schaffen. Zunächst brauchen wir einen Startpunkt und einen Endpunkt. In meinem Fall ist es ein offener Kreis und ein Dreieck. Das Dreieck ist ein SVG-Symbol, das ich im Noun-Projekt gefunden habe. Sie können ein einfaches Dreieck selbst erstellen oder ein Symbol verwenden.
ich benutze # 325372 für den Pfeil, den Kreisrand und für die Linie. Der Kreis hat einen weißen Hintergrund #FFFFFF auch. Verwandeln Sie beide in Symbole und benennen Sie sie nach dem, was sie sind. Wenn Sie ein bisschen verrückt werden und individuelle Symbole für das Dreieck nach oben, unten, links oder rechts erstellen möchten, dann machen Sie es. Das ist aber nicht nötig.
Als nächstes ist die Linie selbst. Erstellen Sie mit dem Linienwerkzeug eine einzelne Pixellinie. Was auch immer Ihr Stil ist, verwandeln Sie den Stil der Linie in einen Shared Style. Ich habe zwei; feste und gepunktete Stile für primäre und sekundäre Pfeile. Wenn Sie mehrere freigegebene Stile verwenden, wird das Umschalten zwischen ihnen einfacher. Dazu später mehr.
Als Nächstes müssen wir jeden Pfeiltyp erstellen, indem wir den Startpunkt, die Linie und den Endpunkt kombinieren. Die Pfeile müssen für die Diagrammerstellung austauschbar sein, also machen wir das jetzt.
Zuerst erstellen wir eine quadratische Zeichenfläche. Ein Quadrat hilft uns, alles in der gleichen Form zu halten, und die Pfeile sind dann leichter zu bearbeiten. Mein ist 80px von 80px. Ich möchte mit der Erstellung einer Zeichenfläche für jeden Pfeil beginnen. Auf diese Weise kann ich sie alle auf einmal sehen. Beginnen wir mit dem Erstellen der linken, rechten, oberen und unteren Pfeile. Wählen Sie nun Ihre Pfeile aus und verwandeln Sie sie so, wie wir es gemacht haben. Vergessen Sie nicht, auch Ihre neu eingerichtete Verknüpfung zu verwenden. Benennen Sie diese Symbole, Pfeil / Standard / Links, Pfeil / Standard / Rechts usw. (Sie bekommen die Idee).
Nun werden die einfacheren Pfeile erledigt. lass uns zu den gekrümmten gehen. Dieser Teil ist entscheidend, weil die Pfeile leicht anpassbar und einstellbar sein müssen. Ich werde zuerst einen der drei Stile erstellen.
Zeichnen Sie in den neuen Zeichenflächen, die immer noch 80 x 80 Pixel groß sind, und zeichnen Sie mit dem Vektor-Werkzeug (V) die Linien des Pfeils für die L-Form, die S-Form und die U-Form. Stellen Sie sicher, dass Ihre Zeilen im Quadrat sind. Machen Sie noch keine Kurven. Wenn Sie Probleme beim Erstellen perfekter Linien haben, platzieren Sie die Punkte mehr oder weniger an dem Ort, an dem sie sich befinden sollten, und bearbeiten Sie ihren Standort manuell, indem Sie die X- und Y-Positionen selbst eingeben.
Schauen Sie sich das Bild an. Als nächstes müssen wir die Kurven bearbeiten. Wählen Sie für jede Linie nur die Punkte aus, aus denen sich die Ecken zusammensetzen. Wählen Sie nicht den Anfangs- oder Endpunkt. Erhöhen Sie auf der rechten Seite die Anzahl der Ecken auf das, was Sie möchten. Ich habe meine auf 10px gesetzt. Jetzt werden die Ecken automatisch verkleinert, ohne die Linie zu verzerren.
Das letzte, was wir hier tun müssen, ist das Hinzufügen der Start- und Endpunkte. Bevor wir dies tun, lassen Sie uns die Linien (nur die Linien für jetzt) in Symbole umwandeln. Wir möchten, dass die Linie basierend auf ihren tatsächlichen Endpunkten, ihrem Anfang und Ende und ohne die Symbole an den Enden einstellbar ist. Wir fügen die Start- und Endpunkte in einer Minute hinzu. Nennen Sie diese drei Pfeile Arrow / L-Shape / Right-Down, Pfeil / S-Shape / Right-Down-Right und Pfeil / U-Shape / Right-Down-Left.
Doppelklicken Sie nun auf eines der neu erstellten Symbole, um es zu bearbeiten. Wir möchten die Start- und Endpunkte an der Kante des Symbols platzieren und mit den Endpunkten der Linie zentrieren. Idealerweise sollten Sie die Start- und Endpunkte zentriert an der Ecke der Zeichenflächen des Symbols platzieren.
Um schließlich die Pfeile an der Startposition und am Endpunkt unter der Ruheoption anpassbar zu machen, wählen Sie Breite fixieren und Höhe fixieren. Vergessen Sie nicht, sie in Start- und Endpunkt umzubenennen. Diese Namensänderung macht es Ihnen leichter zu wissen, welche der beiden ist, wenn Sie die Typen ändern.
Wir müssen dies mit den übrigen Pfeilen wiederholen, einschließlich der verbleibenden Richtungen der L-Shape-, S-Shape- und U-Shape-Pfeile. Tun Sie es, indem Sie die vorherigen Schritte wiederholen.
Sie können beliebig viele verschiedene Pfeile verwenden. gepunktet, gestrichelt, fest oder was auch immer. Der langwierige Teil ist, dass Sie für jeden Stil einen neuen Satz von Pfeilen erstellen müssen, wenn Sie mehrere Pfade in derselben Datei verwenden möchten. Ansonsten aktualisieren Sie einfach den Shared Style. Vergessen Sie nicht, die Namenskonventionen auf Pfeil / S-Form / Rechts-Abwärts-Rechts / Punkt oder Pfeil / Punkt / S-Form / Rechts-Abwärts-Rechts einzustellen.
Ich denke, die wichtigste Entwicklung liegt hinter uns. Die übrigen Elemente sind nicht sehr kompliziert. Zu den Aktionselementen gehören hier die Elemente für Ja / Nein-Indikatoren, eine Entscheidung und eine einzige Aktionsbezeichnung.
Mit Ja- und Nein-Indikatoren können wir Punkte in unserem Diagramm veranschaulichen, bei denen die Flussrichtung entweder mit „Ja“ oder „Nein“ beeinflusst wird.
Diese Indikatoren sind unkompliziert (zumindest im Vergleich zu den Pfeilen). Ich habe sie gemacht, indem ich zwei Symbole aus dem Noun-Projekt heruntergeladen habe. Hier ist ein Link zur Überprüfung und ein Link zum X. Die Symbole des Noun-Projekts sind weiß, #FFFFFF. Während die Hintergrundfarbe ist # F89B8D für 👎 und # FECD75 für 👍🏿.
Verwandeln Sie sie in Symbole und benennen Sie sie Annotation / Yes-No / 👎 und Annotation / Yes-No / 👍🏿 (Ja, Emojis werden unterstützt.)
Der Prozess zum Erstellen dieses Elements ist dem Erstellen des Seitenelements sehr ähnlich. Erstellen Sie ein Quadrat (Mine ist 126 x 126 Pixel) und drehen Sie es in einen Winkel von 45 °. Zusätzlich habe ich einen Radius von 5px auf dem Quadrat hinzugefügt. Die Hintergrundfarbe ist # F2F2F2 , keine Grenze. Speichern Sie es als gemeinsam genutzten Stil. Über dem Platz brauchen wir einen Textbereich. Ich habe meine Textebene "Entscheidung" genannt. Denken Sie daran, dass die Benennung von Ebenen wichtig ist. Sie können den freigegebenen Textstil wiederverwenden, wenn Sie ihn zuvor gespeichert haben. Wenn nicht, ist das Styling für den Text # 325372 für die Farbe Helvetica Neue, mittelschwer, 11 Schriftgröße. Wenn Sie meine Stile kopieren, konvertieren Sie den Stil von Text und Quadrat in gemeinsam genutzte Stile.
Schließlich ist es Zeit, die Entscheidung in ein Symbol umzuwandeln. Ich nenne es Annotation / Entscheidung.
Die Beschriftung für eine einzige Aktion wird die Stile des Entscheidungselements wiederverwenden. Es ist ein Rechteck. Mein ist 117px von 24px. Verwenden Sie den gleichen Stil aus dem Entscheidungskennzeichen für Rechteck und Text. Vergessen Sie nicht, die Textebene zu benennen. Ich habe meine "Aktion" genannt. Verwandeln Sie es in ein Symbol und benennen Sie das Symbol Annotation / Action. Und wir sind hier fertig. Nächster!
Die letzten beiden Dinge auf unserer Liste werden die Notizen und Kennzeichnungselemente sein. Beginnen wir mit dem Etikett. Dies ist ein bisschen schwierig, aber nichts, mit dem wir nicht umgehen können. Um die Form zu vereinfachen, können Sie das Rechteck und den Text aus der zuvor durchgeführten Aktion kopieren. Wir brauchen ein Rechteck, mein ist 117 x 24 Pixel mit 5 Radien. Es hat # 6FCFDB für den Hintergrund. Als nächstes den Textbereich. Verwenden Sie den Textstil aus den Aktions- oder Entscheidungsindikatoren. Erstellen Sie dann einen neuen freigegebenen Stil mit dem Namen Beschriftungstext und färben Sie den Text neu ein #FFFFFF. Als nächstes machen Sie sie noch einmal zu einem Symbol (haben Sie die Abkürzung verwendet und sich daran gewöhnt, dass sie da ist? Großartig. 🙌)
Doppelklicken Sie auf das neu erstellte Symbol und wählen Sie die Textebene aus. Wir müssen die Größenänderungseigenschaften bearbeiten. Wir müssen es am linken und rechten Rand des Objekts befestigen. Manchmal führt Sketch dies automatisch für Sie durch, jedoch nicht immer. Daher ist es besser, dies noch einmal zu überprüfen.
Zum Schluss haben wir die Notizen. Das Styling, das ich für diese habe, ist wie folgt: # A4A4A4 für die Textfarbe, Helvetica Neue, reguläres Gewicht und 11 Schriftgrad. Dies ist anders als alles andere bisher, machen Sie also den Notentext nicht zu einem Symbol. Fügen Sie es nur als gemeinsam genutzten Stil hinzu.
Jetzt sind wir mit den grundlegenden Formen und Elementen fertig und können nun die Flussdiagramme zusammenstellen.
Das obige Bild zeigt alle verschiedenen Symbole, die mir zur Verfügung stehen. Dies ist eine ziemliche Sammlung - und ich habe versucht, sie ohne große Anpassungen klein zu halten. Das Bild unten zeigt einen Beispielfluss, den ich mit diesen Symbolen erstellt habe.
Sie müssen nur das gewünschte Element aus dem Symbolbereich auswählen und ein Flussdiagramm auf Ihrer Zeichenfläche anordnen.
Gut gemacht für alle diese Schritte! Jetzt haben Sie eine ziemlich coole Sketch-Datei, mit der Sie oder Ihr Team problemlos Benutzerfluss- und Aufgabenflussdiagramme erstellen können!
Die folgenden Schritte können die Erstellung eines Style-Guides für Ihre Flussdiagramme umfassen. Möglichkeiten zum einfachen Austausch von Farbe, Typografie und dergleichen. Vielleicht auch die Erstellung einer Dokumentation in Ihrer Sketch-Datei, wenn Sie diese zusammen mit Ihren Teamkollegen verwenden oder als Freebie verschenken möchten. Bleiben Sie dran für Tutorials zu diesen Themen!
Accentsconagua