Painikkeet ja navigointielementit ovat melko yleisin käyttöliittymäobjekteja sekä työpöydän että mobiilisuunnittelun piirissä. He vetävät käyttöliittymän yhteen, jolloin käyttäjät voivat saada A: sta B: hen yhdellä napsautuksella.

Tärkeintä on, että painikkeen pitää näyttää hyvältä. Sen täytyy huutaa "Click me!", Tai muuten se ei yksinkertaisesti ole yhtä tehokas kuin sen täytyy olla. Painikkeita käytetään yleisesti "Haku", "Lähetä", "Lähetä", "Osta" ja "Lähetä".

Tässä artikkelissa tarkastelemme seitsemää yleistä painike-elementtiä nykyaikaisessa käyttöliittymäsuunnittelussa: kuvioita, kuvioita, 3-D, pikselin täydellisiä aivohalvauksia, sisennettyjä taustoja, hehkuja ja kohokohtia.

Löydät 35 hienoa esimerkkiä näistä tekniikoista sekä kourallinen mini-tutoriaaleja Photoshopille.

1. Tekstuurit

Käyttämällä tekstuuria on hieno tapa lisätä syvyys painikkeisiin ja tehdä niistä erottua hieman muusta käyttöliittymästä (ja lopulta tehdä niistä napsautettavia). Seuraavassa on hienoja esimerkkejä painikkeiden kuvioista.

ShelfLuv käyttää tekstuuria koko ulottuvuuden lisäämiseksi sen käyttöliittymään, erityisesti nappi- ja tekstikenttien alueilla.


Tekstiä käytetään koko käyttöliittymän kautta, mutta se on painavampi latausalueella, jolloin se on keskipiste.


Tämä koostumus sekoitetaan hyvin viistopainikkeella, jolloin se näyttää todelliselta.


Tekstiä ei käytetä tällä käyttöliittymän painikkeella, mutta se näkyy taustalla, jolloin painike erottuu.


Teksturoidun painikkeen luominen

Luo yksinkertainen tausta Shape-työkalulla ja lisäämällä kohinaa (Suodata → Melu → Lisää kohinaa).


Valitse ensin Muoto-työkalu ja piirrä suorakulmio, varmista, että yläosa on piilotettu kankaan reunasta.


Muuta muodon väri siniseksi. Käytin # 00A3D9.


Kopioi Muoto-taso ja muokkaa sitä samassa asennossa. Vaihda väri hieman tummempaan siniseen.


Kopioi kerros vielä kerran. Aseta kerros viimeisten kahden Muotokerroksen alle ja muuta väriä vaaleanharmaaksi.


Valokuvaa tai lataa paperiraita (käytin yhden Lost & Taken ). Siirry kohtaan Tiedosto → Paikka ja etsi tiedosto sijoittaaksesi asiakirjaan. Muuta se ja aseta se sinisten muotojen yli.


Poista ylimääräinen tekstuuri käyttämällä Marquee-työkalua ja muuta tekstuurin sekoitustilaa. Kokeile eri tiloja, koska eri tekstuurit tuottavat erilaisia ​​tuloksia. Voit myös haluta alentaa peittävyyden tasoa hieman.


Avaa tummemman sinisen muodon Layer Style -ikkuna ja käytä seuraavia Drop Shadow -tyyliä hiuksenhienoisen valkoisen varjon lisäämiseen.


Käytä nyt aivohalvaasi muotoon alla olevien asetusten avulla.


Lopuksi lisätään sisäinen varjo muotoon, antaen sille lisää ulottuvuutta.


Lisää teksti painikkeeseen ja olet valmis!

2. Mallit

Mallit ovat toinen hieno tapa lisätä hieman kiinnostusta ja syvyyttä liitäntäpainikkeisiin. Alla on muutamia esimerkkejä painikkeiden kuvioista, jotka kaikki ovat hienovaraisia ​​mutta tehokkaita.

Tässä kuvassa vasemmalla puolella on diagonaalinen heijastus, joka erottaa kuvakkeen tyypistä.


Tässä painikkeessa käytetään diagonaalista viivaa, joka sopii vintage-ilmeeseen ja lisää sen ulottuvuutta.


