網(wǎng)站搜索框設(shè)計(jì)避免的錯(cuò)誤 分享優(yōu)秀搜素框設(shè)計(jì)

申請(qǐng)免費(fèi)試用、咨詢電話：400-8352-114

導(dǎo)語(yǔ)：設(shè)計(jì)精美的網(wǎng)站當(dāng)然很吸引人，但如果你的網(wǎng)站設(shè)計(jì)精美，內(nèi)容上乘，就是不明白網(wǎng)站為何沒(méi)達(dá)到運(yùn)營(yíng)預(yù)期目標(biāo)，問(wèn)題可能就出在搜素框這一元素的運(yùn)用之上。本文指出了設(shè)計(jì)者必須避免的錯(cuò)誤，并分享了一些搜索框設(shè)計(jì)技巧，希望在優(yōu)化網(wǎng)站性能方面有所幫助。

在瀏覽整個(gè)網(wǎng)站中，搜索框通常是通向用戶使用的最后一道關(guān)卡。如果你的網(wǎng)站內(nèi)容很多，包含了詳盡的特色，功能，設(shè)計(jì)元素，產(chǎn)品和服務(wù)等等，那么搜索框就成為了網(wǎng)站不可或缺的一部分。網(wǎng)站的成長(zhǎng)往往需要時(shí)間。當(dāng)然，從整個(gè)網(wǎng)站設(shè)計(jì)和開(kāi)發(fā)過(guò)程來(lái)看，設(shè)計(jì)肯定要簡(jiǎn)潔，有文章和評(píng)論，以及非正式的網(wǎng)站通知，特色內(nèi)容和服務(wù)等等。不過(guò)，隨著網(wǎng)站層次不斷提升和更新，與網(wǎng)站相關(guān)的內(nèi)容的只是起到了裝飾作用。因此，搜索框?qū)W(wǎng)站的性能優(yōu)化起到了至關(guān)重要的作用。

優(yōu)質(zhì)的職能和運(yùn)作對(duì)網(wǎng)站開(kāi)發(fā)確實(shí)很重要，但與此同時(shí)，我們也不可忽視網(wǎng)站的前端性能。你的網(wǎng)站也許在特色內(nèi)容，功能以及內(nèi)容質(zhì)量等方面都很出眾，但是，如果網(wǎng)站前端性能令人不滿意，并且沒(méi)有以用戶為中心，那么網(wǎng)站其它方面做得再好，也起不到任何作用。

錯(cuò)誤觀念：搜索框不需要設(shè)計(jì)

在整個(gè)網(wǎng)站設(shè)計(jì)中，搜索框的外觀要顯眼，方便用戶快速找到。網(wǎng)站站長(zhǎng)普遍認(rèn)為搜索框只是一個(gè)輸入和提交內(nèi)容的按鈕而已，因此他們根本不需要花時(shí)間設(shè)計(jì)。

但是由于錯(cuò)誤觀念泛濫，站長(zhǎng)們也錯(cuò)失了一些潛在的機(jī)會(huì)。由于設(shè)計(jì)上的缺失以及亮點(diǎn)不突出，用戶通常會(huì)被搜索框的位置弄得焦頭爛額，他們通常會(huì)點(diǎn)擊“返回”按鈕（離開(kāi)網(wǎng)頁(yè)）。因此，設(shè)計(jì)平庸，辨識(shí)度不高的搜索框就是導(dǎo)致這一切的元兇，如果想要網(wǎng)站獲得可觀的流量，但是網(wǎng)站轉(zhuǎn)化率卻低得離譜，這是不行的。

如果用戶對(duì)你的網(wǎng)站感到失望，搜索框則有助于留住用戶。在大量的網(wǎng)站中，真正帶給用戶絕佳體驗(yàn)的少之又少，用戶有時(shí)還沒(méi)深入了解整個(gè)網(wǎng)站，可能就不斷點(diǎn)擊后退，離開(kāi)網(wǎng)頁(yè)了。如果用戶能進(jìn)行搜索，他們只需在搜索框中輸入自己想找的內(nèi)容，上述問(wèn)題也就迎刃而解了。

在如今這個(gè)快速成功的社會(huì)，時(shí)間就是金錢(qián)。搜索框不僅能幫助用戶節(jié)約時(shí)間，還可帶給用戶高度愉悅和簡(jiǎn)潔的瀏覽體驗(yàn)。

搜索框設(shè)計(jì)技巧

在為網(wǎng)站設(shè)計(jì)搜索框時(shí)，你可重點(diǎn)考慮以下建議：

1.搜索框要顯眼

搜索框要清晰可見(jiàn)，千萬(wàn)不可放在難以注意到的位置。即使你的網(wǎng)站主題是純白色，為搜索框設(shè)置黑色的邊框，選用紅色等亮色作為字體顏色，這都可能會(huì)解決搜索框不明顯的問(wèn)題。

2.搜索框要有搜索框的樣

你可以嘗試在搜索框設(shè)計(jì)中融入創(chuàng)意，但是不要把它弄得不倫不類。這也是搜索框必須是框狀的原因。訪問(wèn)網(wǎng)站的用戶不會(huì)仔細(xì)瀏覽完整個(gè)網(wǎng)站的內(nèi)容，他們只會(huì)關(guān)注自己感興趣的內(nèi)容，而且許多學(xué)習(xí)條件是受制于他們的行為，在用搜索框進(jìn)行搜索時(shí)，實(shí)際上用圓角矩形的搜索框就可以了。

