Schaufenster für schöne Suchfeld-UI-Designs
Es ist im Internet einigermaßen üblich, wo - wenn wir nicht finden, wonach wir auf einer Website suchen, wir auf die Suche zurückgreifen. Das Suchfeld war schon immer ein wesentlicher Bestandteil einer Website. Wenn Sie eine inhaltsintensive Website betreiben, ist dies noch unvermeidlicher. Sie befinden sich normalerweise in den folgenden Bereichen: Kopfzeile, oberes Navigationsmenü oder Seitenleiste (oben). Manchmal fügen wir auch eine andere in die Fußzeile ein, um die Suche für die Benutzer bequemer zu gestalten.
Wir sind seit Web 1.0 weit gekommen; Die Suche im Internet ist nicht mehr beschränkt auf Geben Sie ein Stichwort ein und klicken Sie auf Suchen. Die Entwickler bemühen sich, die Suche für ihre Besucher zu verbessern, indem sie neue Funktionen umgestalten und hinzufügen, z.
Im heutigen Beitrag zeigen wir einige schöne Suchfelder mit vielversprechenden Funktionen, die wir kennengelernt haben. Egal, ob Sie Ihre Website überarbeiten oder einfach nach Inspiration für ein besseres Suchfeld suchen, dieser Beitrag ist für Sie. Vollständige Liste nach dem Sprung!
Playlist jetzt
Beginnend mit dem Präfix "Ich bin" versucht dieses Suchmodul, die Ergebnisse, die Ihrer Abfrage entsprechen, bei der Eingabe auf intelligente Weise abzugleichen und aufzulisten.
Scroll-Suchmodul
Mit diesem vom Designer Nico Nuzzaci vorgeschlagenen Suchfeld können Sie suchen, indem Sie das alphabetische Bedienfeld eingeben oder scrollen.
TextboxList
Dieses Suchmodul bietet eine Kombination aus wenigen Funktionen: Es umgibt Ihre Suchabfragen im Tag-Format und ermöglicht das Löschen eines bestimmten Such-Tags. Es kommt auch mit Autovervollständigung. Kommt mir bekannt vor? Es ähnelt dem Facebook-Tagging-Modul!
Erinnere dich an die Milch
Ähnlich wie bei der YouTube-Suche zeigt das Suchfeld hier sofort an, ob etwas zu Ihrem Ergebnis passt. Ein weiteres intelligentes Beispiel für die Funktion zum automatischen Vorschlag.
Authentische Jobs
Ich glaube, Authentic Jobs hatte ihre Suche bereits mit sofortigen Ergebnissen vor Google.
Kontainer
Mit dem Suchfeld von Kontain können Benutzer eine allgemeine Suche durchführen oder die Suchergebnisse auf "Updates" oder "Benutzer" filtern..
New York Magazine
Ähnlich wie Kontain ermöglicht die Suche in NY Magazine eine tiefere Filterung.
ThemeForest
Ein weiteres Beispiel für die Filterung im Suchmodul, mit dem Besucher innerhalb kürzester Zeit das Gewünschte erreichen können.
Suchen, Sortieren und Filtern
Brians Suchfeld sieht aus wie ein vorläufiges Suchmodul, das auf eine schöne Art und Weise erstellt wurde; Sie können anpassen, wie die Ergebnisse aussehen sollen, bevor Sie auf die Suchschaltfläche klicken.
Tumblr
Subtiles und kleines Suchmodul in der Seitenleiste - übersichtlich!
MenuPages
Wenn Sie nach einem vollständigen Suchmodul suchen und der Platz dennoch eine Einschränkung ist, kann dieser Ansatz hilfreich sein.
Quotezuki
Suchmodul direkt nach dem Logo, es ist wirklich schwer zu übersehen.
C Spire Wireless
Ein großes Suchfeld, das nur angezeigt wird, wenn Sie die Suchregisterkarte bewegen. eine andere gute Möglichkeit, den Raum zu nutzen.
Spokeo
Selektive Suche mit Filterung.
Gutscheincodes
Wenn man sich die geschäftliche Natur ansieht, ist es wahrscheinlich die beste Idee, das Suchfeld oben zu falten und in die Mitte zu schieben.
iStockPhoto
Ähnlich wie andere Websites bietet iStockPhoto seinen Lesern eine enorme Menge an Ressourcen. Daher ist das Filtern bei der Suche unbedingt erforderlich.
TasteBook
Einfach aussehendes, aber fantastisches Suchfeld.
Grooveshark
Mit Grooveshark können Sie Musik online hören und teilen. Die erste Seite besteht nur aus einem Suchfeld, in dem Sie die gewünschte Musik suchen können. Das macht absolut Sinn.
Spieler mit Jobs
Schönes Beispiel für die individuelle Anpassung von Google Custom Search.
David Torondel
Schönes dunkles Suchfeld, das sich gut in das Website-Design einfügt.
Mehr
- Erstellen eines Rocking-CSS3-Suchfelds (Hongkiat)
- Entwerfen des heiligen Suchfelds: Beispiele und bewährte Methoden (Smashing Magazine)
- Schönes CSS3-Suchformular-Tutorial (Web Designer Wall)
