Úvodná » UI / UX » Ukážka dizajnov UI dizajnu krásneho vyhľadávacieho poľa

    Ukážka dizajnov UI dizajnu krásneho vyhľadávacieho poľa

    Je to typické na internete, kde - ak nedokážeme dostať to, čo hľadáme na webových stránkach, uchýli sa k vyhľadávaniu. Vyhľadávacie pole vždy tvorilo podstatnú časť webovej stránky. Ak spustíte webové stránky s obsahom náročným na obsah, je to ešte viac nevyhnutné. Sú zvyčajne umiestnené v nasledujúcich oblastiach: hlavička, horná navigačná ponuka alebo postranná lišta (horná časť). Niekedy môžeme zahodiť aj ďalší v zápätí, aby sme pre používateľov mohli vyhľadávať pohodlnejšie.

    Prišli sme ďaleko od Web 1.0; vyhľadávanie na webe už nie je obmedzené zadajte kľúčové slovo a vyhľadajte vyhľadávanie. Vývojári sa snažia o to, aby vyhľadávajú lepšie skúsenosti pre svojich návštevníkov tým, že upravia a pridávajú ďalšie funkcie, hovoria, že vyhľadávajú filtrovanie, aby získali cielenejšie výsledky, poskytovali kľúčové slová vyhľadávania alebo históriu vyhľadávania,.

    V dnešnom príspevku prezentujeme niekoľko krásnych vyhľadávacích políčok so sľubnými funkciami, ktoré sme sa dozvedeli. Či už chcete vylepšiť vaše webové stránky alebo jednoducho hľadáte inšpiráciu pre lepšie vyhľadávacie pole, tento príspevok je pre vás. Úplný zoznam po skoku!

    PlaylistNow

    Počnúc predponou "Ja som" sa tento vyhľadávací modul pokúša inteligentne zladit a zadať výsledky, ktoré zodpovedajú vášmu dopytu pri písaní.

    Posúvajte vyhľadávací modul

    Navrhnutá návrhárkou Nico Nuzzaci, toto vyhľadávacie pole umožňuje vyhľadávať zadaním alebo posunutím abecedného panelu.

    TextboxList

    Tento vyhľadávací modul má kombináciu niekoľkých funkcií: záplaty vyhľadávacích dopytov vo formáte značiek a umožňuje vymazať konkrétnu značku vyhľadávania. Dodáva sa aj s automatickým dokončením. Vyzerá dobre? Je to podobné ako značkovací modul Facebook!

    Pamätajte si mlieko

    Podobne ako pri vyhľadávaní YouTube, vyhľadávacie pole tu vám okamžite oznámi, či sa niečo zhoduje s vaším výsledkom. Ešte ďalší inteligentný príklad funkcie automatického návrhu.

    Autentické úlohy

    Myslím, že firmy Authentic Jobs už pred vyhľadávaním Google vyhľadávali okamžité výsledky.

    Kontain

    Konštanovo vyhľadávacie pole umožňuje používateľom vykonávať všeobecné vyhľadávanie alebo filtrovať výsledky vyhľadávania iba na "aktualizácie" alebo "používateľov".

    New York Magazine

    Podobne ako v Kontain, vyhľadávanie NY Magazine umožňuje hlbšie filtrovanie.

    ThemeForest

    Ďalším príkladom filtrovania v module vyhľadávania je pomôcť návštevníkom dostať to, čo chcú, v minimálnom čase.

    Vyhľadávanie, triedenie a filtrovanie

    Brianovo vyhľadávacie pole vyzerá ako predbežný vyhľadávací modul urobený krásnym spôsobom; prispôsobíte, ako chcete, aby výsledky vyzerali predtým, ako stlačíte tlačidlo vyhľadávania.

    tumblr

    Jemný a malý vyhľadávací modul na bočnom paneli - čistý!

    MenuPages

    Ak hľadáte kompletný vyhľadávací modul a priestor je obmedzený, tento prístup môže byť vhodný.

    Quotezuki

    Vyhľadávací modul hneď za logom, je to naozaj ťažké vynechať.

    C Spire Wireless

    Veľké vyhľadávacie pole s nízkym obsahom tuku, ktoré sa zobrazuje iba pri podržaní ukazovateľa na karte vyhľadávania. ďalší dobrý spôsob využitia priestoru.

    Spokey

    Selektívne vyhľadávanie s filtráciou sa skvele robilo.

    VoucherCodes

    Pri pohľade na svoju podnikateľskú povahu je pravdepodobne najlepší nápad.

    iStockPhoto

    Podobne ako ostatné weby iStockPhoto ponúka svojim čitateľom obrovské množstvo zdrojov, takže filtrovanie vo vyhľadávaní je rozhodne nevyhnutné.

    TasteBook

    Jednoducho vyzerajúce, ale skvelé vyhľadávacie pole.

    Grooveshark

    Grooveshark vám umožňuje počúvať a zdieľať hudbu online; prvá stránka sa skladá z ničoho, ale iba z vyhľadávacieho poľa pre vyhľadávanie požadovanej hudby. Má to úplne zmysel.

    Hráči s pracovnými miestami

    Pekný príklad úpravy prispôsobeného vyhľadávania Google.

    David Torondel

    Pekné tmavé vyhľadávacie pole, ktoré dobre spája dizajn lokality.

    viac

    • Vytvorenie hojdacieho vyhľadávacieho poľa CSS3 (Hongkiat)
    • Navrhovanie svätého vyhľadávacieho poľa: Príklady a najlepšie postupy (Smashing Magazine)
    • Krásny CSS3 vyhľadávací formulár výučby (Wall Designer Web)