Kako koristiti simbole u Skici

Simboli u Sketchu posebni su elementi koje možete uvijek iznova koristiti u cijelom dokumentu, na stranicama i na ploči. To je u osnovi magična skupina slojeva i na Popisu slojeva označena je ljubičastom mapom (umjesto uobičajenom plavom).



Simboli oko vašeg dokumenta automatski se sinkroniziraju, pa kad promijenite jedan, svi ostali trenutno padaju u red. To je savršen alat za izradu prototipa aplikacija i pogleda kada se elementi ponavljaju iznova, poput društvenog prijenosa, pristigle pošte ili popisa pjesama.



S gledišta programera, moduli za ponovnu upotrebu nisu novost. Kada nešto kodirate, najbolji primjeri iz prakse (i zdravog razuma) kažu da bi vaš kôd trebao biti fleksibilan i ponovljiv. To ne samo da štedi vrijeme u razvoju kada nešto trebate ponovno upotrijebiti, već čini dosljedniju izradu.

Korištenje simbola tijekom dizajniranja uštedjet će vrijeme i pomoći vam da bržu i stvarniju sliku dođete do veće slike nego što ste ranije mislili da je moguće.



Koji bi dijelovi mog dizajna trebali biti simbol?

Lukavi dio je odlučivanje koje bitove vašeg izgleda treba pretvoriti u simbol. Ključno je tražiti dijelove koji se ponavljaju iznova i iznova i nisu previše različiti u svakom slučaju. Srećom, Sketch vam daje moć prilagodbe određenih stvari unutar jednog simbola:

  • tekstualni sadržaj
  • neprozirnost
  • sjena
  • način miješanja

Ako trebate promijeniti bilo što drugo od instance do instance, simbol možda nije pravi izbor (ili će vam možda trebati simbol plus nekoliko drugih grupa, što bi bilo fino i sjajno). Jedna glavna stvar koju ne možete promijeniti unutar jedne instance simbola je slika, zato napravite posebne planove kada postavljate stvari poput fotogalerija i medijskih objekata.



Razmišljanje poput programera sjajan je način da odlučite što bi trebao biti simbol. Potražite ponavljajuće stilove i položaje, nešto za što biste napisali neki uslužni CSS. Stvari kao:

  • izbornici (i stavke izbornika)
  • popisi poruka
  • widgeti
  • zaglavlja i podnožja
  • kartice

Simboli su ključ pametnijeg i bržeg rada. Promjena boje pozadine zaglavlja na 56 stranica ne bi trebala potrajati 56 klikova. Jednom kad započnete, nikada se više nećete osvrtati.

Stvaranje simbola u Skici

Stvaranje simbola je jednostavno. Možete ih napraviti od postojećih grupa slojeva ili labavih slojeva. Ako odaberete hrpu labavih slojeva, Sketch ih grupira za vas prilikom izrade simbola.

S odabranim željenim stavkama kliknite ikonu Stvori simbol na alatnoj traci ili na izborniku odaberite Sloj> Stvori simbol. Ako ste odabrali grupu, također možete desnom tipkom miša kliknuti Popis slojeva i odabrati Stvoriti simbol.

Lijevo: odabrana dva sloja, elementi koji čine gumb. Desno: elementi pretvoreni u simbol, imenovan gumb

Lijevo: odabrana dva sloja, elementi koji čine gumb. Desno: elementi pretvoreni u simbol, imenovan gumb

Da biste upotrijebili simbol koji ste upravo stvorili - ili bilo koji simbol u dokumentu - odaberite Umetni> Simbol na alatnoj traci. Samo upamtite: sve promjene koje napravite na novom simbolu odmah će se odraziti na ostale slučajeve. S velikom moći dolazi velika odgovornost.

Organiziranje simbola u Skici

Jednom kad u igri dobijete gomilu simbola, njihovo učinkovito korištenje zahtijeva malo organizacije. Odaberite Umetni> Simbol> Upravljanje simbolima da biste vidjeli cjelovit popis svih simbola sadržanih u dokumentu. Također možete preimenovati i izbrisati simbole iz ovog prikaza.

Stvaranje grupa simbola u Skici

Također možete stvoriti ugniježđene grupe simbola, što je izvrsno za organiziranje čak i najveće knjižnice dizajna. Dodavanjem kose crte u ime simbola, poput gumba / pošalji, na kraju ćete dobiti simbol pod nazivom pošalji koji se nalazi u mapi s imenom gumbi.

Prilikom umetanja simbola mape pružaju detaljnu organizaciju, što olakšava pronalaženje samo onoga što vi

Prilikom umetanja simbola mape pružaju detaljnu organizaciju, što olakšava pronalaženje upravo onoga što tražite (ponekad moje datoteke imaju stotine simbola)

Postoji mnogo načina da organizirate svoje simbole (baš kao i kod!), Ali obično ih koristim na sljedeća tri načina:

  • Kategorija : podijeliti moje simbole prema kontekstu, kao i sve stavke obrasca u jednoj mapi, sve stavke galerije u drugoj
  • Razlučivost : podijeliti moje simbole prema točki prijeloma, sa simbolima u mapama prema veličini zaslona uređaja
  • Verziranje : prilikom izrade novog simbola s pomalo drugačijim stilom, ponekad ću ga staviti u probnu ili eksperimentalnu mapu kako bi moji proizvodni simboli bili čisti

Zamjena simbola u Skici

Skica također nudi jednostavan način zamjene jednog simbola za drugi, savršen za razmjenu simbola koji su međusobno slični (poput zamjene čvrstog zaglavlja za modificirani prozirni).

Lijevo: simbol na mjestu, desno: Odabir novog simbola, u ovom slučaju zamjena rezerviranog mjesta slike za rezervirano mjesto videozapisa

