Accentsconagua
Share
Hva du skal skapeEn stund tilbake publiserte vi en opplæring om å skape en tilpasset Sketch-fil med gjenbrukbare flytdiagrammer. Det er en god ressurs for å lage dine egne brukerflyter eller nettstedskart. I denne opplæringen skal vi bøte opp den Sketch-filen for å gjøre den mer brukbar for andre.
Du kan ha kolleger som ønsker å bruke filen, eller kanskje betale kunder. Uansett vil forbedringene vi gjør i filen bety at andre kan åpne den, forstå den og bruke den.
Jeg anbefaler at du går videre og leser gjennom den opprinnelige opplæringen. I det minste, ta tak i den endelige Sketch-filen for å komme i gang på høyre fot og følg med denne andre delen. Denne veiledningen er jam-pakket med Sketch tips og triks, noen pro tips her og der, samt noen få relaterte plugins du må prøve for deg selv.
Det aller første vi skal gjøre er å sette opp en ny side. Jeg ringer til min "Brukerhåndbok". Denne siden vil fungere som et raskt gjennomslag på hvordan du bruker flytdiagramelementene. Vi bruker det til å forklare hvert elements rolle, hvordan du bruker dem og hvordan du kan manipulere egenskapene som utgangspunkt for pilene.
Vi begynner med et nytt tavla, jeg ringer min "Hvordan bruker du piler". trykk EN å lage en ny Artboard og velg fra øverste høyre hjørne Papir størrelse og Brev. Sketch vil automatisk plassere riktig størrelse tavle for deg (dette fungerer også med desktop og mobile skjermstørrelser!).
Papirstørrelser for kunstbrett i skisseJeg vil at nye brukere skal forstå noen få ting, blant annet hvordan du velger en linje og legger den på en tavla, hvordan du endrer form og hvordan du endrer start- og sluttpunkter. Hvordan du forklarer disse tingene er ditt valg; De spesifikke beskrivelsene og instruksjonene er opp til deg. Jeg har forbedret beskrivelsene mine ved å inkludere et par skjermbilder.
På samme måte som med symboler eller lagstiler kan vi også organisere tekststiler. For disse manuelle sidene har jeg tre forskjellige tekststiler, H1, H2, og kropp.
Min H1 er Helvetica Neue, Regular, 24px i størrelse med linjehøyde på 30px. De H2 er Helvetica Neue, Fet, 14px i størrelse med linjehøyde på 20px. De kropp er Helvetica Neue, Regular, 12px i størrelse med linjehøyde på 20px. Alle tre av dem bruker fargen # 325372.
Vi kan bruke Sketchs organisasjonssyntax for å få disse stilene organisert i rullegardinmenyen. Jeg har kalt dem som følger, som du kan se reflektert i rullegardinmenyen over:
Jeg elsker dette - det gjør Sketch-filene mine så mye mer organisert!
Den neste siden i brukerhåndboken skal diskutere merknader. For å spare tid, kopier pilens side og rediger teksten og bildene for å reflektere merknader. For kommentarer må vi diskutere følgende: legge til på en side, velge en annen annotasjon og endre størrelse.
I den første opplæringen sørget vi for at handlings- og etikettannotasjonene ble manuelt flyttbar med Sketchs opprinnelige egenskaper. Men hvis du vil bruke en kul plugin for å gjøre resizing for deg, kan jeg foreslå at du laster ned og bruker Rebel Button eller Paddy?
Til slutt legger jeg til en side for "Hvordan bruke sider". Jeg har tatt med standardinstruksjonene om hvordan du legger til en side i artikkelen, samt hvordan du endrer standard «startside» -teksten.
Tips: Hvis du trenger å plassere elementene nøyaktig, velger du et element og trykker på Alternativ på tastaturet ditt. Når musen din svinger over de andre elementene på tavlen, vil indikatorene reléere de eksakte pixelavstandene mellom dem.
Den neste tingen vi trenger å sette opp er stilguiden. Jeg har laget en ny side, og du gjettet det, jeg har kalt det "Stilguide". Som enhver annen stilguide, er dette ment å introdusere brukere til de forskjellige stilene som brukes i filen. Innenfor stilveiledningen skal jeg diskutere farger, typografi og lagstiler - inkludert pilelinjestiler (solid vs. strekt).
I den opprinnelige utformingen av flytskjemaene endte jeg med å bruke ni forskjellige farger, så la oss lage et nytt tavla bare for dem. Legg alle fargene ut på siden og navn dem. De kule greiene kommer neste!
Jeg legger nå disse fargene som stiler. På denne måten, hvis noen ønsker å tilpasse fargene til de forskjellige elementene de kan.
Først syntaxen: Stiler / Farge / Fargenavn. Så, Stiler / Farge / Feil rød eller Stiler / Farge / Bakgrunnsblue. Når du er ferdig med å legge dem, se og beundre hvordan deilig organisert disse fargene vises i Lag stil fall ned! I tillegg kan du se at det er igjen stiler fra den opprinnelige opplæringen. Vi skal organisere dem litt senere.
Den første grunnen til alle utlegge farger er å vise hva som er i bruk (som en stilguide skal). Den andre grunnen er at det er lett å hente igjen. Det gjelder ikke alle de forskjellige elementene som brukes (som tekst), men det kan lett påvirke de med bare en bakgrunn som Ja og Nei merknader. Vi prøver å gjøre akkurat det neste.
Gå tilbake til symbolssiden. Deretter gjelder de samme stilene som vi nettopp har opprettet til Action, Label, Yes og No elements. På denne måten, hvis du bestemmer deg for at du ikke lenger vil at Ja skal være gult, men grønt, er alt du trenger å oppdatere fargen i Style-veiledningen, og alle Ja i hele Sketch-filen vil endre farge.
For å gjøre arbeidsflyten litt enklere, vil du kanskje lagre fargene dine i dokumentfargene. Dette vil gjøre dem lettere å få tilgang til hele tiden.
Hvis du elsker å bli organisert, foreslår jeg at du laster ned Plugin for sortering meg. Det sorterer både lag og tavle, alfabetisk og numerisk (eller omvendt også). Her er noen andre effektivitetsressurser for Sketch:
Den neste stilguiden vi trenger å lage er for typografi. Vi vil vise alle tekststiler i dokumentet, og jeg vil dele dem opp i to kategorier, dokumenttekster (som i håndboken og stilveiledningen her) og de i flytskjemaene.
Jeg vil nå vise deg hvordan du omorganiserer dine nåværende tekststiler og omdøper dem (hvis det er nødvendig). Fra Tekststil rul ned, velg det aller siste alternativet Organiser tekststiler ... Det vil hente ut et nytt vindu som er fylt med hver eneste av tekststiler. Hvis du dobbeltklikker på en, kan du omdøpe den. Jeg vil at du skal endre navn på dem på følgende måte:
Jeg vil også at du skal gi nytt navn til alle tre "Manuelle tekster" til "Dokumenttekst". Vi opprettet de opprinnelige navnene med det formål å bare bruke dem i brukerhåndboken, men siden da har vi lagt til stilveiledningen som gjør navngivningskonvensjonen ikke lenger nøyaktig. Som du kan se å gi nytt navn, er tekststilene enkle. Hvis du mispellerer et navn eller din navngivningskonvensjon må oppdateres, er det ikke et problem!
Tips: Det lille minusikonet [-] i nederste venstre hjørne vil slette den valgte stilen. Men vær forsiktig: det er ingen angre, og det spør ikke om du er sikker.
Oppdater tekststilen i stilveiledningen for å oppdatere typografien gjennom hele filen (akkurat som med farger).
Dette kommer til å være den siste tavlen under stilguiden. Her diskuterer vi hvordan du skal trekke opp og behandle de gjenværende elementene, sidesymbolet og beslutningsannonseringssymbolet. Vi diskuterer piler sist, rett etter at du har fullført delen for delte stiler.
Hvis du ser tilbake til fargeseksjonen, vil du huske at vi hadde noen flere stilarter som jeg sa at vi vil organisere senere. Nå, nå er klokken! Ideen er akkurat det samme som med å organisere tekststiler. Velg å organisere lagstilen; Du kan omdøpe, organisere og slette dem alle, akkurat som med tekststiler.
For lagstilene, vil jeg at du skal beholde hver eneste av Style / Color / ... vi tidligere laget. Deretter skal du omdøpe resten som følger:
Tips: Når du trykker på Tab-tasten, navigerer du ikke ned i listen med stilens navn, det samme som nedover lagelisten. I stedet, i dette vinduet, gjør Tab-tasten den valgte stilens navn redigerbar eller ikke. Bytt den en eller to ganger for å se nøyaktig hva jeg mener!
Husk minus ikon [-] Jeg nevnte før? Det er for å slette stiler. Jeg trenger deg til å slette Bakgrunnsgrå. Det er en rest fra min første designutforskning og er ikke i bruk hvor som helst.
Til slutt, lukk vinduet, velg bakgrunnen til beslutningsannonseringen og velg Opprett ny lagstil, fra rullegardinmenyen. Navngi den nye stilen "Bakgrunn / Beslutning". Vi fortsetter og justerer stilene til disse nå, tilbake i stilføringssiden. Kopier bakgrunnene fra Beslutningens notat og Sideelementene.
Tilbake i stilguiden, lim de to bakgrunnene inn i pilene og elementene i tavlen. (Jeg kommer bare til å kopiere over siden og beslutningsbeskrivelsen.)
Bare for å gi deg et faktisk eksempel på å bytte ut stilen og oppdatere den universelt, vil jeg at vi skal fortsette og endre bakgrunnsdesignen til beslutningsbeskrivelsen. Derfor hadde jeg laget en egen lagstil for den, så det ville ikke påvirke handlingsannonseringen. Endre det til alt du vil, det trenger ikke å matche designet. Legg til en 1 px kantlinje med en farge du velger og en ny bakgrunnsfarge også.
Når du er ferdig, fra Lag stil slipp ned velg Oppdater lagsstil. Hvis du går til sample flow diagramsiden eller tilbake til symbolssiden, vil du se at stilene har blitt oppdatert. Det er et godt eksempel på oppdateringsstilene i aksjon. Det er akkurat det du burde forvente å skje hvis du skulle oppdatere dokumentet for ny designstil, for eksempel forskjellige merkevaremerker.
Tips: Hvis du endrer stilen til et element med en lagestil på den, kan du ta den tilbake til den opprinnelige stylingen ved å velge Tilbakestill lagstil.
Ok, vi har kommet over de endelige eiendelene, og det handler om pilene! Jeg forlot best for sist, naturlig. Først først må vi legge til piler i vår stilguide. Akkurat nå har vi bare en slags pil til vår disposisjon. Men hvis du husker under lagstilen, rydde opp, hadde vi en solid linje og en prikket linje. La oss legge til de stiplede pilene i samlingen vår.
På symbolssiden vil jeg at du skal kopiere den første pilen, pilen / standard / høyre og omdøpe den pil / prikket / standard / høyre. Velg pilens linje og fra Layer Styles slipp ned velg Pil linje deretter prikket. Og det er det! Vi har vår første prikkede pil.
To ting her. Først, fortsett og til det til de resterende pilene. Hold deg til navnetkonvensjonen Arrow / Dotted / ... for å holde orden Symboler fall ned. Når du snakker om navnekonvensjoner og syntakser, må du omdøpe hver eneste av de opprinnelige solidline-pilene. De Symboler Dropdown kommer til å bli rotete hvis du ikke gjør det.
Bruk Rename It Sketch-plugin for å gjøre dette jevnere for deg! Å velge Plugins> Gi nytt navn til det> Finn og erstatt lag / Artboard-navn. Eller du kan trykke på Kontroll + Alternativ + Kommando + R for plugin-vinduet skal vises. Der skriver du inn pil / standard eller pil / s-form og erstatter den med pil / solid / standard og pil / solid / s-form og så videre. Kontroller at gjeldende søkeområde er valgt til Nåværende side i stedet for Lag.
Det aller siste når det gjelder piler er start- og sluttpunktene. I den første opplæringen viste jeg deg hvordan du legger til forskjellige eksempler som en oversikt. Legg til så mange stiler som du vil, og når du er ferdig, ikke glem å inkludere alle de nye og fantastiske start- og sluttpunktene i stilguiden også.
Og med det er vi ferdige med å lage stilguiden!
Formålet med denne opplæringen var å bygge opp den opprinnelige og lære deg flere fantastiske måter å bruke Sketch på. Samtidig vil dette ha vist noen praktiske måter å forbedre og pakke opp alle dine Sketch-filer for å gjøre dem mer brukbare for lagmedlemmer og kunder.
