Luonnosoppaat

Parempi tapa tehdä painikkeita luonnos

Painikkeet kuin et ole koskaan nähnyt niitä ennen! Todennäköisesti.

Tämä artikkeli on päivitetty vuodelle 2019! Katso uusi tekniikka ja opetusohjelma täältä.

Huomaa: Voit silti seurata alla olevaa opetusohjelmaa, mutta tiedä vain, että se ei ole enää optimaalisin tapa rakentaa painikkeita Sketchiin.

Lataa tämä esittelytiedosto seurataksesi, tai tutustu UX-työkaluihin, niin saat koko käyttöliittymäpaketin, joka on rakennettu kaikenlaisille älykkäille symboleille aivan kuten tämä.

Luonnoksensymbolit ovat hienoja, koska ne tarjoavat yhden keskeisen paikan komponenttien hallintaan. Painikkeet ovat joitain helpoimmista komponenteista luoda, mutta kuten tekstikentissäkin, niissä on paljon erilaisia ​​tiloja, värejä ja tyylejä. Joten se tarkoittaa yleensä joukon erilaisten symbolien luomista.

Vanha tapa

Nappisymbolini näyttivät seuraavalta noin kolme kuukautta sitten:

Nosta kättäsi, jos symbolisivusi näyttää tältä ...

Mukava ja puhdas! Käytin tätä lähestymistapaa noin 12 kuukautta, eikä minulla koskaan ollut ongelmia. Se on hieno tapa hallita painikkeiden symboleja, ja ne kattavat kaikki tilat, joita tarvitsen kuvioissani:

Painikevärit
Ensisijainen, toissijainen, valkoinen
Nappitilat
Oletusasetus, osoitin, painettu, poistettu käytöstä

Tarkkaan ottaen tämä ei ole huono asia. Mutta tämä tulee olemaan hieman päänsärky tiellä:

  • Jos haluan lisätä vihreän painikkeen, tarvitsen kolme uutta symbolia… yhden peittämään jokaisen painikkeen tilan.
  • Jos haluan valkoisen painikkeen sinisellä tekstillä, tarvitsen kolme uutta symbolia.
  • Jos haluan päästä eroon kaikkien painikkeideni reunasta, minun on päivitettävä se jokaisessa luomassani painikkeessa.
  • Kymmenen symbolia vain yhdestä komponentista?… Todella?… Onko se tarpeen?

Uusi tapa

Säästän teatterit ja näytän vain mitä luomme ensin. Käyttöliittymäpaketissani ei enää ole 10+ -painikemerkkiä.

Nyt… vain yksi.

Kuinka yksinäinen! Tämä muistuttaa minua surullisesta kohtauksesta Cast Away -tapahtumasta, jossa Tom Hanks on yksin lautallaan. RIP Wilson.

Täydellinen paljastuminen: Tämä yksi symboli on vähän harhaanjohtava, koska se vaatii rakentamaan muita symboleja, joita käytämme kappaleina rakentamaan painikkeemme. Mutta näitä symbolikappaleita käytetään tonneissa muita komponentteja koko käyttöliittymäpaketissani, joten se lopulta on positiivinen vaihto.

Kun olemme valmiita, voit luoda painikkeiden sateenkaarin kaikenlaisissa tiloissa ... kaikki yhdestä painikkeen symbolista. Tarkista se:

Painikerakenne

Tässä nappisymbolissa on kolme sisäkkäistä symbolia:

  • Painiketeksti (tärkeä): Käytämme tätä muuttaaksesi painikkeen sanoja.
  • Painikekuvake (ei niin tärkeä): Voimme kytkeä tämän päälle, kun painike on “lataus” -tilassa.
  • Nappisäiliö (tärkein): Tämä antaa meille muodon, värin ja tilan.
Nämä kolme symbolia heikentävät mielesi.

Painike teksti

Olen kirjoittanut tästä hiukan aiemmin alla olevassa artikkelissa, mutta kerron asiat uudelleen jälkipolville:

”Miksi teksti on symboli?” Hän kysyi korostaen.

Joten sinun ei tarvitse käyttää symboleja tekstissäsi, mutta lisäämällä siihen painikkeesi valtavan joustavuutta.

