Gemeenschappelijke elementen die worden gebruikt bij het ontwerpen van interfaceknoppen
Knoppen en navigatie-elementen zijn misschien wel de meest gebruikte interface-objecten in zowel desktop als mobiel ontwerp. Ze trekken een interface samen, waardoor gebruikers in één klik van A naar B kunnen gaan.
Het belangrijkste is dat een knop er goed uit moet zien. Het moet "Click me!" Schreeuwen, anders zal het gewoon niet zo effectief zijn als het zou moeten zijn. Knoppen worden vaak gebruikt om "" Zoeken "," Verzenden "," Verzenden "," Kopen "en" Uploaden ".
In dit artikel bekijken we zeven veelgebruikte knopelementen in modern interfaceontwerp: texturen, patronen, 3-D, pixel-perfecte lijnen, ingesprongen achtergronden, gloeiingen en hoogtepunten.
Je zult 35 fantastische voorbeelden van deze technieken vinden, evenals een handvol mini-tutorials voor Photoshop.
1. Texturen
Het gebruik van textuur is een goede manier om wat diepte toe te voegen aan knoppen en ze een beetje te laten opvallen van de rest van de interface (en ze uiteindelijk meer klikbaar te maken). Hieronder staan enkele geweldige voorbeelden van texturen in knoppen.
ShelfLuv gebruikt overal textuur om een dimensie aan de interface toe te voegen, met name in de knoppen en tekstvelden.
Textuur wordt overal in deze interface gebruikt, maar het is zwaarder in het gebied "Upload", waardoor het een centraal punt is.
De textuur is hier goed gemengd met de afgeschuinde knop, waardoor deze er echt uitziet.
Textuur wordt niet gebruikt op deze UI-knop, maar wordt wel op de achtergrond weergegeven, waardoor de knop opvalt.
Een getextureerde knop maken
Maak een eenvoudige achtergrond met het gereedschap Vorm en door ruis toe te voegen (Filter → Ruis → Ruis toevoegen).
Selecteer het vormgereedschap opnieuw en teken een rechthoek, waarbij u ervoor zorgt dat de bovenkant ervan verborgen is langs de rand van het canvas.
Verander de kleur van de vorm in blauw. Ik gebruikte # 00A3D9.
Dupliceer de laag Vorm en verklein deze in dezelfde positie. Verander de kleur naar een iets donkerder blauw.
Dupliceer de laag nogmaals. Plaats de laag onder de laatste twee lagen Shape en verander de kleur naar een lichtgrijs.
Fotografeer of download een papierstructuur (ik heb er een gebruikt van Lost & Taken ). Ga naar Bestand → Plaats en zoek het bestand om het in het document te plaatsen. Verklein het en plaats het over je blauwe vormen.
Verwijder overtollige textuur met behulp van het selectiekader en wijzig de overvloeimodus van de textuur. Experimenteer met verschillende modi omdat verschillende structuren verschillende resultaten opleveren. Misschien wilt u de dekkingsniveaus ook een beetje verlagen.
Open het venster Layerstijl voor uw donkerblauwe vorm en pas de volgende slagschaduwstijl toe om een subtiele witte schaduw toe te voegen.
Breng nu een lijn aan op je vorm met behulp van de onderstaande instellingen.
Voeg ten slotte een innerlijke schaduw toe aan de vorm, om deze een verdere dimensie te geven.
Voeg wat tekst toe aan de knop en je bent klaar!
2. Patronen
Patronen zijn een andere geweldige manier om een beetje interesse en diepte toe te voegen aan interfaceknoppen. Hieronder staan enkele voorbeelden van patronen in knoppen, allemaal subtiel maar toch effectief.
Aan de linkerkant van de knop wordt hier een diagonale reflectie gebruikt om het pictogram van het type te scheiden.
Een diagonale lijn wordt gebruikt in deze knop, passend bij de vintage-look terwijl dimensie aan het ontwerp wordt toegevoegd.
Dit is mijn favoriete gebruik van een patroon in deze voorbeelden. Hoewel niet gebruikt in de knoppen zelf, voegt het patroon in de grijze kop een dimensie toe aan het hele ontwerp en helpt het uiteindelijk de oranje knoppen te onderscheiden.
Een lintenknop met patroon maken
Nadat u een gestructureerde achtergrond hebt gemaakt met de techniek in de vorige mini-zelfstudie, tekent u een rechthoek met het gereedschap Vorm en vult u deze met een blauwgroen. Ik heb de kleur # 008B8D gebruikt.
Teken een andere vorm met dezelfde hoogte en kleur.
Gebruik het gereedschap Lasso om een driehoek te maken, zoals hieronder te zien is. Plaats het over de rand van de nieuwe vorm en druk op de "Verwijderen" -toets om het gebied te verwijderen dat we niet nodig hebben.
Dupliceer de vorm en ga naar Bewerken → Transformeren → Horizontaal spiegelen om het naar de tegenovergestelde richting te laten wijzen.
Plaats de twee vormen onder de grotere vorm, zoals hieronder te zien is.
Klik met de rechtermuisknop op een van uw vormen en open het venster Mengopties / Laagstijl. Pas een verloopoverlay toe die lijkt op de overlay die hieronder wordt weergegeven. Je kunt ook een subtiele slagschaduw toevoegen. Als u klaar bent, klikt u met de rechtermuisknop op de laag en selecteert u "Laagstijl kopiëren". Selecteer uw andere bannervorm. Klik met de rechtermuisknop en selecteer "Layer-stijl plakken". Open het venster Layerstijl en verander de hoek van uw verloopoverlay van 180 ° naar 0 °.
Gebruik het gereedschap Lasso om een selectie te maken die lijkt op de selectie hieronder om de twee hoeken van onze vormen aan elkaar te passen. Vul het met een nog donkerdere kleur.
Dupliceer de laag, draai hem horizontaal om en plaats hem aan de andere kant.
Maak een lijnpatroon. Je kunt ook degene gebruiken die ik hieronder heb gemaakt.
Plak het patroon over je hele banner. Houd Command + Shift ingedrukt en klik op de miniaturen van alle bannerlagen. Dit selecteert ze allemaal. Klik met de rechtermuisknop en selecteer "Selecteer omgekeerd". Terwijl je lijnpatroonlaag geselecteerd is, druk je op de "Delete" -toets om de delen van het patroon te verwijderen die je niet nodig hebt.
Wijzig de overvloeimodus van de patroonlaag in "Vermenigvuldigen" om het wit van de laag te verbergen. Laat de dekking nu zakken tot ergens tussen de 25 en 75%. Experimenteer voor het beste resultaat.
Gebruik het vormgereedschap om enkele lijnen te maken die lijken op de onderstaande lijnen.
Verwijder de gebieden die op de achtergrond van de afbeelding zitten.
Experimenteer met de overvloeimodus van elk van uw lijnen. Hier is het resultaat:
3. 3D
Driedimensionale knoppen zijn geweldig omdat de knoppen er veel realistischer uitzien. Ze zijn bijna onmogelijk om niet te klikken! Het enige nadeel is dat het effect nogal speels is en dus niet geschikt is voor alle websites (zoals bedrijven). Hieronder is een selectie van een aantal mooie 3-D-knoppen.
De schaduwen en 1-pixellijnen accentueren hier bepaalde gebieden en laten de knop 3-D verschijnen. Deze en enkele goede CSS-effecten zouden zorgen voor een super-interactieve knop.
Ons tweede element (patronen) wordt ook in dit ontwerp gebruikt om dimensie toe te voegen aan een al erg 3D-knop.
Deze knop heeft een iets andere benadering en vertrouwt alleen op verlopen voor de 3D-weergave.
Deze set toont verschillende hoogtes om aan te geven of de knop zich in de normale, zweef- of actieve status bevindt. De lijnen en textuur geven de knoppen een levensechter uiterlijk.
Zoals een paar andere voorbeelden in deze sectie zorgt een combinatie van verlopen en lijnen ervoor dat deze knoppen er driedimensionaal uitzien.
Deze knop ziet er driedimensionaal uit vanwege het 'out-of-the-box'-ontwerp dat om de gebruikersinterface wordt gewikkeld.
Een 3D-knop maken
Begin met het tekenen van een vorm met het gereedschap Rechthoek, met een hoekradius van 7 pixels. Open het venster Layerstijl en pas een verloopoverlay toe die van donkerrood naar lichtrood gaat. Gebruik een nog lichter rood helemaal helemaal aan het einde van de verloopbalk om de bovenkant te markeren van wat onze 3D-knop is.
Breng nu een streek aan op de knop. Wijzig het vultype in "Verloop", zodat u de kleur van de boven- en onderkant van de streek kunt wijzigen. Ga van een licht naar donkerrood (het tegenovergestelde van de Overlay met kleurovergang).
Het zou er tot nu toe ongeveer zo uit moeten zien:
Dupliceer de laag Vorm. Zet de originele laag met ongeveer 10 pixels naar beneden.
Pas een slagschaduw toe op de originele laag met behulp van de instellingen zoals te zien in de onderstaande schermafbeelding.
Verdicht ook de Verloopoverlay door elke afzonderlijke kleur in de verloopbalk een beetje donkerder te maken.
Je zou iets moeten hebben dat er zo uitziet:
Selecteer het gereedschap Tekst en typ iets op de knop. Open het venster Layerstijl en pas een verloopoverlay toe die lijkt op de overlay hieronder:
Pas een innerlijke schaduw toe met behulp van deze instellingen:
Pas een slagschaduw toe met behulp van deze instellingen:
En we zijn klaar! Je zou moeten eindigen met zoiets als dit:
4. Pixel-perfecte slagen
De kunst van het perfectioneren van pixels is integraal onderdeel geworden van alle aspecten van het ontwerp van de gebruikersinterface, niet alleen van knoppen. Een pixellijnen (of lijnen) geven knoppen diepte en een enigszins 3D-uiterlijk. Ze zorgen er ook voor dat de knoppen inspringen. Hier zijn enkele schitterende voorbeelden van.
U kunt duidelijk zien dat een witte (overlay) lijn van 1 pixel wordt gebruikt als een hoogtepunt bovenaan de rode knop, met onderaan een donkerdere lijn. Hierdoor lijkt het een beetje 3D en voegt het veel detail toe aan de pagina.
De typografie in deze knop heeft een innerlijke schaduw, waardoor de knop lijkt alsof deze boven de interface zit.
Deze CSS3-alleen knoppen (absoluut geen Photoshop) hebben 1-pixel streken die ervoor zorgen dat ze zich van de achtergrond onderscheiden en ingesprongen lijken wanneer erop wordt geklikt.
Nog een voorbeeld van een lichtpunt van 1 pixel bovenaan de knop om als een hoogtepunt te fungeren.
Deze groene knop vertoont een enigszins andere benadering, waarbij een binnengloed als een hoogtepunt boven aan de knop fungeert. De slag aan de buitenkant zorgt voor een zeer fijne schaduw.
Nog een andere knop die de bovengenoemde technieken combineert.
Deze basisknop heeft een dunne streek en fijne slagschaduw om hem te onderscheiden van het eenvoudige ontwerp.
Deze knop heeft een subtiele innerlijke gloed om hem van de achtergrond te onderscheiden. De actieve toestand heeft een lagere dekking, wat de slag doet.
Vergeet de knop: dit hele ontwerp is pixel-perfect, met zijn moderne typografie en lijnen die zorgen voor een mooie gebruikersinterface.
Maak een pixel-perfecte knop
Selecteer het gereedschap Rechthoekvorm (te vinden in de werkbalk boven in Photoshop wanneer het vormgereedschap is geselecteerd) en geef het een hoek van 5 pixels. Teken een zwarte rechthoek gelijk aan die hieronder.
Open het venster Layerstijl en pas een verloopoverlay toe op de vorm. Ik gebruikte een donkergroen tot een iets lichtere kleur groen.
Geef de vorm een verlooplijn, gaande van een groene naar een steeds iets lichtere groene kleur.
Geef de vorm nu een witte Inner Shadow-stijl, met behulp van de onderstaande instellingen.
En nu een slagschaduw, met een grootte van 0 pixels en een dekking van slechts 5%.
Zoek een pictogram op internet (of maak uw eigen pictogram) en plaats het in uw document door naar Bestand → Plaatsen te gaan en het correct te plaatsen. Pas er een verloopoverlay op toe.
Geef de innerlijke schaduw van je pictogram een afstand van 1 pixel en de witte slagschaduw een afstand van 1 pixel. Hierdoor lijkt het pictogram alsof het in de knop is gegraveerd.
Voeg wat tekst toe aan de knop en pas een Dropshow-effect met een lage dekking toe met behulp van het venster Layerstijl. Dit is het resultaat:
5. ingesprongen achtergronden
Een ingesprongen achtergrond laat een knop eruitzien alsof deze erin is begraven, waardoor de knopdiepte en visuele interesse wordt gegeven. Hieronder zijn enkele geweldige voorbeelden hiervan.
De achtergrond van deze knop heeft een subtiele binnenschaduw waardoor deze ingesprongen lijkt.
De omgekeerde verlopen op deze achtergrond zorgen ervoor dat de knoppen inspringen.
Een combinatie van lijnen en slagschaduwen geeft deze ingesprongen knoppen meer diepte.
De achtergrond van deze knop heeft verschillende stijlen, waaronder een verloop, een binnenschaduw en slagschaduw.
Deze ingesprongen knopachtergrond is een stuk kleiner dan wat we hebben gezien, maar volgt nog steeds dezelfde technieken.
Nogmaals, een slagschaduw en innerlijke schaduw worden gebruikt om een streepje te maken.
6. Gloeit
Gloei is een vrij harde techniek om af te leiden in het ontwerp van de interface en wordt meestal alleen in donkere interfaces gezien (hoewel we hieronder een licht voorbeeld zullen zien). Deze voorbeelden laten zien hoe gloei op verschillende manieren kan worden gebruikt.
Aan de binnenkant van deze knop wordt een gloed gebruikt, waardoor het een all-round highlight wordt.
Gloeien worden slim gebruikt om de typografie in deze knop te onderscheiden van de donkere achtergrond. En de gloei zorgt ervoor dat de laadbalken levensecht lijken.
Gloeien worden vaak gebruikt in donkere interfaces voor de iPhone. Hier zien we een gloed rond de typografie wanneer de knop in de actieve staat is.
De lichte en vrij subtiele gloed geeft deze knop de extra boost die hij nodig heeft om mooi te worden.
Een gloeiende knop maken
Gebruik opnieuw het gereedschap Rechthoekige vorm om een rechthoek te tekenen, deze keer met een hoekradius van 3 pixels. Pas een verloopoverlay toe die lijkt op die hieronder. Geef je middelste kleuren een positie van "49" en "50".
Pas de volgende innerlijke schaduw toe.
Pas de volgende slagschaduw toe.
Breng de volgende Outer Glow aan.
Voeg wat typografie toe aan de knop. Je zou moeten eindigen met een mooi, schoon en ongelooflijk gemakkelijk te produceren resultaat als dit:
7. Hoogtepunten
Hoogtepunten geven knoppen diepte, visuele interesse en klikbaarheid. De onderstaande voorbeelden bewijzen dit.
Een eenvoudige witte vorm met een lage dekking wordt gebruikt op de bovenste helft van deze knop om het een beetje diepte te geven en te helpen bij het passen van de algehele rode en grijze interface.
Zoals met vele andere knoppen in dit bericht, markeert een streep van 1 pixel deze.
Licht tot donker tot lichte hellingen dienen als hoogtepunten en schaduw voor deze knoppen.
Dit bericht is exclusief geschreven voor WDD door Callum Chapman , de man erachter Picmix Store en Circlebox Blog .
Welke knopontwerpen gebruikt u het meest en waarom? Heb je voor sommige ontwerpen een hogere klik-door-snelheid gevonden? Gelieve hieronder te delen ...