如何為您的網(wǎng)站設(shè)計(jì)實(shí)用且好看的搜索欄

您是否曾登陸網(wǎng)站尋找某些東西，但不確定在哪里可以找到它？

您可能瀏覽了菜單并向下滾動(dòng)了一點(diǎn)頁(yè)面，但最終您無(wú)法找到您想要的確切產(chǎn)品/帖子/文章。對(duì)吧？在這種情況下，

您可能會(huì)做兩件事：退出頁(yè)面，或?qū)ふ铱尚刨嚨乃阉鳈凇?/p>

如果您決定留下來(lái)，一個(gè)適當(dāng)?shù)乃阉鞴δ軕?yīng)該會(huì)接受您的查詢并將您發(fā)送到目的地。問(wèn)題解決了。這不是一種高端的體驗(yàn)，但在根本無(wú)法鏈接到主頁(yè)上的所有內(nèi)容的大型網(wǎng)站上，這是一種很難避免的體驗(yàn)。這就是為什么在為您的網(wǎng)站打造用戶體驗(yàn)時(shí)，搜索功能的設(shè)計(jì)必須直觀。如果訪問(wèn)者正在使用它，則意味著他們正在執(zhí)行特定任務(wù)。而且，作為杭州網(wǎng)站建設(shè)專業(yè)公司派迪科技，我們的任務(wù)是幫助他們實(shí)現(xiàn)目標(biāo)。我們的設(shè)計(jì)選擇可以決定導(dǎo)航體驗(yàn)的好壞，這會(huì)轉(zhuǎn)化為轉(zhuǎn)化率或跳出率。在本指南中，我們將學(xué)習(xí)如何為您的網(wǎng)站創(chuàng)建不錯(cuò)的搜索欄。通過(guò)實(shí)施這些設(shè)計(jì)準(zhǔn)則，您將幫助用戶快速順利地找到他們想要的內(nèi)容。

您的網(wǎng)站需要搜索欄嗎？

雖然對(duì)于包含搜索功能沒有硬性的“是”或“否”，但較大的網(wǎng)站通常比較小的網(wǎng)站更能從搜索中獲益。這是因?yàn)橛脩粼诿鎸?duì)廣泛的點(diǎn)擊導(dǎo)航時(shí)更可能依賴搜索。此外，如果用戶登陸您的主頁(yè)時(shí)想到了特定的內(nèi)容、類別或產(chǎn)品，他們可能更愿意將其輸入，而不是依賴主要和次要的點(diǎn)擊導(dǎo)航。如果您仍然不確定，您可以添加搜索功能并跟蹤用戶活動(dòng)以確定您的搜索欄是否被使用（如果是，是否被有效使用），然后決定是保留還是廢棄它。

搜索欄設(shè)計(jì)最佳實(shí)踐

1. 包括一個(gè)文本字段和一個(gè)搜索按鈕。

2. 放置在預(yù)期位置。包括搜索圖標(biāo)。

3. 尺寸適當(dāng)。

4. 考慮添加占位符文本。

5. 考慮添加自動(dòng)完成功能。

6. 隱藏高級(jí)選項(xiàng)。

7. 為手機(jī)設(shè)計(jì)。

通常，網(wǎng)站搜索是訪問(wèn)者在瀏覽您的網(wǎng)站時(shí)的最終或唯一選擇，因此糟糕的用戶體驗(yàn)可能會(huì)導(dǎo)致他們保持興趣和將他們發(fā)送給競(jìng)爭(zhēng)對(duì)手之間的區(qū)別。您需要將他們的期望和舒適度放在設(shè)計(jì)的——方法如下：

1.包括一個(gè)文本字段和一個(gè)搜索按鈕。

大多數(shù)搜索欄由兩個(gè)元素組成：用戶在其中輸入查詢的搜索框和用戶單擊以啟動(dòng)搜索的搜索按鈕。元素通常水平相鄰放置在一條線上，如下所示：

您可能偶爾會(huì)看到此演示文稿的變體，但大多數(shù)以這種方式出現(xiàn)是為了簡(jiǎn)單和可訪問(wèn)性。搜索框應(yīng)該只是一個(gè)框。您可以采取一些設(shè)計(jì)自由，例如添加背景對(duì)比度、顏色或圓角，但文本字段應(yīng)該是一個(gè)文本輸入元素，其高度為一行文本。用戶很容易認(rèn)識(shí)到這一點(diǎn)。至于搜索按鈕，強(qiáng)烈考慮包括一個(gè)。

