搜尋是大家頻繁接觸的功能，作者就搜尋框相關的一些特點和細節，為搜尋框的設計師提供一些建議和思考，希望本篇文章能對大家有所幫助。
你可能認為，搜尋不就是一個矩形框+放大鏡圖示再加一個占位符不就搞定了嗎？經過多年的設計工作頻繁設計搜尋功能後，我發現在不同類型的産品中搜尋框的互動方式、視覺樣式都有所不同，且使用者在搜尋前、搜尋中、搜尋後都需要注意使用者在搜尋各個流程中的可能操作，包括正向流程、反向流程。搜尋框的設計并不簡單，很多的細節需要設計師去注意和思考的。下面總結一下我在設計搜尋框的經驗，分享給大家。
一、搜尋的基本屬性
搜尋是使用者将查詢的資訊輸入搜尋器中，搜尋引擎就會在約定的規則下将擷取到的資訊回報給使用者的過程。搜尋是 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、透明度：常用于背景色複雜的場景，目的是為不破壞背景頁面的整體效果，在視覺上更和諧。無外框：用于風格簡潔的大留白的頁面。
五、搜尋的互動
完整的搜尋流程包含了各種細節：例如搜尋欄的形式、光标停留、輸入狀态、異常資料、搜尋結果、二次篩選等等。整個過程包含很多互動的細節設計，下面從激活搜尋欄、輸入回報、觸發方式來展開說明。
1. 激活搜尋欄
搜尋激活指使用者激活搜尋框時出現的搜尋下拉面闆，B 端業務中搜尋激活内容常見以下三種：
1.1 搜尋曆史