Kuinka käyttää symboleja luonnoksessa

Sketchin symbolit ovat erityisiä elementtejä, joita voit käyttää uudestaan ​​ja uudestaan ​​koko asiakirjassa, sivuilla ja piirtoalustoilla. Se on pohjimmiltaan maaginen kerrosryhmä, ja se on merkitty Tasoluettelossa violetilla kansiolla (tavallisen sinisen sijaan).

Asiakirjan ympärillä olevat symbolit pysyvät automaattisesti synkronoituna, joten kun vaihdat yhden, kaikki muut putoavat välittömästi riviin. Se on täydellinen työkalu sovellusten ja näkymien prototyyppien muodostamiseen, kun elementtejä toistetaan yhä uudelleen, kuten sosiaalinen stream, postilaatikko tai kappalelista.



Kehittäjän näkökulmasta uudelleenkäytettävät moduulit eivät ole mitään uutta. Kun koodaat jotain, parhaat käytännöt (ja järki) sanovat, että koodisi tulisi olla joustava ja uudelleenkäytettävä. Se ei vain säästä aikaa kehityksessä, kun saat käyttää jotain uudelleen, vaan se tekee myös yhtenäisemmästä rakenteesta.

Symbolien käyttö suunnittelussa säästää aikaa ja auttaa sinua pääsemään suurempaan kuvaan nopeammin ja realistisemmin kuin aiemmin ajattelit.

Mitkä osat suunnittelustani tulisi olla symboli?

Haastava osa on päättää, mitkä asettelusi bitit muunnetaan symboliksi. Niiden avain on etsiä kappaleita, jotka toistuvat uudestaan ​​ja uudestaan, eivätkä ne ole liian erilaiset kussakin tapauksessa. Onneksi Sketch antaa sinulle voiman säätää tiettyjä asioita yhden symbolin sisällä:

  • tekstisisältö
  • opasiteetti
  • varjo
  • sekoitustila

Jos haluat muuttaa jotain muuta esiintymästä toiseen, symboli ei ehkä ole oikea valinta (tai saatat tarvita symbolin ja muutamia muita ryhmiä, jotka olisivat hienoja ja mukavia). Yksi tärkeä asia, jota et voi muuttaa yhden symboli-ilmentymän sisällä, on kuva, joten tee erityissuunnitelmia asettamalla esimerkiksi valokuvagallerioita ja mediaobjekteja.

Kehittäjän tavoin ajattelu on hieno tapa päättää, minkä symbolin pitäisi olla. Etsi toistuvia tyylejä ja kantoja, mihin kirjoittaisit apuohjelman CSS: n. Asioita kuten:

  • valikot (ja valikkokohdat)
  • luettelot viesteistä
  • widgetit
  • otsikot ja alatunnisteet
  • kortit

Symbolit ovat avain työskennellä älykkäämmin, nopeammin. Otsikon taustavärin muuttaminen 56 sivulla ei saisi kestää 56 napsautusta. Kun aloitat, et koskaan katso taaksepäin.

Symbolin luominen luonnoksessa

Symbolin luominen on helppoa. Voit tehdä ne olemassa olevista tasoryhmistä tai löysistä kerroksista. Jos valitset joukon irtonaisia ​​kerroksia, Sketch ryhmittelee ne puolestasi, kun luot symbolia.

Kun halutut kohteet on valittu, napsauta työkalurivin Luo symboli -kuvaketta tai valitse valikosta Taso> Luo symboli. Jos sinulla on valittu ryhmä, voit myös napsauttaa hiiren kakkospainikkeella Tasoluetteloa ja valita Luo symboli.

Vasen: kaksi kerrosta valittu, elementit, jotka muodostavat painikkeen. Oikea: elementit muunnetaan symboliksi, nimeksi painike

Vasen: kaksi kerrosta valittu, elementit, jotka muodostavat painikkeen. Oikea: elementit muunnetaan symboliksi, nimeksi painike

Jos haluat käyttää juuri luomasi symbolia - tai mitä tahansa symbolia asiakirjassa - valitse työkaluriviltä Lisää> Symboli. Muista vain: kaikki muutokset, jotka teet uuteen symboliin, heijastuvat välittömästi muissa tapauksissa. Suurella voimalla on suuri vastuu.

