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

Vyhľadávacie pole je veľmi užitočnou súčasťou vášho spoločného webu. To však neznamená, že by sa malo ignorovať. Opak.

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 ubezpečili, že vaša oblasť výskumu je atraktívna, pozoruhodná a ľahko použiteľná.

S týmto vedomím je tu zbierka úryvkov, ktoré posúvajú pokornú oblasť výskumu 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 úplný vyhľadávací panel. Kliknutím na „X“ sa všetko vráti do východiskového bodu. Toto môže byť dobrým riešením pre menšie obrazovky, pretože pole môžete jednoducho uložiť, keď sa nepoužíva.

Stačí vznášať a hľadať

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

Prejdite aj vyhľadávače

Na mobilných zariadeniach môžu používatelia značne cestovať. Ak však nemôžu nájsť to, čo hľadajú, zvyčajne to znamená, že sa budú musieť vrátiť do hlavičky webových stránok, aby mohli vyhľadávať. Tu máme „lepivú“ vyhľadávaciu lištu, ktorá bude pri posúvaní stránky 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 dnes veľmi často používa. Preto je prirodzené, že jazyk dizajnu sa vzťahuje aj na výskum. Je tiež dobré, že po kliknutí toto vyhľadávacie pole zaberá celú obrazovku. To umožňuje používateľom zamerať sa iba na svoje vyhľadávanie a s trochou práce môžu dizajnéri pridať ďalšie informácie týkajúce sa obrazovky.

Jednoduché vlastné vyhľadávanie

Niekedy môžu používatelia hľadať iba konkrétne oblasti vášho webu. Aj keď personalizované vyhľadávanie nie je úplne nový koncept, nebol to vždy vizuálne príťažlivý proces. Vďaka tomu je ukážka tohto poľa vlastného vyhľadávania tak elegantná. Má sériu ikon, z ktorých každá predstavuje inú oblasť, v ktorej je možné vyhľadávať (najužitočnejšie popisy). 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 výskumnú oblasť, ktorá vyniká bez toho, aby vystupovala ako bolesť v palci? Jedným zo spôsobov, ako to dosiahnuť, je použitie malej transparentnosti. Tu máme priesvitné vyhľadávacie pole v hornej časti celej obrazovky. Biele orámovanie je však silné a vytvára dobrý vizuálny efekt bez toho, aby ste prešli cez stránku.

Viacnásobné vyhľadávanie

V prípade webových stránok, ktoré umožňujú používateľom vyhľadávať viac ako jednu množinu ú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 je u konca

Polia vyhľadávania môžu hrať zásadnú úlohu pri udržiavaní používateľov na vašich stránkach. A vyššie uvedené príklady sú dôkazom toho, že môžete poskytnúť užitočné vylepšenia bez väčšieho úsilia. Ak ste zabudli venovať veľkú pozornosť tomu, ako vyzerá funkcia vyhľadávania na vašom webe, je to skvelé miesto na začiatok.