Showcase van prachtige UI-ontwerpen voor een zoekvak
Het is heel gebruikelijk op internet waar we - als we falen om te krijgen wat we zoeken op een website - onze toevlucht nemen tot zoeken. Zoekvak is altijd een essentieel onderdeel geweest van een website. Als u een inhoudintensieve website draait, is deze nog meer onvermijdelijk. Ze worden meestal in de volgende gebieden geplaatst: koptekst, navigatiemenu bovenaan of zijbalk (bovenste vouw). Soms kunnen we ook in footer een andere invoegen om zoeken gemakkelijker voor de gebruikers te maken.
We hebben een lange weg afgelegd sinds Web 1.0; zoeken op internet is niet langer beperkt tot voer trefwoord in en druk op zoeken. Ontwikkelaars streven ernaar om het zoeken naar een betere ervaring voor hun bezoekers te maken door meer functies te vernieuwen en toe te voegen, zegt filteren op zoekacties om meer gerichte resultaten te krijgen, door tijdens het typen zoekwoorden of zoekgeschiedenis op te geven.
In het bericht van vandaag presenteren we enkele prachtige zoekvakken met veelbelovende functies die we hebben leren kennen. Of je nu op zoek bent om je website te vernieuwen of gewoon op zoek te gaan naar een beter zoekvak, deze post is voor jou. Volledige lijst na sprong!
PlaylistNow
Beginnend met het voorvoegsel van "Ik ben", probeert deze zoekmodule op intelligente wijze de resultaten te matchen en weer te geven die overeenkomen met uw zoekopdracht terwijl u typt.
Blader door zoekmodule
Dit creatieve zoekvenster, voorgesteld door ontwerper Nico Nuzzaci, stelt u in staat om te zoeken door te typen of door te bladeren in het alfabetische paneel.
TextboxList
Deze zoekmodule heeft een combinatie van enkele functies: het omsluit uw zoekopdracht in tags-indeling en u kunt een specifieke zoektag verwijderen. Het komt ook met automatisch aanvullen. Komt me bekend voor? Het lijkt op de Facebook-tagmodule!
Remember The Milk
Net zoals bij de YouTube-zoekopdracht, geeft het zoekvak hier meteen aan of iets overeenkomt met je resultaat. Nog een ander intelligent voorbeeld van de functie voor automatische suggestie.
Authentieke banen
Ik denk dat Authentic Jobs al hun zoektocht met onmiddellijke resultaten had uitgevoerd voor Google.
Kontain
Met het zoekvak van Kontain kunnen gebruikers een algemene zoekopdracht uitvoeren of de zoekresultaten filteren op alleen "updates" of "gebruikers".
New York Magazine
Gelijkaardig aan Kontain, NY Magazine's zoektocht maakt diepere filtering mogelijk.
ThemeForest
Nog een ander voorbeeld van filteren in de zoekmodule zodat bezoekers binnen een minimale tijd kunnen krijgen wat ze willen.
Zoeken, sorteren & filteren
Het zoekvak van Brian lijkt op een module voor vooraf zoeken die op een prachtige manier is gedaan; u kunt aanpassen hoe uw resultaten er uit moeten zien voordat u op de zoekknop drukt.
tumblr
Subtiele en kleine zoekmodule op de zijbalk - netjes!
MenuPages
Als u op zoek bent naar een complete zoekmodule en ruimte toch een beperking is, kan deze aanpak van pas komen.
Quotezuki
Zoekmodule vlak na het logo, het is echt moeilijk te missen.
C Spire Wireless
Een groot vetzoekvak dat alleen verschijnt als u op het zoektabblad zweeft; een andere goede manier om gebruik te maken van de ruimte.
Spokeo
Selectief zoeken met filteren is prachtig gedaan.
VoucherCodes
Kijkend naar zijn zakelijke aard is het waarschijnlijk het beste idee om de bovenste helft van het zoekvak en pal in het midden te raken.
iStockPhoto
Net als bij andere sites biedt iStockPhoto enorm veel bronnen voor zijn lezers, dus filteren in de zoekresultaten is absoluut noodzakelijk.
TasteBook
Eenvoudig uitziende maar geweldige zoekbox.
Grooveshark
Met Grooveshark kun je online luisteren en muziek delen; de eerste pagina bestaat uit niets dan alleen een zoekvak om de gewenste muziek te doorzoeken. Het is helemaal logisch.
Gamers met banen
Mooi voorbeeld van hoe Google Aangepast zoeken is aangepast.
David Torondel
Mooi donker zoekvak dat goed past bij het ontwerp van de site.
Meer
- Een CSS3-zoekvak voor rocken maken (Hongkiat)
- Het heilige zoekvak ontwerpen: voorbeelden en praktische tips (Smashing Magazine)
- Prachtige CSS3-zoekformulier-zelfstudie (Web Designer Wall)
