アイコンをクリックしたときに検索アイコン機能がどのように機能するかを調べようとしています。これはレスポンシブウェブサイト用です。
私には3つのシナリオがあります小さいビューポートで表示してください:
1)検索ボックスが表示され、オーバーレイが画面の残りの部分を覆います。 (例 http://www.woolworths.co.za/ )
2)検索ボックスが表示され、画面のコンテンツが押し下げられます。 (例 http://www.Microsoft.com/ )
3)検索ボックスが表示され、コンテンツの一部が覆われます(例はありません)。
私の知る限り、モバイルのオーバーレイにはいくつか問題がありますか?
あなたが与えたすべての例はうまくいくでしょう。 1つは他のよりもデザイン内でうまく機能する場合があります。
ユーザーは、検索入力がポップアップする方法を気にしません。最高の検索フィールド
したがって、私は機能性に重点を置き、審美性には重点を置きません。
(私は数か月前に検索フィールドで素晴らしい記事を読んだので、興味があるかもしれません。見つけたら、ここに投稿します)
他の人は違いは小さいと言っていますが、正しく理解するためにいくつかの詳細があります:
検索アイコンの操作と場所は、使用されているコンテキストに完全に依存します。 eコマースサイトの場合、アイテムの検索に使用されますか、それともサイト(専門家/会社のサイト)内の何かの検索に使用されますか?
その意図はあなたに答えを与えるでしょう。検索が目的のタスクフローにとって本当に重要である場合は、おそらく検索ボックスを常に開いたままにしておきます。