設(shè)計響應(yīng)式搜索表單：杭州網(wǎng)頁設(shè)計師的提示和趨勢

2011-01-19 響應(yīng)式網(wǎng)站專題

每個現(xiàn)代網(wǎng)站都應(yīng)使用響應(yīng)式布局。這使得在任何設(shè)備上瀏覽都更加容易，但是頁面的設(shè)計更加棘手。最受歡迎的搜索字段是一個棘手的頁面元素的示例。隨著做網(wǎng)站響應(yīng)式布局的興起，網(wǎng)頁設(shè)計師對搜索表單有了新的趨勢，使其既易于訪問又時尚。讓我們看一下網(wǎng)絡(luò)上搜索表單趨勢的一些示例。這些應(yīng)該可以幫助您規(guī)劃自己的搜索用戶界面，并為您的下一個項目啟動提供一些思路。

下拉導(dǎo)航搜索

到目前為止，最常見的搜索功能是下拉列表?？梢酝ㄟ^導(dǎo)航欄內(nèi)的鏈接來固定搜索，該鏈接可以打開或關(guān)閉搜索。由于許多網(wǎng)站都使用固定導(dǎo)航，因此更容易保持搜索字段在任何地方都可見。但是即使使用靜態(tài)導(dǎo)航欄，您也會發(fā)現(xiàn)此下拉搜索功能非常實用。響應(yīng)頁面上的其他地方?jīng)]有太多空間可以擠壓搜索表單而不會損害主要內(nèi)容。

派迪科技網(wǎng)站建設(shè)案例

通過右上角的快速便捷的下拉搜索字段來實現(xiàn)此目的。它依靠一個小的放大鏡圖標(biāo)，每個人都應(yīng)該通用。顯示該字段后，它將自動將放大鏡更改為“ X”。這是澄清用戶體驗的好方法，因此人們知道他們可以隨時關(guān)閉該字段。更不用說SEJ設(shè)計很棒，并且與所有設(shè)備上的布局完美融合。 Problogger 是另一個不錯的示例，它在臺式機(jī)和移動設(shè)備之間的功能有所不同。

全屏模式

如果您不喜歡下拉效果，可以嘗試使用模式窗口。從表面上看，這看起來很相似，因為它已連接到搜索圖標(biāo)。但是，表單不會從導(dǎo)航欄下拉出來，而是出現(xiàn)在頁面的模態(tài)窗口中。您可以在Full Home Living上看到一個干凈的示例，其中搜索模式會覆蓋整個屏幕。

網(wǎng)站下拉菜單全屏

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

動態(tài)內(nèi)聯(lián)表單提供隱藏搜索字段以及下拉菜單的混合。使用內(nèi)聯(lián)搜索表單，您可以將搜索開關(guān)置于導(dǎo)航中，但以內(nèi)聯(lián)方式而不是在導(dǎo)航下方顯示。我們在Designmodo上具有這種效果，它是許多博客的流行選擇。例如，檢查帶有其內(nèi)聯(lián)搜索字段的 Cartoon Brew設(shè)計。他們的導(dǎo)航中有一個清晰可見的放大鏡，但是直到切換后該表單才出現(xiàn)。

全尺寸可拉伸形式

我不經(jīng)?？吹竭@種搜索設(shè)計，但是如果您的布局可以適應(yīng)的話，它肯定可以很好地工作。使用可拉伸的搜索表單，您可以設(shè)計整個表單以使其布局適合100％的寬度。從那里您可以調(diào)整視野以縮小到較小的空間，甚至可以縮小到足以在智能手機(jī)上正常工作的程度。使用此技術(shù)，搜索字段始終可見，并且根據(jù)需要縮小尺寸。真實的喬布斯就是這種趨勢的一個很好的例子。

派迪科技網(wǎng)站建設(shè)觀點

如果您訪問該網(wǎng)站并調(diào)整瀏覽器的大小，您將看到其他頁面元素也如何重新排列。布局應(yīng)具有靈活性，以使所有內(nèi)容仍然可見，并將其壓縮到設(shè)計中。搜索表單是許多做網(wǎng)站的必備內(nèi)容，如果您需要可見的表單，請嘗試使用這種靈活的表單技術(shù)?；蛘撸梢試L試結(jié)合使用下拉表單趨勢和此可擴(kuò)展表單UI來創(chuàng)建一個覆蓋頁面的隱藏字段。

