Visandõpetus

Kuidas luua visandis disainisüsteemi (viies osa)

Sukeldun siin pesasümbolitesse ja näitan teile, kuidas luua oma disainisüsteemile täisfunktsionaalsed komponendid

Kas soovite oma töövoogu dramaatiliselt parandada minu eskiislahenduse Premium Design System abil? Cabana koopia saate kätte siit.

25% VÄLJA SAAMISEKS kasutage pakkumise koodi MEDIUM25.

Komponentide ehitamine pesasümbolite abil

Eelmistes artiklites näitasin teile, kuidas luua vundament sellest, mis saab teie visandisüsteemiks, sealhulgas luua elemente nagu värv ja tüpograafia, baassümbolid nagu ikoonid ja tekst ning ehitada välja väiksemad komponendid, mida kasutada süsteem.

Nüüd puudutasin neljandas osas vaid põgusalt komponente ja viiendas osas tahtsin ma tõesti pisut põhjalikumalt sukelduda täielikult esitletavate komponentide ehitamisse, mille taga oleksid pesasümbolid.

Sukeldugem sisse ...

Vormiväli (sildi ja teatega)

Ok, las ma näitan sulle, kuidas ma ehitasin välja midagi sellist, mis sobiks rohkem inimesteks kui täisfunktsionaalne, kõik laulmine, kõik tantsimine ja lisatud piserduskomponent.

Ja seda kõike pesastatud sümbolite abil. Jah, me läheme 3 tasemele sügavale. Christopher Nolan oleks nii, nii uhke!

Noh, see on täpne vorm Vorm, mis pole midagi liiga meelt huvitavat, aga nagu ma teile näitan, näete, kuidas väiksemate elementide (sümbolite) valik moodustab selle ühe komponendi ja ma jagan selle läheme kaasa.

Vaatame siis, kas me ...

Nii et valmis komponent, nagu näete siin, on lihtne vormiväli, sildi ja teatega ...

Selle tähistasin lõplikus sümboli olekus sisestus- / parempoolse ikoonina + etiketil + sõnumina (kerib keele, mille ma tunnistan, kuid mida on hiljem sümbolist lihtsam leida, uskuge mind).

Ja siin näete seda puutumata sümbolite olekus, enne kui paljudele olemasolevatele ülekirjutustele on järele viidud ...

Lõplik komponent koosneb kolmest eraldi sümbolist ...

  • Silt
  • Sisend
  • Sõnum

Okei. Las ma näitan sulle, kuidas ma selle komponendi kokku panin ...

Sisendi sümbol

Oh! Sildi sümbol? Noh, see oli lihtsalt varem loodud teksti sümbol, nii et tuleme selle juurde varsti tagasi.

Sisendi sümbol koosnes neljast eraldi sümbolist ...

  • Kursor
  • Tekst
  • Ikoon
  • Osariik

Esiteks langesin sisse ühte varem loodud olekusümbolitest (nende kohta saate lähemalt lugeda kolmandast osast siin).

Kihi nimetati lihtsalt riigiks ja muudeti selle suuruseks 160x40.

Seejärel sisestasin kursori sümboli, mille olin ka varem loonud (see oli lihtsalt kuju kiht mõõtmetega 1x24, mis oli üles ehitatud värvi värvisümbolist. Mitte midagi ülemäära innukalt.), Nimetasin selle lihtsalt kursoriks ja paigutasin vasakule 8 pts, Riigi sümboli üla- ja alaosa.

Kohatäite teksti jaoks lisasin ühe olemasoleva tekstisümboli ja valisin helehalli värvi.

Nimetati kiht ümber ja seejärel paigutati vastavalt sellele.

Siis suurendasin selle piirdekasti laiust, nii et see oli 40 sümbolit riigisümboli paremast servast, see muudaks selle ka 8 punktiks järgmise ikooni sümboli vasakust servast. Kas näete kuhu ma lähen?

Ja lõpuks panin ühe oma ikooni sümbolitest ümber, panin selle ümber ja paigutasin selle 8 pts riigisümboli ülaservast, alt ja paremast servast.

Seejärel valisin kõik kihid, konverteerisin need sümboliks ja panin sellele sisendi / parema ikooni.

