每個現代網站都應該使用響應式布局。這使得瀏覽任何設備都變得更加容易，但這使得頁面設計變得更加困難。

所鐘愛的搜索字段是一個棘手的頁面元素的例子。隨著網頁設計的迅速發展，網頁設計師們也有了新的搜索趨勢，讓他們既方便又時尚。

讓我們來看看web上搜索表單趨勢的一些例子。這些可以幫助您規劃自己的搜索ui，并為您的下一個項目發布提供一些想法。

下拉導航搜索

到目前為止，*常見的搜索功能是下拉表單。這可以通過一個導航條的鏈接來固定，它可以切換搜索。

由于許多網站使用固定的導航，使得搜索字段隨處可見變得更加容易。

但即使有一個靜態導航條，你也會發現這個下拉式搜索功能非常實用。在一個響應性的頁面上，沒有太多的空間可以壓縮搜索表單而不損害主要內容。

下拉導航搜索

搜索引擎日志在右上角有一個快速和簡單的下拉搜索框。它依靠一個小的放大鏡圖標，每個人都應該是通用的。



一旦磁場顯示出來，它就會自動把放大鏡變成一個“X”。這是澄清用戶體驗的好方法，這樣人們就知道他們可以隨時關閉這個領域。

更不用說SEJ的設計非常棒，它與所有設備上的布局完美地融合在一起。

Problogger是另一個很好的例子，它在桌面和移動之間做了一些不同的事情。

下拉搜索

當你在一個小屏幕上瀏覽時，你會看到一個典型的放大鏡和下拉框。

但是桌面用戶在導航條上有更多的空間，這鼓勵了一個功能齊全的工作搜索領域。很酷!

如果你有足夠的空間，你可以嘗試這樣一個完整的形式。

另一個遵循同樣方法的網站是瘦領帶。

瘦的關系

注意，它們的默認搜索字段比導航中的其他鏈接要小得多。這樣它就不會占用太多空間，即使在較小的設備上也能保持可見。

全屏模式

如果您不喜歡下拉效果，您可以嘗試使用模式窗口。

在表面上，這看起來很相似，因為它連接到一個搜索圖標。但它不會從導航欄上掉下來，而是會出現在頁面的模態窗口中。

你可以看到一個干凈的例子，在充分的家庭生活中，搜索模式覆蓋整個屏幕。

全屏模式

這吸引了用戶的注意力，并將用戶的注意力吸引到表單上。它的設計是完全響應和易于使用，因為模態可以用一個龍頭關閉。

*的缺點是，如果你不想要一個簡單的屏幕覆蓋，只需要一個搜索框，這就會讓你覺得有點“太多”了。

如果你有足夠的勇氣添加更多內容，你可以嘗試在他們的網站上建立一個像Comedy Central這樣的搜索模式。

喜劇中心

這也占據了整個頁面，但是包括了他們*新的節目和首映式的額外鏈接。

如果你有新的帖子，熱門的分類，或者突發新聞，這將是一個很好的方式來展示頁面上額外的鏈接。

全屏模式運行良好，但你必須注意用戶體驗。確保所有設備上的模態工作，用戶可以輕松地關閉模態。

內聯響應輸入

動態內聯表單提供了隱藏搜索字段和下拉菜單的混合。

使用內聯搜索表單，您可以將搜索放置到導航欄中，但可以在導航欄內顯示，而不是在導航欄下顯示。我們在Designmodo上有這個效果，這是很多博客的熱門選擇。

例如，用他們的內聯搜索字段查看卡通Brew設計。他們的導航有一個放大鏡，在清晰的視圖中，但是表單直到它被切換時才出現。

內聯響應輸入

它與導航條內聯，所以這不會占用太多空間。響應式設備需要處理不同的搜索，因此在較小的瀏覽器中，它只出現在拉下滑動導航中。

但是你也可以通過隱藏在導航欄里來解決內聯搜索字段。dualshocker有一個奇妙的滑動菜單，可以在所有屏幕上運行。

內聯響應輸入

該導航將所有的菜單鏈接和搜索表單在頂部。它很容易訪問并內置到導航中，所有設備的UI都是相同的。

如果你喜歡漢堡包的滑動菜單，那么它可以很好地工作。

但是要正確地遵循這個技巧，你必須把漢堡包菜單作為所有屏幕的默認選項。

當然不是一個壞主意，但可能不是你想要的。

設計內聯表單的更好方法是遵循我們在Designmodo上使用的卡通Brew風格或風格。

全尺寸的可伸縮的形式

我不經常看到這個搜索設計，但是如果你的布局能適應的話，它肯定能很好地工作。

你可以使用可伸縮的搜索表單。 本文來源：智通澤軟件，轉載請注明出處！如果需要泊頭網站建設 泊頭小程序開發 泊頭微信開發 泊頭APP開發請聯系封經理，我們將提供上門服務！
聯系方式：手機：13393374114  座機：0317-8280288 QQ：958361464  或掃一掃下面二維碼加我微信：