當前位置:才華齋>設計>網頁設計>

搜尋框設計和佈局的方法

網頁設計 閱讀(4.52K)

搜尋框是網站上最重要的元素之一。無論您擁有什麼型別的業務,擁有精心設計的搜尋框都是至關重要的,以便訪問者可以輕鬆找到所需的內容。這並不意味著只要新增搜尋功能,甚至不考慮它的外觀就足夠了。那麼在設計搜尋框時你需要做什麼?下面是小編整理的,歡迎大家閱讀!更多相關資訊請關注相關欄目!

搜尋框設計和佈局的方法

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

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

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%。

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

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