它作為提交查詢的視覺提示，因此如果沒有它，用戶可能會(huì)感到困惑。將此按鈕放在輸入字段的右側(cè)，因?yàn)檫@是一種慣例，對(duì)于那些從左到右閱讀的人來(lái)說(shuō)是合乎邏輯的。還要寫簡(jiǎn)潔的按鈕文本——“搜索”一詞或放大鏡圖標(biāo)就可以了。當(dāng)搜索框處于焦點(diǎn)狀態(tài)時(shí)（即，文本光標(biāo)在其中處于活動(dòng)狀態(tài)），訪問(wèn)者還應(yīng)該能夠通過(guò)單擊搜索按鈕或按“Enter”/“Return”/“Go”鍵來(lái)啟動(dòng)他們的搜索。

經(jīng)典搜索欄上的一個(gè)常見替代迭代是放大鏡圖標(biāo)，單擊該圖標(biāo)會(huì)擴(kuò)展為完整的搜索欄和按鈕。這是國(guó)外網(wǎng)站-世界野生動(dòng)物基金會(huì)的一個(gè)例子：

這種設(shè)計(jì)節(jié)省了頁(yè)面空間，看起來(lái)更干凈，但要謹(jǐn)慎使用。有些人可能很難看到它，如果用戶在顯示文本框后需要再次點(diǎn)擊以聚焦文本框，則會(huì)增加交互成本。但是，如果搜索玻璃按鈕在頁(yè)面上足夠醒目，這是一種可行的替代方法。

2. 放置在預(yù)期位置。 

允許站點(diǎn)搜索的網(wǎng)站傾向于將搜索欄放在網(wǎng)頁(yè)的右上角或頂部中央。這兩種放置方式都確保了搜索功能對(duì)那些需要它的人來(lái)說(shuō)是可見的并且隨時(shí)可用。 一些網(wǎng)站可能會(huì)選擇在右上角放置其他鏈接、菜單或圖標(biāo)——登錄提示、設(shè)置或購(gòu)物車圖標(biāo)。

在這種情況下，可以將搜索欄向左移動(dòng)以適應(yīng)它們。 但是，不要將搜索欄專門放在頁(yè)面底部，也不要將其隱藏在菜單中。除了在頁(yè)面頂部放置一個(gè)搜索欄之外，還可以在頁(yè)腳 放置一個(gè)搜索欄，但是您不應(yīng)該讓用戶搜索您的搜索功能。 

此外，您的用戶可能希望在您主頁(yè)以外的其他網(wǎng)頁(yè)上進(jìn)行搜索。將搜索欄放置在大多數(shù)頁(yè)面的標(biāo)題中可確保用戶可以從任何站點(diǎn)位置執(zhí)行此操作。 如果搜索對(duì)于您網(wǎng)站的導(dǎo)航至關(guān)重要，并且您希望用戶主要通過(guò)查詢進(jìn)行導(dǎo)航，請(qǐng)將搜索欄置于頁(yè)面中央并將其置于標(biāo)題下方以更加強(qiáng)調(diào)。

3.包括搜索圖標(biāo)。

設(shè)計(jì)師使用圖標(biāo)來(lái)直觀地傳達(dá)按鈕或其他頁(yè)面元素的作用。圖標(biāo)節(jié)省空間并且比文本更容易識(shí)別。放大鏡圖標(biāo)是一種廣泛使用的搜索符號(hào)，因此我們建議您將其放置在您的界面中。有幾種方法可以將此圖標(biāo)添加到您的欄中，您可以將其放在搜索按鈕上：

您可以將其放在搜索框中：

或者你可以把它放在一個(gè)隱藏/顯示整個(gè)搜索欄的按鈕上，我們?cè)谑澜缫吧鷦?dòng)物基金會(huì)的例子中看到過(guò)。這是來(lái)自國(guó)外網(wǎng)站的另一個(gè)示例：

還有一點(diǎn)要注意：如果放大鏡出現(xiàn)在搜索框外，許多用戶會(huì)認(rèn)為它是一個(gè)按鈕，所以如果圖標(biāo)本身不可點(diǎn)擊，請(qǐng)避免這樣做。

4.大小合適。 

搜索欄的大小取決于它在您網(wǎng)站上的重要性以及典型查詢的預(yù)期長(zhǎng)度。 如果搜索是您的主要導(dǎo)航工具，請(qǐng)將其放大并以頁(yè)面加載為中心。如果放置在頁(yè)眉中，欄的大小應(yīng)根據(jù)其同類頁(yè)眉元素確定：大到足以在頁(yè)面的視覺掃描中看到，但又不能大到引起注意。 

