Vanlige elementer brukt i grensesnittknappedesign
Knapper og navigasjonselementer er ganske muligens de mest brukte grensesnittobjektene i både desktop og mobildesign. De trekker et grensesnitt sammen, slik at brukerne kan komme fra A til B med ett enkelt klikk.
Viktigst, en knapp må se bra ut. Det må skrike "Klikk meg !," Eller ellers blir det ikke så effektivt som det må være. Knapper brukes vanligvis til "" Søk, "" Send "," Send "," Kjøp "og" Last opp ".
I denne artikkelen ser vi på syv vanlige knappelementer i moderne grensesnittdesign: teksturer, mønstre, 3-D, piksel-perfekte streker, innrammet bakgrunn, lys og høydepunkter.
Du finner 35 fantastiske eksempler på disse teknikkene, samt en håndfull mini-opplæringsprogrammer for Photoshop.
1. Teksturer
Bruke tekstur er en fin måte å legge til litt dybde på knapper og få dem til å skille seg ut litt fra resten av grensesnittet (og til slutt gjøre dem mer klikkbare). Nedenfor er noen gode eksempler på teksturer i knapper.
ShelfLuv bruker tekstur hele veien for å legge til dimensjon til grensesnittet, spesielt i knappene og tekstfeltet.
Teksturen brukes over hele dette grensesnittet, men det er tyngre i "Upload" -knappen, noe som gjør det til et fokuspunkt.
Teksturet her blandes godt med den avskårne knappen, slik at den ser ekte ut.
Teksturen brukes ikke i denne brukergrensesnittknappen, men vises i bakgrunnen, slik at knappen kan skille seg ut.
Opprette en teksturert knapp
Lag en enkel bakgrunn ved hjelp av Formverktøyet og ved å legge til støy (Filter → Støy → Legg til støy).
Velg Seleksjonsverktøyet og trekk et rektangel, og kontroller at toppen av det er skjult av kanten av lerretet.
Endre farge på formen til blå. Jeg brukte # 00A3D9.
Dupliser formlaget og endre størrelsen på den samme posisjonen. Bytt farge til en litt mørkere blå.
Dupliser laget igjen en gang til. Plasser laget under de to siste Form lagene, og endre fargene til en lysegrå.
Fotograf eller last ned en papirstruktur (jeg brukte en fra Tapt og tatt ). Gå til File → Place, og finn filen for å plassere den i dokumentet. Endre størrelsen på den og plasser den over dine blå former.
Fjern eventuell overflødig tekstur ved å bruke Marquee-verktøyet, og endre blandingsmodus for tekstur. Eksperimenter med forskjellige moduser fordi forskjellige teksturer gir forskjellige resultater. Du vil kanskje også senke oppacitetsnivåene litt.
Åpne Layer Style-vinduet for mørkere blå form, og bruk følgende Drop Shadow-stil for å legge til en subtil hvit skygge.
Bruk nå et slag på din form ved å bruke innstillingene nedenfor.
Til slutt legger du til en indre skygge i formen, for å gi den videre dimensjon.
Legg til litt tekst på knappen, og du er ferdig!
2. Mønstre
Mønstre er en annen flott måte å legge til litt interesse og dybde til grensesnittknapper. Nedenfor er noen få eksempler på mønstre i knapper, alle subtile, men effektive.
En diagonal refleksjon brukes på venstre side av knappen her for å skille ikonet fra typen.
En diagonal linje brukes i denne knappen, tilpasser vintageutseendet mens du legger dimensjonen til designet.
Dette er min favoritt bruk av et mønster i disse eksemplene. Selv om det ikke brukes i knappene selv, legger mønsteret i den grå overskriften dimensjonen til hele designen og hjelper til slutt å oransje knappene skiller seg ut.
Opprette en mønstret båndknapp
Etter å ha opprettet en strukturert bakgrunn ved å bruke teknikken i den forrige mini-opplæringen, tegne et rektangel ved hjelp av Formverktøyet, og fyll det med en blågrønn. Jeg brukte fargen # 008B8D.
Tegn en annen form med samme høyde og farge.
Bruk Lasso-verktøyet til å lage en trekant, som vist nedenfor. Plasser den over kanten av den nye formen, og trykk på "Slett" -tasten for å fjerne området vi ikke trenger.
Dupliser formen og gå til Rediger → Forvandle → Vri horisontalt for å gjøre den motsatt motsatt retning.
Plasser de to figurene under den større formen, som vist nedenfor.
Høyreklikk på en av figurene dine, og åpne vinduet Blandingsalternativer / Layer Style. Påfør et graderingsoverlegg som ligner på det som er sett under. Du kan også legge til en subtil Drop Shadow. Når du er ferdig, høyreklikk på laget og velg "Kopier lagstil". Velg den andre bannerkonfigurasjonen. Høyreklikk og velg "Lim inn lagstil". Åpne vinduet Lagformat, og endre vinkelen på Gradient Overlay fra 180 ° til 0 °.
Bruk Lasso-verktøyet, opprett et valg som ligner på det som er sett under for å matche de to hjørnene i figurene våre. Fyll den med en enda mørkere farge.
Dupliser laget, vri det horisontalt og plasser det på den andre siden.
Lag et linjemønster. Alternativt kan du bruke den som jeg laget nedenfor.
Lim mønsteret over hele banneret. Mens du holder på Command + Shift, klikker du på miniatyrene i laget av alle dine bannerlag. Dette vil velge dem alle. Høyreklikk og velg "Velg omvendt." Med ditt linjemønsterlag valgt, trykk på "Slett" -tasten for å fjerne områdene i mønsteret du ikke trenger.
Endre blandingstilstanden til mønsterlaget til "Multiply" for å skjule den hvite fra laget. Slett nå opaciteten til et sted mellom 25 og 75%. Eksperiment for det beste resultatet.
Bruk verktøyverktøyet til å lage noen linjer som ligner dem nedenfor.
Fjern områdene som ligger på bildens bakgrunn.
Eksperimenter med blandemodus av hver av linjene dine. Her er resultatet:
3. 3-D
Tredimensjonale knapper er flotte fordi det gjør knappene ser langt mer realistiske ut. De er nesten umulige å ikke klikke! Den eneste ulempen er at effekten er ganske leken og passer ikke alle nettsteder (for eksempel bedriftens). Nedenfor er et utvalg av noen flotte 3-D knapper.
Skyggene og 1-pixel linjene her markerer bestemte områder og gjør at knappen vises 3-D. Dette og noen gode CSS-effekter vil gi en super-interaktiv knapp.
Vårt andre element (mønstre) brukes også i dette designet for å legge til dimensjon på en allerede veldig 3-D-knapp.
Denne knappen tar en litt annen tilnærming, bare avhengig av gradienter for sin 3-D utseende.
Dette settet viser forskjellige høyder for å indikere om knappen er i normal, sving eller aktiv tilstand. Linjene og tekstur gir knappene et mer livaktig utseende.
Som et par andre eksempler i denne delen, gjør en kombinasjon av gradienter og streker disse knappene 3-D.
Denne knappen ser 3-D på grunn av sin "ut av boksen" -design, som er pakket rundt brukergrensesnittet.
Opprette en 3-D knapp
Start med å tegne en form med rektangulærverktøyet, med en hjørne radius på 7 piksler. Åpne Layer Style-vinduet, og bruk et Gradient Overlay som går fra mørk rød til lysrød. Bruk en jevn lysere rød på slutten av graderingslinjen for å markere toppen av hva som vil være vår 3-D-knapp.
Bruk nå et slag til knappen. Endre fyllingstypen til "Gradient" slik at du kan endre fargen på toppen og bunnen av streken. Gå fra en lys til mørk rød (motsatt av gradientoverlegget).
Det burde se noe slikt så langt:
Kopier formlaget. Nudge det opprinnelige laget ned med ca 10 piksler.
Bruk en Drop Shadow til det opprinnelige laget ved å bruke innstillingene som vises i skjermbildet nedenfor.
Du kan også mørke Gradient Overlay ved å gjøre hver enkelt farge i graderingslinjen litt mørkere.
Du bør ha noe som ser slik ut:
Velg tekstverktøyet, og skriv noe på knappen. Åpne Layer Style-vinduet, og bruk et Gradient Overlay som ligner på det som er sett nedenfor:
Bruk en innerskygge ved å bruke disse innstillingene:
Bruk en Drop Shadow ved å bruke disse innstillingene:
Og vi er ferdige! Du bør ende opp med noe slikt:
4. Pixel-Perfect Strokes
Kunsten å perfeksjonere piksler har blitt integrert i alle aspekter av brukergrensesnittdesign, ikke bare knapper. One-pixel linjer (eller slag) gir knapper dybde og en litt 3-D utseende. De gjør også knapper ser innrykkede. Her er noen flotte eksempler på dette.
Du kan tydelig se at en hvit (overlappet) 1-pikslinje brukes som et høydepunkt øverst på den røde knappen, med en mørkere linje nederst. Dette gjør at det virker litt 3-D og legger til mye detalj på siden.
Typografien i denne knappen har en indre skygge, slik at knappen vises som om den sitter over grensesnittet.
Disse CSS3-bare knappene (absolutt ingen Photoshop) har 1-pixel slag som får dem til å skille seg ut fra bakgrunnen og vises innrykket når de klikkes.
Et annet eksempel på en 1-piks lysstroke øverst på knappen for å fungere som et høydepunkt.
Denne grønne knappen viser en litt annen tilnærming, med en indre glød som fungerer som et høydepunkt øverst på knappen. Stroppen på utsiden skaper en meget fin skygge.
En annen knapp som kombinerer de nevnte teknikkene.
Denne grunnleggende knappen har et tynt slag og en delikat dropshadow for å skille seg ut fra den enkle designen.
Denne knappen har en subtil indre glød for å skille seg ut fra bakgrunnen. Dens aktive tilstand har en senket ugjennomtrengelighet, noe som gjør kunsten.
Glem knappen: denne hele designen er piksel-perfekt, med sin moderne typografi og linjer som gir et vakkert brukergrensesnitt.
Lag en piksel-perfekt knapp
Velg verktøylinje for rektangelformat (funnet i verktøylinjen øverst i Photoshop når Formverktøyet er valgt), og gi det en hjørneradius på 5 piksler. Tegn et svart rektangel som ligner på det nedenfor.
Åpne Layer Style-vinduet, og bruk et gradientoverlegg til formen. Jeg brukte en mørkegrønn til en litt lysere grønn.
Gi formen en gradient slag, går fra en grønn til en stadig-litt-mørkere grønn.
Gi formen en hvit innerskygge-stil, ved hjelp av innstillingene som er sett nedenfor.
Og nå en Drop Shadow, med en størrelse på 0 piksler og en opasitet på bare 5%.
Finn et ikon på Internett (eller lag ditt eget), og legg det i dokumentet ditt ved å gå til File → Place, posisjonere det riktig. Påfør et overføringsoverlegg til det.
Gi den indre skyggen av ikonet ditt en avstand på 1 pixel, og den hvite Drop Shadow en avstand på 1 pixel. Dette gjør at ikonet ser ut som det ble gravert inn i knappen.
Legg til litt tekst på knappen, og bruk en dypskyggingseffekt med lav opacitet ved hjelp av lagstilsvinduet. Her er resultatet:
5. Indrykkede bakgrunner
En innrykkbar bakgrunn gjør at en knapp ser ut som den er begravet i den, og gir knappens dybde og visuell interesse. Nedenfor er noen gode eksempler på dette.
Denne knappen bakgrunnen har en subtil indre skygge for å få det til å vises innrykket.
De inverterte gradienter i denne bakgrunnen gjør at knappene vises innrykket.
En kombinasjon av streker og slippskygger gir disse innrykkede knappene mer dybde.
Denne knappen bakgrunnen har flere stiler, inkludert en gradient, indre skygge og drop skygge.
Denne innrammede knappens bakgrunn er mye mindre enn det vi har sett, men følger fortsatt de samme teknikkene.
Enda en gang, en dråpe skygge og indre skygge brukes til å lage et innrykk.
6. Lyser
Gløder er en ganske vanskelig teknikk for å trekke av i grensesnittdesign, og er vanligvis sett bare i mørke grensesnitt (selv om vi får se et lyst eksempel nedenfor). Disse eksemplene viser hvordan gløder kan brukes på forskjellige måter.
En glød brukes på innsiden av denne knappen, noe som gir den et allround høydepunkt.
Gløder er klokt vant til å gjøre typografien i denne knappen skiller seg ut fra den mørke bakgrunnen. Og glødene gjør at lastestengene virker virkelige.
Gløder brukes vanligvis i mørke grensesnitt for iPhone. Her ser vi en glød rundt typografien når knappen er i aktiv tilstand.
Lyset og ganske subtil glød gir denne knappen den ekstra boosten som det trenger å bli vakker.
Opprette en lys glødende knapp
Bruk rektangelet med rektangelet formverktøyet igjen, denne gangen med en hjørne radius på 3 piksler. Påfør et graderingsoverlegg som ligner på det nedenfor. Gi dine senterfarger en posisjon på "49" og "50."
Bruk følgende Innerskygge.
Påfør følgende Drop Shadow.
Påfør følgende ytre glød.
Legg til litt typografi på knappen. Du bør ende opp med et fint, rent og utrolig lett å produsere resultat som dette:
7. Høydepunkter
Høydepunkter gir knapper dybde, visuell interesse og klikkbarhet. Eksemplene nedenfor viser dette.
En enkel hvit opacity hvit form brukes på den øverste halvdelen av denne knappen for å gi den litt dybde og hjelpe den til å passe til det samlede røde og grågrensesnittet.
Som med mange andre knapper i dette innlegget, fremhever en 1-pikslager dette.
Lys til mørk til lysgradienter tjener som høydepunkter og skygge for disse knappene.
Dette innlegget ble skrevet utelukkende for WDD av Callum Chapman , mannen bak Picmix Store og Sirkelboks Blogg .
Hvilke knappedesigner bruker du mest og hvorfor? Fikk du et høyere klikk gjennom pris for noen design? Vennligst del under ...