3.搜索框的位置

搜索框的位置對(duì)網(wǎng)站優(yōu)化和性能提升十分重要。一般的經(jīng)驗(yàn)表明搜索框的最佳位置應(yīng)在網(wǎng)站頂部的左上角或右上角，因?yàn)橛脩粝Ｍ?jié)約時(shí)間和精力，直接搜索到他們所需的內(nèi)容。但是受廣告等內(nèi)容的影響，迫使設(shè)計(jì)者將搜索框放在頁(yè)面底部。這并沒(méi)真正解決搜索框在網(wǎng)站中的實(shí)用性問(wèn)題，必須避免。

另外，在每個(gè)網(wǎng)頁(yè)中都放入搜索框是一個(gè)明智的主意，即使用戶在網(wǎng)站中迷失，他們也能夠方便地找到需要的內(nèi)容。

4.為提交按鈕取一個(gè)有創(chuàng)意的名字

搜索框的名字要取得有創(chuàng)意，不要簡(jiǎn)單地放上單調(diào)的“go”，“find”或“search”在旁邊。不管給它起什么名字，只要不為難用戶去猜意思就好。

5.為用戶提供分類搜索

用戶可自由搜索各種分類。同樣的思路，你也可以顯示分類，用戶在輸入?yún)^(qū)域進(jìn)行搜索。在JavaScript的幫助下，用戶只需將鼠標(biāo)懸停在搜索框上，即可顯示類型或進(jìn)行用戶自定義搜索，從用戶的角度講，這是一個(gè)很棒的選擇。

設(shè)計(jì)者必須避免的錯(cuò)誤

我們?cè)谠囉闷渌W(wǎng)站的搜索時(shí)發(fā)現(xiàn)他們?cè)谒阉骺虻娘@示上犯了不少錯(cuò)。這些都是些很常見(jiàn)的錯(cuò)誤，如果你希望通過(guò)搜索框優(yōu)化網(wǎng)站性能，那么就必須得避免這些問(wèn)題。

1.隱藏搜索框

我們反復(fù)強(qiáng)調(diào)搜索框的明確顯示的必要性。不要把搜索框放在網(wǎng)站底部，放在網(wǎng)站的右上角效果會(huì)更好，如果網(wǎng)站設(shè)計(jì)得很混亂，用戶在沒(méi)有瀏覽到接近網(wǎng)站的底部時(shí)就已經(jīng)離開(kāi)網(wǎng)頁(yè)了。

2.切忌輸入?yún)^(qū)域過(guò)短

為用戶提供所需范圍準(zhǔn)確的輸入查詢。搜索框輸入?yún)^(qū)域太短只會(huì)讓用戶對(duì)搜索框感到失望，因?yàn)?，他們不?huì)在整個(gè)區(qū)域輸入想查詢的內(nèi)容。再者，這也非常不方便用戶閱讀和回應(yīng)。

3.切忌提交按鈕過(guò)短

受網(wǎng)站設(shè)計(jì)限制，提交按鈕不應(yīng)過(guò)長(zhǎng)，但是太短又會(huì)讓用戶感到失望，因?yàn)樗麄冊(cè)谑髽?biāo)點(diǎn)擊的準(zhǔn)確性上又會(huì)有偏差，從而浪費(fèi)搜索時(shí)間，還會(huì)被轉(zhuǎn)入到到一些不同頁(yè)面上。

4.切勿將搜索框與其它菜單混排在一起

如果把搜索框和與新聞和導(dǎo)航條混排在一起，這是相當(dāng)讓人不爽的事。這樣用戶很難在郵件訂閱或文章搜索欄中區(qū)分出搜索框。因此，搜索框應(yīng)與其它菜單分開(kāi)排列。

5.過(guò)度設(shè)計(jì)搜索框

不要因?yàn)樗阉骺蛞@眼，在設(shè)計(jì)時(shí)就受到影響。雖然搜索框要清晰地展現(xiàn)出來(lái)，但也不要設(shè)計(jì)過(guò)度，以免影響到它的直觀性。

6.沒(méi)必要提供高級(jí)搜索工具

高級(jí)搜索當(dāng)然會(huì)有它的用處，但這會(huì)使本來(lái)簡(jiǎn)單的搜索變得更加復(fù)雜。因此，沒(méi)必要提供高級(jí)搜索工具，除非你是為了迎合懂技術(shù)的用戶。如果你只是搞定一般用戶，盡量保持搜索選項(xiàng)簡(jiǎn)單。

7.一個(gè)搜索框有多個(gè)提交按鈕

這條建議非常有意思，我們很少看到有網(wǎng)站設(shè)置了多個(gè)搜索提交按鈕，比如同時(shí)有“go”和“find”。很明顯，這會(huì)擾亂按鈕的選擇。

8.如果在網(wǎng)站設(shè)計(jì)中，你遵從了以上建議，我們相信一個(gè)高效的搜索框能夠起到優(yōu)化網(wǎng)站性能的作用。（jaysming）

以下是一些設(shè)計(jì)很棒的搜索框：

Ask

Shopzilla

Zadby

Register

Marthastewart

Garyvaynerchuk

MothersClick