Luonnosohjelma

Suunnittelujärjestelmän luominen luonnosksi (osa viisi)

Täällä sukellan sisäkkäisiin symboleihin ja näytän sinulle, kuinka luoda täysin varustetut komponentit suunnittelujärjestelmällesi

Haluatko parantaa dramaattisesti työnkulkuasi Sketch-premium-suunnittelujärjestelmälläni? Voit noutaa kopion Cabanasta täältä.

Käytä tarjouskoodia MEDIUM25 saadaksesi 25% POIS.

Komponenttien rakentaminen sisäkkäisillä symboleilla

Edellisissä artikkeleissa osoitin sinulle, kuinka luodaan perustat siitä, mistä tulee suunnittelujärjestelmäsi luonnoksessa, mukaan luettuna peruselementit, kuten väri ja typografia, perussymbolit, kuten kuvakkeet ja teksti, sekä pienempien komponenttien rakentaminen järjestelmään.

Nyt, neljännessä osassa kosketin vain lyhyesti komponentteja, ja viidennessä osassa halusin todella syventää hiukan syvemmälle täysin esillä olevien komponenttien rakentamiseen siten, että niiden takana on sisäkkäisten symbolien voima.

Sukellaan sisään ...

Lomakekenttä (tarran ja viestin kanssa)

Ok, anna minun näyttää sinulle, kuinka rakensin jotakin, joka ihmiset luokittelisi enemmän kuin täysin varusteltu, kaikki laulavat, kaikki tanssivat, ja siihen on lisätty sprinklejä.

Ja kaikki sisäkkäisten symbolien avulla. Joo, olemme menossa 3 tasoa syvälle. Christopher Nolan olisi niin, niin ylpeä!

No, se on muotokenttä, joka on tarkka, ei mitään mielenkiintoista, mutta kuten minä näytän sinulle, näet kuinka pienempiä elementtejä (symboleja) muodostavat tämä yksi komponentti, ja hajotan sen kaiken menemme mukaan.

Katsotaanpa katsotaanko ...

Joten valmis komponentti, kuten täältä näet, on yksinkertainen lomakekenttä, jossa on tarra ja viesti…

Joten merkitsin lopullisessa symbolitilassaan syöttö- / oikea kuvake + tarra + viesti (pyörittää kieltä, jonka tunnustan, mutta jota on helpompi löytää myöhemmin avattavasta symbolista, usko minua).

Ja täällä voit nähdä sen koskemattomassa symbolitilassasa, ennen kuin sen käytettävissä olevat monet ohitukset on korjattu ...

Kun lopullinen komponentti koostuu 3 erillisestä symbolista…

  • etiketti
  • panos
  • Viesti

Ok. Anna minun näyttää sinulle, kuinka koon tämän komponentin ...

Tulosymboli

Vai niin. Etikettisymboli? No, tämä oli yksinkertaisesti tekstin symboli, jonka olen jo luonut aiemmin, joten palaamme siihen pian.

Syöttösymboli koostui neljästä erillisestä symbolista…

  • kursori
  • Teksti
  • ikoni
  • Osavaltio

Joten ensin pudotin jonkin aiemmin luomistani valtiosymboleista (voit lukea niistä lisää täältä osasta 3).

Nimeä taso yksinkertaisesti valtioksi ja muutti sen kokoksi 160x40.

Sitten lisäsin kohdistimen symbolin, jonka olin jo luonut aiemmin (tämä oli yksinkertaisesti muotoväli 1x24, joka oli rakennettu täyttövälisymbolista. Mikään ei ole liian innokas.), Nimitin sen uudelleen yksinkertaisesti kohdistimeksi ja sijoitin sen 8 pts vasemmalta, Valtion tunnuksen ylä- ja alaosa.

Paikkamerkkitekstiin lisäsin yhden olemassa olevista tekstisymboleistani ja valitsin vaaleanharmaan värin.

Nimeä taso uudelleen ja sijoitti sen sitten vastaavasti.

Sitten kasvatin sen raja-laatikon leveyttä niin, että se oli 40 pts valtiosymbolin oikeasta reunasta, tämä tekisi myös 8 pts seuraavaksi lisätyn kuvakkeen symbolin vasemmasta reunasta. Näet mihin menen oikealle?

Ja lopuksi lisäsin yhden ikonisymboleistani, nimeksi sen uudelleen ja sijoitin sen sitten 8 pts valtiosymbolin ylä-, ala- ja oikealta reunalta.

