Algengar þættir sem notaðar eru í UI-hönnun tré
Við vitum öll að áferð er notuð mikið í bæði nútíma og uppskerutíma hönnun, en í mörgum tilfellum af hönnun sem framleitt var fyrir mörgum árum voru hávær og grungy áferð óhjákvæmileg.
Þegar um er að ræða tré áferð í hönnun, þó, hvort sem er í prentunarvörum, vefur eða hreyfanlegur notendaviðmót, eða almennt skipulag, er það alltaf notað til að auka sjónrænan áfrýjun.
Í þessari grein munum við líta á fimm algengar þættir í UI hönnun sem nota viðar áferð til að gera bara þetta.
Til viðbótar við að ræða þessi atriði og aðdáunarvert nokkuð frekar kynþokkafullt notendaviðmót sem ég safnaði frá Dribbble , munum við einnig læra hvernig á að endurskapa sum þessara áhrifa með því að fylgja leiðbeiningum hérna í þessari grein.
Þessir fimm algengir þættir í hönnun HÍ eru:
- Efni og sauma,
- Pappír og skuggi,
- Gróft leturfræði og mynstur,
- Sléttur og nútíma þættir,
- Þrívíð áhrif.
1. Efni og sauma
Efni og sauma eru þættir sem hafa tilhneigingu til að passa fullkomlega við tré áferð vegna þess að bæði eru náttúrulegar, lífrænar vörur. (Að sjálfsögðu er bómull vefnaður, skorinn og litaður og mikið af viði í þessu sýningartæki hefur verið skorið, slitið niður og meðhöndlað-en þú færð það sem ég meina!) Horfðu á nokkur dæmi hér að neðan sem sameina efni og saumaþætti með tré áferð.
Dæmi
Þessi mjög létta hönnun notar einfaldan "sauma" (bara strikað heilablóðfall) til að láta hringmerkið og borðið birtast eins og það hafi verið saumað við lágþrýstinginn og lituð tré-áferðina. Þessi litla snerta virkar svo vel fyrir slíka einfalda hönnun.
Stitching í þessari hönnun er miklu raunhæfari og sameinast með fullri þéttleika viði-áferðargrund með grófum þætti, dropaskuggum og raunverulegum efnum áferð. Þessi sauma hefur dropaskugga (0 punkta í stærð og 1 pixla á 90 ° fjarlægð), sem gerir það kleift að standa út og passa smáatriðið í hinum af hönnuninni.
The stafrænu framleitt tré áferð gerir þessa hönnun líta nútíma, með daufa stigum og grafið þætti sem framleiða aðeins þrívítt og raunsærri útliti. Endurtaka mynstur er notað til að framleiða falleg leðuráhrif fyrir merkið efst í vinstra horninu, sem hefur verið saumaður með nákvæmlega sömu tækni og þeim sem nefnd eru hér að ofan (með 1 pixla dropaskugga).
Mini-námskeið
Búa til einfaldan strikað línu (Illustrator)
Í þessari smáatriðum munum við nota Illustrator (Ai) til að búa til einfaldan þjóta-stroked línu til að mynda hring, eins og í fyrsta dæmið í þessum kafla. Opnaðu Illustrator og veldu Ellipse tólið. Meðan þú heldur Shift lyklinum til að halda lögun þinni í réttu hlutfalli skaltu draga hring, eins og að neðan.
Frá Stroke spjaldið (Gluggi → Stroke) beita 2 punkta þyngd högg með Miter Limit af 4. Hakaðu við "Strikað línu" valkostur og settu 12 stig í fyrsta þjóta sviði.
Þú munt taka eftir því að línan á hægri hlið lögun okkar er í raun tveir punktar 12 punktar sett saman. Til að laga þetta, þá skulum við fá högg okkar meira af mynstri. Breytið þrepinu í 3 stig og bilið í 12 stig, og þá tvöfalt þrepið í 6 stig og haltu lokapunktinum 12 stigum. Þú ættir að enda með sléttri línu svipað og hér að neðan (niðurstöðurnar eru breytilegir eftir stærð hringsins).
Afritaðu formið þitt með því að velja það fyrst og veldu síðan Breyta → Afrita (Stjórn + C) og að lokum Breyta → Líma í stað (Skipun + F). Með nýju forminu sem enn er valið skaltu halda Alt + Shift lyklunum samtímis og draga úr stærð formsins. Halda þessum tveimur takka á sama tíma mun halda löguninni í réttu hlutfalli og lækka eða auka stærðina frá miðpunktinum og útrýma nauðsyn þess að endurreisa.
Veldu stærri af tveimur hringjunum. Fjarlægðu heilablóðfallið og breyttu fyllingarlitinu í brúnt (eða önnur lit fyrir það efni). Nú skaltu velja minni af tveimur hringjunum og breyta högglitinu á léttari brúnni.
Með minni af tveimur hringjunum sem enn eru valdar skaltu afrita það með því að afrita og líma inn í staðinn. Einu sinni endurtekið, veldu það undir upprunalegu formi þínu (Command + [) og nudge formið niður með því að henda niður örina á lyklaborðinu einu sinni; breyttu síðan högglitnum í hvítt.
Minnkaðu ógagnsæi hvíta högghringinn þinn í 50% og ógagnsæi brúnt heilablóðfallsins í 75%.
Búa til raunsæja sauma (Photoshop)
Í þessari smáatriðum munum við nota raunverulegan dúk áferð og nokkrar af innbyggðum áhrifum Photoshop til að framleiða raunhæf sauma. Opnaðu nýtt Photoshop skjal og settu inn efni áferð að eigin vali. Skerið myndina þannig að hún situr á hvítum bakgrunni.
Veldu Rectangular Marquee tólið, og dragðu út úrval á innan við lögun formsins áferð þína. Búðu til nýtt lag og endurnefna það "Stitch." Farðu í Edit → Stroke og beita 1-punkta svörtu höggi í formi þínu.
Veldu Rectangular Marquee tólið aftur og settu það yfir högg þinn. Það skiptir ekki máli hvar þú byrjar. Með valið val skaltu ýta á Delete takkann. Gakktu úr skugga um að þú fjarlægir efni úr laginu og ekki lag lagsins.
Endurtaktu ferlið fyrir the hvíla af the stroked lína, eins og sést hér að neðan.
Það er mikið tækifæri að saumarnir verði ekki samhverfar; en það er gott, vegna þess að lykkjur eru sjaldan!
Þú ættir að enda með eitthvað sem lítur svona út:
Hægrismelltu á högglagið þitt og veldu "Blending Options" til að opna gluggann Layer Styles. Veldu flipann Litur yfirborð og veldu ljós grár (ég notaði #F1F1F1 ).
Veldu nú Drop Shadow flipann. Notaðu svarta dropaskugga með 90 ° horn, fjarlægð 1 pixla og stærð 0 punkta. Lækka ógagnsæi skugga að einhvers staðar á milli 20 og 60%.
Veldu efni lagið og opnaðu gluggann Layer Styles. Notaðu sjálfgefna Drop Shadow með fjarlægð 0 punkta, og aðdráttarlínur sem fara frá hvítu til svörtu til hvítu. Breyttu blöndunartáknum framhaldsskreytingarinnar til að "fjölga" með ógagnsæi 15%. Einu sinni sótt og skoðuð á 100%, ættir þú að enda með eitthvað sem líkist þessu:
Leika með litum efnisins með því að nota lit og jafnvægisstillingar. Hér er niðurstaðan mín:
2. Pappír og skuggi
Pappír og skuggi verða sífellt vinsælli sem hönnunarmyndir, en eru sérstaklega vinsælar í áferð-þungar hönnun, eins og þær með tré. Söfnun vinnunnar sem hér segir sýnir pappír og skuggi sem notuð eru á mismunandi vegu til að kynna smá klumpur af upplýsingum eða, í sumum tilfellum, aðal innihald vefsvæðisins.
Dæmi
Þessi skjámynd, ef þú hefur ekki tekið eftir, kemur frá litlum hluta hönnunarinnar sem við sáum í lok efnisins "Efni og sauma" hér fyrir ofan. Með því að halda áfram að þema stafrænt framleitt áferð er einfalt hvítt form með skrúfðu sérsniðnum skugga notað til að láta pappír líta út eins og það er krulla.
Mjög góð samsetning af tré og krumpuðum pappírsvexti. Blaðin í þessari gagnasafni er notuð til að kynna upplýsingar sem þarf til uppskriftar, með nokkrar fallegar táknmyndir sem gera notendum kleift að skoða, bókamerki og deila fulla uppskrift.
Þessi hönnun er áferð-þungur, sameina viðar, pappír og borði áferð til að framleiða aðlaðandi notendaviðmót. Ljósmyndað tré og borði, ásamt stafrænu framleiddum pappírsvexti og skuggum, vinna vel saman.
Þetta er einn af uppáhalds UI sýnunum mínum í pósti. Hreinlega stafrænn (þ.mt tré áferð), notar hönnunin dropa og innri skugga til að búa til fallegt leitarreit. Hönnunin notar einnig sauma og efni. Í heildina er mjög notendavænt viðmót sem lítur vel út!
Þessi hönnun virðist vera innblásin af hefðbundnum flugpósti umslagi með endurteknum mynstri í kringum blaðið. Blaðið hefur verið staflað (stafrænt) í trébakgrunninn, sem gerir notendaviðmótið virkt eins og pinna- og tilkynningartöflu fremur en flatt vefsíða.
Beige-rjóma mynd og flakk bakgrunnur hefur fínt dropa skugga sem gerir það virðast eins og pappír, sérstaklega með stimplað merki og deyja sepia-stíl ljósmyndir sem líta út eins og þau hafa verið prentuð. Þetta passar frábærlega með tré-áferðinni og heildarfinningin á tengi.
Mini-námskeið
Búa til einfaldan stafrænt pappírsáhrif (Photoshop)
Í þessari smáatriðum munum við nota tré áferð og undirstöðu Photoshop verkfæri til að búa til stafræna pappír áhrif. Byrjaðu með því að búa til nýtt skjal með áferð eða endurtaka mynstur.
Veldu Rectangular Shape tólið og settu í lag sem er svipað og hér að neðan, settu það rétt efst á striga.
Afritaðu formið og farðu í Edit → Free Transform (eða ýttu á Command + T). Dragðu úr stærð formsins meðan þú heldur Alt + Shift lyklunum til að halda löguninni í réttu hlutfalli og síðan minnka stærðina að miðju.
Dragðu efst akkerispunkta ofan efst á striga þannig að það skarast efst í upprunalegu formi.
Breyttu litinni á nýja lögun þinni í mjög ljós beige (næstum hvítt). ég notaði #FFFBF8 .
Afritaðu upprunalega lögunina þína og breyttu litinni í hreint svartan ( #000000 ).
Stækka stærð formsins þannig að það sé nokkra punkta stærri en upphafleg form. Búðu til leiðbeiningar - þú getur dregið leiðsögn úr höfðinu (Skoða → Sýna reglur, ef það er ekki sýnt) - um 10 til 20 punkta undir svörtu formi þínu. Farðu í Edit → Breyta → Warp.
Dragðu botn-vinstri akkeripunktinn niður í áttina þína og endurtaktu síðan skrefið með botn-hægri akkeri.
Ýttu á Enter til að staðfesta umbreytingu þína. Hægri-smelltu á Form Layer tólið og veldu "Rasterize Layer" valkostinn.
Skiptu svörtu laginu undir hinum tveimur stærðum en fyrir ofan viðlagið. Farðu í Sía → Óskýr → Gaussísk óskýr, og óskýrðu svarta formið með 10 punkta. Smelltu síðan á "Í lagi".
Lækka ógagnsæi svarta formsins í 50%. Opnaðu Layer Styles gluggann fyrir upphaflega hvíta forminn þinn og smelltu á Stroke flipann. Beittu 1 pixla höggi í formið með því að nota hallastillingargerðina, fara frá svörtu til hvítu með 90 ° horn.
Með því gert, höfum við stafræna pappír-á-við áhrif okkar! Þetta er frábær aðferð til að nota fyrir vefsíður.
3. Grænt leturfræði og mynstrum
Gróft leturfræði og mynstur er nokkuð algeng tækni í háþróaðri vefhönnun og það er að verða sífellt vinsælli í daglegu hönnun. Hér fyrir neðan eru nokkrar dæmi sem nota þessa stíl vel í tré-áferðarsviðum.
Dæmi
Þessi notendaviðmót með Instagram forritinu er með grungy tré-áferðargrundur og þvegið hálfgagnsæjar myndir til að framleiða slitið uppskerutími. The typography hefur nokkra mismunandi stíl, leyfa stafsetningu að standa út og gefa tré bakgrunnur grafið feel.
Í heildina er þetta mjög hreint trénotendaviðmót, með stórt og jafn mikið safn af ýmsum stílum og tækni. Einn notaður ítrekað (og mjög vel) er grafið áhrif á letri og mynstur sem er sýnt í blóma mynstrum efst á skjámyndinni.
Metal merki er hengdur á tré-textaður haus hér til að þjóna sem aðalleiðsögn. Til að gefa táknin meiri raunhæflega grafið áhrif, gaf hönnuður leturgerðin innra og sleppa skugganum.
Wood áferð er aðallega notað í þessari hönnun fyrir siglingar bar (log, í þessu tilfelli). Gegnsætt leturfræði gerir titilinn til kynna eins og sumir af steininum hefur verið eytt í burtu til að sýna tré áferðina.
Annað dæmi um grafískur leturgerð á táknum, í þessu tilfelli tré-áferðarmyndir í stað málms.
Þetta tré framhaldsskóli notar slétt og nútíma þætti, sem gerir það erfitt að velja hvort að setja það í þennan eða næsta flokk. The "Buy" hnappinn og táknið um innkaupapokann hafa mjög nákvæman grafið áhrif, sem gerir þeim frábærlega smellt!
Mini-námskeið
Hvernig á að grafa mynstur í skóginn (Photoshop)
Í þessari litla einkatími munum við búa til etsað eða grafið viðaráhrif í Photoshop. Opnaðu nýtt skjal og settu við ávexti.
Setjið eitt af eigin mynstri, eða notaðu lager vektor mynd.
Þegar þú hefur stillt vigurinn rétt skaltu hægrismella á lagið og velja "Rasterize Layer." Hægrismella á það einu sinni enn og veldu flipann Yfirlits yfirborð. Beittu halli með tveimur litum sem valdir eru úr trébakgrunninum, eins og sjá má hér að neðan.
Veldu Drop Shadow flipann og notaðu hvíta skugga með venjulegri blönduham. Breyttu skuggahorninu í 90 ° og fjarlægðin og stærðin að 1 pixla. Þú getur haldið öðrum stillingum sjálfgefið.
Veldu flipann Innanskuggi til að beita skugga inni á mynstri þinni. Þetta mun leyfa okkur að búa til grafið áhrif. Slepptu ógagnsæi skuggans í 20% og breyttu horninu í 90 °. Breyttu fjarlægð og stærð skuggainnar í 3 punkta hvor og haltu öllum öðrum stillingum sjálfgefið.
Smelltu á "Í lagi" og smelltu síðan á ógagnsækt mynsturlagið þitt í 80% til að leyfa einhverju af bakgrunni áferðinni að skína í allri sinni dýrð. Þú ættir að enda með þessa niðurstöðu:
4. Slétt og nútíma þætti
Þrátt fyrir að tréskreytingar séu oft tengdir vintage og retro hönnun, ef þau eru dregin af réttu, þá geta þau einnig verið notuð til að styðja við nútíma og sléttar þætti, eins og sjá má af dæmunum hér fyrir neðan.
Dæmi
Hér er annað skjámynd af viðmóti sem við sáum í fyrri flokki og sýndi annan algjörlega mismunandi stílþætti. Rennibrautin og skrúfurnar í þessari hönnun hafa slétt hvítt silfur og grænt stig fyrir notendavænt viðmót.
Eins og heilbrigður eins og dúkur og lykkjur og grafíkartækni, hefur þessi hönnun nokkrar nútíma þættir, svo sem 2 pixlar gráhvítt högg og lægstu táknin, sem gera til aðlaðandi og nothæfra iPad-eins og tengi.
Annar af uppáhaldsviðmótum mínum. Það sameinar efni og tré-áferð myndir með sléttum stigum, 2 pixla höggum, einföld tákn og glæsilegur leturfræði til margra skapa áhugaverða staði fyrir notandann.
A mjög nákvæma tengi sem sameinar tré áferð, þrívíð áhrif, glóa og gljáa hápunktur til að framleiða niðurstöðu sem mun losa notendur sína. Ein pixla línur eru notuð til að styrkja 3-D áhrif.
Glóðir, skuggar og högg eru notaðar til að koma þessu skæru tréviðmótum til lífs. Nútíma táknin eru þó lykillinn.
Þetta yndislega litla tengi notar náttúrulegar vörur heimsins og sléttur framtíðarstefnuþáttur til að framleiða notendaviðmót sem er aðlaðandi og auðvelt að skilja. Hávaði er bætt við nútíma þætti, sem gerir það kleift að passa inn í viðarviðferðina.
Þetta tökkunum gefur okkur tré áferð byggt á núverandi nútíma þáttur: sjálfgefna iPhone UIKit. Takkaborðið virkar nákvæmlega eins og sjálfgefna takkaborðið og mun ekki rugla saman notendum.
Mini-námskeið
Í þessari litla einkatími munum við búa til tréflugahnappavör með því að nota úrval af myndhöggum Photoshop. Búðu til nýtt skjal og settu inn tré áferð eða mynstur.
Veldu rétthyrnd tólið og dragðu út langa, þrönga form, svipað og hér að neðan. Hringbraut tækisins er stillt á 15 punkta.
Hægrismelltu á form lagið og veldu "Blending Options." Veldu flipann Gradient Overlay og bættu litbrigði litum sem valin er úr bakgrunninum og síðan aðeins dökkari lit. Smelltu síðan á "Í lagi".
Nú skaltu velja Inner Shadow flipann og nota svarta skugga með ógagnsæi 30% og 120 ° horn. Slepptu fjarlægðinni að 1 pixla og slepptu öllu öðru til 0. Þetta mun skapa skugga inni í formi okkar og gera það líkt og það var skorið úr trébakgrunninum.
Veldu Drop Shadow flipann og notaðu hvíta skugga með venjulegri blönduham. Breyttu horninu 90 ° og fjarlægðin og stærðin að 1 pixla. Skildu allt annað á 0 dílar. Þetta mun gefa lögun okkar hápunktur meðfram botninum, sem gerir það að líta meira þrívítt og raunhæft.
Snúðu inn í rista línu og veldu Ellipse tólið. Þó að halda Shift takkann til að halda lögun hringnum, draga út hring og setja það yfir renna bar.
Opnaðu "Layer Styles" gluggann fyrir nýja hringmyndina þína. Smelltu á flipann Gradient Overlay og veldu halli sem fer frá ljós-miðli til ljósgrár. Gefðu því 90 ° horn.
Veldu Drop Shadow flipann og notaðu skugga í formi þínu. Breyttu fjarlægðinni í 0 punkta og stærðina í 10 punkta.
Zoomðu út til að skoða rennistikuna þína í 100%. Hér er niðurstaðan:
5. Þrívíddaráhrif
Það eru engar takmarkanir á þrívíðu hönnun, og það er ótrúlega árangursríkt með tré áferð. Þessi samsetning er almennt notaður til að framleiða "hillur", eins og sést í iPhone og iPad tengjunum, einkum IBook forrit Apple.
Dæmi
Þessar hillur eru mjög raunhæfar og skugganir (eins og sá á innri hillunni efst í hægra horninu) koma frá miklu úrvali af sérsniðnum störfum (ekki innbyggðum Photoshop filters).
Áhrifin í þessari hönnun eru nokkuð svipuð og í fyrri. Í þetta sinn koma áhrifin á hreinni og nútímalegri útlit, en fyrri var ætlað að líta raunsærri og "nota".
Þessar iPhone hillur sýna svipaða tækni. Í þetta sinn er niðurstaðan bæði nútíma og raunhæf, fullkomlega jafnvægi áferðarmiklu ljósmyndir með stafræn áhrif.
Þessi 3-D hnappur er ótrúlegur! Með samsetta trénuðum áferðinni eru viðkvæmar upplýsingar hönnunarinnar í mikilli áherslu. Ef hnappur eins og þetta var fyrir framan þig, þá er það engin leið sem þú vilt vera fær um að standast og gefa það ýta!
Einföld, en áhrifarík 3-D áhrif hafa verið beitt á þessa flipa, þannig að hnapparnir birtast eins og þeir séu að leggja inn skúffur. S snjallt hannað þáttur til að fá notandanum þátt í tenginu.
Skrifað eingöngu fyrir WDD eftir Callum Chapman, hönnuður og myndræn viðskipti sem Hringlaga Skapandi . Hann rekur einnig The Inspiration Blog og Picmix Store
Deildu tré UI hönnununum þínum og myndum með okkur, eins og heilbrigður eins og einhverjar greinar eða námskeið sem gætu hjálpað samhliða lesendum þínum.