Ukážka krásných vyhledávacích polí UI vzory
Je to na internetu běžné, když - pokud se nám nepodaří získat to, co hledáme na webových stránkách, uchýlíme se k hledání. Vyhledávací pole bylo vždy nezbytnou součástí webové stránky. Pokud provozujete obsahově náročné webové stránky, je to ještě nevyhnutelnější. Obvykle jsou umístěny v následujících oblastech: záhlaví, horní navigační menu nebo postranní panel (horní záhyb). Někdy můžeme také vhazovat další v zápatí, aby bylo vyhledávání pro uživatele pohodlnější.
Přišli jsme na dlouhou cestu od Webu 1.0; vyhledávání na webu již není omezeno na zadejte klíčové slovo a stiskněte tlačítko Hledat. Vývojáři usilují o to, aby pro své návštěvníky hledali lepší zážitky tím, že budou vylepšovat a přidávat další funkce, řekněme, filtrování vyhledávání, aby získali cílenější výsledky..
V dnešním příspěvku předvádíme několik krásných vyhledávacích polí s nadějnými funkcemi, které jsme poznali. Ať už hledáte přepracovat své webové stránky nebo jednoduše hledat inspiraci pro lepší vyhledávací pole, tento příspěvek je pro vás. Plný seznam po skoku!
PlaylistNow
Počínaje předponou „Já jsem“ se tento vyhledávací modul pokouší inteligentně přizpůsobit a vypsat výsledky odpovídající vašemu dotazu při psaní.
Vyhledávací modul
Navrhl designér Nico Nuzzaci, toto kreativní vyhledávací pole vám umožňuje vyhledávat podle psaní nebo posouváním abecedního panelu..
TextboxList
Tento vyhledávací modul má kombinaci několika funkcí: zalamuje vyhledávací dotazy ve formátu tagů a umožňuje odstranit konkrétní vyhledávací značku. Dodává se také s automatickým dokončením. Vypadá povědomě? Je to podobné modulu pro označování na Facebooku!
Pamatujte si mléko
Podobně jako při vyhledávání na YouTube vám vyhledávací pole zde okamžitě řekne, zda se vám něco líbí. Ještě další inteligentní příklad funkce automatického návrhu.
Autentické práce
Myslím, že Authentic Jobs již měli své vyhledávání s okamžitými výsledky a běží před Google.
Kontain
Vyhledávací pole Kontain umožňuje uživatelům provádět obecné vyhledávání nebo filtrovat výsledky vyhledávání pouze na „aktualizace“ nebo „uživatele“.
New York Magazine
Podobně jako Kontain, hledání NY Magazine umožňuje hlubší filtrování.
ThemeForest
Dalším příkladem filtrování ve vyhledávacím modulu je pomoci návštěvníkům získat to, co chtějí v minimálním čase.
Vyhledávání, řazení a filtrování
Brianovo vyhledávací pole vypadá jako pokročilý vyhledávací modul; přizpůsobíte si, jak mají vypadat výsledky, než stisknete tlačítko Hledat.
Tumblr
Jemný a malý vyhledávací modul na postranním panelu - elegantní!
MenuPages
Pokud hledáte kompletní vyhledávací modul a přesto je prostor omezen, může se tento přístup hodit.
Quotezuki
Vyhledávací modul hned po logu, je to opravdu těžké nechat ujít.
C Spire Wireless
Velké tlusté vyhledávací pole, které se zobrazí pouze po vzletu na kartu vyhledávání; další dobrý způsob, jak využít prostor.
Spokeo
Selektivní vyhledávání s filtrováním krásně.
VoucherCodes
Když se podíváme na svou obchodní povahu, je to nejlepší nápad.
iStockPhoto
Podobně jako ostatní stránky, iStockPhoto nabízí obrovské množství zdrojů pro své čtenáře, takže filtrování ve vyhledávání je rozhodně nezbytné.
TasteBook
Jednoduché, ale přesto úžasné vyhledávací pole.
Grooveshark
Grooveshark umožňuje poslouchat a sdílet hudbu online; první stránka se skládá pouze z vyhledávacího pole, kde můžete vyhledávat požadovanou hudbu. To dává smysl.
Hráči s prací
Pěkný příklad přizpůsobení Vlastního vyhledávání Google.
David Torondel
Pěkné tmavé vyhledávací pole, které se dobře hodí k designu stránek.
Více
- Vytvoření vyhledávacího pole CSS3 (Hongkiat)
- Navrhování Svatého vyhledávacího pole: Příklady a osvědčené postupy (Časopis Smashing)
- Výukový formulář CSS3 pro vyhledávací formulář (Stěna návrháře webu)
