能幫助優化網站性能的(de)搜索框設計

導語：設計精美的(de)網站當然很吸引人(rén)，但如果你的(de)網站設計精美，内容上(shàng)乘，就(jiù)是(shì)不(bù)明白網站爲(wéi / wèi)何沒達到(dào)運營預期目标，問題可能就(jiù)出(chū)在(zài)搜素框這(zhè)一(yī / yì ／yí)元素的(de)運用之(zhī)上(shàng)。

本文指出(chū)了(le／liǎo)設計者必須避免的(de)錯誤，并分享了(le／liǎo)一(yī / yì ／yí)些搜索框設計技巧，希望在(zài)優化網站性能方面有所幫助。

在(zài)浏覽整個(gè)網站中，搜索框通常是(shì)通向用戶使用的(de)最後一(yī / yì ／yí)道(dào)關卡。如果你的(de)網站内容很多，包含了(le／liǎo)詳盡的(de)特色，功能，設計元素，産品和(hé / huò)服務等等，那麽搜索框就(jiù)成爲(wéi / wèi)了(le／liǎo)網站不(bù)可或缺的(de)一(yī / yì ／yí)部分。網站的(de)成長往往需要(yào / yāo)時(shí)間。當然，從整個(gè)網站設計和(hé / huò)開發過程來(lái)看，設計肯定要(yào / yāo)簡潔，有文章和(hé / huò)評論，以(yǐ)及非正式的(de)網站通知，特色内容和(hé / huò)服務等等。不(bù)過，随着網站層次不(bù)斷提升和(hé / huò)更新，與網站相關的(de)内容的(de)隻是(shì)起到(dào)了(le／liǎo)裝飾作用。因此，搜索框對網站的(de)性能優化起到(dào)了(le／liǎo)至關重要(yào / yāo)的(de)作用。

優質的(de)職能和(hé / huò)運作對網站開發确實很重要(yào / yāo)，但與此同時(shí)，我們也(yě)不(bù)可忽視網站的(de)前端性能。你的(de)網站也(yě)許在(zài)特色内容，功能以(yǐ)及内容質量等方面都很出(chū)衆，但是(shì)，如果網站前端性能令人(rén)不(bù)滿意，并且沒有以(yǐ)用戶爲(wéi / wèi)中心，那麽網站其它方面做得再好，也(yě)起不(bù)到(dào)任何作用。

錯誤觀念：搜索框不(bù)需要(yào / yāo)設計

在(zài)整個(gè)網站設計中，搜索框的(de)外觀要(yào / yāo)顯眼，方便用戶快速找到(dào)。網站站長普遍認爲(wéi / wèi)搜索框隻是(shì)一(yī / yì ／yí)個(gè)輸入和(hé / huò)提交内容的(de)按鈕而(ér)已，因此他(tā)們根本不(bù)需要(yào / yāo)花時(shí)間設計。

但是(shì)由于(yú)錯誤觀念泛濫，站長們也(yě)錯失了(le／liǎo)一(yī / yì ／yí)些潛在(zài)的(de)機會。由于(yú)設計上(shàng)的(de)缺失以(yǐ)及亮點不(bù)突出(chū)，用戶通常會被搜索框的(de)位置弄得焦頭爛額，他(tā)們通常會點擊“返回”按鈕（離開網頁）。因此，設計平庸，辨識度不(bù)高的(de)搜索框就(jiù)是(shì)導緻這(zhè)一(yī / yì ／yí)切的(de)元兇，如果想要(yào / yāo)網站獲得可觀的(de)流量，但是(shì)網站轉化率卻低得離譜，這(zhè)是(shì)不(bù)行的(de)。

如果用戶對你的(de)網站感到(dào)失望，搜索框則有助于(yú)留住用戶。在(zài)大(dà)量的(de)網站中，真正帶給用戶絕佳體驗的(de)少之(zhī)又少，用戶有時(shí)還沒深入了(le／liǎo)解整個(gè)網站，可能就(jiù)不(bù)斷點擊後退，離開網頁了(le／liǎo)。如果用戶能進行搜索，他(tā)們隻需在(zài)搜索框中輸入自己想找的(de)内容，上(shàng)述問題也(yě)就(jiù)迎刃而(ér)解了(le／liǎo)。