Sitten lopettaakseni valin kaikki kerrokset, muutin symboliksi ja nimein sen syöttö / oikea kuvake.

Äskettäin tehdyn symbolini kanssa paikallaan lisäsin sitten yksinkertaisesti joitain koonmuutosrajoituksia asioiden loppuun saattamiseksi.

Kiinnitin kohdistinta varten vasempaan reunaan ja vahvistin leveyden ja korkeuden…

Kiinnitin sen tekstin vasempaan reunaan ja kiinnitin korkeuden…

Ja Ikoni varten kiinnitin sen oikealle reunalle ja vahvistin leveyden ja korkeuden…

Viestin symboli

Viestisymboli koostui kuvakkeesta ja tekstisymbolista. Kuollut yksinkertainen.

Saanen näyttää sinulle nopeasti, kuinka koon nämä elementit.

Ensin lisäsin aiemmin luomani ikonisymbolin, nimein sen uudelleen ja skaalain sen sitten arvoon 16x16.

Sitten lisäsin yhden tekstisymboleista, valitsemalla pienemmän tekstin koon täältä sen kontekstin vuoksi, jossa sen oli tarkoitus näkyä.

Sitten nimitin uudelleen tekstisymboliksi, valitsi molemmat kerrokset ja muutin symboliksi nimeämällä sen syöttö / viesti.

Kun uusi Symbolini oli valmiina, se oli taas tapaus, jolla Artboard-kokoa säädettiin napsauttamaan kuvakesymbolin korkeuteen (16pt), kuten jo aiemmin osoitin,…

… Säätämällä tekstisymbolin sanamuotoa (ohitusten kautta) ja säätämällä taulun leveyttä vastaavasti…

… Sitten asioiden loppuun saattamiseksi se oli yksinkertainen tapa lisätä joitain koonmuutosrajoituksia.

Ikonin kiinnitin sen ylä- ja vasempaan reunaan ja vahvistin leveyden ja korkeuden…

Ja kiinnitin tekstin ylä-, vasempaan ja oikeaan reunaan ...

Joten 3 symbolilla valmiina…

  • etiketti
  • panos
  • Viesti

… Voimme pestää heidät luomaan yhden voimakkaan symbolin ja puolestaan ​​komponentin. Leikkaa ne kaikki yhteen.

Joten ensin merkinnän kohdalla lisäsin tekstisymbolin, valin taas pienemmän tekstin koon ja nimeksi Layer to Label.

Sitten lisäsin syöttösymbolin, nimeksi sen yksinkertaisesti tuloksi ja sijoitin sen tarran alle.

Sitten asetettiin lopuksi viestisymboli, nimettiin uudelleen viestiksi ja sijoitettiin tämä tulon alle.

En ollut huolissani linjauksesta ja välilyönteistä. Se kaikki voitiin käsitellä, kun 3 symbolia oli pakattu tuoreeseen, uuteen symboliin.

Ainoa mitä tein, oli varmistaa, että kerrokset oli järjestetty loogisella tavalla ...

  • etiketti
  • panos
  • Viesti

Mikä puolestaan ​​asettaa Ohitukset hallittavissa olevaan järjestykseen sinulle myöhemmin.

Valitsin sitten kaikki 3 symbolia ja loin uuden symbolin.

Kun lopullinen symboli rakennettiin (kolmesta sisäkkäisestä symbolista), se oli vain tapaus, kuten ennenkin, tehdä pieni Artboard-koon koon muuttaminen, säätää koonmuutosrajoituksia ja muita pieniä korjauksia.

Ja se meni vähän jotain tällaista. Lyö sitä…

Ensinnäkin muutin Artboard-kokoa siten, että se napsahti tulon vasempaan ja oikeaan reunaan ...

… Sitten kun Syöttösymboli on edelleen valittuna ja käyttämällä koonmuutosrajoituksia, kiinnitti sen kaikkiin reunoihin.

Ja korotti Label Symbolille leveyttä koko taulun leveyteen ja napsautti sen yläreunaan.

Sen jälkeen säädettiin teksti Ohita lukea Tarra ja kiinnitettiin se sitten ylä-, vasempaan ja oikeaan reunaan ja korjattiin korkeus koon muuttamisrajoitteilla.

Viestisymbolin kohdalla ja kuten aiemmin tehdyssä etiketissä, se kasvatti leveyttä koko taitelevyn leveyteen ja napsautti sen sitten alareunaan.

Sitten säädin tekstin Ohita lukea Viesti ja kiinnitin sen sitten ala-, vasen ja oikea reunaan ja kiinnitin korkeuden rajoituksilla.

