Share
Wat je gaat creërenIn deze zelfstudie gaan we herbruikbare gebruikersstroom- en taakstroomdiagrammen maken in Sketch. We gebruiken de kracht van Sketch-symbolen, met basiselementen en een paar aanpassingen om onze symbolen voor ons te laten werken.
"[A] stroomdiagram is een diagram van de volgorde van bewegingen of acties van mensen of dingen die betrokken zijn in een complex systeem of activiteit." - Naema Baskanderi
Om onze stroomdiagrammen te maken, hebben we elementen nodig voor de pagina's, pijlen, acties (inclusief beslissingen en ja / nee-indicatoren), labels en notities. Ik ga elk van deze elementen bespreken, hoe ze eruit moeten zien (als je geneigd bent mijn stijl te kopiëren), hoe ze moeten functioneren en hoe ze in de grote afbeelding passen. Maar voordat we dat doen, moeten we in Sketch de naamgevingsconventies bespreken. Het is een van de belangrijkste factoren bij het maken van dit werk. Laten we er direct in duiken, zullen wij?
Schetsymbolen zijn perfect voor stroomdiagrammenJa, dat doen we, en om twee specifieke redenen. Ten eerste is het een goede gewoonte om uw lagen met de naam te houden voor organisatorische doeleinden, vooral als u de bestanden met andere mensen verwerkt. Wanneer u een symbool maakt met meerdere tekstvelden erin, kunt u met de juiste naam tekstlagen onderscheiden welke tekst die is wanneer u deze probeert te vervangen of op te heffen.
De tweede reden is echter veel koeler. Sketch groepeert symbolen, tekststijlen en gedeelde stijlen automatisch in verschillende lagen, ervan uitgaande dat u een specifieke syntaxis volgt. Schets is gebaseerd op URL-achtige en mapachtige naamgevingsconventies, de volgende twee symbolen worden bijvoorbeeld netjes bij elkaar gegroepeerd.
Als we dan een ander noemen:
het zal ook worden gegroepeerd onder pijlen, maar in een andere submap: Standaard. Met deze indeling kunnen we precies het symbool vinden dat we nodig hebben, wanneer we het nodig hebben:
Georganiseerde symbolen in SketchHoud hier rekening mee bij het benoemen van iets dat vooruitgaat, met name tekstlagen, symbolen en gedeelde stijlen.
De "pagina" is een fundamenteel onderdeel van ons stroomdiagram. Gebruikers van websites of apps zullen verschillende routes volgen, verschillende taken uitvoeren en pagina's zullen hier altijd centraal staan.
Om het pagina-element te maken, hebben we een rechthoek en een tekstveld erboven nodig. De stijlen van de rechthoek omvatten # 325372 voor de kleur, Helvetica Neue, gemiddeld gewicht en lettergrootte 11. U kunt hiervoor een gedeelde stijl maken, omdat de andere elementen dezelfde typografie hebben, hoewel het pagina-element hoofdletters zal gebruiken. Om dit te doen, onder de opties, verander de teksttransformatie in hoofdletters.
De rechthoek is 144 px x 96 px met een straal van 5, # F7FCFD voor achtergrond en # B7E7EE voor de 1px binnenrand. Het is een goed idee om ten minste de vormgeving van de paginaranghoek om te zetten in een gedeelde stijl. Hierdoor kunt u later gemakkelijk bewerken.
Hernoem de tekstlaag in "Paginanaam". Op deze manier, wanneer u dit element opnieuw gebruikt als een nieuw symbool, heeft de tekstoverride een titel in plaats van "tekst". Selecteer ze allebei en converteer ze in een enkel symbool via de Creëer symbool knop in de werkbalk.
In deze tutorial zullen we creëren veel van symbolen. Sketch heeft hiervoor geen specifieke key-opdracht, maar we kunnen zelf een aangepaste shortcut maken.
Ga eerst naar Systeem voorkeuren en ga naar binnen Toetsenbord. Selecteer de shortcuts tab van boven. Selecteer in het paneel aan de linkerkant App-snelkoppelingen en druk op de + knop. Er verschijnt een overlay; in de lijst met applicaties lokaliseren Schetsen. Onder Menutitel u moet de specifieke naam van het menu-item invullen die we targeten, wat in dit geval het geval is Creëer symbool (het is het eerste menu-item eronder Laag). Ten slotte kies je je sneltoets, en dat is alles.
Pro tip: dit kan voor elke toepassing worden gebruikt.
Een aangepaste sneltoets maken voor SketchU kunt zoveel verschillende pijlstijlen maken als u wilt, maar het idee hier is om u te laten zien hoe u één enkele, instelbare pijl kunt maken om mee te beginnen. U kunt later uw eigen styling en variaties toevoegen.
Zoals je in de bovenstaande afbeelding kunt zien, zal de pijl vele vormen aannemen; we moeten slim zijn om het te maken. Ten eerste hebben we een startpunt en een eindpunt nodig. In mijn geval is het een open cirkel en een driehoek. De driehoek is een SVG-pictogram dat ik op het zelfstandig naamwoord-project heb gevonden. U kunt zelf een eenvoudige driehoek maken of een pictogram gebruiken.
ik gebruik # 325372 voor de pijl, de cirkelrand en voor de lijn. De cirkel heeft een witte achtergrond #FFFFFF te. Verander ze nu in symbolen en geef ze een naam zoals ze zijn. Als je een beetje gek wilt worden en individuele symbolen wilt maken voor de driehoek die omhoog, omlaag, links of rechts is, ga er dan voor. Maar het is niet nodig.
De volgende is de regel zelf. Maak een enkele pixellijn met de lijntool. Welke stijl je daar ook hebt, verander de stijl van de lijn in een gedeelde stijl. Ik heb er twee; vaste en gestippelde stijlen voor primaire en secundaire pijlen. Als u meerdere gedeelde stijlen gebruikt, wordt het schakelen tussen deze stijlen eenvoudiger. Daarover later meer.
Vervolgens zullen we elk type pijl moeten maken door het startpunt, de lijn en het eindpunt te combineren. De pijlen moeten uitwisselbaar zijn voor het maken van diagrammen, dus laten we dat nu doen.
Laten we eerst een vierkant tekengebied maken. Een vierkant helpt ons alles in dezelfde vorm te houden en de pijlen zijn dan gemakkelijker om mee te werken. De mijn is 80px bij 80px. Ik wil beginnen met het maken van een tekengebied voor elke pijl. Op deze manier kan ik ze allemaal tegelijk bekijken. Laten we beginnen met het maken van de linker, rechter, bovenste en onderste pijlen. Selecteer nu je pijlen en verander ze in symbolen zoals we het deden. Vergeet ook niet om je nieuw ingestelde snelkoppeling te gebruiken. Geef deze symbolen een naam, Pijl / Standaard / Links, Pijl / Standaard / Rechts enzovoort (u krijgt het idee).
Nu dat de gemakkelijker pijlen worden verzorgd; laten we naar de gebogen lijnen gaan. Dit onderdeel is cruciaal omdat we de pijlen eenvoudig moeten kunnen aanpassen en aanpassen. Ik ga door en maak eerst een van de drie stijlen voor de drie stijlen.
Binnen de nieuwe tekengebieden, nog steeds 80px bij 80px groot, en met het vectorgereedschap (V), tekent u de lijnen van de pijl voor de L-vorm, de S-vorm en de U-vormstijlen. Zorg ervoor dat je lijnen vierkant zijn. Maak nog geen bochten zelf. Als u problemen ondervindt bij het maken van perfecte lijnen, plaatst u de punten min of meer waar ze moeten zijn en bewerkt u hun locatie handmatig door X- en Y-posities zelf in te voeren.
Bekijk de afbeelding. Vervolgens moeten we de curven bewerken. Selecteer voor elke regel alleen de punten die de hoeken vormen. Selecteer geen begin- of eindpunten. Aan de rechterkant verhoogt u het nummer van de hoek naar wat u maar wilt. Ik heb de mijne op 10px gezet. Nu worden de hoeken automatisch aangepast zonder de lijn te vervormen.
Het laatste wat we hier moeten doen is om de begin- en eindpunten toe te voegen. Maar voordat we het doen, laten we de lijnen (alleen de regels voor nu) in symbolen veranderen. We willen dat de lijn kan worden aangepast op basis van de werkelijke eindpunten, het begin en einde, exclusief de pictogrammen aan het eind. We voegen de start- en eindpunten in een minuut toe. Benoem deze drie pijlen Pijl / L-vorm / Rechts-Omlaag, Pijl / S-vorm / Rechts-Onder-rechts en Pijl / U-vorm / Rechts-Onder-Links.
Dubbelklik nu op een van de nieuw gemaakte symbolen om het te bewerken. We willen de begin- en eindpunten aan de rand van het symbool plaatsen en het midden uitlijnen met de eindpunten van de lijn. In het ideale geval wilt u de begin- en eindpunten in het midden van de hoek van de tekengebieden van het symbool plaatsen.
Als laatste, om de pijlen in grootte te wijzigen, voor zowel het startpunt als het eindpunt, selecteer je onder rustoptie fix breedte en hoogte fixeren. Vergeet ook niet om ze te hernoemen naar Startpunt en Eindpunt. Deze naamswijziging maakt het gemakkelijker om te weten welke is bij het wijzigen van de typen.
We moeten dit herhalen met de resterende pijlen, inclusief de resterende richtingen van de pijlen met de L-vorm, de S-vorm en de U-vorm. Doe het door de vorige stappen te herhalen.
Je kunt zoveel verschillende stijlen van pijlen hebben als je wilt; gestippeld, onderbroken, stevig of wat dan ook. Het vervelende is dat je voor elke stijl een nieuwe reeks pijlen moet maken als je meer dan één in hetzelfde bestand wilt gebruiken. Anders update je gewoon de gedeelde stijl. Vergeet niet om de naamconventies aan te passen naar Pijl / S-vorm / Rechts-Onder-Rechts / Gestippeld of Pijl / Gestippeld / S-vorm / Rechts-Onder-rechts.
Ik denk dat de meest cruciale ontwikkeling achter de rug is. De overige elementen zijn niet erg ingewikkeld. De actie-elementen hier omvatten de elementen voor ja / nee-indicatoren, een beslissing, een enkel actielabel.
Ja en geen indicatoren laten ons toe om punten in ons diagram te illustreren waarbij de stroomrichting wordt beïnvloed door een "ja" of "nee" actie.
Deze indicatoren zijn duidelijk (tenminste in vergelijking met de pijlen). Ik heb ze gemaakt door twee iconen van het Noun-project te downloaden. Hier is een link naar de cheque en een link naar de X. De Noun Project-pictogrammen zijn wit, #FFFFFF. Terwijl de achtergrondkleur is # F89B8D voor 👎 en # FECD75 voor 👍🏿.
Verander ze in symbolen en noem ze Annotatie / Ja-Nee / 👎 en Annotatie / Ja-Nee / 👍🏿 (ja, emoji's worden ondersteund.)
Het proces voor het maken van dit element lijkt sterk op het maken van het pagina-element. Maak een vierkant (de mijne is 126px bij 126px) en draai het, of transformeer het, naar een hoek van 45º. Daarnaast heb ik een straal van 5 px toegevoegd aan het vierkant. De achtergrondkleur is # F2F2F2 , geen grens. Sla het op als een gedeelde stijl. Over het plein hebben we een tekstgebied nodig. Ik heb mijn tekstlaag "Decision" genoemd. Vergeet niet dat het benoemen van lagen belangrijk is. U kunt de gedeelde tekststijl opnieuw gebruiken als u deze eerder hebt opgeslagen. Zo niet, dan is de stijl voor de tekst # 325372 voor de kleur, Helvetica Neue, gemiddeld gewicht, 11 lettertypen. Als u mijn stijlen kopieert, converteert u de stijl van beide, de tekst en het vierkant, in gedeelde stijlen.
Ten slotte is het tijd om de beslissing om te zetten in een symbool. Ik noem het Annotation / Decision.
Het label met één actie zal de stijlen van het beslissingselement opnieuw gebruiken. Het is een rechthoek; de mijne is 117px bij 24px. Hergebruik dezelfde stijl van de beslissingsindicator voor zowel rechthoek als tekst. Vergeet niet de tekstlaag een naam te geven; Ik heb de mijne 'actie' genoemd. Verander het in een symbool en noem het symbool Annotatie / actie. En we zijn hier klaar; volgende!
De laatste twee dingen op onze lijst worden de notities en labelelementen. Laten we beginnen met het label. Deze is een beetje lastig, maar niets wat we niet aankunnen. Om de vorm gemakkelijker te maken, kunt u de rechthoek en de tekst kopiëren van de actie die we eerder hebben uitgevoerd. We hebben een rechthoek nodig, de mijne is 117px bij 24px, met een straal van 5px. Het heeft # 6FCFDB voor de achtergrond. Vervolgens het tekstgebied. Hergebruik de tekststijl uit de actie- of beslissingsindicatoren. Maak vervolgens een nieuwe gedeelde stijl met de naam Label-tekst en verander de tekst opnieuw in #FFFFFF. Maak ze vervolgens opnieuw tot een symbool (heb je de sneltoets gebruikt en ben je eraan gewend om daar te zijn? Geweldig. 🙌)
Dubbelklik op het nieuw gemaakte symbool en selecteer de tekstlaag. We moeten de eigenschappen voor het wijzigen van de grootte wijzigen. We moeten het vastpinnen aan de linker- en rechterrand van het object. Soms doet Sketch dit automatisch voor u, maar niet altijd, daarom is het beter om dit dubbel te controleren.
Ten slotte hebben we de notities. De styling die ik hiervoor heb is als volgt: # A4A4A4 voor de tekstkleur, Helvetica Neue, normaal gewicht deze keer en 11 lettertypegrootte. Dit is tot nu toe anders dan al het andere, dus maak de notitietekst niet in een symbool. Voeg het alleen toe als een gedeelde stijl.
Nu we klaar zijn met de basisvormen en elementen, kunnen we nu de stroomschema's samenvoegen.
Bovenstaande afbeelding toont alle verschillende symbolen die ik tot mijn beschikking heb. Dit is een hele verzameling - en ik probeerde het klein te houden zonder al te veel aanpassingen. De onderstaande afbeelding toont u een voorbeelddiagramstroom die ik met behulp van deze symbolen heb gemaakt.
Het enige dat u hoeft te doen, is het element selecteren dat u nodig heeft uit de symbolensectie en een stroomdiagram in uw tekengebied rangschikken.
Goed gedaan voor het volgen van al deze stappen! Nu heb je een vrij cool Sketch-bestand waarmee je of je team eenvoudig gebruikersstroom- en taakstroomdiagrammen kunt maken!
De volgende stappen kunnen zijn het maken van een stijlgids voor uw stroomdiagrammen; manieren om kleuren, typografie en dergelijke gemakkelijk uit te wisselen. Misschien ook documentatie maken binnen uw Sketch-bestand als u van plan bent om het te gebruiken met uw teamgenoten of het als freebie weg te geven. Blijf op de hoogte voor tutorials over deze onderwerpen binnenkort!
Accentsconagua