派迪科技網(wǎng)站建設(shè)觀點

設(shè)計搜索表單

響應(yīng)式網(wǎng)站搜索的最佳解決方案通?；陧椖?。有些導(dǎo)航菜單只是沒有足夠的空間用于內(nèi)聯(lián)搜索字段，因此需要將其隱藏在屏幕外。如果您不確定如何前進(jìn)，請嘗試瀏覽其他網(wǎng)站以獲得設(shè)計靈感并研究其搜索形式。記下您喜歡的搜索功能以及最適合您的項目的記錄。通過反復(fù)試驗來測試您的一些收藏夾，以查看哪些響應(yīng)式搜索UI提供最佳體驗。

上一篇：對杭州企業(yè)來說制作響應(yīng)式網(wǎng)站的好處返回觀點列表下一篇：網(wǎng)站建設(shè)自適應(yīng)和響應(yīng)式的優(yōu)缺點，傻傻分不清兩者區(qū)別？

本文標(biāo)簽：

本文地址： http://www.bmwdream.cn/a/2433.html

相關(guān)專題

品牌官網(wǎng)設(shè)計
杭州派迪科技為高端客戶提供品牌官網(wǎng)咨詢策劃，品牌官網(wǎng)設(shè)計，品牌官網(wǎng)建設(shè)開發(fā)服務(wù)，以國際化視野和標(biāo)準(zhǔn)為基礎(chǔ)，為各行業(yè)領(lǐng)軍品牌提供高端企業(yè)網(wǎng)站定制、策劃、設(shè)計、互動與制作
查看詳情
大策略營銷門戶網(wǎng)站
杭州派迪科技有自己的營銷型網(wǎng)站CMS系統(tǒng)，適合白帽SEO網(wǎng)站。特別對大策略的營銷型門戶網(wǎng)站制作有一定的經(jīng)驗，曾經(jīng)為上海天擎外貿(mào)行業(yè)網(wǎng)站、浙江兆龍營銷型門戶、先臨三維門戶營銷網(wǎng)站提供全程的技術(shù)支持及SEO優(yōu)化指導(dǎo)
查看詳情
集團(tuán)/上市公司網(wǎng)站
杭州派迪科技為杭州本地集團(tuán)公司提供網(wǎng)頁設(shè)計、制作、開發(fā)服務(wù)，為集團(tuán)公司網(wǎng)站建設(shè)提供了響應(yīng)式、營銷型、品牌型、門戶型網(wǎng)站建設(shè)需求，歡迎廣大集團(tuán)公司客戶咨詢
查看詳情
外貿(mào)網(wǎng)站建設(shè)
杭州派迪科技為高端客戶提供外貿(mào)網(wǎng)站咨詢策劃，外貿(mào)官網(wǎng)設(shè)計，外貿(mào)官網(wǎng)建設(shè)開發(fā)服務(wù)，以谷歌搜索引起算法為基礎(chǔ)，為各行業(yè)外貿(mào)公司提供高端企業(yè)外貿(mào)網(wǎng)站定制、策劃、設(shè)計、互動與制作
查看詳情
企業(yè)網(wǎng)站建設(shè)
高端專業(yè)、令人印象深刻的用戶界面、易于訪問——企業(yè)網(wǎng)站必須反映一切，因為派迪科技在這里提供幫助，憑借精湛的技術(shù)、豐富的經(jīng)驗、與客戶的持續(xù)溝通以及對每一個細(xì)節(jié)的關(guān)注，我們確保在快速的周期時間內(nèi)提供優(yōu)質(zhì)的服務(wù)。
查看詳情
半定制網(wǎng)站
杭州派迪科技模板網(wǎng)站建設(shè)專題_各行業(yè)方案專題欄目提供各行業(yè)產(chǎn)品適合的網(wǎng)站建設(shè)方案,幫助企業(yè)了解派迪科技建站效果等信息,您可以通過本站了解各行業(yè)網(wǎng)站建設(shè)方案,如需要獲取本行業(yè)定制網(wǎng)站建設(shè)方案,可以聯(lián)系在線客服或撥打電話咨詢
查看詳情