Viimeinen tehtävä oli sitten yksinkertaisesti kohdistaa elementit pystysuunnassa toisiinsa käyttämällä 8 pistettä kunkin elementin välillä ja säätää Artboard-kokoa tarvittaessa.

Tämän komponentin lopullisen rakentamisen myötä minulla oli nyt runsaasti ohituksia helposti saavutettavissa…

... ja tämä antoi minulle mahdollisuuden mukauttaa mukavuudellani työskennellessäni projektin läpi.

Vai niin. Ja ennen kuin lähdet (ja jos olet edelleen kanssani), tässä on pieni lisäbonus siitä, kuinka olen rakentanut valintaruudut, radionäppäimet ja vaihtokytkimet suunnittelujärjestelmääni ...

valintaruutu

Valintaruuduissa se oli yksinkertaisesti tapa tuoda yhteen kaksi olemassa olevaa elementtiä järjestelmän sisästä; Kuvake- ja tekstisymbolit, tarvittavien ohitusten luominen ja tarvittavien koonmuutosrajoitusten soveltaminen.

Viisi eri osavaltiota, joiden tavoittelin komponenttimuodossa, olivat tavanomaisia ​​epäiltyjä…

  • normaali
  • häilyä
  • määrittelemätön
  • tarkistettu
  • Liikuntarajoitteinen

Anna minun näyttää sinulle, kuinka koon valintaruudun ...

Ensin viittasin aiemmin luomiini kuvake- / valintaruudun symboleihin ...

… Ja niiden joukosta, joihin lisäsin valintaruudun / normaalin tilan.

Sitten viittasin aiemmin luomiin tekstisymboleihin…

... ja putosi yhteen niistä ...

Sitten nimetin Tasot uudelleen jonkin verran hallittavimmaksi (kuvake ja teksti), valitsin molemmat ja muunnin uudeksi symboliksi (syöttö / valintaruutu + tarra).

Kun minulla oli tämä uusi symboli valmiina ja valmis, se oli silloin tapa tehdä vähän säätämistä saadaksesi koon ja etäisyydet oikein.

Muutin Artboardin niin, että se napsahti symbolisymbolin korkeudelle (24pt)…

Sitten käyttämällä Teksti-symbolin ohituksia, nimettiin uudelleen 'Label'iksi ja (kutsuen vielä kerran Grayskullin voimaa, tarkoitan 8pt: n ruudukkojärjestelmää) sijoitti sen 8 pts kuvakkeen oikealle puolelle ja viritti sitten Artboard-leveyden siten, oikea reuna napsahtaa tekstisymbolin oikeaan reunaan…

Lopuksi, jotta pysyt kaikessa onnistuneessa koonmuutostilassa eteenpäin, kiinnitin kuvakkeen ylä- ja vasempaan reunaan ja vahvistin leveyden ja korkeuden.

Kiinnitä se tekstisymbolin ylä-, vasempaan ja oikeaan reunaan.

Minulla oli nyt valintaruudun komponentti, jonka avulla voin helposti (useilla ohituksillani), säätää tiloja, muokata tekstiä, muuttaa kokoa helposti ja paljon muuta ...

Onnen päivät!!

Sitten seurain hyvin samanlaista prosessia sekä radiopainikkeen että kytkinkomponenttien kohdalla…

Radiopainikkeiden 4 tilan valitseminen ...

  • normaali
  • häilyä
  • tarkistettu
  • Liikuntarajoitteinen

… Ja vaihtokytkimelle…

  • Vinossa
  • Päällä
  • Liikuntarajoitteinen

Toivon, että tarkastelemalla perusteellisemmin muotoilujärjestelmän sisällä olevia symboleja, erityisesti sisäkkäisiä symboleja (joiden on tiedetty pelottavan joitain ihmisiä, kun on ymmärrettävä, kuinka ne toimivat oikein), sinulla on nyt parempi käsitys siitä, kuinka rakenna täysin varustetut komponentit juuri kypsiksi räätälöinniksi ja suurimmalla helppoudella.

Etkö halua itse rakentaa suunnittelujärjestelmää? Voit noutaa kopion Cabanasta täältä.

Käytä tarjouskoodia MEDIUM25 saadaksesi 25% POIS.

Kiitos artikkelin lukemisesta

Marc

Suurten jatko-ohjelmien suunnittelija, kirjailija, isä ja rakastaja (Blade Runner 2049 I katsovat sinua)