Innhold
- Opprette et symbol i skisse
- Organisering av symboler i skisse
- Juster individuelle symboler i skisse
- Opprette et symbol fra Scratch
- 01. Tegn rutenettet
- 02. Legg til former
- 03. Lim inn bilder
- 04. Konverter til symboler
Symboler i Sketch er spesielle elementer du kan bruke igjen og igjen i hele dokumentet, på tvers av sider og tegnebrett. Det er i utgangspunktet en magisk laggruppe, og den er angitt i laglisten med en lilla mappe (i stedet for den vanlige blå).
Symboler rundt dokumentet synkroniseres automatisk, så når du endrer ett, faller alle de andre umiddelbart. Det er et perfekt verktøy for prototyping av apper og visninger når elementer gjentas om og om igjen, for eksempel en sosial strøm, innboks eller sporliste.
Fra et utviklerperspektiv er gjenbrukbare moduler ikke noe nytt. Når du koder noe, sier beste praksis (og sunn fornuft) at koden din skal være fleksibel og gjenbrukbar. Det sparer ikke bare tid i utvikling når du kommer til å gjenbruke noe, men det gir en mer konsistent bygging.
Å bruke symboler mens du designer, vil spare deg for tid og hjelpe deg å komme frem til det store bildet raskere og mer realistisk enn du tidligere trodde var mulig.
Hvilke (n) del (er) av designet mitt skal være et symbol?
Den vanskelige delen er å bestemme hvilke biter av oppsettet ditt som skal konverteres til et symbol. De viktigste er å se etter brikker som gjentas igjen og igjen, og som ikke er for forskjellige i hvert tilfelle. Heldigvis gir Sketch deg muligheten til å justere visse ting innenfor ett symbol:
- tekstinnhold
- opasitet
- skygge
- blandemodus
Hvis du trenger å endre noe annet fra forekomst til forekomst, kan det hende at et symbol ikke er det riktige valget (eller kanskje du trenger et symbol pluss noen få andre grupper, noe som vil være greit og dandy). En viktig ting du ikke kan endre i en enkelt symbolforekomst, er et bilde, så legg spesielle planer når du legger ut ting som fotogallerier og medieobjekter.
Å tenke som en utvikler er en fin måte å bestemme hva som skal være et symbol. Se etter gjentatte stiler og posisjoner, noe du vil skrive et CSS-verktøy for. Ting som:
- menyer (og menyelementer)
- lister over meldinger
- widgets
- topp- og bunntekst
- kort
Symboler er nøkkelen til å jobbe smartere, raskere. Endring av bakgrunnsfargen på overskriften på 56 sider bør ikke ta 56 klikk. Når du kommer i gang, vil du aldri se tilbake.
Opprette et symbol i skisse
Å lage et symbol er enkelt. Du kan lage dem fra eksisterende laggrupper eller løse lag. Hvis du velger en haug med løse lag, grupperer Sketch dem for deg når du oppretter symbolet.
Når ønsket element er valgt, klikker du på ikonet Opprett symbol på verktøylinjen, eller velger Lag> Opprett symbol i menyen. Hvis du har valgt en gruppe, kan du også høyreklikke i laglisten og velge Opprett symbol.
For å bruke symbolet du nettopp har opprettet - eller et hvilket som helst symbol i dokumentet, velger du Sett inn> Symbol på verktøylinjen. Bare husk: eventuelle endringer du gjør i det nye symbolet, reflekteres umiddelbart i de andre tilfellene. Med stor makt kommer stort ansvar.
Organisering av symboler i skisse
Når du har fått en haug med symboler i spill, krever det litt organisering å bruke dem effektivt. Velg Sett inn> Symbol> Administrer symboler for å se en komplett liste over alle symbolene i dokumentet. Du kan også gi nytt navn og slette symboler fra denne visningen.
Opprette grupper av symboler i skisse
Du kan også lage nestede grupper av symboler, noe som er flott for å organisere selv det største designbiblioteket. Ved å legge til en skråstrek i symbolnavnet, som knapper / send inn, vil du ende opp med et symbol som heter send inn i en mappe som heter knapper.
Det er mange måter å organisere symbolene på (akkurat som kode!), Men jeg bruker dem vanligvis på følgende tre måter:
- Kategori: del symbolene mine opp etter kontekst, som alle skjemaelementene i en mappe, alle gallerielementene i en annen
- Vedtak: del symbolene mine opp etter brytpunkt, med symboler i mapper etter enhetsskjermstørrelse
- Versjonering: når jeg lager et nytt symbol med veldig annerledes styling, vil jeg noen ganger legge det i en test eller eksperimentell mappe for å holde produksjonssymbolene mine rene
Bytte symboler i skisse
Skisse gir også en enkel måte å bytte ett symbol mot et annet, perfekt for å utveksle symboler som ligner på hverandre (som å bytte en solid topptekst mot en modifisert gjennomsiktig).
Når målsymbolet er valgt, finner du rullegardinmenyen i inspektøren (panelet på høyre side av skjermen).
Juster individuelle symboler i skisse
Selv om det meste av et symbol holdes synkronisert rundt dokumentet ditt, er det en håndfull verdier du kan endre på et instansnivå, noe som betyr at de ikke påvirker andre kopier av det samme symbolet.
Endring av tekstinnhold i skissesymboler
En nøkkel til å lage en realistisk prototype er å bruke ekte (eller virkelig utseende) innhold på alle skjermene dine. En innboks full av bla bla blahsdsahs ser mye mindre overbevisende ut enn e-post fra en troverdig fyr som heter Steve.
For å gjøre endringer i en enkelt forekomst av et symbol, velg måltekstlaget og merk av for alternativet Ekskluder tekstverdi fra symbol i inspektøren. Nå vil eventuelle endringer du gjør i dette tekstlaget, forbli lokale for denne forekomsten av symbolet.
Å fylle en mockup med ekte innhold går langt med å vinne prosjektgodkjenning (beklager, lorem ipsum!), Så jeg tar meg alltid tid til å variere tekstverdiene fra symbol til symbol.
Endre stiler av skissesymboler
Sketch lar deg kontrollere noen få nøkkelstiler uavhengig, noe som er nyttig når du oppretter forskjellige tilstander (status, aktiv / inaktiv, sveve osv.). Endringer i noe av det følgende påvirker bare den spesifikke forekomsten, ikke alle symboler:
- Ugjennomsiktighet: endre det generelle opasitetsnivået for symbolet og alt innholdet
- skygge: legg til en skygge (eller skygger) til symbolet som helhet
- Blandingsmodus: endre blandemodus (overlegg, skjerm osv.) for symbolet
Dette er en ganske nylig endring, som kommer i Skisse 3.3, men jeg synes det allerede er nyttig å kutte ned det store antallet symboler jeg har arbeidet til enhver tid. Noen ganger trenger en inaktiv eller fullført vare bare et enkelt opasitetsfall, ikke et helt eget symbol.
Opprette et symbol fra Scratch
Eksempelprosjektet vårt er et redaksjonelt nettsted som heter Words. Vi ønsker at nettstedet skal kunne vise et bilde, en gruppe med bilder, video og mer pent, hver gang en forfatter trenger dem.
Så i Sketch-dokumentet vårt, vil dette alle være symboler. For å komme i gang skal vi lage et mosaikkgalleri, noe mange innlegg og oppsett kan trenge, og noe vi definitivt ikke vil bygge igjen og igjen.
Jeg plukker mosaikkgalleriet fordi det innebærer en fin godbit med lagmasker, som definitivt vil spare tid når du arbeider med tilfeldige bilder fra internett.
01. Tegn rutenettet
Bruk rektangelverktøyet (Sett inn> Form> Rektangel), og trekk ut rutenettet der du vil at bildene skal sitte. Legg merke til at vi planlegger med rektangler, ikke faktiske bildestørrelser. Hvis du vil bli veldig spesifikk - og det gjorde jeg - kan du endre størrelsen på ting perfekt med The Inspector.
02. Legg til former
Med rutenettet på plass, legg til hver figur i sin egen gruppe (velg form og trykk Cmd + G). Høyreklikk på formen inne i hver gruppe og velg Bruk som maske. Hvert rektangel er nå klart til å inneholde et enkelt bilde fra galleriet ditt.
03. Lim inn bilder
Lim inn et bilde i hver gruppe, og sørg for å holde det på toppen av maskelaget. Masker fungerer ved å inneholde elementene som sitter over seg selv i samme gruppe (det er grunnen til at jeg fikk deg til å gruppere alt først). Å bruke former som masker kutter ut den enorme irritasjonen av å måtte dimensjonere hvert tilfeldig bilde spesielt, siden du allerede har et rutenett klart og venter.
04. Konverter til symboler
Velg alt du nettopp har opprettet, og konverter det til et symbol, enten ved å klikke på ikonet Opprett symbol i verktøylinjen, eller velg Lag> Opprett symbol fra menyen. Det nye symbolet ditt er klart til å settes inn i hele dokumentet (ovenfor, jeg har brukt nestede mapper for å holde alt organisert).
Jeg er ikke sikker på hvordan jeg ellers skal si dette: å ha et Sketch-dokument med et bibliotek fullt av ferdige symboler er en absolutt glede. Det er som et dra-og-slipp-klistremerkeark fylt med ditt eget høyverdig design.
Ord: Clark Wimberley
Vil du lære mer om design med Sketch? Få Clark Wimberlys 10-delte InVision-miljø, Design Workflow with Sketch, levert rett til innboksen din. Hold øye med InVision-bloggen for å være en av de første som vet når du kan registrere deg.
Likte dette? Les disse!
- Komme i gang med Sketch
- Hvordan spotte et nettsted med Sketch
- 15 beste Sketch-plugins
