Vitrine de projetos de interface do usuário bela caixa de pesquisa
É comum na internet onde - se não conseguirmos o que estamos procurando em um site, recorremos à busca. A caixa de pesquisa sempre foi uma parte essencial de um site. Se você usa um site com conteúdo intensivo, é ainda mais inevitável. Eles geralmente são colocados nas seguintes áreas: cabeçalho, menu de navegação superior ou barra lateral (dobra superior). Às vezes também podemos jogar outro no rodapé para tornar a busca mais conveniente para os usuários.
Nós percorremos um longo caminho desde a Web 1.0; pesquisar na web não está mais limitado a insira a palavra-chave e clique em pesquisar. Os desenvolvedores se esforçam para tornar a pesquisa uma experiência melhor para os visitantes, reformulando e adicionando mais funções, diz pesquisa, filtrando para obter resultados mais segmentados, fornecendo palavras-chave de pesquisa ou históricos de pesquisa enquanto você digita.
No post de hoje, mostramos algumas caixas de pesquisa com recursos promissores que conhecemos. Se você está procurando reformular seu site ou simplesmente buscando inspiração para uma caixa de pesquisa melhor, este post é para você. Lista completa depois do salto!
PlaylistNow
Começando com o prefixo "Eu sou", este módulo de pesquisa tenta comparar e listar de forma inteligente os resultados que correspondem à sua consulta enquanto você digita.
Scroll Search Module
Sugerida pelo designer Nico Nuzzaci, essa caixa de pesquisa criativa permite pesquisar digitando ou rolando o painel alfabético.
TextboxList
Esse módulo de pesquisa tem uma combinação de poucas funções: ele agrupa suas consultas de pesquisa no formato de tags e permite que você exclua uma tag de pesquisa específica. Ele também vem com o preenchimento automático. Parece familiar? É semelhante ao módulo de marcação do Facebook!
Lembre-se do leite
Semelhante à pesquisa do YouTube, a caixa de pesquisa informa instantaneamente se algo corresponde ao seu resultado. Ainda outro exemplo inteligente de recurso de sugestão automática.
Empregos Autênticos
Acho que o Authentic Jobs já teve sua pesquisa com resultados instantâneos em funcionamento antes do Google.
Kontain
A caixa de pesquisa do Kontain permite que os usuários façam uma pesquisa geral ou filtrem os resultados da pesquisa para apenas "atualizações" ou "usuário".
Revista New York
Semelhante a Kontain, a pesquisa da NY Magazine permite uma filtragem mais profunda.
ThemeForest
Ainda outro exemplo de filtragem no módulo de pesquisa para ajudar os visitantes a obter o que querem em um tempo mínimo.
Pesquisa, Ordenar e Filtrar
A caixa de pesquisa de Brian parece um módulo de pesquisa avançada feito de uma maneira bonita; você personaliza como deseja que os resultados sejam exibidos antes de apertar o botão de pesquisa.
Tumblr
Módulo de pesquisa sutil e pequeno na barra lateral - puro!
MenuPages
Se você está procurando por um módulo de busca completo e ainda assim o espaço é uma restrição, esta abordagem pode ser útil.
Quotezuki
Módulo de pesquisa logo após o logotipo, é realmente difícil de perder.
C Spire Wireless
Uma caixa de pesquisa grande e gorda que aparece apenas ao passar o mouse na guia de pesquisa; Outra boa maneira de fazer uso do espaço.
Spokeo
Pesquisa seletiva com filtragem feita lindamente.
Códigos de Vouchers
Olhando para a sua natureza empresarial, batendo na dobra superior da caixa de pesquisa e bem no centro é provavelmente a melhor ideia.
iStockPhoto
Semelhante a outros sites, o iStockPhoto oferece grande quantidade de recursos para seus leitores, portanto, a filtragem na pesquisa é essencial.
TasteBook
Caixa de pesquisa simples e impressionante.
Grooveshark
Grooveshark permite ouvir e compartilhar músicas online; a primeira página consiste apenas em uma caixa de pesquisa para você pesquisar a música que deseja. Faz totalmente sentido.
Gamers com Jobs
Bom exemplo de como a Pesquisa personalizada do Google é personalizada.
David Torondel
Boa caixa de pesquisa escura que combina bem com o design do site.
Mais
- Criando uma caixa de pesquisa Rocking CSS3 (Hongkiat)
- Projetando a Caixa de Pesquisa Sagrada: Exemplos e Melhores Práticas (Revista Smashing)
- Belo tutorial de formulário de pesquisa CSS3 (Web Designer Wall)