搜索是大家頻繁接觸的功能，作者就搜索框相關的一些特點和細節，為搜索框的設計師提供一些建議和思考，希望本篇文章能對大家有所幫助。

你可能認為，搜索不就是一個矩形框+放大鏡圖標再加一個占位符不就搞定了嗎？經過多年的設計工作頻繁設計搜索功能后，我發現在不同類型的產品中搜索框的交互方式、視覺樣式都有所不同，且用戶在搜索前、搜索中、搜索后都需要注意用戶在搜索各個流程中的可能操作，包括正向流程、反向流程。搜索框的設計并不簡單，很多的細節需要設計師去注意和思考的。下面總結一下我在設計搜索框的經驗，分享給大家。

(資料圖片)

一、搜索的基本屬性

搜索是用戶將查詢的信息輸入搜索器中，搜索引擎就會在約定的規則下將獲取到的信息反饋給用戶的過程。搜索是 B 端產品中非常重要的一個功能模塊，通過搜索框用戶可以快速找到或者篩選出自己想要的內容，在引導用戶走向方面起到了絕對性的作用。

1. 用戶分層

體驗設計中有個概念叫用戶分層，即便是同一個頁面，我們也需要去細分不同的場景對用戶做分層，為不同的用戶做設計，搜索功能就是最好的為有明確目標的用戶分層的設計。搜索功能的用戶分層可分為幾種場景：

有明確想搜的內容并記得所有關鍵詞有明確想搜的內容但記不清所有關鍵詞無明確想搜的內容

搜索首先要確定哪幾個字段可以被搜索到，名稱？編號？等等…有明確目的型用戶在進行了搜索這個行為后，便生成了搜索歷史。因此，我們可以通過挖掘用戶搜索行為背后的目的，來分析為什么使用不同的布局。模糊搜索使用的頻率居多，畢竟有時候用戶不一定可以精準的記住想要搜索的準確信息。不過也不是絕對的，兩者皆可選擇，可根據產品場景選擇。

2. 搜索的作用

2.1 降低用戶的行為門檻

搜索功能可以簡單地輸入，快速輸出，只要幾個關鍵字就可以獲得符合用戶需求的內容，將原有的用戶行為成本轉移給系統，從而讓使用體驗更加快捷、輕松。

同時語音輸入和拍照搜索進一步降低了用戶行為門檻。

2.2 減少用戶操作，縮短行為路徑

搜索功能可以幫助用戶快速定位信息，從而提高了用戶對內容的觸達效率。常見的例子就是：bir 用戶有明確的購物需求時，不需要一步步點擊商品分類，選擇商品類型、品牌等信息，就可以快速直達自己所需的商品。

所以，搜索框的體驗如何，決定著B端產品解決問題的能力、效率以及用戶的使用頻率。

好的搜索框一方面能幫助用戶節約時間成本，讓用戶在大量且復雜的信息中篩查所需目標，提升用戶體驗；另一方面，還能協助產品收集用戶行為目標并做好數據埋點，為后期的更新迭代提供強有力的依據。

除了設計方式外，搜索還涉及到結果信息的數據匹配規則，受到算法精準性、商業化干預程度的影響，設計師同樣需要關注搜索結果如何更好地匹配用戶的精確搜索、模糊搜索需求，以從信息設計層面提升用戶體驗。

二、搜索的流程

搜索流程，即搜索前、搜索中、搜索后的頁面跳轉以及搜索框形態的變化。

對應的就有：搜索入口——搜索推薦頁——搜索聯想頁——搜索結果頁——搜索結果頁返回。

設計師想要設計流暢的搜索體驗是無法避開梳理搜索流程的，考慮完整的搜索鏈路和用戶關鍵體驗路徑，并且設計出對應的所有細節，將搜索功能的價值發揮到最大化。

對于搜索系統來說，整個流程可以分為三步，分別是：

三、搜索的 B 端應用場景

B 端業務中搜索使用的場景有兩類：一類是全局搜索，一類是頁面局部搜索（常見的有列表搜索、表單搜索）。

