Vanliga element som används i gränssnittsknappdesign
Knappar och navigeringselement är kanske de mest använda gränssnittsobjekten både i skrivbord och mobildesign. De drar ett gränssnitt tillsammans, så att användare kan komma från A till B med ett enda klick.
Viktigast, en knapp måste se bra ut. Det måste skrika "Klicka på mig!" Eller annars blir det inte så effektivt som det behöver vara. Knappar används vanligtvis till "" Sök, "" Skicka "," Skicka "," Köp "och" Ladda upp ".
I den här artikeln tittar vi på sju gemensamma knappelement i modern gränssnittsdesign: texturer, mönster, 3-D, pixel-perfekt slag, indragna bakgrunder, glödor och höjdpunkter.
Du hittar 35 fantastiska exempel på dessa tekniker samt en handfull mini-tutorials för Photoshop.
1. Texturer
Använda textur är ett bra sätt att lägga till lite djup på knappar och få dem att sticka lite ut från resten av gränssnittet (och så småningom göra dem mer klickbara). Nedan följer några bra exempel på texturer i knappar.
ShelfLuv använder textur hela tiden för att lägga till dimension till dess gränssnitt, speciellt i knapp- och textfältområdena.
Textur används över hela det här gränssnittet, men det är tyngre i "Upload" -knappen, vilket gör det till en kontaktpunkt.
Strukturen här blandas väl med den avfasade knappen, vilket gör att den ser riktig ut.
Textur används inte egentligen på den här UI-knappen men visas i bakgrunden, så att knappen kan sticka ut.
Skapa en texturknapp
Skapa en enkel bakgrund med hjälp av Formverktyget och genom att lägga till ljud (Filter → Ljud → Lägg till brus).
Återställ Formverktyget och dra en rektangel och se till att toppen av den är gömd utanför kanvasens kant.
Ändra formens färg till blå. Jag använde # 00A3D9.
Duplicera Formlagret och ändra storlek på det i samma position. Ändra färgen till en något mörkare blå.
Duplicera skiktet en gång till. Placera skiktet under de två sista Formlagren och ändra färgen till en ljusgrå.
Fotografera eller ladda ner en pappersstruktur (jag använde en från Lost & Taken ). Gå till Arkiv → Plats och lokalisera filen för att placera den i dokumentet. Ändra storlek och placera den över dina blåa former.
Ta bort eventuell överskottstygn genom att använda Markeringsverktyget och ändra blandningsläge för texturen. Experimentera med olika lägen eftersom olika texturer ger olika resultat. Du kanske också vill sänka opacitetsnivåerna lite.
Öppna fönstret Layer Style för din mörkare blå form och använd följande Drop Shadow-stil för att lägga till en subtil vit skugga.
Applicera en stroke på din form med hjälp av inställningarna nedan.
Slutligen lägg till en inre skugga i formen, för att ge den ytterligare dimensionen.
Lägg till lite text på knappen och du är klar!
2. Mönster
Mönster är ett annat bra sätt att lägga till lite intresse och djup till gränssnittsknappar. Nedan följer några exempel på mönster i knappar, alla subtila men ändå effektiva.
En diagonal reflektion används på vänster sida av knappen här för att skilja ikonen från typen.
En diagonal linje används i denna knapp, som passar in i vintageutseendet samtidigt som dimensionen läggs till i designen.
Detta är min favorit användning av ett mönster i dessa exempel. Även om de inte används i knapparna själva, lägger mönstret i den grå huvudet dimension till hela designen och hjälper till slut att orange knapparna sticker ut.
Skapa en mönstrat bandknapp
Efter att ha skapat en strukturerad bakgrund med hjälp av tekniken i föregående mini-handledning, rita en rektangel med hjälp av Formverktyget och fyll i det med en blågrön. Jag använde färgen # 008B8D.
Rita en annan form med samma höjd och färg.
Använd Lasso-verktyget genom att skapa en triangel, enligt nedan. Placera den över kanten av den nya formen och tryck på "Radera" -tangenten för att ta bort det område vi inte behöver.
Duplicera formen och gå till Redigera → Transformera → Vänd horisontellt så att den står inför motsatt riktning.
Placera de två formerna under den större formen, se nedan.
Högerklicka på en av dina former och öppna fönstret Blandningsalternativ / Layer Style. Applicera en överdragsöverdrag som liknar den som ses nedan. Du kan också lägga till en subtil Drop Shadow. När du har gjort det, högerklicka på lagret och välj "Copy Layer Style". Välj din andra bannerform. Högerklicka och välj "Klistra in lagstyp". Öppna fönstret Layer Style och ändra vinkeln på ditt Gradient Overlay från 180 ° till 0 °.
Använd Lasso-verktyget genom att skapa ett val som liknar det som ses nedan för att matcha de två hörnen av våra former. Fyll den med en jämnare mörkare färg.
Duplicera skiktet, vänd det horisontellt och placera det på andra sidan.
Skapa ett linjemönster. Alternativt kan du använda den som jag gjorde nedan.
Klistra in mönstret över hela din banner. Medan du håller Command + Shift klickar du på miniatyrerna i lagret på alla dina bannerlager. Detta kommer att välja dem alla. Högerklicka och välj "Välj Inverse." Med ditt linjemönsterlagret valt, tryck på "Delete" -tangenten för att ta bort de områden i mönstret du inte behöver.
Ändra blandningsläget för mönsterskiktet till "Multiplicera" för att dölja det vita från lagret. Släpp nu opaciteten till någonstans mellan 25 och 75%. Experiment för bästa resultat.
Använd verktyget Form, skapa några linjer som liknar dem nedan.
Ta bort de områden som sitter på bildens bakgrund.
Experimentera med blandningsläge för var och en av dina linjer. Här är resultatet:
3. 3-D
Tredimensionella knappar är stora eftersom det gör knapparna ser mycket realistiska ut. De är nästan omöjliga att inte klicka! Den enda nackdelen är att effekten är ganska lekfull och passar inte alla webbplatser (t.ex. företagens). Nedan är ett urval av några härliga 3-D-knappar.
Skuggorna och 1-pixellinjerna markerar här vissa områden och gör att knappen visas 3-D. Detta och några bra CSS-effekter skulle göra en super-interaktiv knapp.
Vårt andra element (mönster) används också i denna design för att lägga till dimension till en redan mycket 3-D-knapp.
Den här knappen tar en något annorlunda tillvägagångssätt, som endast bygger på gradienter för dess 3-D-utseende.
Denna uppsättning visar olika höjder för att ange huruvida knappen är i normal, svävar eller aktivt läge. Linjerna och texturen ger knapparna ett mer livliknande utseende.
Som ett par andra exempel i detta avsnitt gör en kombination av gradienter och slag att dessa knappar ser 3-D ut.
Den här knappen ser ut som 3-D på grund av sin "out of the box" -design, som viks runt användargränssnittet.
Skapa en 3-D-knapp
Börja med att teckna en form med rektangelverktyget, med en hörnradio på 7 pixlar. Öppna fönstret Layer Style, och använd ett överföringsöverlägg som går från mörkröd till ljusröd. Använd en jämnare röd i slutet av lutningsfältet för att markera toppen av vad som blir vår 3-D-knapp.
Applicera en stroke på knappen. Ändra fylltyp till "Gradient" så att du kan ändra färg på topp och botten av stroke. Gå från ett ljus till mörkt rött (motsatt av överdragsöverdraget).
Det borde se något så här så långt:
Duplicera Formlagret. Nudge det ursprungliga lagret med ca 10 pixlar.
Applicera en Drop Shadow till det ursprungliga lagret med hjälp av inställningarna som ses på skärmdumpen nedan.
Också mörkare Gradient Overlay genom att göra varje enskild färg i lutningsfältet lite mörkare.
Du borde ha något som ser ut så här:
Välj Textverktyget och skriv något på knappen. Öppna fönstret Layer Style och använd ett överdragsöverdrag som liknar det som ses nedan:
Applicera en inre skugga med följande inställningar:
Använd en Drop Shadow med följande inställningar:
Och vi är klara! Du borde sluta med något så här:
4. Pixel-Perfect Strokes
Konsten att perfekta pixlar har blivit integrerad i alla aspekter av användargränssnittet, inte bara knappar. One-pixel linjer (eller slag) ger knappdjup och en något 3-D-utseende. De gör också knappar ser indragna ut. Här är några briljanta exempel på detta.
Du kan tydligt se att en vit (överlagrad) 1-pixellinje används som en höjdpunkt högst upp på den röda knappen, med en mörkare linje längst ner. Detta gör att den visas lite 3-D och lägger till mycket detalj på sidan.
Typografi i den här knappen har en inre skugga, vilket gör att knappen visas som om den sitter ovanför gränssnittet.
Dessa CSS3-bara knappar (absolut ingen Photoshop) har 1-pixel slag som gör att de sticker ut från bakgrunden och visas indragna när de klickas.
Ett annat exempel på en 1-pixel ljusstro på toppen av knappen för att fungera som en höjdpunkt.
Den här gröna knappen visar ett lite annorlunda tillvägagångssätt, med en inre glöd som en höjdpunkt högst upp på knappen. Stroppen på utsidan skapar en mycket fin skugga.
En annan knapp som kombinerar de ovan nämnda teknikerna.
Den här grundläggande knappen har en tunn stroke och delikat droppskugga för att få det att stå ut från den enkla designen.
Den här knappen har en subtil inre glöd för att få den att stå ut ur bakgrunden. Dess aktiva tillstånd har en sänkt opacitet, vilket gör tricket.
Glöm knappen: hela denna design är pixel-perfekt, med sin moderna typografi och linjer som gör ett vackert användargränssnitt.
Skapa en pixel-perfekt knapp
Välj verktyget Rektangelformat (finns i verktygsfältet längst upp i Photoshop när formverktyget är valt) och ge det en hörnradie på 5 pixlar. Rita en svart rektangel som liknar den nedan.
Öppna fönstret Layer Style, och använd ett överdrag för övergång till formen. Jag använde en mörkgrön till en något ljusare grön.
Ge formen en gradient slag, går från en grön till en någonsin så lite mörkare grön.
Ge nu formen en vit inre skuggstil med hjälp av inställningarna som ses nedan.
Och nu en Drop Shadow, med en storlek på 0 pixlar och en opacitet på bara 5%.
Hitta en ikon på Internet (eller skapa din egen) och placera den i ditt dokument genom att gå till Arkiv → Placera, placera den korrekt. Applicera en överdimension överlägg till den.
Ge den inre skuggan av din ikon ett avstånd på 1 pixel och den vita Drop Shadow ett avstånd på 1 pixel. Detta gör att ikonen ser ut som om den var inristad i knappen.
Lägg till lite text på knappen, och använd en låg opacitet Drop Shadow-effekt med hjälp av fönstret Layer Style. Här är resultatet:
5. Indragna bakgrunder
En inramad bakgrund gör att en knapp ser ut som den är begravd i den, vilket ger knappdjupet och visuellt intresse. Nedan följer några bra exempel på detta.
Denna knapp bakgrund har en subtil inre skugga för att få den att visas indragna.
De inverterade gradienterna i denna bakgrund gör att knapparna dyker in.
En kombination av slag och droppskuggor ger de här indragna knapparna mer djup.
Denna knapp bakgrund har flera stilar, inklusive en gradient, inre skugga och drop skugga.
Den här indragna knappen bakgrunden är mycket mindre än vad vi har sett men följer fortfarande samma tekniker.
Ännu en gång används en droppskugga och inre skugga för att skapa ett streck.
6. Glödar
Glödor är en ganska hård teknik för att dra i gränssnittsdesign, och brukar ses endast i mörka gränssnitt (även om vi får se ett ljust exempel nedan). Dessa exempel visar hur glöd kan användas på olika sätt.
En glöd används på insidan av den här knappen, vilket ger den en allroundmarkering.
Glödor är klokt vana vid att göra typografi i den här knappen sticka ut från den mörka bakgrunden. Och glödlamporna gör laddningsstängerna verklighetstrogna.
Glödor används vanligtvis i mörka gränssnitt för iPhone. Här ser vi en glöd runt typografi när knappen är i dess aktiva tillstånd.
Den ljusa och ganska subtila glansen ger den här knappen den extra boost som den behöver bli vacker.
Skapa en ljusglödande knapp
Rita en rektangel igen med hjälp av verktyget Rektangelformat, den här gången med en hörnradie på 3 pixlar. Applicera en överdragsgrad som liknar den nedan. Ge dina mittfärger en position på "49" och "50."
Applicera följande inre skugga.
Applicera följande Drop Shadow.
Applicera följande yttre glöd.
Lägg till lite typografi på knappen. Du borde sluta med ett fint, rent och otroligt lätt att producera resultat så här:
7. Höjdpunkter
Höjdpunkter ger knappar djup, visuellt intresse och klickbarhet. Exemplen nedan visar det här.
En enkel vit opacitet med vit form används på den övre halvan av den här knappen för att ge den lite djup och hjälpa till med det övergripande röda och gråa gränssnittet.
Som med många andra knappar i det här inlägget markerar en 1-pixel stroke denna.
Lätta till mörka till lätta gradienter fungerar som höjdpunkter och skugga för dessa knappar.
Detta inlägg skrevs uteslutande för WDD av Callum Chapman mannen bakom Picmix Store och Circlebox Blog .
Vilka knappdesign använder du mest och varför? Fann du ett högre klick genom att betygsätta vissa designs? Vänligen dela nedanför ...