8 fragment├│w CSS i JavaScript, aby pole wyszukiwania …

Pole wyszukiwania jest bardzo u┼╝yteczn─ů cz─Ö┼Ťci─ů Twojej przeci─Ötnej witryny. Ale to nie znaczy, ┼╝e nale┼╝y go zignorowa─ç. Przeciwnie.

Wyszukiwanie zapewnia u┼╝ytkownikom ┼éatwy spos├│b na znalezienie tego, czego szukaj─ů i mo┼╝e by─ç nieoceniony w witrynach z du┼╝─ů ilo┼Ťci─ů tre┼Ťci. Warto po┼Ťwi─Öci─ç dodatkowy czas, aby upewni─ç si─Ö, ┼╝e obszar wyszukiwania jest atrakcyjny, niezwyk┼éy i ┼éatwy w u┼╝yciu.

Maj─ůc to na uwadze, oto zbi├│r fragment├│w, kt├│re przenosz─ů skromne pole wyszukiwania na wy┼╝szy poziom. Obejmuj─ů one od prostych, estetycznych ulepsze┼ä CSS po nasycone JS interfejsy u┼╝ytkownika, kt├│re pomagaj─ů stworzy─ç bardziej wci─ůgaj─ůce wra┼╝enia.

Ikona morfingu

Animacja transformacji to zawsze przyjemno┼Ť─ç. Tutaj mamy wszechobecn─ů ikon─Ö szk┼éa powi─Ökszaj─ůcego, kt├│ra po klikni─Öciu zmienia si─Ö w pe┼ény pasek wyszukiwania. Klikni─Öcie ÔÇ×XÔÇŁ przywraca wszystko do punktu pocz─ůtkowego. Mo┼╝e to by─ç dobre rozwi─ůzanie dla mniejszych ekran├│w, poniewa┼╝ mo┼╝na po prostu zapisa─ç pole, gdy nie jest u┼╝ywane.

Wystarczy najecha─ç myszk─ů i wyszuka─ç

Ten przyk┼éad oferuje funkcjonalno┼Ť─ç podobn─ů do poprzedniej, ale z jedn─ů wa┼╝n─ů r├│┼╝nic─ů. Zamiast klika─ç, aby wy┼Ťwietli─ç pole wyszukiwania, u┼╝ytkownik musi po prostu najecha─ç kursorem na ikon─Ö. Mo┼╝e to by─ç stosunkowo niewielka rzecz, ale mo┼╝e zwi─Ökszy─ç wydajno┼Ť─ç, je┼Ťli chodzi o u┼╝yteczno┼Ť─ç. Po raz kolejny potencjalnie solidna opcja do ciasnych przestrzeni.

Przewijacze r├│wnie┼╝ musz─ů wyszukiwa─ç

Na urz─ůdzeniach mobilnych u┼╝ytkownicy mog─ů odbywa─ç wiele podr├│┼╝y. Ale je┼Ťli nie mog─ů znale┼║─ç tego, czego szukaj─ů, cz─Östo oznacza to, ┼╝e b─Öd─ů musieli wr├│ci─ç do nag┼é├│wka witryny, aby przeprowadzi─ç wyszukiwanie. Tutaj mamy ÔÇ×lepkiÔÇŁ pasek wyszukiwania, kt├│ry b─Ödzie do┼é─ůczany u g├│ry ekranu podczas przewijania strony. Ta przydatna funkcja mo┼╝e znacznie u┼éatwi─ç ┼╝ycie u┼╝ytkownikom.

Ekran pełen materiałów

Projektowanie materia┼é├│w Google jest obecnie bardzo cz─Östo u┼╝ywane. Dlatego naturalne jest, ┼╝e j─Özyk projektowania ma zastosowanie r├│wnie┼╝ do wyszukiwania. Fajnie, ┼╝e po klikni─Öciu to pole wyszukiwania zajmuje ca┼éy ekran. Pozwala to u┼╝ytkownikom skupi─ç si─Ö wy┼é─ůcznie na wyszukiwaniu, a przy odrobinie pracy projektanci mog─ů dodawa─ç do ekranu inne powi─ůzane informacje.

Proste wyszukiwanie niestandardowe

Mo┼╝e si─Ö zdarzy─ç, ┼╝e u┼╝ytkownicy b─Öd─ů chcieli przeszukiwa─ç tylko okre┼Ťlone obszary witryny. Chocia┼╝ niestandardowe wyszukiwanie nie jest dok┼éadnie now─ů koncepcj─ů, nie zawsze by┼éo to atrakcyjne wizualnie. To w┼éa┼Ťnie sprawia, ┼╝e ÔÇőÔÇőta niestandardowa wersja pola wyszukiwania jest tak stylowa. Zawiera szereg ikon, z kt├│rych ka┼╝da reprezentuje inny obszar, w kt├│rym mo┼╝na przeprowadzi─ç wyszukiwanie (bardziej przydatne podpowiedzi). U┼╝ytkownik po prostu klika obszar, kt├│ry chce wyszuka─ç, proste!

Animacja kontekstowa

Zapewnienie kontekstu wizualnego podczas wyszukiwania pomaga upewni─ç si─Ö, ┼╝e u┼╝ytkownicy s─ů na dobrej drodze. Ten fragment wykorzystuje AJAX do zmiany koloru t┼éa i dodawania informacji tekstowych podczas wyszukiwania przez u┼╝ytkownika.

Przezroczysto┼Ť─ç

Jak stworzy─ç obszar wyszukiwania, kt├│ry wyr├│┼╝nia si─Ö bez wystaj─ůcego b├│lu? Jednym ze sposob├│w jest u┼╝ycie przezroczysto┼Ťci. Tutaj mamy p├│┼éprzezroczyste pole wyszukiwania u g├│ry obrazu pe┼énoekranowego. Bia┼éa ramka jest jednak mocna, co daje niez┼éy efekt wizualny bez wyprzedzania strony.

Wyszukiwanie wielokrotne

W przypadku witryn, kt├│re pozwalaj─ů u┼╝ytkownikom wyszukiwa─ç wi─Öcej ni┼╝ jeden zestaw danych, ten przyk┼éad mo┼╝e by─ç bardzo przydatny. Skorzystaj z jQuery, aby umo┼╝liwi─ç u┼╝ytkownikowi prze┼é─ůczanie si─Ö mi─Ödzy r├│┼╝nymi polami wyszukiwania, dzi─Öki czemu wszystkie funkcje wyszukiwania b─Öd─ů znajdowa─ç si─Ö w jednym miejscu.

Koniec się skończył

Pola wyszukiwania mog─ů odgrywa─ç istotn─ů rol─Ö w utrzymywaniu u┼╝ytkownik├│w witryny. A powy┼╝sze przyk┼éady s─ů dowodem na to, ┼╝e mo┼╝esz wprowadzi─ç przydatne ulepszenia bez wi─Ökszego wysi┼éku. Je┼Ťli wi─Öc zaniedba┼ée┼Ť zwraca─ç baczn─ů uwag─Ö na wygl─ůd i dzia┼éanie funkcji wyszukiwania w witrynie, b─Ödzie to doskona┼ée miejsce na rozpocz─Öcie.