1. 全局搜索

對于B端系統中模塊分類較多，所涉及到的內容比較全面的，一般會選擇全局搜索，全局搜索是通過關鍵詞匹配全局范圍內的信息來搜索的。

優勢：無學習門檻，用戶無需考慮內容對應的分類只需輸入關鍵詞；劣勢：精準度不夠高；搜索出來內容泛；需用戶二次查找目標內容。

注意：設計全局搜索時要注意搜索后的結果展示邏輯，如果分類較多，界面還可以根據分類tab分別歸類不同。

tips：搜索功能在頁面中的重要程度及搜索范圍，決定了搜索的位置和樣式。

目前大部分網站在布局搜索框位置時，大致遵循以下幾個規則：頁面居中、頁面頂部居中、頁面頂部右邊、頁面頂部左邊。

知乎的搜索入口位于頂部導航欄的顯著位置，引導用戶進行搜索，并且搜索框內的占位文字根據算法會間隔一段時間改變，引導用戶發現新的內容，促進用戶在知乎上的使用時長。

2. B 端全局搜索入口的樣式

2.1頂部導航欄搜索框

最常見的搜索方式之一，將搜索以輸入框的形式居于頁面頂部（狀態欄或標題欄下方），在視覺上非常醒目，用戶進入應用即能快速找到，很符合用戶的視覺瀏覽動線，也是 C 端產品提高轉化率的流量入口。

2.2 “放大鏡”圖標入口

形態相對比較簡單，通常以“放大鏡”樣式的 icon 出現在界面右上角，視覺上不會過于突出，常用于搜索行為不是特別頻繁的場景，需點擊后才會跳轉至搜索框頁面。

Icon 搜索入口相較于上述提到的類型在視覺引導方面略遜一籌，相對弱化了搜索功能，但節省了更多的導航欄空間，呈現位置比較靈活，可單獨呈現、也可與其多個其他功能 icon 并列組合展示。

3. 頁面局部搜索

指的是在頁面中的某個模塊加入搜索的功能。常見在數據列表頁面加入搜索的功能，搜索的目標只在該模塊該內容中進行搜索，搜索的信息具有局限性，當然也是更加準確地搜索用戶想要的目標信息。下圖是一個美團商家后臺的列表頁面，此頁面加入了搜索的功能。

另外，B端常見在表單頁面加入搜索的功能，搜索的目標只在表單選擇內中進行搜索，搜索的信息同樣具有局限性，可以通過控制某個字段或者某幾個字段的信息來展開搜索。

4. 同一頁面多個搜索入口

B端業務中復雜的場景中存在同一個頁面中有多個搜索入口，設計前需梳理清楚每一個搜索入口的交互邏輯，不同搜索入口覆蓋的搜索范圍、搜索過程、搜索結果是否一致，在占位文本上也需體現出該搜索入口的搜索內容。

四、搜索的類別

1. 根據搜索結果分類

1.1 模糊搜索

模糊搜索是用戶搜索意圖不明確時，將用戶的查詢與待檢索的內容進行模糊匹配。

模糊搜索無法精確理解用戶的查詢意圖，搜索結果可能有大批量用戶不想要的信息，使用模糊搜索時一定要結合實際場景，慎重使用。

優點：只要有相關的內容都會被檢索出來，減少了精準搜索帶來的記憶負擔；

缺點：容易把相關的信息也帶出來，例如檢索186，把相關號碼也匹配出來。

1.2 精確搜索

精確搜索是指用戶在搜索時，針對某一數據字段搜索，來查找所需要的數據。

根據業務場景不同，我們會查找某一字段，或者是用標簽切換不同字段來查找。可以幫助用戶在巨大的信息池中縮小目標范圍，快速而準確的定位到目標數據，并速獲取需要的信息。

優點：搜索匹配精準度高。

缺點：每次只能對單一條件進行搜索。

1.3 總結：

我們可以根據產品的發展階段、需求側重、用戶的專業度和使用習慣來綜合決策使用哪一種方式更合適。如果側重查詢效率且用戶是有專業門檻的使用者時，可以優先考慮精確搜索；如果側重查詢結果的豐富度，可以優先考慮模糊搜索。