Kui värskelt valmistatud sümbol oli paigas, lisasin asjade lõpetamiseks lihtsalt mõned suuruse muutmise piirangud.

Kursori jaoks kinnitasin selle vasakusse serva ja fikseerisin laiuse ja kõrguse…

Teksti jaoks kinnitasin selle vasakusse serva ja kinnitasin kõrguse…

Ikooni jaoks kinnitasin selle paremasse serva ja kinnitasin laiuse ja kõrguse ...

Teate sümbol

Sõnumi sümbol koosnes ikoonist ja tekstisümbolist. Surnud lihtne.

Las ma näitan teile kiiresti, kuidas ma need elemendid kokku panin.

Esmalt panin sisse ikooni sümboli, mille olin varem loonud, nimetanud selle ümber ja seejärel vähendanud selle suuruseks 16x16.

Seejärel lisasin ühe teksti sümbolitest, valides siin väiksema teksti suuruse, arvestades konteksti, milles see pidi ilmuma.

Seejärel panin ümber tekstisümboli, valisin mõlemad kihid ja teisendasin sümboliks, nimetades seda sisendiks / sõnumiks.

Kuna mu uus sümbol oli juba valmis, oli see jälle selline juhtum, nagu ma teile juba varem näitasin, Artboardi suuruse kohandamiseks, et see vastaks ikooni sümboli kõrgusele (16pt) ...

... kohandada tekstisümboli sõnastust (ülekirjutuste kaudu) ja vastavalt kohandada ka papi laiust ...

… Siis asjade lõpuleviimiseks oli lihtne lisada mõni suuruse muutmise piirang.

Ikooni jaoks kinnitasin selle ülemisse ja vasakusse serva ning kinnitasin laiuse ja kõrguse ...

Ja teksti jaoks kinnitasin selle ülemisse, vasakusse ja paremasse serva ...

Nii et 3 sümbolit on juba valmis ...

  • Silt
  • Sisend
  • Sõnum

... saame neid pesitseda, et luua üks võimas sümbol ja sellest omakorda komponent. Lõikame need kõik kokku.

Nii et kõigepealt lisasin sildi jaoks teksti sisestamise sümboli, valides jälle väiksema teksti suuruse ja panin nimetuse Kiht ümber sildiks.

Seejärel sisestasin sisendi sümboli, nimetasin selle lihtsalt sisendiks ja asetasin selle sildi alla.

Lõpuks sisestati sõnumi sümbol, mis sai ümber nimeks Sõnum ja paigutas selle sisendi alla.

Ma ei muretsenud veel joondamise ja vahede pärast. Sellega saaks kõik hakkama, kui 3 sümbolit oleks pakendatud uude, uude sümbolisse.

Kõik, mida ma tegin, oli veenduda, et kihid oleksid loogiliselt korraldatud ...

  • Silt
  • Sisend
  • Sõnum

Mis omakorda asetab üleandmised teile hiljem hõlpsamini hallatavasse järjekorda.

Seejärel valisin kõik 3 sümbolit ja lõin uue sümboli.

Lõpliku sümboli konstrueerimisega (kolmest pesastatud sümbolist) oli see lihtsalt juhtum, nagu varemgi, väikese Artboardi suuruse muutmine, suuruse muutmise piirangute kohandamine ja muud väikesed muudatused.

Ja see läks natuke midagi sellist. Löö see ...

Esiteks vähendasin Artboardi suurust, nii et see klõpsas sisendi vasakule ja paremale servale ...

… Siis, kui sisestussümbol on endiselt valitud, ja kasutades suuruse muutmise piiranguid, kinnitas selle kõigi servade külge.

Ja sümboli Label jaoks suurendas selle laiust kuni Artboardi kogu laiuseni ja kinnitas selle ülaserva.

Seejärel kohandasite teksti Sildi lugemiseks teksti Override ja kinnitasite siis ülemise, vasaku ja parema serva külge ja kinnitasite kõrguse, kasutades suuruse muutmise piiranguid.

Sõnumi sümboli jaoks, nagu ka silt Label enne, suurendas selle laiust Artboardi kogu laiuseni ja klõpsas selle alumisse serva.

