- 相關推薦
搜索框設計和布局的方法
搜索框是網站上最重要的元素之一。無論您擁有什么類型的業務，擁有精心設計的搜索框都是至關重要的，以便訪問者可以輕松找到所需的內容。這并不意味著只要添加搜索功能，甚至不考慮它的外觀就足夠了。那么在設計搜索框時你需要做什么？下面是小編整理的，歡迎大家閱讀！更多相關信息請關注相關欄目！
您需要考慮功能，用戶友好度，美觀性以及搜索框的位置。這樣做可以改善您網站上的用戶體驗，甚至可能導致轉化次數增加。
雖然根據您的需求和目標，確切的建議可能是主觀的，但有一些一般技巧可用于不同類型的網站。所以這里是搜索框設計和布局中的一些最佳做法：
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％。
這種變化表現得很好的原因是因為游客被給了一個明確的行動路線，他們能夠快速找到他們正在尋找的內容。在以前的設計中，游客必須確定他們正在尋找什么。為了更好地引導游客，他們決定覆蓋各種各樣的地點和類型的住宿。
但請務必記住，此選項可能不適用于所有類型的網站。例如，電子商務店可能無法使用這種技術的訪問者更有效地進行搜索。但對于房地產公司和服務相關業務，下拉式搜索功能可能是完美的解決方案。
【搜索框設計和布局的方法】相關文章：
如何設計搜索框07-21
該如何改進設計搜索框07-30
如何設計一個完美的搜索框08-02
網頁設計布局方法11-10
如何個網頁設置搜索框10-08
jquery+php實現搜索框自動提示07-16
Excel改變選中框的顏色的方法08-24
網頁設計的布局08-13