2. 根據搜索欄表現形式分類

基于搜索欄的表現形式，可以分為以下四種類型：單屬性搜索、切換屬性搜索、多屬性模糊搜索以及多屬性組合搜索。

類型之間沒有優劣之分，根據業務場景使用對應的類型即可。

2.1 單屬性搜索

單屬性精確搜索：通過某個特定屬性就可以快速定位到目標數據，具有唯一識別性的、高使用頻率的、對用戶決策有意義的。

適用場景：表格單一數據信息特征突出，可以用此數據標簽快速定位目標數據。

2.2 切換屬性搜索

切換屬性搜索也被稱為定向搜索，是由用戶主動選定搜索范圍后再進行搜索；

優勢：搜索精準度高。

劣勢：增加了部分用戶的學習成本及操作步驟。

適用于注重搜索結果的精準性或展示產品搜索能力等場景，定向搜索適用的幾種場景：

a、產品數據量足夠大且重搜索功能，用戶對于搜索有明確目標，定向可以幫助用戶提高搜索的精準范圍和效率；

b、搜索時輸入的內容無法通過同一套搜索交互方式和后臺計算邏輯承載；如單次搜索和批量搜索的輸入格式不同，搜索結果存在多樣性；

c、需外露產品亮點功能，有多個常用的搜索屬性，對于前置條件的數據計算能力和開發成本更高。

常見的切換屬性搜索的三種設計形式：

2.2.1.下拉框型

明確并固定選項類別，降低用戶操作難度。下拉篩選適合的選項類別有限，不適合多類別、復雜維度的分類。

2.2.2. Tab 型

平鋪展示搜索條件內容，每個 Tab 標簽代表一個篩選維度，操作便捷。Tab 標簽的數量不宜過多。

2.2.3. 組合型

B 端類產品數據量豐富，在實際使用時，簡單的方式很難全面覆蓋到各個搜索場景，精準定位搜索結果。所以通過多個篩選維度的結合，形成多屬性的組合搜索，能夠大幅提升搜索結果的準確性。

切換屬性高級搜索

B 端系統還有一種比較常見的搜索類型，是在定向搜索的基礎上，進一步豐富了搜索選項，比如指定搜索的時間范圍、數據類型等，設置的選項越詳細越能夠提升搜索結果的效果和準確性。

在設計時需要注意，B 端系統用戶角色多，層次不同，所以更加需要注重搜索前的引導，針對搜索規則、搜索限制等，應該適時的以簡練易懂的語言提示。

2.3 多屬性模糊搜索

多標簽模糊搜索：表格多個數據都具有特征，往往業務要求對數據的精確度較高。

適用場景：業務類型多樣用戶可能記憶不精確且有多個數據特征，對搜索的便捷性要求高精確性要求低。

2.4 多屬性組合搜索

多屬性組合搜索：可以輸入多個字段進行組合搜索（取并集），對空間的利用率高，適合更加復雜的列表內容。

適用場景：綜合篩選項，對空間的利用率高，多標簽組合搜索可以得到較為精準的搜索結果。

搜索欄設計

聊了這么多搜索內容，與設計師密切相關且對外輸出的首要就是搜索欄設計。

對于用戶來說，搜索是為了解決用戶明確或者不明確的搜索需求，讓用戶能夠快速準確搜到想搜的內容。設計欄設計的目的就是，讓搜索能夠提高用戶獲取信息、內容的效率。

3. 常見搜索框設計樣式1、填充色：通常選用與頁面背景顏色反差較大的顏色作為搜索框的填充色，方便用戶查找。2、線框：多用于干凈簡潔的背景頁面。3、投影：常用于風格簡潔輕量的風格頁面，同時搜索功能級別較高的場景。4、透明度：常用于背景色復雜的場景，目的是為不破壞背景頁面的整體效果，在視覺上更和諧。無外框：用于風格簡潔的大留白的頁面。