Seejärel kohandasin teksti Sõnumi lugemiseks teksti Override ja kinnitasin selle alumisse, vasakusse ja paremasse serva ning kinnitasin piirangu abil kõrguse.

Viimane asi, mida teha, oli siis lihtsalt elementide vertikaalne joondamine üksteisega, kasutades iga elemendi vahel 8 pts, ja vajadusel Artboardi suuruse muutmine.

Selle komponendi lõplikult konstrueeritud abil oli mul nüüd käepärast arvukalt üleandmisi ...

... ja see võimaldas mul projekti kaudu oma tööd hõlpsamini kohandada.

Oh! Ja enne kui te lähete (ja kui olete endiselt koos minuga), on siin väike lisaboonus selle kohta, kuidas ma oma disainisüsteemis märkeruute, raadionuppe ja lülituslüliteid konstrueerisin ...

Märkeruut

Märkeruutude jaoks oli tegemist lihtsalt 2 olemasoleva elemendi kokkuviimisega minu süsteemi seest; Ikoon ja tekstisümbolid, luues vajalikud alistused ja rakendades seejärel nõutavad suuruse muutmise piirangud.

Viis erinevat osariiki, mille poole ma komponendi vormis püüdsin pöörduda, olid tavalised kahtlusalused ...

  • Tavaline
  • Hõljuma
  • Määramatu
  • Kontrollitud
  • Keelatud

Las ma näitan sulle, kuidas märkeruutu kokku panin ...

Esiteks viitasin ikooni / märkeruudu sümbolitele, mille olin enne loonud ...

… Ja nende seast, kuhu ma sisestasin märkeruudu / normaalse oleku.

Seejärel viitasin tekstisümbolitele, mille olin ka varem loonud ...

... ja langes ühte neist ...

Seejärel nimetasin kihid ümber pisut paremini hallatavaks (ikoon ja tekst), valisin mõlemad ja teisendasin uueks sümboliks (sisend / märkeruut + silt).

Kui mul oli see uus sümbol valmis ja valmis, siis oli vaja natuke varjata, et suurus ja vahed õigeks saada.

Kohandasin Artboardi nii, et see kiskus ikooni sümboli kõrgusele (24pt) ...

Kasutades seejärel teksti sümboli alistusi, nimetati ümber märgiseks ja (kui Grayskulli kõikvõimsust silmas pidada, mõtlen veel 8pt ruudustikusüsteemi), paigutasin selle 8 pts ikoonist paremale ja nihutasin Artboardi laiust nii, et parem serv libises tekstisümboli paremasse serva…

Lõpuks kinnitasin ikooni üla- ja vasakpoolsesse serva ning fikseerisin laiuse ja kõrguse, et kõik saaks edasi liikuda õnneliku suurusega režiimis.

Ja tekstisümboli jaoks kinnitati see ülemisse, vasakusse ja paremasse serva.

Mul oli nüüd märkeruudu komponent, mida sain hõlpsalt (minu käsutuses paljude alistustega), olekuid kohandada, teksti redigeerida, hõlpsalt suurust muuta ja palju muud ...

Õnnelikke päevi !!

Seejärel järgisin väga sarnast protsessi nii raadionupu kui ka lülituskomponentide puhul ...

Raadionuppude jaoks 4 oleku valimine ...

  • Tavaline
  • Hõljuma
  • Kontrollitud
  • Keelatud

… Ja lülituslüliti jaoks…

  • Väljas
  • Peal
  • Keelatud

Loodan, et disainisüsteemi sümbolite, eriti pesasümbolite (mis teadaolevalt hirmutavad mõnda inimest, kui nad mõistavad, kuidas need õigesti toimivad) põhjalikuma pilguga saate nüüd paremini aru, kuidas ehitage välja täisfunktsionaalsed komponendid, mis on lihtsalt kohandamiseks küpsed ja mis on kõige hõlpsam.

Kas te ei soovi ise disainisüsteemi ehitada? Cabana koopia saate kätte siit.

25% VÄLJA SAAMISEKS kasutage pakkumise koodi MEDIUM25.

Täname, et lugesite artiklit,

Marc

Suurte järgede kujundaja, autor, isa ja väljavalitu (Blade Runner 2049, ma vaatan sind)