Fælles elementer, der anvendes i grænsefladeknapdesign
Knapper og navigationselementer er muligvis de mest brugte interfaceobjekter i både desktop og mobile design. De trækker en grænseflade sammen, så brugerne kan komme fra A til B med et enkelt klik.
Vigtigst er det, at en knap skal se godt ud. Det skal skrige "Klik på mig !," Ellers vil det simpelthen ikke være så effektivt som det skal være. Knapper bruges almindeligvis til "" Søg, "" Indsend "," Send "," Køb "og" Upload ".
I denne artikel vil vi se på syv fælles knapelementer i moderne interface design: teksturer, mønstre, 3-D, pixel-perfekte streger, indrykkede baggrunde, gløder og højdepunkter.
Du finder 35 fantastiske eksempler på disse teknikker samt en håndfuld mini-tutorials til Photoshop.
1. Teksturer
Brug af tekstur er en fantastisk måde at tilføje dybde til knapper og få dem til at skille sig lidt ud fra resten af grænsefladen (og i sidste ende gøre dem mere klikbare). Nedenfor er nogle gode eksempler på teksturer i knapper.
ShelfLuv bruger tekstur hele tiden for at tilføje dimension til dens grænseflade, især i knapperne og tekstfeltområder.
Tekstur bruges over hele denne grænseflade, men det er tungere i "Upload" -knappen, hvilket gør det til et fokuspunkt.
Teksturerne her blandes godt med den afskårne knap, så den ser rigtig ud.
Teksturen bruges ikke faktisk på denne UI-knap, men vises i baggrunden, så knappen kan skille sig ud.
Oprettelse af en tekstureret knap
Opret en simpel baggrund ved hjælp af værktøjet Form og ved at tilføje støj (Filter → Noise → Add Noise).
Vaelg værktøjet Form og træk et rektangel, og sørg for, at toppen af det er skjult uden for lærredets kant.
Skift farven på formen til blå. Jeg brugte # 00A3D9.
Duplikater formlaget og ændrer størrelsen i samme position. Skift farven til en lidt mørkere blå.
Duplikerer laget igen en gang til. Placer laget under de to sidste Formlag, og skift farven til en lysegrå.
Fotografér eller download en papirstruktur (jeg brugte en fra Mistet og taget ). Gå til File → Place, og find filen for at placere den i dokumentet. Ændre størrelsen på den og placere den over dine blå former.
Fjern eventuelle overskydende tekstur ved at bruge markeringsværktøjet, og ændre blandingsfunktionen i tekstur. Eksperimenter med forskellige tilstande, fordi forskellige teksturer giver forskellige resultater. Du vil måske også gerne sænke opacitetstykkerne lidt.
Åbn vinduet Layer Style til din mørkere blå form, og anvend følgende Drop Shadow-stil for at tilføje en subtil hvid skygge.
Anvend nu et strejf på din form ved hjælp af nedenstående indstillinger.
Endelig skal du tilføje en indre skygge til formen for at give den yderligere dimension.
Tilføj nogle tekst til knappen, og du er færdig!
2. Mønstre
Mønstre er en anden god måde at tilføje lidt af interesse og dybde til interface knapper. Nedenfor er et par eksempler på mønstre i knapper, alle subtile men effektive.
En diagonal refleksion bruges på venstre side af knappen her for at adskille ikonet fra typen.
En diagonal linje anvendes i denne knap, der passer til vintageudseende, mens du tilføjer dimensionen til designet.
Dette er min favorit brug af et mønster i disse eksempler. Selvom det ikke bruges i knapperne selv, tilføjer mønsteret i den grå overskrift dimension til hele designet og hjælper i sidste ende med at orange knapper skiller sig ud.
Oprettelse af en mønstret båndknap
Når du har lavet en struktureret baggrund ved hjælp af teknikken i den foregående mini-tutorial, skal du tegne et rektangel ved hjælp af værktøjet Form og fylde det med en blågrøn. Jeg brugte farven # 008B8D.
Tegn en anden form med samme højde og farve.
Ved hjælp af Lasso-værktøjet skal du oprette en trekant som vist nedenfor. Placer det over kanten af den nye form, og tryk på "Slet" for at fjerne det område, vi ikke har brug for.
Dupliker formen og gå til Rediger → Transformér → Vend horisontalt for at gøre den til den modsatte retning.
Placer de to former under den større form som vist nedenfor.
Højreklik på en af dine figurer, og åbn vinduet Blandingsvalg / Layer Style. Påfør et overtoningsoverlag svarende til det, der ses nedenfor. Du kan også tilføje en subtil dropshadow. Når du er færdig, højreklik på laget og vælg "Copy Layer Style." Vælg din anden bannerform. Højreklik og vælg "Indsæt lagstil". Åbn vinduet Lagstil og ændre vinklen på dit Gradientoverlay fra 180 ° til 0 °.
Ved hjælp af Lasso-værktøjet skal du oprette et udvalg svarende til det, der ses nedenfor for at matche de to hjørner af vores figurer. Fyld den med en endnu mørkere farve.
Duplikér laget, vip det vandret og læg det på den anden side.
Opret et linjemønster. Alternativt kan du bruge den, jeg lavede nedenfor.
Indsæt mønsteret over hele dit banner. Mens du holder på Command + Shift, skal du klikke på miniaturerne til lag af alle dine bannerlag. Dette vælger dem alle. Højreklik og vælg "Vælg omvendt." Når du har valgt dit linjemønsterlag, skal du trykke på "Slet" for at fjerne de områder af det mønster, du ikke har brug for.
Skift blandingstilstanden for mønsterlaget til "Multiply" for at skjule det hvide fra laget. Sænk nu opaciteten til et sted mellem 25 og 75%. Eksperiment for det bedste resultat.
Ved hjælp af værktøjet Form skal du oprette nogle linjer svarende til dem nedenfor.
Fjern de områder, der sidder på billedets baggrund.
Eksperimentér med blandingstilstanden for hver af dine linjer. Her er resultatet:
3. 3-D
Tredimensionelle knapper er gode, fordi det gør knapperne ser langt mere realistiske ud. De er næsten umulige ikke at klikke! Den eneste ulempe er, at effekten er temmelig legesyg og passer derfor ikke til alle hjemmesider (f.eks. Corporate ones). Nedenfor er et udvalg af nogle dejlige 3-D knapper.
Skyggerne og 1-pixel linjerne markerer her visse områder og får knappen til at vises 3-D. Dette og nogle gode CSS-effekter ville gøre for en super-interaktiv knap.
Vores andet element (mønstre) bruges også i dette design til at tilføje dimension til en allerede meget 3-D knap.
Denne knap tager en lidt anden tilgang, idet den kun afhænger af gradienter for dens 3-D look.
Dette sæt viser forskellige højder for at angive, om knappen er i normal, sving eller aktiv tilstand. Linjerne og teksturerne giver knapperne et mere livlignende udseende.
Som et par andre eksempler i dette afsnit gør en kombination af gradienter og streger disse knapper til 3-D.
Denne knap ser 3-D på grund af dens "out of the box" -design, der pakkes rundt i brugergrænsefladen.
Oprettelse af en 3-D-knap
Start med at tegne en form med rektangelværktøjet med en hjørneradius på 7 pixel. Åbn vinduet Layer Style, og anvend et overtoningsoverlay, der går fra mørkt rødt til lyserødt. Brug en endnu lysere rød i slutningen af graderingslinjen for at fremhæve toppen af, hvad der vil være vores 3-D-knap.
Anvend nu et slag til knappen. Skift fyldtype til "Gradient", så du kan ændre farven på toppen og bunden af stregen. Gå fra en lys til mørk rød (det modsatte af Gradient Overlay).
Det burde se noget som dette hidtil:
Duplikér formlaget. Nudge det oprindelige lag ned med ca. 10 pixels.
Anvend en drop skygge til det oprindelige lag ved hjælp af de indstillinger, der ses i skærmbilledet nedenfor.
Du skal også mørke Gradient Overlay ved at gøre hver enkelt farve i graderingslinjen lidt mørkere.
Du skal have noget, der ser sådan ud:
Vælg tekstværktøjet, og skriv noget på knappen. Åbn vinduet Layer Style, og anvend et overløb overlejring svarende til det, der ses nedenfor:
Anvend en indvendig skygge ved hjælp af disse indstillinger:
Anvend en drop skygge ved hjælp af disse indstillinger:
Og vi er færdige! Du skal ende med noget som dette:
4. Pixel-Perfect Strokes
Kunsten at perfektere pixels er blevet integreret i alle aspekter af brugergrænseflade design, ikke kun knapper. One-pixel linjer (eller slag) giver knapper dybde og en lidt 3-D udseende. De gør også knapper ser indrykket ud. Her er nogle fantastiske eksempler på dette.
Du kan tydeligt se, at en hvid (overlejret) 1-pixel linje bruges som et højdepunkt øverst på den røde knap, med en mørkere linje nederst. Dette gør det til at virke lidt 3-D og tilføjer meget detaljer til siden.
Typografien i denne knap har en indre skygge, så knappen vises som om den sidder over grænsefladen.
Disse CSS3-kun knapper (absolut ingen Photoshop) har 1-pixel streger, der får dem til at skille sig ud fra baggrunden og vises indrykket, når de klikkes.
Et andet eksempel på en 1-pixel lysstreg øverst på knappen for at fungere som en fremhævning.
Denne grønne knap viser en lidt anden tilgang, med en indre glød, der virker som et højdepunkt øverst på knappen. Stroppen på ydersiden skaber en meget fin skygge.
Endnu en knap, der kombinerer ovennævnte teknikker.
Denne grundlæggende knap har et tyndt slag og en delikat dropshadow, så den skiller sig ud fra det enkle design.
Denne knap har en subtil indre glød for at gøre det skiller sig ud fra baggrunden. Dens aktive tilstand har en sænket opacitet, hvilket gør tricket.
Glem knappen: hele dette design er pixel-perfekt, med sin moderne typografi og linjer, der giver en smuk brugergrænseflade.
Opret en pixel-perfekt knap
Vælg værktøjet Rektangelformat (findes i værktøjslinjen øverst i Photoshop, når formværktøjet er valgt), og giv det en hjørneradius på 5 pixels. Tegn et sort rektangel svarende til det nedenstående.
Åbn vinduet Layer Style, og anbring et overtoningsoverlay på formen. Jeg brugte en mørkegrøn til en lidt lysere grøn.
Giv formen en gradient slagtilfælde, der går fra en grøn til en stadig så lidt mørkere grøn.
Nu giver formen en hvid inderskygge stil ved hjælp af de indstillinger, der ses nedenfor.
Og nu en Drop Shadow, med en størrelse på 0 pixels og en opacitet på kun 5%.
Find et ikon på internettet (eller lav dit eget), og læg det i dit dokument ved at gå til Fil → Sted, placere det korrekt. Anvend et overtoningsoverlejring til det.
Giv den indvendige skygge af dit ikon en afstand på 1 pixel, og den hvide Drop Shadow en afstand på 1 pixel. Dette får ikonet til at se ud som om det var indgraveret i knappen.
Tilføj nogle tekst til knappen, og anvend en dropshadow-effekt med lav opacitet ved hjælp af vinduet Layer Style. Her er resultatet:
5. Indrykkede baggrunde
En indrykket baggrund gør, at en knap ser ud som den er begravet i den, hvilket giver knappen dybde og visuel interesse. Nedenfor er nogle gode eksempler på dette.
Denne knap baggrund har en subtil indre skygge for at få det til at fremstå som indrykket.
De omvendte gradienter i denne baggrund gør knapperne vist indrykket.
En kombination af streger og drop skygger giver disse indrykkede knapper mere dybde.
Denne knap baggrund har flere stilarter, herunder en gradient, indre skygge og drop skygge.
Denne indrykkede knap baggrund er meget mindre end hvad vi har set, men stadig følger de samme teknikker.
Endnu en gang bruges en dråbe skygge og indre skygge til at skabe et indryk.
6. Lyser
Gløder er en temmelig hård teknik til at trække i interface design, og ses normalt kun i mørke grænseflader (selv om vi får se et lys eksempel nedenfor). Disse eksempler viser, hvordan gløder kan bruges på forskellige måder.
Der bruges en glød på indersiden af denne knap, hvilket giver det en allround højdepunkt.
Gløder er klogt brugt til at gøre typografien i denne knap skille sig ud fra den mørke baggrund. Og gløderne gør ladestængerne til at virke rigtige.
Gløder bruges almindeligvis i mørke grænseflader til iPhone. Her ser vi en glød omkring typografien, når knappen er i sin aktive tilstand.
Den lyse og temmelig subtile glød giver denne knap det ekstra boost, det skal blive smukt.
Oprettelse af en lys glødende knap
Brug værktøjet Rektangelform igen en gang til, tegne et rektangel, denne gang med en hjørne radius på 3 pixels. Anbring et overlejringsoverlag svarende til det nedenstående. Giv dine centerfarver en position på "49" og "50."
Anvend den følgende indre skygge.
Anvend følgende Drop Shadow.
Anvend følgende ydre glød.
Tilføj nogle typografi til knappen. Du skal ende med et godt, rent og utrolig let at producere resultat som dette:
7. højdepunkter
Højdepunkter giver knapper dybde, visuel interesse og klikbarhed. Eksemplerne nedenfor viser dette.
En simpel lavt opacitet hvid form anvendes på den øverste halvdel af denne knap for at give den en smule dybde og hjælpe den med den samlede rød og grå interface.
Som med mange andre knapper i dette indlæg fremhæver et 1-pixel slagtilfælde dette.
Lys til mørk til lysgradienter tjener som højdepunkter og skygge for disse knapper.
Dette indlæg blev udelukkende skrevet til WDD af Callum Chapman manden bagved Picmix Store og Cirkelboks Blog .
Hvilke knapdesign bruger du mest og hvorfor? Fandt du et højere klik gennem takst for nogle designs? Venligst del nedenfor ...