UI搜索欄設計5大原則

如果顧客都搜不到想買的東西，你還怎麼指望你的產品能賣出去？搜索功能是營利性 app 和網站上，很基本也很關鍵的功能。在搜索、了解產品時，用戶期盼著流暢的 app 內搜索體驗。而且他們常常根據一兩組的搜索結果，很快地對 app 的好壞做出評價。

完善的搜索功能應該能讓用戶快速簡單地找到他們想找的。這篇文章中，我們會探究如何使之成為可能。

1.搜索欄的放置位置

用戶尋找搜索欄時，可謂是又快又狠。他們常常只是掃描一下頁面去尋找「我可以輸入的那個小框」。

目標：設計能被快速發現而且明晰的搜索欄。

1.1將搜索欄放置在醒目的位置

搜索欄是用戶找產品最快速的一種途徑，所以它是電商app/網站的主要功能，也應該被放置在醒目的位置。將搜索欄放在隱蔽位置的app會讓用戶覺得沮喪，也會讓用戶的操作流程變慢。

UI設計

電商app應該將搜索欄放在的首頁頂部（如果你的首屏很長，那麼在底部也放上搜索欄）。對擁有大量商品的app來說，將搜索欄放在這樣的位置，能夠讓它既明顯又能夠很快被找到。

UI設計

1.2將放大鏡圖標和搜索欄放一起

只有少數圖標具有世界範圍內的廣泛認知度，放大鏡圖標恰恰是其中一個。就算你沒有使用文字標籤說明，用戶也能將放大鏡圖標看作是「搜索」的意思。

你應該使用一個粗線條，最簡化的放大鏡圖標。因為圖形細節越少，認知速度越快。

UI設計

1.3範圍欄（iOS系統特有）

在iOS系統中，搜索欄會伴隨一個範圍欄，這個範圍欄能夠讓用戶快速地選擇搜索範圍。

UI設計

範圍欄可以被加在搜索欄之後，以便用戶能夠再次縮小搜索範圍。

然而，更好的辦法還是優化搜索結果，省得用戶自己給搜索划範圍。

2.理解搜索欄中的問句

搜索欄迫使用戶做更多的工作，不僅因為用戶需要提出問句，他們還需要將它打出來。輸入是一件浪費時間的事情（特別是在手機上）。

目標：嘗試降低用戶輸入數據的難度，同時提供即時的搜索結果。

2.1自動建議

大多數用戶不擅長於構建問句：第一次搜索時，如果他們找不到想要的結果，之後的嘗試也很少成功。事實上，大多數情況是他們直接放棄了。自動建議機制通過用戶輸入的文字，來預測用戶想查找的內容，幫助用戶找到合適的問法。自動建議機制幫助用戶更好地構建問句。

自動建議機制不在於加快搜索的過程，但卻能指導用戶輸入合適的問句。

UI設計

但是確保自動建議機制是有用的。設計糟糕的自動建議機制會使用戶感到困惑。所以請使用拼寫自動更正功能來優化這個工具。

UI設計

2.2近期的搜索記錄

app應該儲存下所有交互過程，包括最近的搜索和購買記錄，以便在用戶下次搜索時供他們使用。這會讓用戶在搜索相同物件時節省不少時間和力氣，也能提升用戶體驗。

UI設計

3.搜索過程

最理想的情況是搜索結果能立刻展現，如果做不到的話，你也應該提供合適的視覺反饋。但要記住，漫長的載入過程會讓用戶沮喪，還會有失去他們注意力的可能性。

目標：讓用戶感知到的搜索時間短於實際時間。

3.1搜索佔位符

一般來說，0.1s以下的延遲不必提供特別的反饋。但如果長於這個時間，你至少要嘗試讓等待的過程變愉悅。這時，臨時的消息佔位符就很適合展示。

UI設計

3.2延遲載入

延遲載入是一種常用的技術。它可以確保展示一部分的內容的同時，另一部分繼續載入。用這種方式頁面載入地非常快，因為最初只需載入少量的產品信息。

UI設計

延遲載入產品時，最好先將產品文字說明載入出來。這樣，沒耐心的用戶也能先通過瀏覽文字信息找尋目標商品，而不必等待所有圖片都載入出來。

UI設計

4.搜索結果的展示

目標：確保搜索結果是有用的。加快搜索過程，同時保持用戶對接下來任務的注意。

4.1前幾條搜索結果具有高度相關性

因為不需滑動就能看到的手機屏幕太小了，你要確保用戶最先能看到一組高度相關的結果（3或5個）；這之後，他們才需要滑動屏幕去瀏覽更多內容。

4.2篩選和分類

在一項關於電商app可用性的研究中，Baymard 機構發現，超過半數的用戶嘗試在目前的頁面「中搜索」，為的是「用搜索過濾掉更多產品」。然而，94%的手機電子商務app或網站不支持這個功能。

用戶會被大量看起來不相關的搜索結果吞沒。過濾和分類選項，能夠幫助用戶縮小和組織搜索結果。否則，用戶就需要不停地滑動小小的手機屏幕。

UI設計

4.3「在其中搜索」區域

這個功能能鼓勵用戶在搜索結果中「再次搜索」，而不是使用傳統的過濾功能。而這個功能會讓你的用戶更好地掌控他的搜索結果。下方你可以看見具有「在其中搜索」功能的頁面示例：

UI設計

4.4有用處的「沒有結果」頁面

用戶搜索時難免會遇到「沒有結果」頁面。缺乏設計的「沒有結果」頁面對於用戶來說是一個死胡同。

UI設計

就算用戶搜索不到任何產品，也要避免讓他在你的 app 中遇到死胡同。當沒有匹配結果時，你應該提供可替換的選擇給用戶，比如相似類別的產品。為了更好的幫到用戶，你應該開發出「智能搜索」功能來。它們能夠覆蓋單雙數修正以及錯誤拼寫糾正等功能。

UI設計

5.產品分類

5.1不友好的分類目錄

用戶在理解那些，不按照他們期待的方式排列的分類目錄時，會很吃力。分類目錄應該做到明確而且沒有重疊的部分。因為當用戶被搜索結果折騰得疲憊不堪時，目錄會是他們最後的招數了。

UI設計

結論

鑒於目前30%的網路購物行為發生在手機端上，電商 app 的擔子從未如此之重。你的 app 需要包含各種類型的搜索方式，也要給用戶提供相關的搜索結果。當在手機上購物變得簡單時，用戶才更有可能用手機來購買，而不僅僅是搜索。