美しい検索ボックスのUIデザインのショーケース

インターネットではよくあることですが、Webサイトで探しているものが見つからない場合は、検索を使用します。検索ボックスは常にWebサイトの重要な部分です。あなたがコンテンツを多用するWebサイトを運営しているなら、それはさらに避けられません。それらは通常、以下の領域に配置されます：ヘッダ、トップナビゲーションメニュー、またはサイドバー（上）。ユーザーにとって検索をより便利にするために、別のフッターを追加することもあります。.

私たちはWeb 1.0以来、長い道のりを歩んだ。ウェブ上での検索はもはや制限されていません キーワードを入力して検索する. 開発者は、より多くの機能を改良して追加することで、訪問者にとってより良い検索を可能にするよう努力しています。.

今日の記事では、私たちが知っている有望な機能を備えた美しい検索ボックスをいくつか紹介します。あなたがあなたのウェブサイトを改良することを探しているかどうか、あるいは単により良い検索ボックスのためのインスピレーションを求めているかどうか、この投稿はあなたのためです。ジャンプ後の全リスト!

プレイリスト今

接頭辞「私は」から始めて、この検索モジュールはあなたがタイプしたときにあなたの質問にマッチする結果を知的にマッチさせてリストしようと試みます。.

スクロール検索モジュール

デザイナーのNico Nuzzaciが提案するこのクリエイティブ検索ボックスでは、アルファベットのパネルを入力するかスクロールすることで検索できます。.

TextboxList

この検索モジュールは、いくつかの機能を組み合わせたものです。検索クエリをタグ形式でラップし、特定の検索タグを削除することを可能にします。オートコンプリートも付属しています。おなじみの？ Facebookのタグ付けモジュールに似ています!

ミルクを覚えて

YouTubeの検索と同じように、ここにある検索ボックスはあなたの結果と何かが一致するかどうかを即座に教えてくれます。自動提案機能のもう1つのインテリジェントな例.

本物の仕事

Authentic JobはすでにGoogleの前に検索結果が表示されています。.

知っている

Kontainの検索ボックスでは、ユーザーは一般的な検索を実行したり、検索結果を「更新」または「ユーザー」のみに絞り込むことができます。.

ニューヨークマガジン

Kontainと同様に、NY Magazineの検索ではより詳細なフィルタリングが可能です。.

テーマフォレスト

最小限の時間内に訪問者が欲しいものを手に入れるのを助けるための検索モジュールでのフィルタリングのさらに別の例.

検索、ソート、フィルタ

Brianの検索ボックスは、高度な方法で実行された高度な検索モジュールのように見えます。検索ボタンを押す前に結果をどのように表示するかをカスタマイズします。.

タンブラー

サイドバーの微妙で小さな検索モジュール - きちんとしている!

MenuPages

あなたが完全な検索モジュールを探していて、それでもスペースが制約であるならば、このアプローチは役に立つかもしれません.

ててき

ロゴのすぐ後に検索モジュールがあります。見逃しがちです.

C Spire Wireless

検索タブをホバーしたときにのみ表示される大きな検索ボックス。スペースを活用するもう1つの良い方法.

スポケオ

美しくフィルタリングされた選択検索.

伝票コード

そのビジネスの性質を見ると、検索ボックスを中央の真上で折りたたむことがおそらく最良のアイデアです。.

iStockPhoto

他のサイトと同様に、iStockPhotoは読者のために膨大な量のリソースを提供しているので、検索によるフィルタリングは間違いなく不可欠です。.

テイストブック

シンプルに見えても素晴らしい検索ボックス.

グルーヴシャーク

Groovesharkでは、音楽をオンラインで聴いて共有することができます。最初のページはあなたが欲しい音楽を検索するための検索ボックスだけで構成されています。それは全く理にかなっています.

仕事をするゲーマー

Googleカスタム検索のカスタマイズ方法の良い例.

デビッドトロンデル

サイトのデザインとよく調和する素敵な暗い検索ボックス.

もっと

• 揺れるCSS3検索ボックスを作成する （ホンキート）
• 聖なる検索ボックスの設計：例とベストプラクティス （スマッシングマガジン）
• 美しいCSS3検索フォームチュートリアル （Webデザイナーウォール）