Accentsconagua
Share
Vad du ska skapaEn stund tillbaka publicerade vi en handledning om att skapa en anpassad skissfil med återanvändbara flödesdiagram. Det är en bra resurs för att skapa egna flöden eller webbplatskartor. I denna handledning ska vi böja upp den Sketch-filen för att göra den mer användbar för andra.
Du kanske har kollegor som vill använda din fil, eller kanske betala kunder. Hur som helst kommer de förbättringar vi gör i filen att innebära att andra kan öppna den, förstå den och använda den.
Jag rekommenderar att du går vidare och läser igenom den ursprungliga handledningen. Ta åtminstone den sista Sketch-filen för att komma igång på den högra foten och följ med den andra delen. Denna handledning är jam-packad med skiss tips och knep, några pro tips här och där, liksom några relaterade plugins du måste försöka själv.
Det första vi gör är att skapa en ny sida. Jag ringer min "Användarmanual". Denna sida kommer att fungera som ett snabbt genomgång om hur man använder flödesdiagramelementen. Vi använder den för att förklara varje elements roll, hur man använder dem och hur man kan manipulera sina egenskaper som utgångspunkter för pilar.
Vi börjar med en ny tavla, jag kallar min "Hur man använder pilar". Tryck en för att skapa en ny Artboard och välj i högra högra hörnet Pappersformat och Brev. Skiss kommer automatiskt att placera högerstorlekens tavla för dig (det här fungerar även med skrivbord och mobil skärmstorlek!).
Pappersstorlekar för Artboards in SketchJag vill att nya användare ska förstå några saker, bland annat hur man väljer en rad och placerar den på en tavla, hur man ändrar form och hur man ändrar start- och slutpunkter. Hur du förklarar dessa saker är ditt val; De specifika beskrivningarna och instruktionerna är upp till dig. Jag har förbättrat mina beskrivningar genom att ta med ett par skärmdumpar.
Precis som med symboler eller lagerformat kan vi också organisera textstilar. För dessa manuella sidor har jag tre olika textstilar, H1, H2, och kropp.
Min H1 är Helvetica Neue, Regular, 24px i storlek med linjehöjd på 30px. De H2 är Helvetica Neue, Djärv, 14px i storlek med linjehöjd på 20px. De kropp är Helvetica Neue, Regular, 12px i storlek med linjehöjd på 20px. Alla tre använder färgen # 325372.
Vi kan använda Sketchs organisationssyntax för att få dessa stilar organiserade i rullgardinsmenyn. Jag har namngivit dem enligt följande, vilket du kan se återspeglas i nedanstående rullgardinsmeny:
Jag älskar det här, det gör mina Sketch-filer så mycket mer organiserad!
Nästa sida i användarhandboken kommer att diskutera anteckningar. För att spara tid, kopiera pilens sida och redigera texten och bilderna för att reflektera kommentarer. För annoteringar behöver vi diskutera följande: lägga till på en sida, välj en annan anteckning och ändra storlek.
I den inledande handledningen såg vi till att Action- och etikettannotationerna manuellt skulle kunna konverteras med Sketchs inhemska egenskaper. Men om du vill använda en cool plugin för att göra resizing för dig, kan jag föreslå att du laddar ner och använder Rebel Button eller Paddy?
Slutligen lägger jag till en sida för "Hur man använder sidor". Jag har inkluderat standardinstruktionerna om hur man lägger till en sida i tavlan och hur man ändrar standardtexten "hemsida".
Tips: Om du någonsin behöver placera dina element på ett korrekt sätt, välj ett element och tryck på Alternativ på ditt tangentbord. När musen hänger över de andra elementen på tavlan, kommer indikatorer att reläera de exakta pixelavstånden mellan dem.
Nästa sak vi behöver sätta upp är stilguiden. Jag har skapat en ny sida och du gissade det, jag har kallat det "Style guide". Precis som alla andra stilguider, är det meningen att introducera användare till de olika stilar som används i filen. Inom stilguiden ska jag diskutera färgerna, typografi och lagerformat-inklusive pillinjestilar (fast vs. streckad).
I den ursprungliga utformningen av flödesdiagrammen slutade jag använda nio olika färger, så låt oss skapa en ny tavla bara för dem. Placera alla färgerna ut på sidan och namnge dem. De coola grejer kommer nästa!
Nu lägger jag till dessa färger som stilar. På så sätt, om någon vill anpassa färgerna på de olika elementen som de kan.
Först syntaxen: Stilar / Färg / Färgnamn. Så, Stilar / Färg / Fel röd eller Stilar / Färg / Bakgrund blå. När du är färdig med att lägga till dem, kolla och beundra hur snyggt organiserade dessa färger visas i Lagerstil falla ner! Dessutom kan du se att det finns kvar stilar från den ursprungliga handledningen. Vi kommer att organisera dem lite senare.
Den första anledningen till alla utlagda färger är att visa vad som används (som en stilguide borde). Den andra anledningen är att lätt återfärga. Det gäller inte alla olika element som används (t.ex. text) men det kan enkelt påverka dem med bara en bakgrund som Ja och Nej annoteringar. Vi ska försöka göra exakt det nästa.
Gå tillbaka till symbolsidan. Använd sedan samma stilar som vi just skapat för Action, Etikett, Ja och Nej element. På det här sättet, om du bestämmer dig för att du inte vill att Ja ska vara gul men grön, behöver du bara uppdatera färgen i Style-guiden och alla Ja i hela Sketch-filen kommer att ändra färg.
För att göra ditt arbetsflöde lite enklare kan du spara dina färger i dokumentfärgerna. Detta kommer att göra dem lättare att komma åt hela tiden.
Om du älskar att vara organiserad, föreslår jag att du laddar ner pluginet Sortera mig. Det sorterar både lager och tavlor, alfabetiskt och numeriskt (eller omvänd också). Här är några andra effektivitetsresurser för Sketch:
Nästa stil guide vi behöver skapa är för typografi. Vi vill visa alla textstilar i dokumentet, och jag vill dela upp dem i två kategorier, dokumenttexter (som i handboken och stilguiden här) och de i flödesdiagrammen.
Jag vill nu visa dig hur du ska omorganisera dina nuvarande textstilar och byta namn på dem (om det behövs). Från Textstil rulla ner, välj det allra sista alternativet Organisera textstilar ... Det kommer att ta fram ett nytt fönster som är fyllt med varje enskild textstil. Om du dubbelklickar på en kan du byta namn på den. Jag vill att du ska byta namn på dem enligt följande:
Jag vill också att du byter namn på alla tre "Manuella texter" till "Dokumenttext". Vi skapade de ursprungliga namnen i syfte att bara använda dem i användarhandboken, men sedan dess har vi lagt till stilguiden som gör namngivningskonventionen inte längre korrekt. Som du kan se att byta namn är textstilarna enkla. Om du misspellar ett namn eller namngivningskonventionen behöver uppdateras, är det inte ett problem!
Tips: den lilla minusikonen [-] i det nedre vänstra hörnet raderar den valda stilen. Men var försiktig: det finns ingen ångra och det frågar inte om du är säker.
Uppdatera textstilen i stilguiden för att uppdatera typografi genom hela filen (precis som med färger).
Detta kommer att bli den sista tavlan under stilguiden. Här kommer vi att diskutera hur man kan recolorera och behandla de återstående elementen, sidosymbolen och beslutsannonseringssymbolen. Vi diskuterar pilarna senast, strax efter att du har slutfört avsnittet delade format.
Om du tittar tillbaka till färgavsnittet kommer du ihåg att vi hade några ytterligare stilar som jag sa att vi kommer att organisera senare. Nå, nu är det dags! Tanken är exakt densamma som med att organisera textstilar. Välj att organisera lagstilen; du kan byta namn på, organisera och ta bort dem alla precis som med textstilar.
För lagerformat vill jag att du ska behålla varje enskild stil / färg / ... som vi tidigare gjort. Därefter byt namn på resten som följer:
Tips: Om du trycker på Tab-tangenten navigerar du inte ner listan över stilnamnen på samma sätt som det skulle gå ner i laglistan. Istället, i det här fönstret, gör den valda stilens namn redigerbar eller inte. Växla det en eller två gånger för att se exakt vad jag menar!
Kom ihåg minus ikon [-] Jag nämnde tidigare? Det är för att ta bort stilar. Jag behöver dig att radera Bakgrund grå. Det är en kvarleva från min första designutforskning och används inte någonstans.
Slutligen stäng fönstret, välj bakgrunden till beslutsbeskrivningen och välj Skapa ny lagstil, från rullgardinsmenyn. Namn den nya stilen "Bakgrund / Beslut". Vi fortsätter och justerar stilerna på dessa nu, tillbaka på stilguiden. Kopiera bakgrunden från beslutsbeskrivningen och sidelementen.
Tillbaka i stilguiden klistra in de två bakgrunderna i pilarna och elementens tavla. (Jag kommer bara att kopiera över sidan och beslutsbeskrivningen.)
Bara för att ge dig ett verkligt exempel på att ändra stilen och uppdatera den universellt, vill jag att vi ska gå vidare och ändra bakgrundsformgivningen av beslutsbeskrivningen. Därför hade jag skapat en separat lagstil för den, så det skulle inte påverka Action Annotation. Ändra det till allt du vill, det behöver inte matcha designen. Lägg till en 1px-ram med en vald färg och en ny bakgrundsfärg också.
När du är klar, från Lagerstil rulla ned välj Uppdatera lagstil. Om du går till provflödesdiagramsidan eller tillbaka till symbolssidan ser du att stilar har blivit uppdaterade. Det är ett bra exempel på uppdateringsstilarna i åtgärd. Det är precis vad du borde förvänta dig att hända om du skulle uppdatera dokumentet för ny designstil, till exempel olika varumärkesfärger.
Tips: Om du ändrar stilen på ett element med en lagerstil på den kan du ta tillbaka den till den ursprungliga stilen genom att välja Återställ lagstil.
Okej, vi har kommit över de slutliga tillgångarna och det handlar om pilarna! Jag lämnade bäst för sist, naturligtvis. Först och främst måste vi lägga till pilar i vår stilguide. Just nu har vi bara en slags pil till vårt förfogande. Men om du kommer ihåg under lagstilen städa upp, hade vi en solid linje och en streckad linje. Låt oss lägga till de prickade pilarna i vår samling.
På symbolssidan vill jag kopiera den första pilen, pilen / standard / höger och byta namn på pilen / primärt / standard / höger. Välj pilens linje och från Lagstilar rulla ned välj Pillinje sedan Prickad. Och det är allt! Vi har vår första prickade pil.
Två saker här. Först, fortsätt och vidare till de återstående pilarna. Håll dig till namnkonventionen Arrow / Dotted / ... för att hålla en välorganiserad symboler falla ner. När du talar om namnkonventioner och syntaxer, är det andra du bör göra att byta namn på var och en av de ursprungliga fasta pilarna. De symboler dropdown kommer att bli rörigt om du inte gör det.
Använd Rename It Sketch-plugin för att göra det smidigare för dig! Välj Plugins> Rename It> Sök och ersätt Layers / Artboard Names. Eller du kan trycka på Kontroll + Alternativ + Kommando + R för att pluginfönstret ska visas. Där skriver du in pil / standard eller pil / s-form och ersätter den med pil / solid / standard och pil / solid / s-form och så vidare. Se till att det aktuella sökområdet är valt till Nuvarande sida istället för Lager.
Det allra sista när det gäller pilar är start- och slutpunkter. I den första handledningen visade jag dig hur man lägger till olika exempel, som en skiss. Lägg till så många stilar som du vill, då när du är klar glöm inte att inkludera alla nya och fantastiska start- och slutpunkter i stilguiden också.
Och med det är vi färdiga att skapa stilguiden!
Syftet med denna handledning var att bygga upp den ursprungliga och lära dig mer fantastiska sätt att använda Sketch. Samtidigt har detta visat några praktiska sätt att förbättra och paketera upp alla dina Sketch-filer för att göra dem mer användbara för lagmedlemmar och kunder.