Pikamuistutuksena Sketch antaa sinun vaihtaa sisäkkäisiä symboleja sisään ja ulos suojaamaan pelättävää irrottamista symbolitoiminnalta. Yksinkertaisin (ja yleisin) käyttötapaus on kuvakkeille: Vaihda tyhjä valintaruudun merkki valittuun. Helppo nakki.

Teen tosiasiallisesti aivan samaa asiaa, mutta tekstillä. Loin 10 tekstityyliä luonnoksessa, ja sitten olen käyttänyt näitä tekstityylejä luodakseen yksilöllisen symbolin jokaiselle.

Nämä tekstityylit ja -värit tosiasiallisesti karttuvat mukavasti takaisin keskeiseen tyylitaulukkooni.
Symbolien vaihtamisen kultainen sääntö
Luonnoksen avulla voit vaihtaa vain symboleja muilla symboleilla, jotka ovat täsmälleen samankokoisia. Toisin sanoen, jos symbolitaulut ovat jopa 1 pikseliä suurempia tai pienempiä kuin toiset, ne EI tule näkyviin symbolien ohitus -pudotusvalikkoon (katso alla). Joten minun piti varmistaa, että kaikki yllä olevat tekstisymbolitaulut olivat täsmälleen saman korkeuden ja leveyden.

Koska painikkeeni teksti on sisäkkäinen symboli, valitsen vain yhden muista tekstimerkkeistäni symbolin esiintymän avattavasta kohdasta, jos haluan joskus tekstin olevan eri väriä. MITÄ HELPOSTI ON ?!

Hyvin koulutettu vuohi voi tehdä niin helposti.

Tosin menin hiukan yli tekstimerkkeihini laittamalla kaikenlaisia ​​erilaisia ​​värejä. Mutta ainakin haluat todennäköisesti vaalean tekstin symbolin ja tumman tekstin symbolin, joka todennäköisesti vastaa valkoista tekstiä ja ensisijaisia ​​tuotemerkkiväritekstejä.

Painikekuvake

Tämä on luultavasti vähiten tärkeä symboli - jätä se pois, jos haluat -, mutta olen pitänyt sitä hyödyllisenä muutamassa projektissa. Sen tarkoituksena on kuvata vastausta painikkeen napsautuksen jälkeen.

Järjestelmä ajattelee! Se luultavasti ajattelin suutani, mutta ajattelee edelleen!

Perusidea tämän painikkeen "pääsymbolien" ympärillä on, että pinoat tehokkaasti kaikki mahdolliset komponentin tilat yhdeksi symboliksi ja kytke sitten sen sisällä olevat sisäkkäiset symbolit päälle tai pois päältä sen tilan mukaan, jota yrität pöyhkeillä.

Pääpainikkeemme symbolikuvakkeen taso on ”paikkamerkki”, joka edustaa painikkeemme lataustilaa (katso yllä).

Suoraan sanottuna, tätä kerrosta ei ole paljon. Minulla on vain kuvasymboli, jolla on pieni latausmuoto, kelluin sen sitten painikkeen keskelle. Etkö ole varma mitä ”kelluva” tarkoittaa? Lue tämä Peter Nowellin loistava artikkeli. Hän ei tiedä tätä, mutta hän opetti minulle kaiken mitä tiedän:

Katso kuinka helppoa se on:

Suosittelemme suunnitellun koko ajan suhteen sivutoimintaa, kuten UX-työkalut.

Jos suusi on agape ihmetteleen, kuinka minulla on mahdollisuus muuttaa kuvakkeen väriä, tutustu tähän fantastiseen Francesco Bertoccin artikkeliin:

Varasin armottomasti tekniikan suoraan hänen sormistaan. Kiitos, kaveri!

Nappikotelo

Nappisäiliö on tärkein osa koko symbolia ... Joten jos ohitat tämän osan, epäonnistut tenttiä, epäonnistut koulusta ja luultavasti päätät rahaa tennistä palloihin Santa Monican laiturilla.

Riippuen siitä, kuinka monta muotoa haluat, voit tehdä kaikenlaisia ​​erilaisia ​​säilömerkkejä. Tässä on joitain, jotka olen luonut:

Odottaa edelleen rombin painikkeiden tarttumista : een

