搜尋框是網站上最重要的元素之一。無論您擁有什麼型別的業務，設計精良的搜尋框都是必不可少的，以便訪問者可以輕鬆找到他們正在尋找的內容。 這並不意味著設計者只需新增一個搜尋功能，而不考慮它的外觀。您需要考慮功能，多使用者友好，美觀，甚至搜尋框的位置。這一切都是為了提高您網站上的多使用者體驗，甚至可以提高轉化次數。那麼，在設計搜尋框時您需要做什麼？雖然根據您的需求和目標，確切的建議可能是主觀的，但有一些一般的提示可以適用於不同型別的網站。怎麼樣設計網頁的搜尋框？以下是搜尋框設計和展示位置的一些最佳做法：

　　1. 使它突出

　　搜尋框設計中的第一個也是最重要的規則是使其顯而易見。您可能過於專注於設計美學，您建立一個搜尋框，與網站的其餘部分融合。但重要的是要記住，您要為想在您的網站上找到某些內容的多使用者新增一個搜尋框。讓他們尋找搜尋框的位置不會有任何意義，甚至可能對他們的體驗產生負面影響。

　　這並不意味著您必須在美學上妥協。設計一個搜尋框，需要讓它看起來美觀同時仍然突出，足以讓人們注意到。因此，框的大小應該很大，但不能太大，因為它佔用了頁面上太多的空間。顏色應該是對比的，但仍然與頁面上使用的其餘顏色互補。

　　下方例子是一個很好的例子，因為白色與頁面的藍色對比，同時仍然與頁面設計中使用的其他顏色對齊。搜尋框的大小不會太大，但仍然足夠突出，以便人們在進入網頁後立即注意到。

　　2. 突出顯示提交按鈕

　　如前所述，搜尋框的整體目的是使網站訪問者更容易地搜尋。避免過度複雜的事情與微小的提交按鈕，多使用者必須專注於點選。使提交按鈕脫穎而出提高了搜尋框本身的可見性，也使多使用者更容易點選。無論您選擇使用放大鏡圖示還是在提交按鈕中拼出 “提交”，都是由您決定的。但是，重點放在按鈕的大小和顏色，以確保多使用者在搜尋欄位中輸入後沒有問題。一些網站用到放大鏡圖示為遊客搜尋的東西，這可能被證明對於網站美學有很大的好處，如在 Levi’s Strauss 的情況。但這不是一個最佳的搜尋框設計示例。

　　3. 將它放在多使用者最習慣的位置

　　有一個關於在網站上放置搜尋框的最佳地方的爭論。但是，如果您看看一些最熱門的網站，您會注意到，搜尋框通常放置在頁面的頂部中心或右上角。這從 SLI 系統公佈的研究中是顯而易見的。分析發現，54％的零售商將搜尋框放在右上角，30％在中心，只有 16％在左邊。

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

　　無論您選擇左，右還是中心; 確保它是朝向頁面的頂部，因為這是訪問者更可能掃描的位置。您會好的進行 A / B 測試不同的搜尋框佈局，然後確定這個位置似乎是為您執行最好的。

　　4. 將自動完成與圖形組合

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

　　5. 避免隔離或過度擁擠

　　第一點提到了使搜尋框突出的重要性。這意味著您應避免使用圖示或其他可能會使訪問者從搜尋框分散注意力的元素來過度擁擠周圍區域。搜尋框需要確定優先順序和重點。同時，避免過度使用搜尋框，因為您可能最終將搜尋框隔離到難以找到的程度。

　　如下圖所示，是一個精心設計的搜尋框的一個很好的例子，沒有太多的元素擁擠它放置的區域。但您仍然可以看到它的頁面左側中心，而不是放置在某個地方，多使用者將很難找到。提交按鈕也與網站上的其他顏色形成對比，使其脫穎而出。

　　6. 選擇擴充套件搜尋框

　　當您在尋找節省空間的方法，同時仍然為多使用者顯示搜尋框時，您可以選擇不斷增長的搜尋框。這是一個理想的選擇，網站的搜尋可能不是太重要，但您仍然想給多使用者選擇搜尋的東西。而不是隻新增一個放大鏡圖示，您會新增一個小搜尋框旁邊作為一個視覺線索的網站訪問者。當多使用者單擊欄位時，該框將展開，並使多使用者能夠輸入他們需要的字詞。如果您有更多關於 WordPress 外貿獨立站網站建設（定製網站、 woocommerce 模板網站）、廣告設計包年服務 (經濟套餐) 、 WordPress 站群網站最佳化、 logo 設計、品牌設計、印刷、 WordPress APP/WordPress 微信開發等產品服務的需求，歡迎諮詢跨飛獨立站 WooCommerce 官網，新上線企業 VI 設計套餐和 WordPress 站群網站營銷推廣系統（強）！

　　7. 考慮新增一個下拉選單

　　在搜尋框旁邊新增一個下拉功能對於某些網站可能是一個好主意。它給多使用者一種方向感，並給他們關於尋找什麼的線索。這一策略證明對巴西房地產公司 Casa Mineira 的成功。網站上進行的案例研究中，將標準搜尋框替換為下拉選單有助於生成更多潛在客戶。事實上，變化導致比以前多 57.25％的潛在客戶。

　　現在，您可以藉助示例和提示更好地瞭解搜尋框設計和佈局。那麼您從這學到了什麼？您可能已經注意到對搜尋框的突出和可見性的壓力。這意味著搜尋框的顏色對比，美觀和尺寸是一些最重要的方面。您的焦點應該讓功能與美學結合，這可能不容易執行。有關於搜尋框設計的任何問題？ 請隨時留下評論。