Visandõpetus

Kuidas luua visandis disainisüsteem (neljas osa)

Näitan teile, kuidas kombineerida erinevaid sümboleid, et luua paremini kohandatavaid komponente

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.

Oma komponentide väljaehitamine

Eelmistes artiklites näitasin teile, kuidas luua aluseid sellele, millest saab visandis kujundussüsteem, sealhulgas selliste elementide loomiseks nagu värv ja tüpograafia ning seejärel baasisümboliteks sellised ikoonid ja tekst, mida saab seejärel kasutada lugematuteks muud sümbolid edasiliikumisel.

Neljandas osas tahan näidata teile, kuidas ühendada need väiksemad sümbolid nagu värv, tekst, ikoonid, nupu kujundid ja olekud, et hakata oma disainisüsteemis välja ehitama mõned väikesed komponendid, millele on lisatud Sketchi suuruse muutmise piirangute lisaboonus, et muuta need kohandatavaks erineva ekraanisuurusega.

Pange tähele: Nagu ma eelmistes artiklites mainisin, ei hakka ma teile näitama, kuidas luua sadu sümboleid või komponente. Annan teile vaid lühikese ülevaate siinsetest põhielementidest.

Sukeldugem sisse ...

Nupukomponentide jaoks valisin 3 suurust (väike, keskmine ja suur), et anda ekraanidele erinevate ekraanisuuruste jaoks graafilisi pilte.

Samuti tõin siin korra mängu esimeses osas mainitud 8pt võrgusüsteemi, et säilitada ühtlus.

Alustades suurtest nuppudest, otsustasin luua 4 komponendi varianti -

  • Vaikimisi (ikooni pole)
  • Ikoon (ilma tekstita)
  • Vasak ikoon (koos tekstiga)
  • Parempoolne ikoon (koos tekstiga)

Piisavalt disaini mitmekesisuse osas, et jagada 99,9% projektidest, mida hiljem loote.

Nii et alustades suure / vaikenupukomponendiga, langesin esmalt kujule Shape / Fill / Radius - 4px, mille olin varem loonud. Nüüd saate vaikimisi valida sümboli 0px või 100px raadiuses, mis on täielikult teie otsustada.

Seejärel nimetasin kihi lihtsalt nupuks ja panin tähele, et just selle kihi olemasolul oli minu käsutuses ka sümbolite alistamine (nupu olek ja värv). Väga käepärane!

Varem loonud tekstisümbolite hulgast kustutasin teksti / nupu / suure / keskel / valge sümboli ja nimetasin kihi lihtsalt tekstiks ümber.

Nüüd, tahades kinni pidada 8pt ruudustikusüsteemist ja kohandades natuke arvutusi, kohandasin nupu kihi laiust ja kõrgust nii, et teksti lisatud kiht, mille just lisasin, joondasin nuppu 8pt nupu üla- ja alaosast ning 32pt alates vasak ja parem serv.

Nuppude kihi suuruse vähendamise ja tekstikihi õigesti joondamise korral valisin mõlemad kihid ja teisendasin sümboliks, nimetades seda selliseks - Button / Large / Default.

Nüüd värskelt loodud nupusümboliga töötades valisin selle sees oleva tekstisümboli ...

… Ja inspektoripaneeli suuruse muutmise piirangutest kinnitades selle vasakule ja paremale servale ning fikseerides kõrguse. Nüüd, kui ma vähendan selle nupusümboli suurust oma projektides, tean, et selle sees olev tekst joondub ideaalselt.

Selle sümboli lisamisel projekti on mul käsil hulgaliselt valikuid (alistused), mis võimaldavad mul seda komponenti minimaalse vaevaga näpistada. Huzzah, kus piserdatud on !!

Nupule Ikoon. Sisestasin jällegi lihtsalt oma varem loodud sümboli Shape / Fill / Radius - 4px sümboli, panin selle ümber ja kohandasin selle ruudukujuliseks.

Seejärel langes minu loodud sümbolite hulgast minu ümber sümbol, mille nimi oli Kiht (ikoon), ja muutis selle värvi alistamise valgeks ...

... ja siis, kasutades Scale tööriista, suurendas selle suurus 32 x 32 pikslile.

Seejärel kohandasin kuju kihi mõõtmeid, nii et Ikooni sümbol oli joondatud 8pt kõigist servadest.

Nuppude ja tekstikihi õigesti joondamise korral valisin mõlemad kihid ja teisendasin sümboliks, nimetades seda selliseks - Button / Large / Icon.

