適合您電子商務的完美搜索框設計

您是否曾經瀏覽過在線商店或 Marketplace 以搜索產品但無法找到搜索框？ 我們確定你有。

不用說，您在主頁上的站點搜索越突出，您的站點搜索就越有可能被使用。 這意味著您的訪問者無需在您的電子商務網站上瀏覽不同的類別，而是直接使用站點搜索來更快地找到他們想要的產品，而不必浪費時間查看他們不需要的東西。

因此，在搜索是最常見的產品查找方式的行業中，以醒目的設計“推廣”搜索字段並將其放置在戰略位置，尤其是在首頁上，可能是一個好主意。

分類導航

這通常是更有針對性的價格比較網站的情況，只要用戶知道他們想要購買的產品的確切品牌名稱和型號（換句話說，他們甚至在訪問您的網站之前就知道他們想要什麼）電子商務網站）。

另一方面，在用戶喜歡按類別瀏覽的領域（因為他們不知道他們想要的確切產品、名稱或拼寫方式），或者在網站層次結構扁平的情況下，不太顯眼的搜索字段設計可以用於鼓勵按類別瀏覽而不是通過搜索。

例如：時尚和家居裝飾行業，尤其是從用戶的初始偏好和隨後的成功率（搜索後轉化率）來看，都非常喜歡按類別瀏覽。

在設計和實現方面，有多種方法可以使搜索字段在整體設計中脫穎而出。 因此，要使用的確切格式因網站而異，很大程度上取決於搜索字段出現的上下文（換句話說，整體網站設計）。

搜索字段的設計元素

搜索字段有多種設計元素可用於使其脫穎而出，具體取決於您希望鼓勵用戶使用搜索功能的程度。 搜索框設計中影響最大的三個主要元素是：

位置

看看下圖中的亞馬遜。 如您所見，搜索其市場符合亞馬遜的利益，因為它銷售更多，並且在您使用其站點搜索而不是按類別瀏覽時可以更好地指導您。

由於它擁有數百萬種產品，並且考慮到用戶通常在訪問其網站後就已經知道他們想要什麼類型的產品，所以他們將站點搜索放在一個優先的位置，就在中心，幾乎佔據了整個屏幕的寬度。

更重要的是，如果你想突出站點搜索並鼓勵用戶使用它，它必須正常工作。 換句話說：

• 立即顯示結果：您不能讓站點搜索在產品被搜索後加載太長時間。
• 按您想要的任何順序列出結果：請記住，越靠上和越靠左，結果與您的訪問者越相關。
• 體面的圖像質量：請不要像素化圖像！
• 顯示您的產品規格：尺寸、折扣或促銷、可用顏色……所有這些都在您自己的搜索中。
• 為用戶提供在站點搜索本身內添加到購物車的選項：這樣他們就可以購買多種產品，而無需在站點搜索和購物車之間來回切換。

您的網站搜索樣式

最重要的是，一旦單擊搜索框，您的網站圖像就會受到尊重。 為此，必須考慮相當多的因素。

• 顏色：您應該使用與您網站上相同的企業顏色。 嘗試在站點搜索中的某處添加徽標。
• 字體：字體是另一個重要元素； 使用您在網站上使用的相同字體，用於數字、標題、按鈕……
• 按鈕：嘗試在購買或“添加到購物車”按鈕中使用與您網站上的按鈕相同的樣式。
• 其他元素：例如折扣、邊框、使用您在電子商務網站上的相同類別……

尺寸

通過使搜索字段相對較小，其視覺顯著性顯著降低。 許多在線商店尋求提高站點搜索使用率的一件事是增加標題和站點搜索之間的對比度。 例如，正如我們在上面看到的， Amazon的標題為黑色，但站點搜索居中且為白色。

當您結合大小、位置和對比度時，您可以讓搜索框真正脫穎而出，鼓勵搜索成為在您的電子商務網站上查找產品的首選方式。 然而，這需要一個智能的站點搜索，例如 Doofinder 來降低您的跳出率。 如果沒有，這可能成為一把雙刃劍。

主頁上的搜索框設計

尤其是首頁，搜索框的設計更為重要，因為大多數用戶往往一訪問網站就想出他們的產品搜索策略。

根據Baymard Institute的數據， 60% 的用戶會立即將搜索作為移動網站首頁的首選策略。 因此，首頁的搜索欄設計越醒目，用戶就會越多地將其作為搜索的動力，而不是按類別瀏覽。

此外，如果您希望鼓勵在站點搜索中瀏覽而不是按類別瀏覽，那麼在主頁上為站點搜索提供額外的視覺效果是一個好主意。

主頁的差異化站點搜索設計可以通過多種方式完成：從更粗的搜索字段邊框、更具對比的背景顏色、更大的框和字體大小、更生動的“搜索”按鈕……甚至可能使字段鍵盤具有焦點默認情況下。 任何使搜索字段本身脫穎而出的設計修改，而不從根本上改變其位置或視覺風格，都將有助於它脫穎而出。

通過這種方式，搜索字段保持完全可識別，而不會將焦點從其他頁面上移開，但會在主頁上為您提供更多的視覺對比。

這種額外的視覺對比不應該將搜索推廣為網站上的“唯一選項”，而是應該幫助用戶在訪問網站時更容易看到搜索字段。

如您所知……首頁通常包含許多不同的圖形和視覺元素，爭奪用戶的注意力，這意味著後續頁面（例如類別頁面、產品列表或產品頁面）上的內容可能是占主導地位的搜索領域，主頁可能不夠。