Tämä on suosikkikuvani näissä esimerkeissä. Vaikka itse painikkeissa ei käytetä, harmaan otsikon malli lisää ulottuvuuden koko muotoiluun ja lopulta auttaa oransseja painikkeita erottumaan.


Kuvioidun nauha -painikkeen luominen

Kun olet luonut kuvioidun taustan käyttämällä edellisen mini-oppitunnin tekniikkaa, piirrä suorakulmio Shape-työkalulla ja täytä se sinivihreällä. Käytin väriä # 008B8D.


Piirrä toinen muoto samalla korkeudella ja värillä.


Lasso-työkalun avulla luo kolmio, kuten jäljempänä näkyy. Aseta se uuden muodon reunaan ja paina "Poista" -näppäintä poistaaksesi alueen, jota emme tarvitse.


Muodosta kaksoiskappale ja siirry kohtaan Muokkaa → Muuta → Käännä vaakatasossa, jotta se vastaisi päinvastaiseen suuntaan.


Aseta kaksi muotoa suuremman muodon alla, kuten alla.


Napsauta hiiren kakkospainikkeella yhtä muotoilua ja avaa Sekoitusasetukset / Tasotyyli-ikkuna. Käytä Gradient-peittoa, joka on samanlainen kuin alla oleva. Voit myös lisätä hienovaraisen Drop Shadow -ohjelman. Kun olet tehnyt, napsauta hiiren kakkospainikkeella kerrosta ja valitse "Copy Layer Style". Valitse toinen bannerimuoto. Napsauta hiiren kakkospainikkeella ja valitse "Liitä tasotyyli". Avaa tasotyyppinen ikkuna ja muuta kaltevuuspinnan kulma 180 °: sta 0 °: een.


Lasso-työkalun avulla luo samanlainen valinta kuin alla olevalla tavalla, jotta pystymme vastaamaan muotoilemme kahta kulmaa. Täytä se vielä tummemmalla värillä.


Kopioi kerros, käännä se vaakatasossa ja aseta se toiselle puolelle.


Luo viivakuvio. Vaihtoehtoisesti voit käyttää sitä, jonka tein alla.


Liitä kuvio koko banneriisi. Pidä Command + Shift -painiketta painettuna, klikkaa kaikkien banneritasiesi tasosi pikkukuvia. Tämä valitsee ne kaikki. Napsauta hiiren kakkospainikkeella ja valitse "Valitse käänteinen". Kun valintasi on valittu, paina "Poista" -näppäintä poistaaksesi tarvitsemasi kuvion alueet.


Muuta kerroksen sekoitustilaa "Kertoo" piilottaaksesi valkoista kerroksesta. Pudota läpikuultavuus alaspäin jonnekin 25-75%: iin. Kokeile parasta tulosta.


Käytä Muoto-työkalua luodaksesi joitain alla olevia viivoja.


Poista alueet, jotka istuvat kuvan taustalla.


Kokeile jokaisen rivisi sekoitustilaa. Tässä on tulos:

3. 3-D

Kolmiulotteiset painikkeet ovat suuria, koska ne tekevät painikkeista paljon realistisempia. Ne ovat lähes mahdottomia ei napsauteta! Ainoa haittapuoli on, että vaikutus on melko leikkisä ja siksi ei sovi kaikkiin verkkosivustoihin (kuten yrityksiin). Alla on valikoima hienoja 3-D-painikkeita.

Varjot ja 1-pikselin linjat korostavat tiettyjä alueita ja tekevät painikkeen näkyvän 3-D: n. Tämä ja muutamat hyvät CSS-vaikutukset tekisivät superinteraktiivisen painikkeen.


Toista elementtiä (kuvioita) käytetään myös tässä mallissa lisäämällä jo 3-D-painikkeeseen ulottuva ulottuvuus.


Tämä painike vie hieman erilainen lähestymistapa, luottaa vain kaltevuuteen sen 3D-ilmeen vuoksi.


Tämä sarja näyttää eri korkeudet, jotka osoittavat, onko painike normaaliin, vuori- tai aktiiviseen tilaansa. Rivit ja tekstuuri antavat nappeille elämänmuotoisemman ulkonäön.


Kuten tässä osassa muutamia muita esimerkkejä, kaltevuuksien ja aivojen yhdistelmä tekee näistä painikkeista 3-D.


