Algengar þættir sem notaðar eru í tengihnappahönnun
Hnappar og flakkir eru nokkuð mögulega algengustu tengipunktirnir í bæði skjáborðs- og farsímahönnun. Þeir draga tengi saman, leyfa notendum að komast frá A til B í einum smelli.
Mikilvægast er að hnappurinn þarf að líta vel út. Það þarf að öskra "Smelltu á mig!" Eða annars verður það einfaldlega ekki eins árangursrík og það þarf að vera. Hnappar eru almennt notaðir til að leita, "Senda", "Senda", "Kaupa" og "Hlaða inn".
Í þessari grein munum við líta á sjö algengar hnappahlutar í nútíma viðmótshönnuðum: áferð, mynstur, 3-D, pixla-fullkomin högg, inndráttarbakgrunn, glóðir og hápunktur.
Þú finnur 35 frábær dæmi um þessar aðferðir og handfylli af smáatriðum fyrir Photoshop.
1. Áferð
Notkun áferð er frábær leið til að bæta smá dýpt við hnappa og láta þá standa út smá frá restinni af viðmótinu (og að lokum gera þær kleift að smella). Hér að neðan eru nokkur frábær dæmi um áferð í hnöppum.
ShelfLuv notar áferð til að bæta við vídd við tengi sína, sérstaklega í hnappa- og textasvæðissvæðum.
Texti er notað um allt þetta tengi, en það er þyngra í "Hlaða" hnappasvæðinu, sem gerir það að brennidepli.
Áferðin hér er blandað vel með skurðhnappnum, sem gerir það að verkum að það sé raunverulegt.
Texti er ekki í raun notaður á þessum HÁ-hnappi en birtist í bakgrunni og leyfir hnappinum að standa út.
Búa til textaðan hnapp
Búðu til einfaldan bakgrunn með því að nota formatólið og með því að bæta við hávaða (Sía → Noise → Add Noise).
Endurveldið formatólið og taktu rétthyrningur og vertu viss um að toppurinn af henni sé falinn af brún striga.
Breyttu lit á forminu í bláu. Ég notaði # 00A3D9.
Afritaðu Form lagið og breyttu það í sömu stöðu. Breyttu litinni í svolítið dekkri bláu.
Afritaðu lagið einu sinni enn. Settu lagið undir síðustu tveimur Lögunarlögunum og breytt litinni í ljós grár.
Ljósmyndaðu eða hlaða niður pappírs áferð (ég notaði einn frá Lost & Taken ). Farðu í Skrá → Staður og finndu skrána til að setja hana í skjalið. Breyttu því og settu það yfir bláa formin þín.
Fjarlægðu allar umfram áferð með því að nota Marquee tólið og breyttu blandunarhamnum á áferðinni. Reyndu með mismunandi stillingum vegna þess að mismunandi áferð framleiðir mismunandi niðurstöður. Þú gætir líka viljað lækka ógagnsæktina svolítið.
Opnaðu Layer Style gluggann fyrir dökkari bláa forminn þinn og notaðu eftirfarandi Drop Shadow stíl til að bæta við lúmskur hvítum skugga.
Nú beita högg á formið þitt með því að nota stillingarnar hér að neðan.
Að lokum skaltu bæta innri skugga við lögunina, til að gefa henni frekari vídd.
Bættu nokkrum texta við hnappinn og þú ert búinn!
2. Mynstur
Mynstur eru annar frábær leið til að bæta við smá áhuga og dýpt við tengihnappana. Hér fyrir neðan eru nokkrar dæmi um mynstur í hnöppum, allt lúmskur enn árangursrík.
Skýringarmynd er notuð á vinstri hlið hnappsins hér til að skilja táknið frá tegundinni.
Dálkar lína er notaður í þessum hnappi, sem passar uppskerutímann og bætir víddinni við hönnunina.
Þetta er uppáhalds notkun mín á mynstri í þessum dæmum. Þótt það sé ekki notað í hnöppunum sjálfum, bætir mynsturið í gráum hausnum vídd í heildarhönnunina og hjálpar að lokum að appelsínugult hnappar standi út.
Búa til mynsturhnapp
Eftir að þú hefur búið til textaðan bakgrunn með því að nota tæknina í fyrri smáatriðum skaltu teikna rétthyrning með því að nota Shape tólið og fylla það með blágrænu. Ég notaði litinn # 008B8D.
Teikna aðra lögun með sömu hæð og lit.
Notaðu tólið Lasso, búðu til þríhyrning, eins og sést hér að neðan. Settu það yfir brún nýja formsins og smelltu á "Delete" takkann til að fjarlægja svæðið sem við þurfum ekki.
Afritaðu lögunina og farðu í Edit → Breyta → Flip Hvítt til að gera það andlit gagnstæða áttina.
Stöðuðu tvö form undir stærri form, eins og sjá má hér að neðan.
Hægrismelltu á einn af formunum þínum og opnaðu Blending Options / Layer Style gluggann. Notaðu gráðu yfirborð eins og sá sem sést hér að neðan. Þú getur einnig bætt við lúmskur Drop Shadow. Þegar búið er að hægrismella á lagið og veldu "Copy Layer Style." Velduðu annan borðaform. Hægrismelltu á og veldu "Líma Layer Style." Opnaðu Layer Style gluggann og breyttu horninu á lóðréttu yfirlínu þinni frá 180 ° til 0 °.
Notaðu lasso tólið, búið til úrval svipað og sá sem er að neðan til að passa upp á báðar horni formanna okkar. Fylltu það með jafnvel dökkari lit.
Afritaðu lagið, flettu það lárétt og settu það á hinni hliðinni.
Búðu til línu mynstur. Að öðrum kosti gætir þú notað þann sem ég gerði hér að neðan.
Límdu mynstur yfir allan borðið þitt. Meðan þú heldur áfram Command + Shift skaltu smella á smámyndina í laginu á öllum borði þínum. Þetta mun velja þau öll. Hægrismelltu og veldu "Select Inverse." Með línu mynsturlaginu þínu valið, ýttu á "Delete" takkann til að fjarlægja svæðið í mynstri sem þú þarft ekki.
Breyttu blöndunartækinu á mynsturlaginu til að "margfalda" til að fela hvítt úr laginu. Slepptu ógagnsæi niður á einhvers staðar á milli 25 og 75%. Tilraun til að ná besta árangri.
Notaðu Shape tólið, búðu til nokkrar línur svipaðar þeim sem hér að neðan eru.
Fjarlægðu svæðin sem sitja á bakgrunni myndarinnar.
Reyndu að blanda í hverja línu. Hér er niðurstaðan:
3. 3-D
Þrývítt hnappar eru frábærar vegna þess að það gerir hnappa lítið mun raunsærri. Þeir eru næstum ómögulegt að smella ekki! Eina galli er að áhrifin eru frekar fjörugur og passar ekki alla vefsíður (eins og fyrirtækja). Hér að neðan er úrval af sumum fallegum 3-D hnöppum.
Skuggarnir og 1 pixla línurnar lýsa hér á ákveðnum sviðum og láta hnappinn birtast 3-D. Þetta og nokkrar góðar CSS áhrif myndi gera fyrir frábær-gagnvirka hnappinn.
Annað frumefni okkar (mynstur) er einnig notað í þessari hönnun til að bæta vídd við þegar mjög 3-D hnappur.
Þessi hnappur tekur örlítið annan nálgun, að treysta eingöngu á stigum fyrir 3-D útlitið.
Þetta sett sýnir mismunandi hæð til að gefa til kynna hvort hnappurinn sé í venjulegu, sveima eða virku ástandinu. Línurnar og áferðin gefa hnöppunum líflegri útliti.
Eins og nokkrar aðrar dæmi í þessum kafla, samanstendur af stigum og höggum þessara hnappa líta út 3-D.
Þessi hnappur lítur út fyrir 3-D vegna þess að hann er "út úr kassanum" hönnuð og vafinn um UI.
Búa til 3-D hnapp
Byrjaðu með því að teikna form með Rectangle tólinu, með horn radíus 7 pixla. Opnaðu Layer Style gluggann, og sóttu yfirlitshliðina frá dökk rauðum til ljósrauða. Notaðu jafna léttari rauða í lok endalínunnar til að varpa ljósi á hvað verður 3-D hnappurinn okkar.
Nú beita högg á hnappinn. Breyttu fyllingartegundinni að "Gradient" þannig að þú getur breytt lit efst og neðst í högginu. Farið frá ljósi til dökkrauða (hið gagnstæða yfirborðsyfirborðsins).
Það ætti að líta eitthvað út eins og þetta svo langt:
Afritaðu formslagið. Nudge upprunalega lagið niður um 10 punkta.
Notaðu Drop Shadow í upprunalegu lagið með því að nota stillingarnar sem sjást á skjámyndinni hér fyrir neðan.
Einnig dregurðu úr þrepum yfirborðinu með því að gera hverja lit í hallastikunni svolítið dekkri.
Þú ættir að hafa eitthvað sem lítur svona út:
Veldu textatólið og sláðu inn eitthvað á hnappinum. Opnaðu Layer Style gluggann og notaðu lóðrétt yfirborð svipað og séð hér að neðan:
Notaðu innri skugga með þessum stillingum:
Notaðu Drop Shadow með þessum stillingum:
Og við erum búin! Þú ættir að endað með eitthvað svoleiðis:
4. Pixel-Perfect högg
Listin að fullkomnum punktum hefur orðið óaðskiljanlegur í öllum þáttum hönnun notendaviðmóta, ekki aðeins hnappa. Ein pixla línur (eða högg) gefa hnappana dýpt og aðeins 3-D útlit. Þeir gera einnig hnappa líta indented. Hér eru nokkur frábær dæmi um þetta.
Þú getur greinilega séð að hvítur (yfirbyggður) 1 punkta lína er notaður sem hápunktur efst á rauða hnappinum, með dökkri línu neðst. Þetta gerir það að verkum að það virðist örlítið 3-D og bætir mikið af smáatriðum við síðuna.
Táknmyndin í þessum hnappi hefur innri skugga, þannig að hnappurinn birtist eins og hann situr fyrir ofan viðmótið.
Þessir CSS3-eini hnappar (alls ekki Photoshop) hafa 1 punkta högg sem gera þá standa út úr bakgrunni og birtast innlent þegar smellt er á það.
Annað dæmi um 1 punkta ljós högg efst á hnappinn til að starfa sem hápunktur.
Þessi græna hnappur sýnir örlítið annan nálgun, með innri ljóma sem er hápunktur efst á hnappinum. Strangurinn að utan skapar mjög fínan skugga.
Enn annar hnappur sem sameinar áðurnefndar aðferðir.
Þessi undirstöðuhnappur hefur þunnt högg og viðkvæma dropaskugga til að gera það áberandi frá einföldum hönnun.
Þessi hnappur hefur lúmskur innri ljóma til að gera það standa út úr bakgrunni. Virkt ástand þess hefur lækkað ógagnsæi, sem gerir bragðið.
Gleymdu hnappinum: Þessi heildarhönnun er pixel-fullkominn, með nútíma leturfræði og línum sem gera fallega notendaviðmót.
Búðu til pixla-fullkominn hnapp
Veldu reitarmynda tólið (finnst í tækjastikunni efst í Photoshop þegar lögunartólið er valið) og gefðu því hornkyrða 5 punkta. Teiknaðu svarta rétthyrninginn svipað og hér að neðan.
Opnaðu Layer Style gluggann og notaðu lóðrétt yfirlag í formið. Ég notaði dökkgræna í örlítið léttari grænn.
Gefðu því formi hallandi heilablóðfall, fara úr grænu og alltaf-svolítið dökkari grænn.
Gefðu nú lögun hvíta Inner Shadow stíl með því að nota stillingarnar sem sjást hér að neðan.
Og nú Drop Shadow, með stærð 0 punkta og ógagnsæi aðeins 5%.
Finndu tákn á netinu (eða búðu til þitt eigið) og settu það í skjalið þitt með því að fara í File → Place, staðsetja það rétt. Notaðu yfirlitshæð yfir í það.
Gefðu innra skugga táknið þitt 1 fjarlægð fjarlægð og hvíta Drop Shadow fjarlægðin 1 pixla. Þetta gerir táknið líkt og það var grafið í hnappinn.
Bættu við nokkrum texta við hnappinn og notaðu Drop Shadow áhrif með lágan ógagnsæi með því að nota Layer Style gluggann. Hér er niðurstaðan:
5. Indented Backgrounds
Innhverfur bakgrunnur gerir hnappinn kleift að líta út eins og það er grafinn í það, sem gefur hnappinn dýpt og sjónræn áhuga. Hér að neðan eru nokkur frábær dæmi um þetta.
Þessi hnappur bakgrunnur hefur lúmskur innri skugga til að gera það virðast innhlaðin.
Hið inverteraða stigamörk í þessari bakgrunni gera hnappa virka innspýting.
Sambland af höggum og sleppa skuggum gefur þessum dökkum hnöppum meiri dýpt.
Þessi hnappur bakgrunnur hefur nokkrar stíll, þar á meðal halli, innri skuggi og sleppa skugga.
Þessi innsláttarhnappur bakgrunnur er miklu minni en það sem við höfum séð en fylgir samt sömu aðferðum.
Enn og aftur eru dropaskuggi og innri skuggi notaður til að búa til inntak.
6. Ljós
Glóðir eru nokkuð erfiðar aðferðir til að draga af í tengi hönnun, og eru venjulega aðeins að sjá í dökkum tengi (þótt við sjáum ljós dæmi hér að neðan). Þessi dæmi sýna hvernig hægt er að nota glóa á mismunandi vegu.
Glóa er notaður inni á þennan hnapp og gefur það alhliða hápunktur.
Glóðir eru snjallt notaðir til að gera leturgerðina í þessum hnappi standa út úr dökkum bakgrunni. Og glóðirnar gera hleðslustikurnar virðast líflegir.
Glóðir eru almennt notaðir í dökkum tengi fyrir iPhone. Hér sjáum við glóa í kringum leturfræði þegar hnappurinn er í virku ástandinu.
Ljósið og frekar lúmskur ljómi gefur þennan hnapp til viðbótar uppörvunarinnar sem þarf að verða falleg.
Búa til ljós glóandi hnapp
Notaðu reyndaraðgerðartólið aftur, taktu rétthyrningur, í þetta sinn með hornkvilli 3 punkta. Notaðu gráðu yfirborð svipað og hér að neðan. Gefðu miðju litina þína stöðu "49" og "50."
Notaðu eftirfarandi innri skugga.
Notaðu eftirfarandi Drop Shadow.
Notaðu eftirfarandi ytri ljóma.
Bættu við nokkrum leturfræði við hnappinn. Þú ættir að endað með gott, hreint og ótrúlega auðvelt að framleiða niðurstöðu eins og þetta:
7. Helstu atriði
Helstu atriði gefa hnöppum dýpt, sjónrænum áhuga og smelli. Dæmiin hér að neðan sanna þetta.
Einföld lágt ógagnsæi hvítur lögun er notaður á efstu hluta þessa hnapp til að gefa henni smá dýpt og hjálpa henni að passa heildarlega rautt og grátt tengi.
Eins og hjá mörgum öðrum hnöppum í þessari færslu er 1 punkta högg hápunktur þessa.
Ljós til dökkra til léttra stiga þjóna sem hápunktur og skuggi fyrir þessar hnappar.
Þessi færsla var skrifuð eingöngu fyrir WDD eftir Callum Chapman , maðurinn að baki Picmix Store og Hringlaga bloggið .
Hvaða hnapparhönnun notar þú mest og hvers vegna? Vissir þú fundið hærri smell með því að gefa þér nokkra hönnun? Vinsamlegast deildu hér fyrir neðan ...