搜索框設計和佈局的方法

搜索框是網站上最重要的元素之一。無論您擁有什麼類型的業務，擁有精心設計的搜索框都是至關重要的，以便訪問者可以輕鬆找到所需的內容。這並不意味着只要添加搜索功能，甚至不考慮它的外觀就足夠了。那麼在設計搜索框時你需要做什麼？下面是小編整理的，歡迎大家閲讀！更多相關信息請關注相關欄目！

您需要考慮功能，用户友好度，美觀性以及搜索框的位置。這樣做可以改善您網站上的用户體驗，甚至可能導致轉化次數增加。

雖然根據您的需求和目標，確切的建議可能是主觀的，但有一些一般技巧可用於不同類型的網站。所以這裏是搜索框設計和佈局中的一些最佳做法：

1、使它突出

搜索框設計中的第一個也是最重要的規則是使其容易引人注目。您可能會專注於設計美學，您可以創建一個與網站其他部分相融合的搜索框。但請務必記住，您正在為想要在您的網站上找到某些內容的人添加一個搜索框。讓他們搜索搜索框不會有意義，甚至可能對他們的經驗產生負面影響。

這並不意味着你必須完全妥協美學。來看看一個設計，看起來對你現有的網站設計，而仍然足夠突出，讓人們注意到的設計。所以盒子的大小應該很大，但不要太大，因為它佔用了太多的頁面空間。而顏色應該是對比，但仍然補充頁面上使用的其餘顏色。

在百思買的搜索框是一個很好的例子作為對比的白色對頁面的藍色，同時仍然在網頁設計中使用的其他顏色排列。搜索框的大小不是太大，而仍然足夠突出，使人們在進入頁面後立即注意到。

2.突出顯示提交按鈕

如前所述，搜索框的全部目的是讓網站訪問者更容易。避免使用用户必須關注的微型提交按鈕來過度複雜的事情，以便點擊。使提交按鈕突出提高了搜索框本身的可見性，也使用户更容易點擊。

您是否選擇使用放大鏡圖標或在提交按鈕中拼出“提交”，取決於您。然而，關注按鈕的大小和顏色，以確保用户在輸入搜索字段後無需找到它。向他們説明他們在輸入他們正在尋找的內容後要做什麼。

一些網站甚至只能放大鏡圖標，以供訪客搜索。這可能證明對於網站美學而言是非常有利的，就像Levi's Strauss一樣。但這不是一個最佳搜索框設計的例子。

雖然這在設計方面看起來不錯，但對於訪問者來説這可能是不方便的，因為他們在點擊放大鏡圖標後必須等待搜索框加載。這可能令人沮喪，特別是如果您從連接較慢的地方訪問該網站。而不是單獨加載，可能會更好的是在放大鏡放在相同位置的搜索框展開。

當被困在有限的空間，但搜索是重要的，它可以很好地融入到頂部的導航。這正是他們在移動網站上所做的一切。

另一方面，Xero鞋子根本沒有提交按鈕。訪問者必須在搜索文件中輸入關鍵字，然後按Enter鍵才能搜索網站內的某些內容。現在您可能會認為只要按Enter鍵即可開始搜索，那麼其他訪問者呢？其中一些可能是專門搜索提交按鈕，可能難以使用這種類型的設計進行搜索。

亞馬遜的提交按鈕在橙色中相當突出，而搜索框的其餘部分是白色的。提交按鈕的顏色也與網站標題的較暗顏色形成對比。因此，儘管他們只使用放大鏡圖標作為提交按鈕，但與Levi的示例不同，它仍然顯着地可見。確保圖標被填充，因為這將增加可見性。