Nüüd äsja loodud nupusümboliga töötades valisin selle sees ikooni sümboli ja fikseerisin suuruse muutmise piirangute abil laiuse ja kõrguse. See väldib lihtsalt ikooni moonutamist, kui sümboli suurust muudetakse teie projektides.

Liikudes nupu / suure / vasaku ikooni sümboli juurde, järgisin sarnaselt eelmistele nuppudele, mille olin loonud, sisestasin kuju / täite / raadiuse - 4 pikslist sümbolit ja kohandasin seejärel selle mõõtmeid pisut (180 pikslit x 47 pikslit, kui soovite teada täpsed mõõtmed)…

Seejärel lisasin ikooni sümboli, panin selle ümber, muutsin selle suuruseks 32 x 32 pikslit ja muutsin värvi Override to White.

Ja varem loodud tekstisümbolite hulgast lasin ma sisse sümboli Tekst / nupp / Suur / Vasak / Valge ja nimetasin kihi tekstiks.

Ja veel kord, järgides 8pt võrgusüsteemi, joondasin Ikooni sümboli, nii et see oli ülevalt, alt ja vasakust servast 8pt.

Ja tekstisümboli jaoks oli see 16pt ikoonist paremal, 8pt nupusümboli üla- ja alaosast ning muutke suuruse muutmise käepidemeid nii, et selle piiramiskast oleks 16pt nupusümboli paremast servast .

Nüüd, kui kõik 3 kihti olid valitud (tekst, ikoon ja nupp), muutsin sümboliks ja panin sellele nupu / suur / vasak ikoon.

Töötades vastloodud nupusümboliga, valisin esmalt ikooni ja kinnitasin selle vasakusse serva ning fikseerisin selle laiuse ja kõrguse.

Seejärel, kui valitud tekstisümbol oli, kinnitasin selle vasakule ja paremale servale ning kinnitasin kõrguse.

Lõpuks, nupu / suure / parema ikooni sümboli puhul järgisin eelnevate nuppudega sarnast protsessi.

  • Kuju täitmise sümboli sisestamine ja selle mõõtmete reguleerimine
  • Ikooni sümboli sisestamine, selle suurendamine ja värvi alistamine
  • Tekstsümboli sisestamine (kasutades uuesti vasakule joondatud varianti)

Seejärel joondage ja muutke teksti sümbolit (piirake kasti) nii, et see oli vasakpoolsest servast 16pt, nupu ülemisest ja alumisest servast 8pt ja ikooni vasakust servast 16pt.

Ja ikooni sümboli jaoks oli see nupu paremast, ülaservast ja alumisest servast 8pt kaugusel.

Seejärel valisin kõik 3 kihti (tekst, ikoon ja nupp) ja teisendasin veelkord sümbolinupuks / suureks / paremaks ikooniks.

Ja lõpuks, koos suuruse muutmise piirangutega, kinnitas tekstikihi vasakusse ja paremasse serva ning kinnitas selle kõrguse.

Ja ikooni jaoks kinnitas selle paremasse serva ja kinnitas selle laiuse ja kõrguse.

Pärast suurte nuppude sümbolite mängu saamist läksin keskmistest ja väikestest variantidest läbi, järgides väga sarnast protsessi, mida ma teile näitasin, kuid seekord lisasin näiteks teksti / nupu / keskmise / keskel / valge Sümbol ja ikoonisümboli skaleerimine vastavalt, kuid jääb kogu ulatuses 8pt võrgusüsteemile.

Kuni minu käsutuses oli nüüd 12 üsna peent komponenti. Oooh, mulle meeldib see!

Seejärel lõin sellised komponendid nagu Vormielemendid, Menüüd ja rippmenüüd, Navigeerimine, Leheküljed ja palju muud. Põhielemendid iga töötava projekti jaoks, kuid seda kujul, mida oli nüüd hõlpsasti kohandatav ja mis võimaldas mul projekti läbi töötades punkti jääda.

See avas mu silmad, kuidas just nende väiksemate alustalade nagu teksti-, värvi- ja ikoonisümbolite loomine võimaldab teil lihtsalt hõlpsalt palju suuremateks komponentideks välja ehitada ja kuidas need väikesed ehitusplokid on võtmeks igasuguse kujundussüsteemi jaoks, mis sa loodad ehitada.

Liituge minuga 5. osa jaoks (mida saate vaadata siit)

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

Krõpsude (või laastude, kui asute teisel pool tiiki) kujundaja, autor, isa ja väljavalitu