Lijevo: simbol na mjestu, desno: Odabir novog simbola, u ovom slučaju zamjena rezerviranog mjesta slike za rezervirano mjesto videozapisa

S odabranim ciljnim simbolom, pronađite padajući simbol unutar Inspektora (ploče s desne strane zaslona).

Ugađanje pojedinih simbola u Skici

Iako se većina svega što se tiče simbola sinkronizira oko vašeg dokumenta, postoji pregršt vrijednosti koje možete promijeniti na razini instance, što znači da neće utjecati na ostale kopije istog simbola.

Promjena tekstualnog sadržaja u simbolima skice

Jedan od ključeva za stvaranje realističnog prototipa je korištenje stvarnog (ili stvarnog) sadržaja na svim vašim zaslonima. Pristigla pošta puna bla-bla-blahsdsaha izgleda manje uvjerljivo od uzoraka e-maila vjerodostojnog tipa po imenu Steve.

Da biste izvršili promjene unutar jedne instance simbola, odaberite ciljni sloj teksta i provjerite opciju Izuzmi vrijednost teksta iz simbola u Inspektoru. Sada će sve promjene koje napravite na ovom tekstualnom sloju ostati lokalne za ovaj primjerak simbola.

Kad je potvrđena opcija Izuzmi tekstualnu vrijednost, možete raditi praktične stvari poput promjene svakog opisa ili promjene vrijednosti gumba sa stranice na stranicu

Kad je potvrđena opcija Izuzmi tekstualnu vrijednost, možete raditi praktične stvari poput promjene svakog opisa ili promjene vrijednosti gumba sa stranice na stranicu

Ispunjavanje makete stvarnim sadržajem uvelike doprinosi dobivanju odobrenja za projekt (oprostite, lorem ipsum!), Pa uvijek uzmem vremena za promjenu tekstnih vrijednosti od simbola do simbola.

Promjena stilova simbola skice

Skica vam omogućuje neovisno upravljanje nekoliko ključnih stilova, što je korisno pri stvaranju različitih stanja (status, aktivno / neaktivno, lebdenje itd.). Promjene bilo kojeg od sljedećeg utjecati će samo na određeni primjerak, a ne na sve simbole:

  • Neprozirnost : promjena ukupne razine neprozirnosti za simbol i sav sadržaj
  • Sjena : dodajte sjenku (ili sjene) simbolu u cjelini
  • Način miješanja : promijenite način miješanja (prekrivanje, zaslon itd.) simbola

Ovo je prilično nedavna promjena, koja dolazi u Skici 3.3, ali već smatram korisnom u smanjenju silnog broja simbola na kojima sam radio u bilo kojem trenutku. Ponekad neaktivnoj ili dovršenoj stavci treba samo jednostavan pad neprozirnosti, a ne potpuno zaseban simbol.

prodaju vektorske grafike kako biste zaradili

Stvaranje simbola od ogrebotina

Naš primjer projekta je urednička web stranica pod nazivom Riječi. Željeli bismo da web lokacija može lijepo prikazati sliku, skupinu slika, videozapise i još mnogo toga, svaki put kad ih autor treba.

Dakle, u našem dokumentu Skica, svi će to biti simboli. Za početak ćemo napraviti galeriju mozaika, nešto što bi moglo zatrebati puno postova i izgleda, i nešto što definitivno ne želimo graditi iznova i iznova.

Odabirem galeriju mozaika jer uključuje urednu poslasticu pomoću slojevitih maski, što će sigurno uštedjeti vrijeme prilikom rada sa slučajnim slikama s Interneta.

01. Nacrtaj mrežu

Pomoću alata Rectangle (Insert> Shape> Rectangle) izvucite mrežu na kojoj želite da vaše slike sjede. Primijetite da planiramo s pravokutnicima, a ne sa stvarnim veličinama slike. Ako želite biti stvarno određeni - a ja jesam - možete veličine stvari savršeno prilagoditi pikselima pomoću Inspektora.

02. Dodajte oblike

S postavljenom rešetkom dodajte svaki oblik u svoju skupinu (odaberite oblik i pritisnite Cmd + G ). Unutar svake grupe kliknite desnom tipkom miša na oblik i odaberite Koristi kao masku. Svaki je pravokutnik sada spreman da sadrži jednu sliku iz vaše galerije.

03. Zalijepite slike

Zalijepite sliku u svaku skupinu, pazeći da ostane na vrhu sloja maske. Maske djeluju tako da sadrže bilo koje elemente koji sjede iznad sebe u istoj grupi (zbog čega sam prvo dao da sve grupirate). Korištenje oblika kao maski smanjuje ogromnu smetnju zbog potrebe za određivanjem veličine svake slučajne slike jer već imate mrežu spremnu i na čekanju.

04. Pretvori u simbole

Odaberite sve što ste upravo stvorili i pretvorite u simbol, bilo klikom na ikonu Stvori simbol na alatnoj traci, ili na izborniku odaberite Sloj> Stvori simbol. Vaš je novi simbol spreman za umetanje po cijelom dokumentu (gore sam koristio ugniježđene mape da sve bude organizirano).

Nisam siguran kako to drugačije reći: imati skicu s bibliotekom punom gotovih simbola apsolutno je zadovoljstvo. To je poput lista naljepnica povuci i ispusti ispunjenog vlastitim dizajnom visoke vjernosti.

Riječi : Clark Wimberley

Želite li saznati više o dizajniranju sa Sketchom? Nabavite Clark Wimberlyjev 10-dioni InVision ecourse, Design Workflow with Sketch, isporučen pravo u vašu pristiglu poštu. Pripazite na blog InVision biti jedan od prvih koji će znati kada se možete prijaviti.

Sviđa li vam se ovo? Pročitajte ovo!