Pagrindinis » UI / UX » Gražių paieškos langelių sąsajų dizaino demonstravimas

    Gražių paieškos langelių sąsajų dizaino demonstravimas

    Tai paplitusi internete, kur - jei nepavyksta gauti to, ko ieškome svetainėje, mes ieškome paieškos. Paieškos laukelis visada buvo esminė svetainės dalis. Jei naudojate daug turinio turinčią svetainę, tai dar labiau neišvengiama. Paprastai jie pateikiami šiose srityse: antraštė, viršutinė navigacijos meniu arba šoninė juosta (viršutinė dalis). Kartais taip pat galime mesti į kitą poraštę, kad naudotojams būtų lengviau ieškoti.

    Nuo Web 1.0 atėjo ilgas kelias; paieška žiniatinklyje nebėra apribota įveskite raktinį žodį ir paspauskite paiešką. Kūrėjai stengiasi, kad lankytojai galėtų ieškoti geresnės patirties, atnaujindami ir pridedant daugiau funkcijų, sako, ieškodami filtravimo, kad gautumėte daugiau tikslinių rezultatų, pateikdami paieškos raktinius žodžius ar paieškos istorijas, kai rašote.

    Šiandieniniame pranešime pristatome keletą gražių paieškos laukelių su daug žadančiomis funkcijomis. Nesvarbu, ar norite atnaujinti savo svetainę, ar tiesiog ieškoti įkvėpimo geriau paieškos laukui, šis pranešimas yra skirtas jums. Visas sąrašas po šuolio!

    PlaylistNow

    Pradedant nuo „Aš esu“ prefikso, šis paieškos modulis bando protingai suderinti ir surasti rezultatus, atitinkančius jūsų užklausą.

    Slinkties paieškos modulis

    Siūlomas dizaineris Nico Nuzzaci, šis kūrybinis paieškos laukelis leidžia ieškoti rašydami arba slinkdami abėcėlinę skydelį.

    „TextboxList“

    Šiame paieškos modulyje yra keletas funkcijų: ji apgaubia jūsų paieškos užklausas žymos formatu ir leidžia ištrinti konkrečią paieškos žymę. Jame taip pat yra automatinis užbaigimas. Atrodo pažįstamas? Tai panaši į „Facebook“ žymėjimo modulį!

    Prisiminkite pieną

    Panašiai kaip ir „YouTube“ paieškoje, čia esančiame paieškos laukelyje tuoj pat pasakysite, ar kažkas atitinka jūsų rezultatą. Dar vienas protingas automatinio siūlymo funkcijos pavyzdys.

    Autentiški darbai

    Manau, kad autentiški darbai jau buvo ieškoti „Google“.

    Kontain

    „Kontain“ paieškos laukelis leidžia naudotojams atlikti bendrą paiešką arba filtruoti paieškos rezultatus tik į „atnaujinimus“ arba „naudotojus“.

    Niujorko žurnalas

    Panašiai kaip ir Kontain, NY žurnalo paieška leidžia giliau filtruoti.

    ThemeForest

    Dar vienas filtravimo paieškos modulyje pavyzdys, padedantis lankytojams gauti tai, ko jie nori per minimalų laiką.

    Ieškoti, rūšiuoti ir filtruoti

    „Brian“ paieškos laukelis atrodo kaip išankstinis paieškos modulis, atliktas gražiai; galite pritaikyti, kaip norite, kad rezultatai atrodytų prieš pradėdami ieškoti mygtuko.

    Tumblr

    Subtilus ir mažas paieškos modulis šoninėje juostoje - tvarkingas!

    Meniu puslapiai

    Jei ieškote viso paieškos modulio, tačiau erdvė yra suvaržymas, šis požiūris gali būti naudingas.

    Quotezuki

    Paieškos modulis iškart po logotipo, tikrai sunku praleisti.

    „C Spire Wireless“

    Didelis riebalų paieškos laukelis, kuris rodomas tik tada, kai nukreipiamas į paieškos skirtuką; dar vienas geras būdas panaudoti erdvę.

    Spokeo

    Selektyvus filtravimas, atliekamas gražiai.

    Kuponų kodai

    Žvelgiant į savo verslo pobūdį, geriausia idėja yra ieškoti paieškos laukelio viršutinės dalies ir dešinėje centre.

    „iStockPhoto“

    Panašiai kaip ir kitose svetainėse, „iStockPhoto“ savo skaitytojams siūlo didžiulį išteklių kiekį, todėl filtruojant filtrą tikrai būtina.

    „TasteBook“

    Paprasta ieškoti dar nuostabus paieškos laukelis.

    Grooveshark

    „Grooveshark“ leidžia klausytis ir dalytis muzika internete; pirmame puslapyje yra tik paieškos laukelis, kuriame galite ieškoti norimos muzikos. Tai visiškai prasminga.

    Žaidėjai su darbu

    Gražus „Google“ tinkintos paieškos pritaikymo pavyzdys.

    David Torondel

    Gražus tamsus paieškos laukelis, gerai derantis su svetainės dizainu.

    Daugiau

    • „Rocking CSS3“ paieškos laukelio kūrimas (Hongkiat)
    • Šventosios paieškos langelio kūrimas: pavyzdžiai ir geriausia praktika (Smashing Magazine)
    • Gražus CSS3 paieškos formos mokymas (Web dizainerio siena)