在(zài)如今這(zhè)個(gè)快速成功的(de)社會，時(shí)間就(jiù)是(shì)金錢。搜索框不(bù)僅能幫助用戶節約時(shí)間，還可帶給用戶高度愉悅和(hé / huò)簡潔的(de)浏覽體驗。

搜索框設計技巧

在(zài)爲(wéi / wèi)網站設計搜索框時(shí)，你可重點考慮以(yǐ)下建議：

1.搜索框要(yào / yāo)顯眼

搜索框要(yào / yāo)清晰可見，千萬不(bù)可放在(zài)難以(yǐ)注意到(dào)的(de)位置。即使你的(de)網站主題是(shì)純白色，爲(wéi / wèi)搜索框設置黑色的(de)邊框，選用紅色等亮色作爲(wéi / wèi)字體顔色，這(zhè)都可能會解決搜索框不(bù)明顯的(de)問題。

2.搜索框要(yào / yāo)有搜索框的(de)樣

你可以(yǐ)嘗試在(zài)搜索框設計中融入創意，但是(shì)不(bù)要(yào / yāo)把它弄得不(bù)倫不(bù)類。這(zhè)也(yě)是(shì)搜索框必須是(shì)框狀的(de)原因。訪問網站的(de)用戶不(bù)會仔細浏覽完整個(gè)網站的(de)内容，他(tā)們隻會關注自己感興趣的(de)内容，而(ér)且許多學習條件是(shì)受制于(yú)他(tā)們的(de)行爲(wéi / wèi)，在(zài)用搜索框進行搜索時(shí)，實際上(shàng)用圓角矩形的(de)搜索框就(jiù)可以(yǐ)了(le／liǎo)。

3.搜索框的(de)位置

搜索框的(de)位置對網站優化和(hé / huò)性能提升十分重要(yào / yāo)。一(yī / yì ／yí)般的(de)經驗表明搜索框的(de)最佳位置應在(zài)網站頂部的(de)左上(shàng)角或右上(shàng)角，因爲(wéi / wèi)用戶希望節約時(shí)間和(hé / huò)精力，直接搜索到(dào)他(tā)們所需的(de)内容。但是(shì)受廣告等内容的(de)影響，迫使設計者将搜索框放在(zài)頁面底部。這(zhè)并沒真正解決搜索框在(zài)網站中的(de)實用性問題，必須避免。

另外，在(zài)每個(gè)網頁中都放入搜索框是(shì)一(yī / yì ／yí)個(gè)明智的(de)主意，即使用戶在(zài)網站中迷失，他(tā)們也(yě)能夠方便地(dì / de)找到(dào)需要(yào / yāo)的(de)内容。

4.爲(wéi / wèi)提交按鈕取一(yī / yì ／yí)個(gè)有創意的(de)名字

搜索框的(de)名字要(yào / yāo)取得有創意，不(bù)要(yào / yāo)簡單地(dì / de)放上(shàng)單調的(de)“go”，“find”或“search”在(zài)旁邊。不(bù)管給它起什麽名字，隻要(yào / yāo)不(bù)爲(wéi / wèi)難用戶去猜意思就(jiù)好。

5.爲(wéi / wèi)用戶提供分類搜索

用戶可自由搜索各種分類。同樣的(de)思路，你也(yě)可以(yǐ)顯示分類，用戶在(zài)輸入區域進行搜索。在(zài)JavaScript的(de)幫助下，用戶隻需将鼠标懸停在(zài)搜索框上(shàng)，即可顯示類型或進行用戶自定義搜索，從用戶的(de)角度講，這(zhè)是(shì)一(yī / yì ／yí)個(gè)很棒的(de)選擇。

設計者必須避免的(de)錯誤

我們在(zài)試用其它網站的(de)搜索時(shí)發現他(tā)們在(zài)搜索框的(de)顯示上(shàng)犯了(le／liǎo)不(bù)少錯。這(zhè)些都是(shì)些很常見的(de)錯誤，如果你希望通過搜索框優化網站性能，那麽就(jiù)必須得避免這(zhè)些問題。