Symbolien järjestäminen luonnoksessa

Kun sinulla on joukko symboleja, niiden tehokas käyttö vaatii vähän organisaatiota. Valitse Lisää> Symboli> Hallitse symboleja nähdäksesi täydellisen luettelon kaikista asiakirjan sisältämistä symboleista. Voit myös nimetä ja poistaa symboleja tästä näkymästä.

Symboliryhmien luominen luonnoksessa

Voit myös luoda sisäkkäisiä symboliryhmiä, mikä sopii erinomaisesti suurimman suunnittelukirjaston järjestämiseen. Lisäämällä kauttaviiva symbolin nimeen, kuten painikkeet / lähetä, päädyt symboli nimeltä lähetys sisältämään kansioon nimeltä painikkeet.

Kun lisätään symboli, kansiot tarjoavat porautuvan organisaation, mikä helpottaa juuri sinulle sopivan löytämistä

Kun lisäät symbolin, kansiot tarjoavat porautuvan organisaation, mikä tekee etsimäsi löytämisen helpoksi (joskus tiedostoissani on satoja symboleja)

Symbolien järjestämiseen (kuten koodi!) On monia tapoja, mutta käytän niitä yleensä seuraavilla kolmella tavalla:

  • Kategoria : jaa symbolini kontekstin mukaan, kuten kaikki lomakekohteet yhdessä kansiossa, kaikki gallerian kohteet toisessa
  • Resoluutio : jaa symbolejani jakopisteiden mukaan, kansioissa olevat symbolit laitteen näytön koon mukaan
  • Versiointi : kun teen uuden symbolin, jossa on erilainen muotoilu, laitan joskus sen testi- tai kokeelliseen kansioon pitämään tuotantosymbolini puhtaana

Symbolien vaihtaminen luonnoksessa

Luonnos antaa myös helpon tavan vaihtaa symboli toisen kanssa, mikä sopii täydellisesti toistensa kaltaisten symbolien vaihtamiseen (kuten kiinteän otsikon vaihtaminen muokattuun läpinäkyvään).

Vasen: symboli paikallaan, Oikea: Uuden symbolin valitseminen, tässä tapauksessa kuvan paikkamerkin vaihtaminen videon paikkamerkiksi

Vasen: symboli paikallaan, Oikea: Uuden symbolin valitseminen, tässä tapauksessa kuvan paikkamerkin vaihtaminen videon paikkamerkiksi

Kun kohdesymboli on valittu, etsi symboli pudotusvalikosta Tarkastaja (paneeli näytön oikealla puolella).

Yksittäisten symbolien säätäminen luonnoksessa

Vaikka suurin osa kaikesta symbolista pidetään synkronoituna asiakirjan ympärillä, on olemassa muutama arvo, joita voit muuttaa ilmentymän tasolla, mikä tarkoittaa, että ne eivät vaikuta saman symbolin muihin kopioihin.

Sketch-symbolien tekstisisällön muuttaminen

Yksi avain realistisen prototyypin luomiseen on todellisen (tai oikean näköisen) sisällön käyttäminen kaikissa näytöissäsi. Saapuneet postilaatikot, jotka ovat täynnä blah blah blahsdsahseja, näyttävät olevan vähemmän vakuuttavia kuin näyte sähköpostit uskottavalta kaverilta nimeltä Steve.

Jos haluat tehdä muutoksia yhden symbolin esiintymän sisällä, valitse kohdetekstikerros ja tarkista Poissulje tekstiarvo symbolista -valinta Inspectorissa. Nyt tähän tekstikerrokseen tekemäsi muutokset pysyvät paikallisena symbolin tässä esiintymässä.

Kun Ohita tekstiarvo on valittuna, voit tehdä käteviä asioita, kuten vaihtaa kutakin kuvatekstiä tai muuttaa painikkeen arvoa sivulta toiselle

Kun Ohita tekstiarvo on valittuna, voit tehdä käteviä asioita, kuten vaihtaa kutakin kuvatekstiä tai muuttaa painikkeen arvoa sivulta toiselle

Mockupin täyttäminen todellisella sisällöllä menee pitkälle projektin hyväksynnän saamiseksi (anteeksi, lorem ipsum!), Joten käytän aina aikaa vaihtaa tekstiarvoja symboleista toiseen.

