8 Úryvky CSS a JavaScript na vytvorenie vyhľadávacieho poľa …

Pole vyhľadávania je veľmi užitočnou súčasťou vášho priemerného webu. To však neznamená, že by sa malo ignorovať. Naopak.

Vyhľadávanie poskytuje používateľom jednoduchý spôsob, ako nájsť to, čo hľadajú, a môže byť neoceniteľný na stránkach s veľkým obsahom. Preto sa oplatí venovať čas, aby ste sa uistili, že oblasť vyhľadávania je atraktívna, pozoruhodná a ľahko použiteľná.

Z tohto dôvodu tu je zbierka úryvkov, ktoré posúvajú skromné ​​vyhľadávacie pole na ďalšiu úroveň. Siahajú od jednoduchých estetických vylepšení CSS po UI s infúziou JS, ktoré pomáhajú vytvárať ponornejší zážitok.

Ikona morfovania

Transformačná animácia je vždy potešením. Tu máme všadeprítomnú ikonu lupy, ktorá sa po kliknutí zmení na celý vyhľadávací panel. Kliknutím na „X“ sa všetko vráti do východiskového bodu. To by mohlo byť dobrým riešením pre menšie obrazovky, pretože pole jednoducho môžete uložiť, keď sa nepoužíva.

Stačí prejsť myšou a hľadať

Tento príklad ponúka podobné funkcie ako predchádzajúce, ale s jedným dôležitým rozdielom. Užívateľ musí jednoducho umiestniť kurzor myši na ikonu, a nie kliknúť na odhalenie vyhľadávacieho poľa. Môže to byť relatívne malá vec, ale pokiaľ ide o použiteľnosť, môže to poskytnúť podporu. Potenciálne solídne riešenie pre úzke priestory.

Prejdite aj vyhľadávače

Na mobilných zariadeniach môžu používatelia absolvovať mnoho ciest. Ak však nemôžu nájsť to, čo hľadajú, často to znamená, že sa budú musieť vrátiť do hlavičky stránok, aby mohli vyhľadávať. Tu máme „lepkavú“ vyhľadávaciu lištu, ktorá bude pri posúvaní stránky nadol pripojená k hornej časti obrazovky. Táto užitočná funkcia môže používateľom uľahčiť život.

Obrazovka plná materiálu

Materiálny dizajn spoločnosti Google sa v súčasnosti používa veľmi často. Preto je prirodzené, že dizajnový jazyk platí aj pre vyhľadávanie. Je tiež pekné, že po kliknutí na toto vyhľadávacie pole sa zobrazí celá obrazovka. To umožňuje používateľom zamerať sa výlučne na ich vyhľadávanie a s trochou práce by návrhári mohli na obrazovku pridať ďalšie súvisiace informácie.

Jednoduché vlastné vyhľadávanie

Niekedy môžu používatelia hľadať iba konkrétne oblasti vášho webu. Aj keď vlastné vyhľadávanie nie je presne nový koncept, nie vždy to bol vizuálne príťažlivý proces. To je to, čo robí toto demo pole vlastného vyhľadávania tak štýlovým. Má sériu ikon, z ktorých každá predstavuje inú oblasť, v ktorej je možné vyhľadávať (užitočné tipy pre nástroje). Používateľ jednoducho klikne na oblasť, ktorú chce vyhľadať, ľahko!

Kontextová animácia

Poskytovanie vizuálneho kontextu počas vyhľadávania pomáha zaistiť, aby boli používatelia na správnej ceste. Tento úryvok používa AJAX na zmenu farby pozadia a pridanie textových informácií pri vyhľadávaní používateľom.

priehľadnosť

Ako vytvoríte oblasť vyhľadávania, ktorá vyniká bez toho, aby sa vytrhla ako bolesť v palci? Jedným zo spôsobov, ako to dosiahnuť, je použitie určitej transparentnosti. Tu máme priesvitné vyhľadávacie pole v hornej časti celej obrazovky. Biely okraj je však silný a vytvára pekný vizuálny efekt bez predbiehania stránky.

Viacnásobné vyhľadávanie

V prípade webových stránok, ktoré používateľom umožňujú prehľadávať viac ako jeden súbor údajov, môže byť tento príklad veľmi užitočný. Využite výhodu jQuery, aby ste používateľovi umožnili prepínať medzi rôznymi vyhľadávacími poliami, čím sa všetky vyhľadávacie funkcie umiestnia na jedno miesto.

Koniec sa ukázal

Polia vyhľadávania môžu hrať zásadnú úlohu pri udržiavaní používateľov na vašom webe. A vyššie uvedené príklady sú dôkazom toho, že môžete poskytnúť užitočné vylepšenia bez väčšieho úsilia. Takže ak ste zanedbali pozornosť, pokiaľ ide o vzhľad a dojem z funkcie vyhľadávania na vašom webe, získate skvelé miesto na spustenie.