每個(gè)現(xiàn)代網(wǎng)站都應(yīng)該使用響應(yīng)式布局。這使得瀏覽任何設(shè)備都變得更加容易，但這使得頁(yè)面設(shè)計(jì)變得更加困難。

所鐘愛(ài)的搜索字段是一個(gè)棘手的頁(yè)面元素的例子。隨著網(wǎng)頁(yè)設(shè)計(jì)的迅速發(fā)展，網(wǎng)頁(yè)設(shè)計(jì)師們也有了新的搜索趨勢(shì)，讓他們既方便又時(shí)尚。

讓我們來(lái)看看web上搜索表單趨勢(shì)的一些例子。這些可以幫助您規(guī)劃自己的搜索ui，并為您的下一個(gè)項(xiàng)目發(fā)布提供一些想法。

下拉導(dǎo)航搜索

到目前為止，*常見(jiàn)的搜索功能是下拉表單。這可以通過(guò)一個(gè)導(dǎo)航條的鏈接來(lái)固定，它可以切換搜索。

由于許多網(wǎng)站使用固定的導(dǎo)航，使得搜索字段隨處可見(jiàn)變得更加容易。

但即使有一個(gè)靜態(tài)導(dǎo)航條，你也會(huì)發(fā)現(xiàn)這個(gè)下拉式搜索功能非常實(shí)用。在一個(gè)響應(yīng)性的頁(yè)面上，沒(méi)有太多的空間可以壓縮搜索表單而不損害主要內(nèi)容。

下拉導(dǎo)航搜索

搜索引擎日志在右上角有一個(gè)快速和簡(jiǎn)單的下拉搜索框。它依靠一個(gè)小的放大鏡圖標(biāo)，每個(gè)人都應(yīng)該是通用的。



一旦磁場(chǎng)顯示出來(lái)，它就會(huì)自動(dòng)把放大鏡變成一個(gè)“X”。這是澄清用戶體驗(yàn)的好方法，這樣人們就知道他們可以隨時(shí)關(guān)閉這個(gè)領(lǐng)域。

更不用說(shuō)SEJ的設(shè)計(jì)非常棒，它與所有設(shè)備上的布局完美地融合在一起。

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

下拉搜索

當(dāng)你在一個(gè)小屏幕上瀏覽時(shí)，你會(huì)看到一個(gè)典型的放大鏡和下拉框。

但是桌面用戶在導(dǎo)航條上有更多的空間，這鼓勵(lì)了一個(gè)功能齊全的工作搜索領(lǐng)域。很酷!

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

另一個(gè)遵循同樣方法的網(wǎng)站是瘦領(lǐng)帶。

瘦的關(guān)系

注意，它們的默認(rèn)搜索字段比導(dǎo)航中的其他鏈接要小得多。這樣它就不會(huì)占用太多空間，即使在較小的設(shè)備上也能保持可見(jiàn)。

全屏模式

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

在表面上，這看起來(lái)很相似，因?yàn)樗B接到一個(gè)搜索圖標(biāo)。但它不會(huì)從導(dǎo)航欄上掉下來(lái)，而是會(huì)出現(xiàn)在頁(yè)面的模態(tài)窗口中。

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

全屏模式

這吸引了用戶的注意力，并將用戶的注意力吸引到表單上。它的設(shè)計(jì)是完全響應(yīng)和易于使用，因?yàn)槟B(tài)可以用一個(gè)龍頭關(guān)閉。

*的缺點(diǎn)是，如果你不想要一個(gè)簡(jiǎn)單的屏幕覆蓋，只需要一個(gè)搜索框，這就會(huì)讓你覺(jué)得有點(diǎn)“太多”了。

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

喜劇中心

這也占據(jù)了整個(gè)頁(yè)面，但是包括了他們*新的節(jié)目和首映式的額外鏈接。

如果你有新的帖子，熱門的分類，或者突發(fā)新聞，這將是一個(gè)很好的方式來(lái)展示頁(yè)面上額外的鏈接。

全屏模式運(yùn)行良好，但你必須注意用戶體驗(yàn)。確保所有設(shè)備上的模態(tài)工作，用戶可以輕松地關(guān)閉模態(tài)。

內(nèi)聯(lián)響應(yīng)輸入

動(dòng)態(tài)內(nèi)聯(lián)表單提供了隱藏搜索字段和下拉菜單的混合。

使用內(nèi)聯(lián)搜索表單，您可以將搜索放置到導(dǎo)航欄中，但可以在導(dǎo)航欄內(nèi)顯示，而不是在導(dǎo)航欄下顯示。我們?cè)贒esignmodo上有這個(gè)效果，這是很多博客的熱門選擇。

例如，用他們的內(nèi)聯(lián)搜索字段查看卡通Brew設(shè)計(jì)。他們的導(dǎo)航有一個(gè)放大鏡，在清晰的視圖中，但是表單直到它被切換時(shí)才出現(xiàn)。

內(nèi)聯(lián)響應(yīng)輸入

它與導(dǎo)航條內(nèi)聯(lián)，所以這不會(huì)占用太多空間。響應(yīng)式設(shè)備需要處理不同的搜索，因此在較小的瀏覽器中，它只出現(xiàn)在拉下滑動(dòng)導(dǎo)航中。

但是你也可以通過(guò)隱藏在導(dǎo)航欄里來(lái)解決內(nèi)聯(lián)搜索字段。dualshocker有一個(gè)奇妙的滑動(dòng)菜單，可以在所有屏幕上運(yùn)行。

內(nèi)聯(lián)響應(yīng)輸入

該導(dǎo)航將所有的菜單鏈接和搜索表單在頂部。它很容易訪問(wèn)并內(nèi)置到導(dǎo)航中，所有設(shè)備的UI都是相同的。

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

但是要正確地遵循這個(gè)技巧，你必須把漢堡包菜單作為所有屏幕的默認(rèn)選項(xiàng)。

當(dāng)然不是一個(gè)壞主意，但可能不是你想要的。

設(shè)計(jì)內(nèi)聯(lián)表單的更好方法是遵循我們?cè)贒esignmodo上使用的卡通Brew風(fēng)格或風(fēng)格。

全尺寸的可伸縮的形式

我不經(jīng)?？吹竭@個(gè)搜索設(shè)計(jì)，但是如果你的布局能適應(yīng)的話，它肯定能很好地工作。

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