Puiset käyttöliittymän suunnittelussa käytettävät yleiset elementit
Me kaikki tiedämme, että tekstuuria käytetään paljon sekä modernissa että vuosikertaisessa suunnittelussa, vaikka monissa monivuotisissa suunnitelmissa, meluisat ja pörröiset tekstuurit olivat väistämättömiä.
Kuitenkin, kun on kyse puurakenteesta suunnittelussa, käytetäänkö tulostustuotetta, verkkoa tai mobiilikäyttöliittymän elementtiä vai yleistä ulkoasua, sitä käytetään aina visuaalisen valinnan parantamiseen.
Tässä artikkelissa tarkastelemme viittä yhteistä elementtiä käyttöliittymän suunnittelussa, joka käyttää puukuvioita, jotka tekevät juuri tämän.
Sen lisäksi, että keskustelemme näistä elementeistä ja ihailimme melko seksikäs käyttöliittymäsuunnitelma, jonka keräsin Dribbble , myös opimme kopioimaan joitakin näistä vaikutuksista seuraamalla mini-tutoriaaleja juuri tässä artikkelissa.
Nämä viisi yhteistä elementtiä käyttöliittymän suunnittelussa ovat:
- Kangas ja ompeleet,
- Paperi ja varjot,
- Kaiverrettu typografia ja kuviot,
- Tyylikäs ja moderni elementti,
- Kolmiulotteiset vaikutukset.
1. Kangas ja ompelu
Kangas ja ompelu ovat elementtejä, jotka sopivat täydellisesti puisen tekstuurin kanssa, koska molemmat ovat luonnollisia, orgaanisia tuotteita. (Tosin puuvilla on kudottu, leikattu ja värjätty, ja paljon puuta tässä leikkeessä on leikattu, hiottu ja käsitelty - mutta saat mitä tarkoitan!) Katso alla olevat muutamat esimerkit, jotka yhdistävät kankaan ja ompeleen elementit puiset tekstuurit.
esimerkit
Tämä erittäin kevyt muotoilu käyttää yksinkertaista "ompeleen" (vain katkoviivalla), jotta ympyrän tunnus ja banneri näyttävät ikään kuin se olisi ommeltu alhaisen läpinäkymättömyyden ja sävytetyn puukuvioidun taustan suhteen. Tämä pieni kosketus toimii niin hyvin tällaisen yksinkertaisen rakenteen ansiosta.
Suunnittelun ompeleet ovat paljon realistisempia, ja ne yhdistävät täysin peittävään puupohjaiseen taustakuvioon kaiverretut elementit, pudotusvarjot ja aidon kudoksen tekstuurit. Tällä ompeleella on pudotusvarma (0 pikseliä ja 1 pikseli 90 °: n etäisyydellä), jolloin ommel erottuu ja täsmää yksityiskohtaisesti muuhun muotoon.
Digitaalisesti tuotettu puurakenne tekee tästä mallista modernien, sen heikot kaltevuudet ja kaiverretut elementit, jotka tuottavat hiukan kolmiulotteisen ja realistisemman ulkonäön. Toistuva kuvio tuottaa ihanan nahkaisen vaikutelman vasemmalla yläkulmassa olevaan rintanappiin, joka on ommeltu täsmälleen samalla tekniikalla kuin edellä (1 pikselin pudotus varjolla).
Mini-Oppaat
Yksinkertaisen katkoviivan luominen (Illustrator)
Tässä mini-opetusohjelmassa käytämme Illustratoria (Ai) luodaksemme yksinkertaisen viivapiirustetun viivan muodostamaan ympyrän, kuten tämän osion ensimmäisessä esimerkissä. Avaa Illustrator ja valitse Ellipse-työkalu. Pidä Shift-näppäintä pitäessäsi muodosi suhteessa, vedä ympyrä alla olevan mukaisesti.
Aja-paneelista (Ikkuna → Stroke) sovelletaan 2-pisteen painoa, jonka mittakulma on 4. Tarkasta "Katkoviiva" -vaihtoehto ja lisää 12 pistettä ensimmäiseen viivan kenttään.
Huomaat, että muodostamme oikealla puolella oleva viiva on oikeastaan kaksi 12-pisteviivaa yhdistettynä. Voit korjata tämän, anna meidän aivohalvaus hieman enemmän kuvio. Vaihda viiva 3 pistettä ja rako 12 pisteen kohdalle ja tuplaa viiva 6 pisteen kohdalle ja pidä loppuväli 12 pistettä. Sinun pitäisi päätyä samanlaiseen leikattuun linjaan (tulokset vaihtelevat ympyrän koosta riippuen).
Muodosta kaksoiskappale ensin valitsemalla se ja valitsemalla Muokkaa → Kopioi (Komento + C) ja lopuksi Muokkaa → Liitä paikkaan (Komento + F). Kun uusi muoto on edelleen valittu, pidä Alt + Shift -näppäimiä samanaikaisesti ja pienennä muotoa. Näiden kahden näppäimen pitäminen samanaikaisesti pitää muodon suhteessa ja pienentää tai suurentaa kokoa keskipisteestä eliminoimalla uudelleenjärjestelyn tarve.
Valitse suurempi kahdesta piiristä. Poista aivohalvaus ja muuta täyttöväriä ruskeaksi (tai muulle kyseiselle aineelle). Valitse nyt pienempi näistä kahdesta ympyrästä ja muuta lyöntiväriä vaaleammaksi ruskeaksi.
Kun pienempi valittuna olevista kahdesta ympyrästä, kopioi se kopioimalla ja liimaamalla paikalleen. Kun olet moninkertaistanut, aseta se alkuperäisen muodon (Komento + [)) alapuolelle ja siirrä muoto alaspäin napauttamalla näppäimistön nuoli alaspäin. vaihda sitten iskujen väri valkoiseksi.
Pienennä valkoisen iskun ympyrän läpinäkyvyyttä 50 prosenttiin ja ruskean iskun ympyrän peittävyys 75 prosenttiin.
Realistisen ompeleen luominen (Photoshop)
Tässä mini-opetusohjelmassa käytämme todellista kangastyynyä ja joitakin Photoshopin sisäänrakennetuista tehosteista realistisen ompeleen tuottamiseksi. Avaa uusi Photoshop-asiakirja ja lisää haluamasi kangas rakenne. Rajaa kuva niin, että se istuu valkoisella taustalla.
Valitse suorakulmainen kaiverrus -työkalu ja vedä valintasi kangasrakenteen muodon sisäpuolelta. Luo uusi kerros ja nimeä se uudelleen "Ompele." Siirry kohtaan Muokkaa → Aja ja sovita 1-pikselin musta aivohalvaus muotoosi.
Valitse oikein suorakulmainen työkalu ja aseta se aivohalvauksen yli. Ei ole väliä, mistä aloitat. Kun olet valinnut sijaintisi, paina Poista-näppäintä. Varmista, että poistat sisällön aivohalvauksen kerroksesta eikä kudoksen kerroksesta.
Toista prosessi muille leikattujen viivojen kohdalle alla kuvatulla tavalla.
On suuri mahdollisuus, että silmukat eivät ole symmetrisiä; mutta se on hyvä asia, koska silmukkaa harvoin!
Sinun pitäisi päätyä jotain, joka näyttää tältä:
Napsauta hiiren kakkospainikkeella oivallettua tasoa ja valitse "Sekoitusasetukset" avataksesi Tasotyypit-ikkunan. Valitse Väripäällystys-välilehti ja valitse vaalean harmaa (käytin #F1F1F1 ).
Valitse nyt Drop Shadow -välilehti. Käytä mustan pudotusvarjon 90 asteen kulmassa, 1 pikselin etäisyydellä ja 0 pikselin koolla. Laske varjon peittävyyttä jonkin verran 20-60%: iin.
Valitse kangaskerros ja avaa Tasotyypit-ikkuna. Käytä oletusarvoa Drop Shadow, jonka etäisyys on 0 pikseliä, ja Gradient-peittokuva siirtyy valkoisesta mustaan valkoiseksi. Muuta sävyttimen peittokuvan sekoitustilaa kohtaan "Kerro", jonka läpinäkyvyys on 15%. Kun sovellus on otettu ja sitä tarkastellaan 100 prosentilla, sinun pitäisi päätyä tähän:
Pelaa värisävyä värisävyn ja värin tasapainotuksen avulla. Tässä on minun tulos:
2. Paperi ja varjot
Paperi ja varjot ovat yhä suosittuja muotoilutyyleinä, mutta ne ovat erityisen suosittuja tekstuureja raskas-, esimerkiksi puupohjaisissa rakenteissa. Seuraavien töiden kokoelma kertoo, että paperia ja varjoja käytetään eri tavoin esitellä pieniä informaatioosia tai joissakin tapauksissa verkkosivuston päätietoa.
esimerkit
Tämä kuvakaappaus, jos et olisi huomannut, tulee pienestä osasta mallista, jonka näimme edellä "Kangas ja ompelu" -kohdan lopussa. Jatkamalla digitaalisesti tuotetun tekstuurin teemaa, yksinkertaista valkoista muotoa, jossa on vääristynyt mukautettu varjo, käytetään tekemään paperi näyttävän olevan curling.
Todella mukava yhdistelmä puuta ja rypistynyttä paperia. Tässä käyttöliittymässä olevaa paperia käytetään esittämään reseptiä varten tarvittavia tiedostokappaleita, joissa on ihastuttavia siluettityylisiä kuvakkeita, joiden avulla käyttäjä voi tarkastella, merkitä ja jakaa koko reseptiä.
Tämä muotoilu on rakenteeltaan raskas, yhdistää puu-, paperi- ja nauha-tekstuurit tuottamaan houkutteleva käyttöliittymä. Kuvattu puu ja teippi yhdistettynä digitaalisesti tuotettuihin paperiarkeihin ja varjoihin toimivat hyvin yhdessä.
Tämä on yksi suosikkini UI-näytteistä postissa. Puhtaasti digitaalinen (mukaan lukien puinen rakenne), malli käyttää pudotusta ja sisäisiä varjoja luomaan kaunis hakukenttä. Suunnittelussa käytetään myös ompeleita ja kangasta. Kaiken kaikkiaan erittäin käyttäjäystävällinen käyttöliittymä, joka näyttää hyvältä!
Tämä muotoilu tuntuu innoittamalta perinteisiltä ilma-alusmikrokirjoilta, joilla on toistuva kuvio paperin ympärillä. Paperi on (digitaalisesti) nidottu puupohjaan, jolloin käyttöliittymä näyttää pinolta ja ilmoitustaululta tasaisen web-sivun sijaan.
Beige-kerman kuva ja navigointitausta on hieno pudotus, joka tekee siitä näyttävän paperilta, etenkin leimalla varustetusta rintanäytöstä ja haalistuneista seepia-tyylisistä valokuvista, jotka näyttävät olevan painettuina. Tämä sopii erinomaisesti puukuvioituun taustaan ja käyttöliittymään.
Mini-Oppaat
Yksinkertaisen digitaalisen paperitoiminnon luominen (Photoshop)
Tässä mini-opetusohjelmassa käytämme puurakennetta ja Basic Photoshop -työkaluja digitaalisen paperin vaikutuksen luomiseen. Aloita luomalla uusi dokumentti, jolla on tekstuuri tai toistuva kuvio.
Valitse suorakaiteen muotoinen työkalu ja lisää samanlainen muoto kuin alhaalla, sijoittamalla se suoraan kankaan yläosaan.
Kopioi muoto ja siirry kohtaan Muokkaa → Vapaa muunnos (tai paina Command + T). Pienennä muodon kokoa pitämällä Alt + Shift -näppäimet pitämällä muotoa suhteessa ja pienentämällä kokoa kohti keskustaa.
Vedä ylhäältä ankkuripistettä kankaan yläosan yläpuolelle niin, että se peittää alkuperäisen muodon yläosan.
Vaihda uuden muodon väri erittäin vaaleaksi beigeksi (melkein valkoinen). käytin #FFFBF8 .
Kopioi alkuperäinen muoto ja muuta väriä puhtaaksi mustaksi ( #000000 ).
Lisää muotoa niin, että se on pari pikseliä suurempi kuin alkuperäinen muoto. Luo opas - voit vetää oppaan ohjaimesta (Näytä → Näytä viivaimet, jos se ei näy) - noin 10 - 20 pikseliä mustan muodon alla. Siirry kohtaan Muokkaa → Muuta → Loitonna.
Vedä ala-vasen ankkurointipiste alaspäin oppaasi kohti ja toista vaihe sitten ala-oikean ankkurin avulla.
Vahvista muotomuunnos painamalla Enter-näppäintä. Napsauta hiiren kakkospainikkeella Muodot kerros -työkalua ja valitse "Rasterize Layer" -vaihtoehto.
Aseta musta muotoinen kerros muiden kahden muodon alapuolelle, mutta puukerran yläpuolelle. Siirry Suodata → Häivytys → Gaussian Blur ja hämärtä musta muoto 10 pikseliä. Napsauta sitten OK.
Laske mustan muodon peittävyys 50%: iin. Avaa Tasotyypit -ikkuna alkuperäisen valkoisen muodon kohdalle ja napsauta Aivohalva-välilehteä. Käytä 1-pikselin aistia muotoon käyttämällä kaltevuustäyttötyyppiä, joka kulkee mustasta valkoiseksi 90 asteen kulmalla.
Tämän tekemällä meillä on digitaalinen paperipuu-vaikutus! Tämä on erinomainen tekniikka, jota voi käyttää verkkosivustoille.
3. Kaiverrettu typografia ja kuvioita
Kaiverrettu typografia ja kuviot ovat melko yleinen tekniikka kehittyneessä web-suunnittelussa, ja se on yhä suosittu arjen suunnittelussa. Alla on useita esimerkkejä, jotka käyttävät tätä tyyliä hyvin puukuvioiduissa käyttöliittymissä.
esimerkit
Tämä Instagram-sovelluksen käyttöliittymä on haukkumaton puukuvioitu tausta ja pimenneet puoliläpäisevät kuvat tuottamaan kuluneita vintage-ilmeitä. Typografialla on useita eri tyylejä, joiden ansiosta kirjaimet voivat erottua ja antaa puinen tausta kaiverrettu tunnelma.
Kaiken kaikkiaan tämä on todella puhdas puinen käyttöliittymä, jossa on suuri ja yhtä suuri kokoelma erilaisia tyylejä ja tekniikoita. Yksi käytetty toistuvasti (ja erittäin hyvin) on kaiverrettu vaikutus typografiaan ja kuvioihin - esimerkkinä kukka kuvioissa kuvakaappauksen yläosassa.
Metallisignage on ripustettu puu-kuvioituun otsikkoon, joka toimii pääasiallisena navigoinnina. Jotta merkkejä realistisempi kaiverrettu vaikutus, suunnittelija antoi tyypin sisäisen ja pudota varjot.
Pintakuvioita käytetään ensisijaisesti tässä mallissa navigointipalkissa (loki, tässä tapauksessa). Kaiverrettu typografia tekee otsikosta ikään kuin jotain kiveä on kaiverrettu osoittamaan puinen tekstuuri.
Toinen esimerkki kaiverrusta typografiasta merkkeihin, tässä tapauksessa puukuvioiduilla merkeillä metallin sijaan.
Tämä puinen käyttöliittymä käyttää tyylikkäitä ja moderneja elementtejä, joten on vaikea valita, laitetaanko se tähän tai seuraavaan luokkaan. "Osta" -painikkeen ja ostoskassien kuvaketjulla on erittäin yksityiskohtainen kaiverrettu vaikutus, mikä tekee niistä ihmeellisen napsautettavan!
Mini-Oppaat
Miten kaivertaa kuvio puuhun (Photoshop)
Tässä mini-opetusohjelmassa luomme syövytetyn tai kaiverretun puun vaikutuksen Photoshopissa. Avaa uusi asiakirja ja lisää puun rakenne.
Aseta yksi omia kuvioita, tai käytä vektori kuvaa.
Kun olet asettanut vektorin oikein, napsauta hiiren kakkospainikkeella kerrosta ja valitse "Rasterize Layer". Napsauta hiiren kakkospainikkeella sitä uudelleen ja valitse Gradient Overlay -välilehti. Levitä kaltevuus käyttäen kahta väriä, jotka on valittu puusta, kuten jäljempänä näkyy.
Valitse Drop Shadow -välilehti ja käytä valkoista varjoa normaalilla Blending-tilalla. Vaihda varjon kulma 90 ° ja etäisyys ja koko 1 pikseliin. Voit pitää muut asetukset oletuksena.
Valitse Sisävarjo-välilehti, jos haluat käyttää varjosi kuvion sisäpuolelle. Tämä antaa meille mahdollisuuden luoda kaiverrettu vaikutus. Pudota varjon peittävyys 20%: iin ja muuta kulmaa 90 °. Muuta varjon pituutta ja kokoa 3 pikseliä kohden ja pidä kaikki muut asetukset oletuksena.
Napsauta "OK" ja laske kuvakerroksen läpinäkyvyys 80%: iin, jotta osa taustarakenteesta säilyisi koko loistossaan. Sinun pitäisi päätyä tähän tulokseen:
4. Tyylikäs ja moderni elementti
Huolimatta siitä, että puiset tekstuurit ovat usein sidoksissa vintage- ja retro-muotoiluun, ne voidaan myös täydentää nykyaikaisilla ja tyylikkäillä elementeillä, kuten alla olevista esimerkeistä voidaan nähdä.
esimerkit
Tässä on toinen kuvakaappaus käyttöliittymästä, jota näimme edellisessä luokassa, ja esitteli toisen täysin erilaisen elementin. Tässä mallissa olevat liukusäätimet ja vierityspalkit ovat tyylikkäitä valko-hopeisia ja vihreitä kaltevuuksia helppokäyttöisen käyttöliittymän ansiosta.
Sen lisäksi, että kangas ja ompeleet ja kaiverrettu typografiatekniikka ovat, on muotoilussa joitain moderneja elementtejä, kuten 2-pikseli-harmaa-valkoiset aivohalvaukset ja minimalistiset kuvakkeet, jotka tekevät houkuttelevasta ja käyttökelpoisesta iPad-käyttöliittymästä.
Toinen suosikkirajapintaani. Se yhdistää kangasta ja puusta kuvioidut kuvat tyylikkäillä kaltevuuksilla, 2 pikselin aivohalvauksilla, yksinkertaisilla kuvakkeilla ja upealla typografialla monille käyttäjille luo kiinnostavia kohteita.
Erittäin yksityiskohtainen käyttöliittymä, joka yhdistää puiset tekstuurit, kolmiulotteiset vaikutukset, hehkuu ja kiilto korostaa tuottaa tulosta, joka hämmentää käyttäjiään. Yksikuvaviivoja käytetään vahvistamaan 3-D-vaikutusta.
Hohdokkeita, varjoja ja aivoja käytetään tuomaan tämä eloisa puinen käyttöliittymä elämään. Modernit kuvakkeet ovat kuitenkin avain.
Tämä ihana pieni käyttöliittymä käyttää maailman luonnollisia tuotteita ja tyylikkäitä futuristisia elementtejä tuottamaan käyttöliittymää, joka on houkutteleva ja helppo ymmärtää. Melu lisätään nykyaikaisiin elementteihin, jolloin se sopii puukuvioituun otsikkoon.
Tämä näppäimistö antaa meille puisen tekstuurin, joka perustuu olemassa olevaan nykyiseen elementtiin: oletus iPhone UIKit. Näppäimistö toimii täsmälleen samalla tavoin kuin oletusnäppäimistö, joten se ei sekoita käyttäjiä.
Mini-Oppaat
Tässä mini-opetusohjelmassa luomme puisen käyttöliittymän liukusäätimen käyttämällä valikoimaa Photoshopin kerrostehosteita. Luo uusi asiakirja ja lisää puinen tekstuuri tai kuvio.
Valitse Pyöristetty suorakulmio -työkalu ja vedä pitkä, kapea muoto, samanlainen kuin alla oleva. Työkaluni nurkasäde on asetettu 15 pikseliin.
Napsauta hiiren kakkospainikkeella Muodot-kerrosta ja valitse "Sekoitusasetukset". Valitse Gradient Overlay -välilehti ja lisää taustan taustaväri ja sitten hieman tummempi väri. Napsauta sitten OK.
Valitse nyt Inner Shadow -välilehti ja käytä musta varjo, jonka peittävyys on 30% ja kulma 120 °. Pudota etäisyys 1 pikseliin ja pudota kaikki muu arvoon 0. Tämä luo varjon muotoomme sisälle, joten se näyttäisi olevan puusta valmistettu.
Valitse Drop Shadow -välilehti ja käytä valkoista varjoa normaalilla Blending-tilalla. Vaihda kulma 90 ° ja etäisyys ja koko 1 pikseliin. Jätä kaikki muut 0 pikseliä. Tämä antaa muotomme esiin pohjan, mikä tekee siitä näyttävän enemmän kolmiulotteiselta ja realistiselta.
Suurenna veistetty viiva ja valitse Ellipse-työkalu. Pidä Shift-näppäintä pitämällä muotoa pyöreänä, vedä ympyrä ja aseta se liukusäädintä pitkin.
Avaa uusi kerroksen muoto "Tasotyypit" -ikkuna. Napsauta Gradient Overlay -välilehteä ja käytä gradienttia, joka kulkee kevyt-alustasta vaaleanharmaaksi. Anna sille 90 asteen kulma.
Valitse Drop Shadow -välilehti ja käytä varjosi muotoon. Muuta etäisyyttä 0 pikseliin ja koko 10 pikseliin.
Pienennä, jos haluat nähdä liukusäätimen 100%. Tässä on tulos:
5. Kolmiulotteiset vaikutukset
Kolmiulotteiseen muotoiluun ei ole rajoituksia, ja se on uskomattoman tehokas puukuitujen kanssa. Tätä yhdistelmää käytetään yleisesti "hyllyjen" tuottamiseen, kuten iPhonen ja iPadin käyttöliittymissä, erityisesti Applen iBook-sovelluksessa.
esimerkit
Nämä hyllyt ovat erittäin realistisia, ja varjot (kuten oikealla yläkulmassa oleva sisähylly) tulevat runsaasta mukautetusta työstä (ei sisäänrakennetuista Photoshop-suodattimista).
Vaikutukset tähän malliin ovat melko samanlaiset kuin edellisessä. Tällä kertaa vaikutukset tuovat puhtaamman ja nykyaikaisemman ulkonäön, kun taas edellinen on tarkoitus näyttää realistisemmalta ja "käytetyksi".
Nämä iPhone-hyllyt esittävät samanlaisia tekniikoita. Tällä kertaa tulos on sekä nykyaikainen että realistinen, täysin tasapainottamalla kuvioituja valokuvia digitaalisilla tehosteilla.
Tämä 3-D-painike on uskomaton! Puurakenteiden yhdistelmänä muotoilun herkät yksityiskohdat ovat erittäin tarkkoja. Jos tällainen painike oli sinun edessäsi, ei ole mitään keinoa vastustaa sen antamista.
Yksinkertainen mutta tehokas kolmiulotteinen vaikutus on otettu käyttöön tässä navigointipalkissa, jolloin painikkeet näkyvät ikään kuin ne ovat laatikoita. S taitavasti suunniteltu elementti, jolla käyttäjä saa käyttöliittymän.
Kirjoittanut yksinomaan WDD Callum Chapman, suunnittelija ja kuva kaupankäynnin Circlebox Creative . Hän myös johtaa The Inspiraation blogi ja Picmix Store
Jaa puiset käyttöympäristöömme mallit ja kuvitukset kanssamme sekä kaikki artikkelit tai tutoriaalit, jotka saattavat auttaa toisiamme lukijoille.