1.隐藏搜索框

我們反複強調搜索框的(de)明确顯示的(de)必要(yào / yāo)性。不(bù)要(yào / yāo)把搜索框放在(zài)網站底部，放在(zài)網站的(de)右上(shàng)角效果會更好，如果網站設計得很混亂，用戶在(zài)沒有浏覽到(dào)接近網站的(de)底部時(shí)就(jiù)已經離開網頁了(le／liǎo)。

2.切忌輸入區域過短

爲(wéi / wèi)用戶提供所需範圍準确的(de)輸入查詢。搜索框輸入區域太短隻會讓用戶對搜索框感到(dào)失望，因爲(wéi / wèi)，他(tā)們不(bù)會在(zài)整個(gè)區域輸入想查詢的(de)内容。再者，這(zhè)也(yě)非常不(bù)方便用戶閱讀和(hé / huò)回應。

3.切忌提交按鈕過短

受網站設計限制，提交按鈕不(bù)應過長，但是(shì)太短又會讓用戶感到(dào)失望，因爲(wéi / wèi)他(tā)們在(zài)鼠标點擊的(de)準确性上(shàng)又會有偏差，從而(ér)浪費搜索時(shí)間，還會被轉入到(dào)到(dào)一(yī / yì ／yí)些不(bù)同頁面上(shàng)。

4.切勿将搜索框與其它菜單混排在(zài)一(yī / yì ／yí)起

如果把搜索框和(hé / huò)與新聞和(hé / huò)導航條混排在(zài)一(yī / yì ／yí)起，這(zhè)是(shì)相當讓人(rén)不(bù)爽的(de)事。這(zhè)樣用戶很難在(zài)郵件訂閱或文章搜索欄中區分出(chū)搜索框。因此，搜索框應與其它菜單分開排列。

5.過度設計搜索框

不(bù)要(yào / yāo)因爲(wéi / wèi)搜索框要(yào / yāo)顯眼，在(zài)設計時(shí)就(jiù)受到(dào)影響。雖然搜索框要(yào / yāo)清晰地(dì / de)展現出(chū)來(lái)，但也(yě)不(bù)要(yào / yāo)設計過度，以(yǐ)免影響到(dào)它的(de)直觀性。

6.沒必要(yào / yāo)提供高級搜索工具

高級搜索當然會有它的(de)用處，但這(zhè)會使本來(lái)簡單的(de)搜索變得更加複雜。因此，沒必要(yào / yāo)提供高級搜索工具，除非你是(shì)爲(wéi / wèi)了(le／liǎo)迎合懂技術的(de)用戶。如果你隻是(shì)搞定一(yī / yì ／yí)般用戶，盡量保持搜索選項簡單。

7.一(yī / yì ／yí)個(gè)搜索框有多個(gè)提交按鈕

這(zhè)條建議非常有意思，我們很少看到(dào)有網站設置了(le／liǎo)多個(gè)搜索提交按鈕，比如同時(shí)有“go”和(hé / huò)“find”。很明顯，這(zhè)會擾亂按鈕的(de)選擇。

8.如果在(zài)網站設計中，你遵從了(le／liǎo)以(yǐ)上(shàng)建議，我們相信一(yī / yì ／yí)個(gè)高效的(de)搜索框能夠起到(dào)優化網站性能的(de)作用。（jaysming）

以(yǐ)下是(shì)一(yī / yì ／yí)些設計很棒的(de)搜索框：

Ask

Shopzilla

Zadby

Register

Marthastewart

Garyvaynerchuk

MothersClick

能幫助優化網站性能的(de)搜索框設計由東莞網站設計編輯 /conghua/news/2580.html如需轉載請注明出(chū)處

東莞網站建設 東莞響應式網站 東莞小程序開發 東莞小程序制作 東莞網絡推廣 東莞微信小程序開發 東莞網頁設計 東莞做網站公司 中山網站建設 企業網站建設 手機網站建設 專業網站建設 揭陽網站建設 潮州網站建設 韶關網站建設 深圳網站建設 外貿網站建設 佛山網站建設 網站托管 SEO外包 關鍵詞優化