Tämä painike näyttää 3-D: stä, koska se on "ulos laatikosta", ja se on kiedottu käyttöliittymän ympärille.


3-D-painikkeen luominen

Aloita piirtämällä muoto Rectangle -työkalulla, jonka kulma säde on 7 pikseliä. Avaa Tasotyyli-ikkuna ja käytä Gradient-peittoa tummasta punaisesta punaiseen punaiseen. Käytä tasaisen punaista punaista kaltevuuspalkin loppupuolella korostamaan, mikä on meidän 3-D-painike.


Käytä nyt painikkeen painiketta. Vaihda täyttötyyppi kohtaan "Gradient" niin, että voit muuttaa värin ylä- ja alareunan väriä. Mene valosta tummanpunaiseen (Gradient Overlay päinvastainen).


Sen pitäisi näyttää jotain tähän asti:


Kopioi Muoto-taso. Vedä alkuperäinen kerros alaspäin noin 10 pikseliä kohden.


Käytä Drop Shadow -asetusta alkuperäiseen kerrokseen käyttämällä seuraavassa kuvakaappauksessa näkyviä asetuksia.


Myös tummenta Gradient-peittoa tekemällä jokainen yksittäinen väri kaltevuuspalkissa hieman tummemmaksi.


Sinulla pitäisi olla jotain, joka näyttää tältä:


Valitse Teksti-työkalu ja kirjoita jotain painiketta. Avaa Tasotyyli-ikkuna ja käytä samanlaista Gradient-peittoa kuin alla:


Sovita sisäinen varjo käyttämällä näitä asetuksia:


Käytä Drop Shadow -asetusta käyttämällä näitä asetuksia:


Ja olemme valmiit! Sinun pitäisi päätyä tähän:

4. Pixel-Perfect Strokes

Pikselien viimeistelyn taito on tullut kiinteä osa käyttöliittymäsuunnittelun kaikkia aspekteja, ei pelkästään painikkeita. Yhden pikselin linjat (tai aivoitukset) antavat painikkeiden syvyyden ja hieman 3D-ilmeen. Ne myös tekevät painikkeista silmät. Tässä on joitain loistavia esimerkkejä tästä.

Voit selvästi nähdä, että valkoista (päällystettyä) 1 pikselin linjaa käytetään korostettuna punaisen painikkeen yläosassa, jonka tummempi viiva on alareunassa. Tämä tekee siitä hieman kolmiulotteisen ja lisää sivulle paljon yksityiskohtia.


Tämän painikkeen typografialla on sisäinen varjo, jolloin painike näyttää kuin se istuu käyttöliittymän yläpuolella.


Nämä vain CSS3-painikkeet (ei yhtään Photoshopia) sisältävät 1 pikselin aivohalvauksia, jotka tekevät niistä erottuvan taustalta ja näkyvät sisennetyinä napsautettaessa.


Toinen esimerkki 1-pikselin valokuvasta napin yläosassa, joka toimii korostettuna.


Tämä vihreä painike näyttää hieman erilainen lähestymistapa, jossa sisäinen hehku toimii korostettuna painikkeen yläosassa. Aivohalvaus on erittäin hieno varjo.


Vielä yksi painike yhdistää edellä mainitut tekniikat.


Tämä perusnäppäimellä on ohut aivohalvaus ja herkkä pudotusvarjon, jotta se erottuu yksinkertaisesta rakenteesta.


Tällä painikkeella on hieno sisäinen hehku, jotta se erottuu taustasta. Sen aktiivinen tila on alentunut opasiteetti, joka tekee temppua.


Unohda painike: tämä koko muoto on pikselin täydellinen, sen moderni typografia ja viivat tekevät kauniista käyttöliittymästä.


Luo Pixel-Perfect-painike

Valitse Rectangle Shape -työkalu (joka löytyy Photoshopin yläosassa olevasta työkalupalkista, kun Muoto-työkalu on valittuna) ja anna sille 5-pikselin kulma säde. Piirrä musta suorakulmio, joka on samanlainen kuin alla oleva.


Avaa Tasotyyli-ikkuna ja käytä Gradient-peittokuva muotoon. Käytin tumman vihreää hieman vaaleampaan vihreään.


Anna muodolle kaltevuuskulma, joka kulkee vihreästä aina tummempaan vihreään.