酒吧的長(zhǎng)度是另一個(gè)重要的設(shè)計(jì)選擇。一方面，您希望您的文本字段足夠長(zhǎng)以顯示更多或所有用戶輸入的查詢——這讓用戶可以查看他們的查詢并修復(fù)任何拼寫錯(cuò)誤。另一方面，搜索欄不應(yīng)該占用其他標(biāo)題元素的空間。 一個(gè)好的起點(diǎn)是查找或估計(jì)平均搜索查詢的字符長(zhǎng)度。用戶是只輸入了幾個(gè)詞，還是問(wèn)了更長(zhǎng)的問(wèn)題？如果是后者，您可能需要加長(zhǎng)搜索框或?qū)⑵湓O(shè)置為在單擊時(shí)展開。

 5. 考慮添加占位符文本。 

當(dāng)搜索框未獲得焦點(diǎn)時(shí)，占位符文本將顯示在搜索框中。它旨在提示用戶采取行動(dòng)。占位符可以通過(guò)列出示例查詢（如“嘗試帽子、牛仔褲、包……”）或簡(jiǎn)單地說(shuō)明“搜索……”來(lái)為用戶提供有用的提示。 如果要添加占位符，文本應(yīng)顯示為較淺的陰影以將其與鍵入的查詢區(qū)分開來(lái)，并且當(dāng)用戶將注意力集中在框上或開始鍵入時(shí)應(yīng)消失。

 6. 考慮添加自動(dòng)完成功能。

 自動(dòng)完成是幫助完成搜索的另一種方式。當(dāng)用戶鍵入時(shí)，自動(dòng)完成功能會(huì)在搜索下方的菜單中提供建議。預(yù)測(cè)可以根據(jù)您網(wǎng)站的特定內(nèi)容進(jìn)行定制，因此用戶可以確信他們找到了他們想要的內(nèi)容。 不要用過(guò)多的建議淹沒用戶——雖然這取決于您網(wǎng)站的大小和索引內(nèi)容的數(shù)量，但 1 到 10 通常是一個(gè)不錯(cuò)的范圍。 以下是Patagonia電子商務(wù)網(wǎng)站搜索的自動(dòng)完成示例：

允許用戶單擊建議，或者為了使您的界面更易于訪問(wèn)，讓他們使用箭頭鍵在建議列表中上下移動(dòng)并使用“Enter”/“Return”鍵選擇一個(gè)選項(xiàng)。

7.隱藏高級(jí)選項(xiàng)。 

除非您希望您的用戶群通常比普通互聯(lián)網(wǎng)用戶更精通技術(shù)，否則最好隱藏高級(jí)搜索選項(xiàng)，例如類別、過(guò)濾器和精確匹配。這使UI保持清潔和可訪問(wèn)性。 如果您必須包含高級(jí)選項(xiàng)，請(qǐng)考慮將它們放在選擇搜索欄時(shí)出現(xiàn)的隱藏菜單中，或者提供附近的“高級(jí)搜索”頁(yè)面鏈接。

 8. 移動(dòng)設(shè)計(jì)。 

智能手機(jī)和平板電腦的興起全面影響了 UI 最佳實(shí)踐，其中包括站點(diǎn)搜索欄。確保您的搜索框和按鈕足夠大以供查看和選擇。W3C提供了兩個(gè)相關(guān)的可訪問(wèn)性指南： 確保觸摸目標(biāo)至少高 9 毫米，寬 9 毫米。 確保接近最小尺寸的觸摸目標(biāo)被少量的非活動(dòng)空間包圍。 這些準(zhǔn)則適用于所有觸摸屏設(shè)備，無(wú)論屏幕尺寸如何。 

此外，由于空間不足，在移動(dòng)設(shè)備上更容易接受將整個(gè)搜索欄隱藏在搜索玻璃圖標(biāo)后面，并在點(diǎn)擊該圖標(biāo)時(shí)顯示出來(lái)。同樣，這個(gè)圖標(biāo)需要引人注目——一些用戶測(cè)試有助于確保這一點(diǎn)。 通過(guò)搜索保存轉(zhuǎn)化 設(shè)計(jì)站點(diǎn)搜索可能具有挑戰(zhàn)性，因?yàn)樽鳛榛ヂ?lián)網(wǎng)用戶，我們已經(jīng)被這個(gè)功能寵壞了。您經(jīng)常訪問(wèn)的大多數(shù)網(wǎng)站很可能已經(jīng)掌握了它們的搜索功能和設(shè)計(jì)，因此門檻很高（雙關(guān)語(yǔ)）。即使是最流行的網(wǎng)站實(shí)際上也是一個(gè)搜索界面。 這就是為什么最重要的是，您的搜索欄需要簡(jiǎn)單、明顯且易于使用。

如果它運(yùn)作良好，您的用戶就不會(huì)考慮它。您將保持他們對(duì)您的網(wǎng)站和業(yè)務(wù)的信任，并促使他們更接近轉(zhuǎn)化或購(gòu)買。