Onneksi jokainen näistä symboleista on toiminnallisesti identtinen. Ainoa ero on siinä, kuinka he peitetään (täydellisessä maailmassa meillä voisi olla myös naamiosymboleja, mutta emme voi aina saada kaikkea mitä haluamme, nyt voimme?).

Käytän näitä säilytysmerkkejä esimerkiksi monivalintapillereissä / siruissa, joten pidän useiden eri muotojen saatavana:

  • Kova: 0px-rajasäde teräviin kulmiin
  • Pehmeä pyöristetty: Yleensä 2xx10xx rajasäde pehmeissä kulmissa
  • Pyöristetty: 100% reunan säde mukavalle pyöristetylle suorakulmion muodolle. Nämä ovat hienoja siruille ja tunnisteille.
  • Vasen pyöristetty: Tämä on niin, että voin koota painikkeet painikeryhmään. Tämä toimii pyöristetynä painikkeena ryhmän vasemmalla puolella.
  • Oikea pyöristetty: tämä on aivan sama kuin yllä, mutta vain oikealle puolelle.

Kuten totesin, tarvitset vain niin monta säiliötä kuin napin muotoja, joita luulet käyttäväsi. Eli jos et koskaan käytä pyöristettyjä painikkeita, älä ole huolissasi pyöristetyn astian luomisesta.

Kontin rakentaminen

Jokainen kontti on rakennettu kahdella sisäkkäisellä symbolilla ja naamarilla:

  • Valtion symboli: Hierotaankö tätä konttia? Painettu? Keskittynyt?
  • Värisymboli: Mitä väriä tämä astia on?
  • Mask: Minkä muotoinen tämä säiliö on?

valtiot

Tilat ovat säiliön ylin symboli, ja tekniikoiden, kuten läpinäkyvyyden ja sekoitusmoodien, käyttäminen voi vaikuttaa säiliöön, jotta se näyttäisi olevan hiipunut, tarkennettu, painettu tai poistettu käytöstä.

Jos haluat jotain, kuten “Hover - Focused”, käytä Hover-symbolia ja Focused-symbolia yhdessä. Tällä tavalla päivität vain kaksi symbolia neljän sijasta.

Näin he näyttävät, kun he ovat vaihtaneet nappisymboliimme:

KOSKE SITÄ!

Koska taas tilat ovat symboleja ja kukin tilamerkki on täsmälleen samankokoinen, voin vaihtaa ne pois symbolin ohitus -pudotusvalikossa.

Puhuminen symbolien ohittamisesta ...
Protip ™
Tee symbolisarjat (kaikki tilat, kaikki värit, kaikki tekstit) hiukan erilaisilla leveyksillä toisistaan. Tämä varmistaa, että niitä ei näytetä symbolissasi, joka ohittaa pudotusvalikon yhdessä. Et halua vahingossa valita ”Väri / punainen” painikkeen tilaksi, kun aikoit valita ”Tila / Vie hiiri”.

värit

Viimeiseksi värikerros. Periaatteessa se on vain symboli, joka on valmistettu laatikosta, jolla on täyttöväri. Kiehtova:

Tykkään tehdä joukko näitä symboleja eri väreissä:

Nämä ovat värit, jotka antavat painikkeelleni ihanan sävyn. Ei paljon muuta sanottavaa!

Yhteenveto

Sinun ei tarvitse joukkoa eri symboleja jokaiselle komponentille. Anna vain tarvittavat kappaleet ja rakenna se kerran. Käytä sitten samoja kappaleita muiden asioiden rakentamiseen! Suurin osa symbolisivustani on vain palasia, ei itse komponentteja. Mutta käyttämällä kaikkia näitä kappaleita voin rakentaa todella hienostuneita komponentteja.

Tämä täysi käyttöliittymäpaketti on saatavana UX: n sähkötyökaluilla

Lisää lukemista:

Kun en kirjoita, työskentelen Sketch-suunnittelutyökaluilla, kuten UX-työkaluilla, jotta sinusta tulisi parempi, tehokkaampi suunnittelija. Kaikki parhaat luonnoksien suunnittelijat ja tiimit käyttävät sitä, ja luulen, että pidät siitäkin. Tutustu Marveliin!

Seuraa UX-sähkötyökaluja Twitterissä
Seuraa minua Twitterissä