Share
Hva du skal skapeI denne opplæringen skal vi lage gjenbrukbare brukerflyt og oppgavestrømdiagrammer i Sketch. Vi vil utnytte kraften til Sketch-symboler, ved hjelp av grunnleggende elementer og noen få tilpasninger for å få våre symboler til å fungere for oss.
"[A] flytskjema er et diagram over sekvensen av bevegelser eller handlinger av mennesker eller ting som er involvert i et komplekst system eller aktivitet." - Naema Baskanderi
For å bygge flytdiagrammer trenger vi elementer for sider, piler, handlinger (inkludert beslutninger og ja / nei indikatorer), etiketter og notater. Jeg skal gå over hver av disse elementene, hvordan de skal se ut (hvis du føler deg tilbøyelig til å kopiere stilen min), hvordan de skal fungere, og hvordan de passer inn i det store bildet. Men før vi gjør det, må vi gå over navnekonvensjoner i Sketch. Det er en av de viktigste faktorene i å gjøre dette arbeidet. La oss dykke rett inn, skal vi?
Skissymboler er perfekte for flytdiagrammerYup, vi gjør, og av to spesifikke grunner. For det første er det god praksis å holde lagene dine oppkalt etter organisatoriske formål, spesielt hvis du håndterer filene med andre mennesker. Når du oppretter et symbol med flere tekstfelter i det, vil riktig lagrede tekstlag hjelpe deg å skille mellom hvilken tekst som er når du prøver å erstatte eller tilsidesette den.
Den andre grunnen er mye kjøligere skjønt. Skisse vil automatisk gruppere symboler, tekststiler og delte stiler i forskjellige lag, forutsatt at du følger en bestemt syntaks. Skisse er avhengig av URL-lignende og mappe-lignende navngivningskonvensjoner, for eksempel vil de to følgende symbolene grupperes pent sammen.
Så hvis vi heter et annet:
Det vil også bli gruppert under piler, men i en annen undermappe: Standard. Denne kategoriseringen tillater oss å finne akkurat det symbolet vi trenger, når vi trenger det:
Organiserte symboler i SkisseVær oppmerksom på dette når du navngir noe fremover, spesielt tekstlag, symboler og delte stiler.
"Siden" er en grunnleggende del av flytskjemaet. Nettsted- eller app brukere vil følge ulike ruter, fullføre ulike oppgaver, og sider vil alltid være sentrale for dette.
For å opprette sideelementet trenger vi et rektangel og et tekstfelt over det. Rektangelets stiler inkluderer # 325372 for farge, Helvetica Neue, middels vekt og skriftstørrelse 11. Du kan opprette en delt stil for dette, da de andre elementene vil ha samme typografi, selv om sideelementet vil bruke stor bokstav. For å gjøre dette, under opsjoner, endre teksten transformere til store versjoner.
Rektangelet er 144px med 96px med en radius på 5, # F7FCFD for bakgrunn og # B7E7EE for 1px innsiden grense. Det er en god ide å omdanne sidestykket til en delt stil i det minste. Dette vil tillate enkel redigering senere.
Gi nytt navn til tekstlaget til "Sidens navn". På denne måten, når du bruker dette elementet som et nytt symbol, vil tekstoverstyringen ha en tittel i stedet for "tekst". Velg dem begge og konverter dem til et enkelt symbol gjennom Opprett symbol knappen i verktøylinjen.
I denne opplæringen vil vi skape mye av symboler. Sketch har ikke en bestemt nøkkelkommando for dette innebygd, men vi kan lage en egendefinert snarvei oss selv.
Gå først til Systemvalg og gå inn i Tastatur. Velg snarveier kategorien fra toppen. Velg på venstre panel App snarveier og trykk på + knapp. Et overlegg vil dukke opp; i søkelisten lokalisere Skisse. Under Menytittel du må fylle ut det spesifikke menypunktnavnet vi målretter mot, som i dette tilfellet er Opprett symbol (det er det første menyelementet under Lag). Til slutt, velg tastaturgenveien, og det er det.
Pro tips: Dette kan brukes til enhver applikasjon.
Lag en egendefinert hurtigtast for SketchDu kan lage så mange forskjellige pilestiler som du vil, men ideen her er å vise deg hvordan du lager en enkelt, justerbar pil for å begynne med. Du kan legge til din egen styling og variasjoner senere.
Som du kan se i bildet ovenfor, vil pilen ta mange former; Vi må være kloge i å skape den. Først trenger vi et startpunkt og et sluttpunkt. I mitt tilfelle er det en åpen sirkel og en trekant. Triangelet er et SVG-ikon jeg fant på Noun-prosjektet. Du kan selv lage en enkel trekant, eller bruke et ikon.
jeg bruker # 325372 for pilen, sirkelgrensen og for linjen. Sirkelen har en hvit bakgrunn #FFFFFF også. Nå, slå dem begge inn i symboler og navn dem etter hva de er. Hvis du vil gå litt gal og lage individuelle symboler for trekantene opp, ned, venstre eller høyre, så gå for det. Men det er ikke nødvendig.
Neste er linjen selv. Opprett en enkelt piksellinje med linjeverktøyet. Uansett hvilken styling du har på det, må du endre stilen på linjen til en delt stil. Jeg har to; Solid og stiplede stiler for primære og sekundære piler. Å ha flere delte stiler gjør det enklere å bytte mellom dem. Mer om det senere.
Deretter må vi lage hver type pil ved å kombinere startpunktet, linjen og sluttpunktet. Pilene må være utskiftbare for diagramopprettelsen, så la oss gjøre det nå.
Først, la oss lage en firkantet tavla. En firkant vil hjelpe oss med å holde alt i samme form og pilene blir lettere å jobbe med da. Gruven er 80px med 80px. Jeg vil begynne med å lage et tavla for hver pil. På den måten kan jeg se dem alle samtidig. La oss først starte med å opprette venstre, høyre, topp og nederste piler. Nå, velg pilene dine og slå dem til symboler slik vi har gjort. Ikke glem å bruke den nylig opprettede snarveien din også. Navn disse symbolene, pil / standard / venstre, pil / standard / høyre og så videre (du får ideen).
Nå som de lettere pilene blir tatt vare på; la oss bevege seg på de buede segene. Denne delen er avgjørende fordi vi trenger at pilene skal kunne resizable og justeres. Jeg skal fortsette og lage en av hver for de tre stilene først.
Innenfor de nye skiltene, fremdeles 80px med 80px i størrelse, og bruk vektorverktøyet (V), tegner du pilens linjer for L-Shape, S-Shape og U-Shape-stilene. Pass på at linjene er kvadrert. Ikke gjør noen kurver selv enda. Hvis du har problemer med å lage perfekte linjer, plasser poengene mer eller mindre der de burde være, og rediger deretter plasseringen manuelt ved å legge inn X og Y posisjoner selv.
Ta en titt på bildet. Deretter må vi redigere kurvene. For hver linje velg bare punktene som utgjør hjørnene. Ikke velg start- eller sluttpunkt. På høyre side øker du hjørnetallet til det du vil. Jeg satte meg til 10px. Nå blir hjørnene automatisk endret uten å forvride linjen.
Det siste vi må gjøre her er å legge til start- og sluttpunkter. Men før vi gjør det, la oss slå linjene (bare linjene for nå) til symboler. Vi ønsker at linjen skal justeres basert på dens faktiske endepunkter, begynnelsen og slutten, eksklusive ikonene i endene. Vi legger til start- og sluttpoeng på et minutt. Navn disse tre pilene Pil / L-Form / Høyre Ned, Pil / S-Form / Høyre-Ned-Høyre, og Pil / U-Form / Høyre-Ned-Venstre.
Dobbeltklikk nå på et av de nyopprettede symbolene for å redigere det. Vi ønsker å plassere start- og sluttpunktene på kanten av symbolet og sentrere det med linjens sluttpunkter. Ideelt sett vil du plassere start- og sluttpunktene sentrert ved hjørnet av symbolets tavler.
Til slutt, for å få piltastene til å resizable, velg både startpunkt og sluttpunkt, under hvilemodus fikse bredde og fikse høyde. Ikke glem å omdøpe dem til Startpunkt og Sluttpunkt. Denne navneendringen vil gjøre det lettere å vite hvilken er hvilken når du endrer typene.
Vi må gjenta dette med de resterende pilene, inkludert de resterende retningene på L-Shape, S-Shape og U-Shape-pilene. Gjør det ved å gjenta de forrige trinnene.
Du kan ha så mange forskjellige stiler av piler som du vil; prikkete, stiplede, faste eller hva som helst annet. Den kjedelige delen er at du skal ha opprettet et nytt sett med piler for hver stil hvis du vil bruke mer enn en i samme fil. Ellers oppdaterer du bare den delte stilen. Ikke glem å justere navnekonvensjonene til Pil / S-Form / Høyre-Ned-Høyre / Stiplede eller Pil / Stiplede / S-Form / Høyre-Ned-Høyre.
Jeg tror den mest avgjørende utviklingen er bak oss. De gjenværende elementene er ikke veldig kompliserte. Handlingselementene her inkluderer elementene for ja / nei indikatorer, en beslutning, en enkelt handling etikett.
Ja og ingen indikatorer tillater oss å illustrere punkter på vårt diagram der strømningsretningen påvirkes av enten en "ja" eller "nei" handling.
Disse indikatorene er enkle (i det minste i forhold til pilene). Jeg lagde dem ved å laste ned to ikoner fra Noun-prosjektet. Her er en lenke til sjekken og en lenke til X. Noun-prosjektikonene er hvite, #FFFFFF. Mens bakgrunnsfargen er # F89B8D for 👎 og # FECD75 for 👍🏿.
Slå dem inn i symboler og navn dem Anmerkning / Ja-Nei / 👎 og Anmerkning / Ja-Nei / 👍🏿 (Ja, emojis støttes.)
Prosessen for å lage dette elementet ligner veldig på å lage sideelementet. Lag en firkant (min er 126px ved 126px) og roter den, eller transformer den, til en 45º vinkel. I tillegg har jeg lagt til en 5px radius på torget. Bakgrunnsfargen er # F2F2F2 , ingen kantlinje. Lagre det som en delt stil. Over torget trenger vi et tekstområde. Jeg har tittel på mitt tekstlag "Beslutning". Husk at navngivning av lag er viktig. Du kan gjenbruke den delte tekststilen hvis du har lagret den før. Hvis ikke, er stylingen for teksten # 325372 for farge, Helvetica Neue, middels vekt, 11 skriftstørrelse. Hvis du kopierer stilene mine, konverterer du stylingen av både teksten og torget til delte stiler.
Til slutt er det på tide å konvertere beslutningen til et symbol. Jeg skal nevne det Notat / Beslutning.
Enkelt handling etiketten vil gjenbruk stilene fra beslutningselementet. Det er et rektangel; min er 117px med 24px. Gjenbruk den samme stylingen fra beslutningsindikatoren for både rektangel og tekst. Ikke glem å nevne tekstlaget; Jeg heter min "Action". Vri den til et symbol og merk symbolet Annotasjon / handling. Og vi er ferdige her; neste!
De to siste tingene på vår liste skal være notater og etikettelementer. La oss starte med etiketten. Denne er litt vanskelig, men ingenting vi ikke klarer å håndtere. For å gjøre formen lettere, kan du kopiere rektangelet og teksten fra handlingen vi gjorde før. Vi trenger et rektangel, min er 117px med 24px, med 5px radius. Det har # 6FCFDB for bakgrunnen. Neste, tekstområdet. Gjenbruk tekststilen fra handlings- eller beslutningsindikatorene. Deretter oppretter du en ny delt stil kalt Etiketttekst og gjentar teksten til #FFFFFF. Gjør dem igjen til et symbol igjen (har du brukt snarveien og vant til å være der? Great. 🙌)
Dobbeltklikk på det nyopprettede symbolet og velg tekstlaget. Vi må redigere egenskapene for resizing. Vi må pinne den til venstre og høyre kant av objektet. Noen ganger gjør Sketch dette automatisk for deg, men ikke alltid, derfor er det bedre å dobbeltsjekke.
Til slutt har vi notatene. Styling jeg har for disse er som følger: # A4A4A4 for tekstens farge, Helvetica Neue, vanlig vekt denne gangen og 11 skriftstørrelse. Dette er ulikt alt annet så langt, så gjør ikke notatteksten til et symbol. Legg bare til det som en delt stil.
Nå er vi ferdige med de grunnleggende former og elementer, vi kan nå sette flytdiagrammer sammen.
Ovenstående bilde viser alle de forskjellige symbolene jeg har til min disposisjon. Dette er ganske en samling - og jeg forsøkte å holde den liten uten mye tilpasning. Bildet under viser deg en prøvediagramstrøm jeg opprettet ved hjelp av disse symbolene.
Alt du trenger er å velge elementet du trenger fra symbolavsnittet og ordne et flytskjema på tavlen.
Godt gjort for å følge alle disse trinnene! Nå har du en ganske kul Sketch-fil som lett lar deg eller laget ditt lage brukerflyt og oppgavestrømdiagrammer!
Følgende trinn kan innebære å lage en stilguide for flytdiagrammer; måter å enkelt bytte ut farge, typografi og lignende. Kanskje også å lage dokumentasjon i Sketch-filen hvis du planlegger å bruke den med lagkameratene eller gi den bort som en freebie. Hold deg oppdatert på opplæringen om disse fagene snart!
Accentsconagua