Anna nyt muodolle valkoinen sisävärinen tyyli, käyttäen alla näkyviä asetuksia.


Ja nyt Drop Shadow, jonka koko on 0 pikseliä ja peittävyys vain 5%.


Etsi kuvake Internetistä (tai luo oma) ja aseta se asiakirjaan valitsemalla Tiedosto → Paikka ja asemoi se oikein. Sovita siihen Gradient-peittokuva.


Anna kuvakkeen sisäinen varjo etäisyys 1 pikseliä ja valkoinen Drop Shadow etäisyys 1 pikseli. Tämä tekee kuvasta näyttävän, että se oli kaiverrettu painikkeeseen.


Lisää tekstiä painikkeeseen ja käytä matala-epätarkkuutta Drop Shadow -tekniikkaa käyttämällä Layer Style -ikkunaa. Tässä on tulos:

5. Sisennetty taustat

Sisennetty tausta tekee painikkeen näyttävän siltä, ​​että se on haudattu siihen, jolloin painikkeen syvyys ja visuaalinen kiinnostus. Seuraavassa on hienoja esimerkkejä tästä.

Tämä painikkeen tausta on hienovarainen sisäinen varjo, jotta se näyttää sisennettynä.


Taustalla olevat käänteiset kaltevuudet tekevät painikkeet silmät näkyviksi.


Aistien ja pudotusten varjojen ansiosta nämä syvennetyt painikkeet lisäävät syvyyttä.


Tällä painikkeella on useita tyylejä, kuten kaltevuus, sisäinen varjo ja pudotusvarjo.


Tämä syvennetyn painikkeen tausta on paljon pienempi kuin mitä olemme nähneet, mutta silti seuraa samoja tekniikoita.


Jälleen kerran, pudotus varjo ja sisäinen varjo käytetään luomaan sisennys.

6. Hehkuttaa

Valot ovat melko kova tekniikka vetää pois käyttöliittymäsuunnittelusta, ja ne näkyvät tavallisesti vain tummissa rajapinnoissa (vaikka näemme kevyemmän esimerkin alla). Nämä esimerkit osoittavat, miten hehkuja voidaan käyttää eri tavoin.

Tämän painikkeen sisäpuolella on hehku, joka antaa sille kaiken näkyvän.


Glows on taitavasti käytetty typografian tässä painikkeessa erottuvat tummasta taustasta. Ja hehkuvat tekevät kuormituspalkit näkyväksi.


Glows käytetään yleisesti tummissa käyttöliittymissä iPhoneen. Täällä näemme typistyksen hehkun, kun painike on aktiivisessa tilassaan.


Kevyt ja melko hienoinen hehku antaa tämän painikkeen ylimääräisen lisäyksen, joka tarvitsee kauniiksi.


Luo hehkuva nappi

Rectangle Shape -työkalun avulla piirrä suorakulmio tällä kertaa n. 3 pikselin kulmalla. Käytä samanlaista Gradient-peittoa kuin alla. Anna keskimmäisille väreillesi "49" ja "50".


Sovita seuraava sisävärinen varjo.


Käytä seuraavia Drop Shadow -merkkejä.


Käytä seuraavia ulkovaloja.


Lisää typografia painikkeeseen. Sinun pitäisi päätyä mukavaan, puhtaaseen ja uskomattoman helposti tuotettavaan tulokseen näin:

7. Kohokohdat

Kohokohdat antavat painikkeiden syvyyden, visuaalisen kiinnostuksen ja napsautuksen. Alla olevat esimerkit osoittavat tämän.

Tämän napin yläosassa käytetään yksinkertaista matala-opasiteettia valkoista muotoa, jotta se antaa syvyyden ja auttaa sitä sovittamaan punaisen ja harmaan käyttöliittymän.


Kuten monien muiden painikkeiden tässä kohdassa, 1-pikselin aalto korostaa tätä.


Valoisista pimeisiin ja vaaleisiin kaltevuuksiin vaikuttavat näiden painikkeiden kohokohtia ja varjoa.


Tämä viesti on kirjoitettu yksinomaan WDD: lle Callum Chapman , mies takana Picmix Store ja Circlebox-blogi .

Mitkä painikesuunnitelmat käyttävät eniten ja miksi? Löysitkö korkeamman napsautuksen kullekin mallille? Jaa alla oleva ...