Sketch-symbolien tyylien muuttaminen

Luonnoksen avulla voit hallita muutamia keskeisiä tyylejä itsenäisesti, mikä on hyödyllistä eri tilojen luomisessa (tila, aktiivinen / ei-aktiivinen, leijuva jne.). Muutokset mihin tahansa seuraavista vaikuttavat vain tiettyyn esiintymään, ei kaikkiin symboleihin:

  • Opasiteetti : muuta symbolin ja kaiken sisällön yleistä peittävyystasoa
  • Varjo : lisää varjo (tai varjot) symboliin kokonaisuutena
  • Sekoitustila : vaihda symbolin sekoitustila (päällekkäisyys, näyttö jne.)

Tämä on melko äskettäinen muutos, joka tulee piirustukseen 3.3, mutta minusta on jo hyödyllistä leikata niiden symbolien lukumäärä, jotka olen työskennellyt kulloinkin. Joskus passiivinen tai valmis tuote tarvitsee vain yksinkertaisen peittävyyden pudotuksen, ei täysin erillistä symbolia.

Symbolin luominen Scratchista

Esimerkkiprojektimme on toimitussivusto nimeltä Words. Haluamme, että sivusto pystyy näyttämään kuvan, kuvaryhmän, videon ja paljon muuta aina, kun kirjoittaja tarvitsee niitä.

Joten Sketch-asiakirjassa nämä kaikki ovat symboleja. Aloittaaksemme teemme mosaiikkigallerian, jotain, mitä tarvitsee paljon viestejä ja asetteluja, ja jotain, jota emme varmasti halua rakentaa uudestaan ​​ja uudestaan.

Valitsen mosaiikkigallerian, koska siihen liittyy siisti hoito kerroksenaamareilla, mikä säästää varmasti aikaa työskennellessäsi satunnaiskuvien kanssa Internetistä.

01. Piirrä ristikko

kuinka toistaa kuvio kuvittajasta

Vedä suorakulmiotyökalulla (Lisää> Muoto> Suorakulmio) ruudukko, johon haluat kuviesi istuvan. Huomaa, että suunnittelemme suorakulmioita, ei todellisia kuvakokoja. Jos haluat todella täsmällisen - ja minä tein -, voit koota pikseliä täydellisesti Inspectorin avulla.

02. Lisää muotoja

Kun ruudukko on paikallaan, lisää kukin muoto omaan ryhmäänsä (valitse muoto ja paina Cmd + G ). Napsauta hiiren kakkospainikkeella kunkin ryhmän sisällä muotoa ja valitse Käytä maskina. Jokainen suorakulmio on nyt valmis sisällyttämään yhden kuvan galleriastasi.

03. Liitä kuvat

Liitä kuva kuhunkin ryhmään varmista, että pidät sen maskikerroksen päällä. Naamiot toimivat sisällyttämällä kaikki elementit, jotka istuvat itsensä yläpuolella samaan ryhmään (minkä takia tein ryhmittelyn ensin). Muotojen käyttäminen naamioina vähentää valtavaa ärsytystä siitä, että jokaisen satunnaisen kuvan on oltava erikokoinen, koska ruudukko on jo valmiina ja odottaa.

04. Muunna symboleiksi

Valitse kaikki juuri luomasi ja muunna se symboliksi joko napsauttamalla työkalupalkin Luo symboli -kuvaketta tai valitsemalla valikosta Taso> Luo symboli. Uusi symboli on valmis lisäämään koko asiakirjasi (yllä olen käyttänyt sisäkkäisiä kansioita pitämään kaiken järjestyksessä).

En ole varma, miten muuten sanoa tämä: Sketch-asiakirjan, jossa on kirjasto täynnä valmiita symboleja, nauttiminen on ehdotonta iloa. Se on kuin vedä ja pudota -tarra-arkki, joka on täynnä omaa korkealaatuista suunnittelua.

Sanat : Clark Wimberley

Haluatko oppia lisää Sketchin suunnittelusta? Hanki Clark Wimberlyn 10-osainen InVision-kenttä, Design Workflow with Sketch, suoraan postilaatikkoosi. Pidä silmällä InVision-blogia olla yksi ensimmäisistä, joka tietää, milloin voit rekisteröityä.

Piditkö tästä? Lue nämä!