Share
Vad du ska skapaI denna handledning kommer vi att skapa återanvändbara flöden för användarflöde och arbetsflödesdiagram i Sketch. Vi utnyttjar kraften i Sketch-symbolerna, med hjälp av grundläggande element och några anpassningar för att våra symboler ska fungera för oss.
"[A] flödesschema är ett diagram över sekvensen av rörelser eller handlingar hos personer eller saker som är inblandade i ett komplext system eller aktivitet." - Naema Baskanderi
För att bygga våra flödesdiagram behöver vi element för sidorna, pilarna, åtgärderna (inklusive beslut och ja / nej indikatorer), etiketter och anteckningar. Jag ska gå över vart och ett av dessa element, hur de ska se ut (om du känner dig benägen att kopiera min styling), hur de ska fungera och hur de passar in i den stora bilden. Men innan vi gör det måste vi gå över namngivna konventioner i Sketch. Det är en av de viktigaste faktorerna för att göra detta arbete. Låt oss dyka rätt in, ska vi?
Skissymboler är perfekta för flödesdiagramYup, vi gör, och av två specifika skäl. För det första är det bra att hålla dina lager namngivna för organisationsändamål, speciellt om du hanterar filerna med andra människor. När du skapar en symbol med flera textfält i den, kan ordnade textlag hjälpa dig att skilja vilken text som är vilken när du försöker byta ut eller åsidosätta den.
Den andra anledningen är dock mycket kallare. Skiss kommer automatiskt att gruppera symboler, textstilar och delade stilar i olika lager, förutsatt att du följer en viss syntax. Sketch bygger på URL-liknande och mappliknande namnkonventioner, till exempel kommer följande två symboler att grupperas snyggt tillsammans.
Då om vi heter ett annat:
Det kommer också att grupperas under pilar men i olika undermappar: Standard. Denna kategorisering tillåter oss att hitta exakt den symbol vi behöver när vi behöver det:
Organiserade symboler i skissTänk på detta när du nämna någonting framåt, speciellt textlager, symboler och delade stilar.
Sidan är en grundläggande del av vårt flödesschema. Webbplats- eller appanvändare följer olika rutter, kompletterar olika uppgifter och sidor kommer alltid att vara centrala för detta.
För att skapa sidelementet behöver vi en rektangel och ett textfält ovanför det. Rektangelens stilar inkluderar # 325.372 för färgen Helvetica Neue, medelvikt och teckenstorlek 11. Du kan skapa en delad stil för detta eftersom de andra elementen kommer att ha samma typografi, även om sidelementet kommer att använda stor bokstav. För att göra detta, under alternativ, ändra texten omvandla till stor bokstav.
Rektangeln är 144px med 96px med en radie av 5, # F7FCFD för bakgrund och # B7E7EE för 1px inuti gränsen. Det är en bra idé att vända åtminstone styling av sidrektangel till en delad stil. Detta möjliggör enkel redigering senare.
Byt namn på textlagret till "Sidnamn". På det sättet, när du återanvänder det här elementet som en ny symbol, kommer texten åsidosättas att ha en titel istället för "text". Välj dem båda och konvertera dem till en enda symbol genom Skapa symbol knappen i verktygsfältet.
I denna handledning skapar vi mycket av symboler. Sketch har inget specifikt nyckelkommando för det här inbyggda, men vi kan skapa en egen genväg själv.
Först, gå till Systeminställningar och gå in i Tangentbord. Välj Genvägar fliken från toppen. I den vänstra panelen välj Appgenvägar och tryck på + knapp. Ett överlag kommer att dyka upp; i programlistan lokalisera Skiss. Under Menyn Titel du måste fylla i det specifika menyobjektnamnet vi riktar in, vilket i detta fall är Skapa symbol (det är det första menyalternativet under Lager). Slutligen, välj din snabbtangent, och det är det.
Proffstips: Detta kan användas för alla applikationer.
Skapa en anpassad tangentbordsgenväg för SketchDu kan göra så många olika pilstilar som du vill, men tanken här är att visa dig hur du skapar en enda justerbar pil för att börja med. Du kan lägga till din egen styling och variationer senare.
Som du kan se i bilden ovan kommer pilen att ta många former; vi måste vara kloka på att skapa den. Först behöver vi en startpunkt och en slutpunkt. I mitt fall är det en öppen cirkel och en triangel. Triangeln är en SVG-ikon som jag hittade på Noun-projektet. Du kan själv skapa en enkel triangel eller använda en ikon.
jag använder # 325.372 för pilen, cirkelgränsen och för linjen. Cirkeln har en vit bakgrund #FFFFFF för. Nu, vrid dem båda till symboler och namnge dem enligt vad de är. Om du vill gå lite galen och skapa individuella symboler för triangeln är upp, ner, vänster eller höger, gå sedan till det. Men det är inte nödvändigt.
Nästa är linjen själv. Skapa en enda pixellinje med linjed verktyget. Oavsett stilen du har på det, vrid stilen på linjen till en delad stil. Jag har två; fasta och prickade stilar för primär och sekundär pilar. Att ha flera delade stilar gör det lättare att byta mellan dem. Mer om det senare.
Därefter måste vi skapa varje typ av pil genom att kombinera startpunkten, linjen och slutpunkten. Pilarna måste vara utbytbara för att skapa diagrammet, så låt oss göra det nu.
Låt oss först skapa en fyrkantig tavla. En fyrkant hjälper oss att hålla allt i samma form och pilarna blir enklare att arbeta med då. Gruvan är 80px med 80px. Jag vill börja med att skapa en tavla för varje pil. På så sätt kan jag se dem alla på en gång. Låt oss börja med att först skapa vänster, höger, övre och nedre vänsterpilarna. Välj nu dina pilar och vrid dem till symboler som vi har gjort. Glöm inte att använda din nyinställda genväg också. Namn på dessa symboler, Arrow / Default / Left, Arrow / Default / Right och så vidare (du får idén).
Nu när de enklare pilarna tas hand om; låt oss flytta på de krökta. Denna del är avgörande eftersom vi behöver pilarna för att vara enkelt att ändra och justera. Jag ska gå vidare och skapa en av varje för de tre stilarna först.
Inom de nya skivorna, fortfarande 80px med 80px i storlek, och använda vektorverktyget (V), rita pilens linjer för L-Shape, S-Shape och U-Shape-stilar. Se till att dina linjer är kvadrade. Gör inga kurvor själv just ännu. Om du har problem med att göra perfekta linjer, placera punkterna mer eller mindre där de ska vara, ändra sedan deras plats manuellt genom att mata in X och Y positionerna själv.
Ta en titt på bilden. Därefter måste vi redigera kurvorna. För varje linje välj bara de punkter som utgör hörnen. Välj inte början eller slutpunkten. På höger sida, höja hörnet till vad du vill. Jag satte min till 10px. Nu ändras hörnen automatiskt automatiskt utan att snedvrida linjen.
Det sista vi behöver göra här är att lägga till start- och slutpunkter. Men innan vi gör, låt oss vända linjerna (bara raderna för nu) till symboler. Vi vill att linjen ska kunna justeras baserat på dess faktiska slutpunkter, dess början och slut, exklusive ikonerna i dess ändar. Vi lägger till start- och slutpunkter på en minut. Namn dessa tre pilar Pil / L-Form / Höger-Nedåt, Pil / S-Form / Höger-Ned-Höger, och Pil / U-Form / Höger-Ned-Vänster.
Dubbelklicka nu på någon av de nyskapade symbolerna för att redigera den. Vi vill placera start- och slutpunkterna i kanten av symbolen och centrera inriktningen med linjens ändpunkter. Helst vill du placera start- och slutpunkterna centrerade vid hörnet av symbolens tavlor.
Slutligen, för att göra pilarna resizable, för både startpunkten och slutpunkten, under viloläge, välj fixa bredd och fixa höjden. Glöm inte att byta namn till Startpunkt och Slutpunkt. Denna namnbyte gör det lättare att veta vilken som är vilken när du byter typ.
Vi måste upprepa detta med de återstående pilarna, inklusive de återstående riktningarna på pilarna L-Shape, S-Shape och U-Shape. Gör det genom att upprepa tidigare steg.
Du kan ha så många olika pilartyper som du vill ha; prickad, streckad, solid eller vad som helst annat. Den tråkiga delen är att du kommer att ha skapat en ny uppsättning pilar för varje stil om du vill använda mer än en i samma fil. Annars uppdaterar du bara den delade stilen. Glöm inte att justera namngivningskonventionerna till pil / s-form / höger-ned-höger / prickad eller pil / prickad / s-form / höger nedåt-höger.
Jag tycker att den viktigaste utvecklingen ligger bakom oss. De återstående elementen är inte särskilt komplicerade. Handlingselementen här innehåller elementen för ja / nej indikatorer, ett beslut, en enda åtgärdslabel.
Ja och inga indikatorer tillåter oss att illustrera punkter på vårt diagram där flödesriktningen påverkas av antingen en "ja" eller "nej" -åtgärd.
Dessa indikatorer är enkla (åtminstone jämfört med pilarna). Jag gjorde dem genom att ladda ner två ikoner från Noun-projektet. Här är en länk till checken och en länk till X. Noun-projektikonen är vita, #FFFFFF. Medan bakgrundsfärgen är # F89B8D för 👎 och # FECD75 för 👍🏿.
Vänd dem till symboler och namnge dem Annotation / Ja-Nej / 👎 och Annotation / Ja-Nej / 👍🏿 (Ja, emojis stöds.)
Processen för att skapa detta element liknar mycket att skapa sidelementet. Skapa en fyrkant (gruvan är 126px med 126px) och rotera den eller omvandla den till en 45º vinkel. Dessutom har jag lagt till en 5px radie på torget. Dess bakgrundsfärg är # F2F2F2 , ingen gräns. Spara det som en delad stil. Över torget behöver vi ett textområde. Jag har titeln mitt textlag "Beslut". Kom ihåg att namngivande lager är viktigt. Du kan återanvända den delade textstilen om du sparade den tidigare. Om inte, är styling för texten # 325.372 för färgen, Helvetica Neue, medelvikt, 11 teckenstorlek. Om du kopierar mina stilar konverterar du styling av både, texten och torget till delade stilar.
Slutligen är det dags att konvertera beslutet till en symbol. Jag heter den Anteckning / Beslut.
Etiketiketten kommer att återanvända stilar från beslutsdelen. Det är en rektangel; minen är 117px med 24px. Återanvänd samma styling från beslutsindikatorn för både rektangel och text. Glöm inte att namnge textlagret; Jag heter min "Action". Vänd det till en symbol och ange symbolen Annotation / Action. Och vi är färdiga här; Nästa!
De två sista sakerna på vår lista kommer att vara noterna och etikettelementen. Låt oss börja med etiketten. Den här är lite knepig men ingenting vi inte kan hantera. För att underlätta formen kan du kopiera rektangeln och texten från den åtgärd vi gjort tidigare. Vi behöver en rektangel, min är 117px med 24px, med 5px radie. Det har # 6FCFDB för bakgrunden. Nästa textområde. Återanvänd textstilen från åtgärds- eller beslutsindikatorerna. Skapa sedan en ny delad stil som heter Labeltext och lita på texten till #FFFFFF. Därefter, gör dem till en symbol igen (har du använt genvägen och vänjat sig till att vara där? Great. 🙌)
Dubbelklicka på den nyskapade symbolen och välj textlagret. Vi måste redigera egenskaperna för resizing. Vi måste stifta det till vänster och höger kant av objektet. Ibland gör Sketch det här automatiskt för dig, men inte alltid, det är därför bättre att dubbelkontrollera.
Slutligen har vi anteckningarna. Den stil som jag har för dessa är följande: # A4A4A4 för textens färg, Helvetica Neue, vanlig vikt denna gång och 11 teckenstorlek. Detta är till skillnad från allt annat hittills, så gör inte notattexten till en symbol. Lägg bara till den som en delad stil.
Nu är vi färdiga med de grundläggande formerna och elementen, vi kan nu sammanföra flödesdiagrammen.
Ovanstående bild visar alla de olika symbolerna jag har till mitt förfogande. Det här är en ganska samling - och jag försökte hålla den liten utan mycket anpassning. Nedanstående bild visar ett provdiagramflöde som jag skapat med hjälp av dessa symboler.
Allt du behöver är att välja det element du behöver från symbolavsnittet och ordna ett flödesschema på din tavla.
Bra gjort för att följa alla dessa steg! Nu har du en ganska cool skissfil som enkelt kan låta dig eller ditt lag skapa användarflöde och arbetsflödesdiagram!
Följande steg kan innebära att du skapar en stilguide för flödesdiagrammen. sätt att enkelt byta färg, typografi och liknande. Kanske skapar du även dokumentation i din Sketch-fil om du planerar att använda den med dina lagkamrater eller ge den bort som en freebie. Håll dig uppdaterad för handledning om dessa ämnen snart!
Accentsconagua