3.放置用户最可能看的`地方

關於在網站上放置搜索框的最佳位置，正在進行爭論。但是，如果您瀏覽一些最受歡迎的網站，您會注意到，搜索框通常位於頁面頂部中心或右上角。這從SLI系統公佈的研究中可以看出。分析發現，54％的零售商將搜索框放在右上方，30％位於中心位置，左側僅佔16％。

這意味着訪問者可能希望在您的網站右上方找到搜索框。將其放置在意想不到的地方意味着用户可能需要額外努力才能找到搜索框。儘管如此，使用熱圖或眼睛跟蹤工具來研究訪客活動仍然是個好主意。這將幫助您確定他們最有可能看到的位置，幫助您瞭解您應該將搜索框放在您的網站上。

無論你選擇左，右還是中間; 確保它位於頁面頂部，因為這是訪問者根據NN Group眼動跟蹤研究最有可能首先掃描的地方。您可以很好地對不同的搜索框展示進行A / B測試，然後確定哪個位置似乎對你來説最好。

以下是Get Plus關注者位於頁面右側的搜索框的示例。

EBay的搜索框位置位於頁面的中心，它的顯着位置是訪問者首先注意到的網站之一。

4.將圖形自動完成

您的網站可能在其搜索框中使用自動完成功能的62.5％之中。為了獲得競爭優勢，您可以通過添加產品的圖像預覽以及搜索功能中的自動完成建議來進一步增強功能。這是因為只有28.2％的參與網站正在實施此功能。

為進一步製作自動完成圖形的案例，您可能需要查看LED Hut的情況。在為自動完成建議添加圖像預覽之後，LED照明提供商將其搜索轉換率提高了200％。當您將圖像預覽添加到搜索建議中時，它將如何顯示。

5.避免隔離或過度擁擠搜索框

第一點提到使搜索框顯着的重要性。這意味着您應避免過度擁擠圖標或其他元素，從而使訪問者從搜索框中分散注意力。搜索框需要優先考慮並專注於此。同時，避免過度使用，因為您可能會最終將搜索框隔離到難以找到的程度。

Snow and Rock的搜索框是精心設計的搜索框的一個很好的例子。正如你可以在下面的圖像中看到的那樣，沒有太多的元素擠在被放置的區域。但是，您仍然可以看到頁面的中心左側，並且不會放置在用户將難以找到的位置。提交按鈕也與網站上的其餘顏色形成鮮明對比，使其脱穎而出。

6.選擇擴展搜索框

當您正在尋找方法來節省空間，同時仍然使搜索框突出顯示給用户時，您可以選擇不斷增長的搜索框。這是搜索可能不太重要的網站的理想選擇，但您仍然希望為用户提供搜索內容的選項。而不是僅添加放大鏡圖標，您將在其旁邊添加一個小型搜索框，以作為網站訪問者的視覺線索。當用户單擊該字段時，該框將展開，並使用户能夠輸入他們需要的術語。

這是Net-a-Porter的一個很好的例子。如果您看網站的右上角，您會看到搜索框是可見的但不是太大。有一個放大鏡圖標，供用户識別它是一個搜索選項。

但是，一旦您點擊該字段，搜索框就會展開，您可以輸入所需的搜索字詞。美觀和可用性的這種組合對於需要在主頁上包含大量元素的網站是非常好的，因為它可以幫助您節省空間，而不會影響搜索框的可見性。

7.考慮添加一個下拉菜單

搜索框對於已經有一些想法他們正在尋找的人來説是存在的。但是那些誰不太確定他們在尋找什麼呢？您可能擁有自動完成建議功能，但在搜索框旁邊添加一個下拉功能可能是一些網站的好主意。它為用户提供了方向感，併為他們提供了尋找內容的線索。

這個策略證明是巴西地產公司Casa Mineira成功的。在網站進行的案例研究中，用下拉菜單替換標準搜索框有助於產生更多潛在客户。事實上，這種變化導致的線索比以前高出57.25％。

這種變化表現得很好的原因是因為遊客被給了一個明確的行動路線，他們能夠快速找到他們正在尋找的內容。在以前的設計中，遊客必須確定他們正在尋找什麼。為了更好地引導遊客，他們決定覆蓋各種各樣的地點和類型的住宿。

但請務必記住，此選項可能不適用於所有類型的網站。例如，電子商務店可能無法使用這種技術的訪問者更有效地進行搜索。但對於房地產公司和服務相關業務，下拉式搜索功能可能是完美的解決方案。