• 用戶取消操作時，判斷用戶暫時沒有再次搜索的強需求，即使有，也可以通過搜索入口再次觸發
• 減少用戶回退路徑（搜索頁面層級在用戶視角上沒有嚴格劃分）

除了上述所列的原因，或許還有產品的其他考慮因素（當然也并非所有產品都有仔細考慮），產品可根據不同商業訴求或體驗理解選擇適合的返回流程。

當然，對于簡單的搜索功能而言，也并非必須經過上面的 4 個流程，常見的就是不需要涉及到聯網的搜索功能，比如搜索本地的內容，以下方 iPhone 日歷應用為例，基本流程就是：搜索入口——搜索聯想頁——搜索結果頁。

日歷應用在觸發搜索操作時，并沒有進入搜索推薦頁狀態，因為在這里搜索功能被定義為強工具屬性，不需要具備推薦功能，目標就是幫助用戶快速找到想要的信息，減少搜索過程中的干擾。

03 搜索方式

隨著信息復雜性的提升，在某些產品上，單純的文字搜索未必能滿足用戶的搜索需求。且隨著技術（圖片、語音識別技術）的提升，搜索方式可以拓展的空間被大大增強，搜索方式也是相當多樣，除了最基本的文字搜索，還有掃一掃搜索、語音搜索、拍照/圖片搜索等。

文字搜索，基于用戶輸入文字觸發的搜索，雖然是最基本的搜索方式，但是因為文字指義的復雜性，系統識別用戶的期望操作也并不輕松，用戶的文字搜索可以粗略劃分為精確搜索和模糊搜索。

精確搜索比較好理解，即能精準識別到用戶搜索目標的詞語，一般來說就是高度匹配應用里的信息。比如搜索微信號、訂單號等等。精確搜索能幫助用戶快速定位信息。

模糊搜索即系統本身不知道用戶想搜的具體目標，此時需要通過各種方式將信息和用戶輸入的內容進行匹配。比如用戶想在淘寶內搜索“衣服”，卻輸入英文“yf”，系統也要能進行關聯匹配，此外，用戶搜索還存在各種奇葩操作可能性，但這屬于具體搜索信息策略的方面，不在此贅述。

掃一掃搜索，基于相機掃描，算法識別提供的掃描功能，一般使用在用戶無法通過文字描述的場景，如二維碼/條形碼等。

語音搜索，現階段的語音搜索可以拆解為語音識別+搜索引擎。系統識別用戶錄入的語音，將其轉化為文字，然后根據轉化的文字搜索信息。語音搜索相對于文字搜索而言更加便捷，可以幫用戶省去打字的流程，但是語音識別現階段還不夠準確，易出錯，不過隨著語音技術發展，這些問題都將得到改善。

拍照搜索，基于圖片識別技術，系統通過識別用戶通過拍照或上傳手機里的圖片，幫助用戶搜索，與掃一掃類似，也是常用于很難用文字描述的場景。比如用戶看到一件商品，看到某種植物，無法叫出名字，也很難形容其特征，此時圖片搜索就能派上用場了。

04 搜索元素

搜索組件中，元素也是多種多樣，基本上搜索組件就兩種：

1. 弱化搜索功能——搜索按鈕形態

搜索按鈕形態一般比較簡單，沒有多余的信息組成，點擊搜索按鈕即可觸發搜索操作，常用于搜索行為并不特別強的場景。此時搜索功能往往當作一個備用操作，形式上一般不會過于搶眼。

2. 強化搜索功能——搜索框形態

搜索框形態的組成相對而言比較復雜，里面的信息也有比較多的考究，常見組成是：搜索圖標、搜索暗文、搜索方式、搜索按鈕、搜索類型方式等，但并非每個搜索框都會包含這些元素。

1）搜索圖標

一般用于示意這是一個搜索功能，久而久之，也常常變成了搜索框里的裝飾操作，但并非所有搜索框都需要有圖標示意。

在瀏覽器等產品中，搜索圖標還具備隱藏屬性，比如點擊更換搜索引擎，但是這種搜索隱藏操作可能大部分用戶都沒發現。

此外，搜索按鈕還具備在某些產品上還具備點擊后，直接默認搜索暗文的功能性。例如愛奇藝，點擊右側的搜索按鈕，直接進入搜索結果頁。

2）搜索暗文

一般用于指示用戶可以點擊該位置輸入文本，并且在許多產品上，暗文被進行了拓展。暗文可以分成兩種類型：固定型暗文、推薦型暗文。

固定型暗文：即一句固定的提示文案，比如“搜索您感興趣的內容”、“搜索”，這種屬于基本提示。此外，對于某些內容類型比較多的產品，還有提示搜索內容類型的屬性，比如淘票票的搜索暗文“搜影片、影院、影人、演出、資訊、視頻”。

推薦型暗文：即處于時刻變化中的提示暗文，十分常見，具備搜索商業化引導的高價值?？捎糜谟脩魝€性化搜索引導、廣告位售賣等，暗文內容常常由推薦算法、運營配置的方式決定，推薦算法的準確性也能影響搜索的轉化率。

推薦型暗文一般是與應用的核心內容相結合，比如電商類產品的暗文一般是商品、書籍類產品的暗文一般是書籍。此外，由于暗文的內容不固定，需要注意控制暗文的展示字數，盡量避免文字展示不全的情況，對于搜索體驗來說并不友好。

推薦型暗文一般會自動切換，所以需要注意暗文的輪播時間間隔、輪播速率、輪播方向等影響因素。

輪播時間：比如兩個暗文的輪播時間間隔過短，就不利于用戶從發現——點擊的反應流程、假如時間間隔過長，就不利于推薦轉化（相同時間內推薦的數量更少了）。

輪播速率：輪播速率的快慢會影響用戶的感知，整體而言，也需要保持在一個合適的速率之內，減少動畫效果的突兀感。

輪播方式：一般是從上往下、從下往上、直接切換，盡管一般用戶不會注意輪播方式，但是對于設計師來講，細微的體驗仍然需要注意思考到位。

3）搜索方式

搜索方式一般會以圖標形式展示，常見的搜索方式有掃一掃、語音搜索等。在設計時，需要注意搜索方式的主次關系，一般而言，主要搜索方式都是文字搜索，所以如果沒有特殊必要，優先把文字搜索放在左側。

淘寶將掃一掃放置于左側，而圖片搜索在右側，或許出于區分二者功能屬性的目的。

4）搜索指引按鈕

搜索指引按鈕用于強化搜索行為，但同時也容易產生干擾。只有搜索功能很重要的產品才會放置搜索指引按鈕，一般放置在搜索框右側。

5）搜索類型

搜索類型前置在搜索框中的場景較為少見，這么做需要用戶在搜索之前先關注搜索的類型，適用于對于搜索類型要求較高的場景，比如網易有道詞典，在搜索框左側可以選擇轉換的語言。

05 搜索入口

大部分產品中，搜索欄都是置于導航欄的位置，用戶也早已形成了位置習慣，常見的搜索入口結構有：整欄結構、非整欄結構、按鈕狀態，對于搜索功能的優先層級依次遞減。

當然，也會有比較特殊的搜索入口，將搜索功能當成主 Tab 設計，這種設計強化了搜索的行為引導，而且主 Tab 的形式可以讓整個頁面都展示搜索相關的信息，有利于搜索推薦的曝光。

06 搜索推薦頁

搜索推薦頁是用戶觸發操作的第一個流程（當然，并不是所有應用都有），在大部分互聯網產品中，這個頁面承載著推薦的商業化價值。在此階段，用戶還未輸入內容，所以此階段只是存在搜索需求，但是還無法識別具體搜索目標，此時應用可以向用戶進行搜索推薦，一般會結合用戶搜索歷史、近期熱門搜索等維度進行展示。

1. 操作觸發

由于是點擊搜索觸發，所以展開這個頁面時，光標的焦點需要默認在搜索欄，并且鍵盤需要自動彈起。原因是用戶觸發這個操作時，行為操作已經很明顯，就是使用搜索功能，所以不該讓用戶點擊后，再進行二次觸發。

下面的蓋得排行就是反例，用戶在首頁點擊了搜索框后，鍵盤沒有及時響應彈出，需要用戶再次點擊搜索欄才能觸發鍵盤。

而 Behance 則是在用戶點擊后自動彈出鍵盤，更符合用戶習慣的體驗。

2. 關鍵信息

1）搜索記錄

大部分搜索推薦頁都有搜索記錄，展示用戶搜索的內容，以標簽形式顯示，以時間順序從新到舊排列。應用的搜索記錄一般不會完全展示，常見的不超過兩行，可以滑動查看更多，或者折疊展開。

在展示形式方面，多以列表形式和標簽形式展示，標簽形式理論上會更多，因為可以盡可能減少搜索記錄的高度，讓更多推薦內容有更多的曝光以提升轉化。

搜索記錄會涉及對用戶行為的記錄，關系到用戶的搜索隱私，所以應當允許用戶手動刪除?；诋a品特點，可以選擇在刪除時是否做二次確認。

2）搜索發現

搜索發現是系統基于用戶的搜索記錄，依據算法向用戶展示的搜索關鍵詞推薦，但并不是必需模塊，可以基于產品定位進行考量。由于搜索發現也涉及用戶隱私，但應用一般不會讓用戶直接刪除，所以應當允許用戶對搜索發現進行隱藏，不然極其容易引起用戶的反感。

下方淘寶、京東都有搜索發現，并且也允許用戶進行關閉/顯示的操作。

3）相關推薦

相關推薦不是指某個具體的推薦卡片，是我對搜索推薦頁里面內容推薦的總稱，可以演變成多種推薦形式，比如“熱搜推薦”、“推薦活動”等，而且也可以存在多個推薦類型。相關推薦是應用商業化的重要手段，許多應用都有這種模塊，并且內容形式多樣。

知乎的熱搜就是結合熱搜、時事熱點等進行推薦。淘寶則是以卡片形式進行大量商品推薦。

4）搜索類型

對于搜索類型多樣或者信息量龐大的產品，搜索推薦頁會展示應用的內容類型，用戶選擇類型即可在該類型范圍內搜索，以便用戶在搜索時快速聚焦目標內容所在的類型，同時也便于系統篩選內容。

07 搜索聯想頁

當用戶輸入文字信息，系統會自動將輸入的關鍵詞與庫內信息進行匹配，并按照某種規則排列展示，這就是搜索聯想的狀態。在這個狀態下，應用應當減少多余信息的干擾，聚焦于服務用戶的搜索需求。

1. 文本差異化

當匹配到信息與輸入的文本一致時，一般需要將一致部分的文本進行差異化顯示，大部分處理形式表現為高亮，目的是幫助用戶從大量關聯信息中快速識別相關的信息，同時體現搜索的精準度。

2. 分類展示

當應用內存在多種搜索類型的情況下，單純地展示匹配輸入的關鍵詞并不足以滿足用戶快速查找信息的需求，考慮到清晰展示和快速查找，應用會將搜索的內容分類展示。常見的有豎排（分類標題）、橫排（橫滑 tab）。

3. 凸顯關鍵信息

為了便于用戶找到精準高效的信息或者進行便捷操作，在搜索聯想頁狀態時，當用戶輸入的信息足夠清晰可預測，可以將關鍵信息凸顯呈現，以引起用戶的注意力，在進入搜索結果頁之前就可以提升轉化的可能性。

此外，這種關鍵信息凸顯的形式，在搜索的商業轉化方面也有明顯的作用。

08 搜索結果頁

搜索結果頁是用戶搜索的落腳點，在這個頁面，用戶會有目的性地瀏覽搜索結果，在整個搜索場景，都需要優先匹配高關聯性內容，減少商業化對搜索結果的干預。如果商業化對搜索結果干預過重，不僅會影響搜索效率、精準性、可信度，還會引發用戶對搜索的質疑（如百度的魏則西事件）。

1. 保留搜索文字

當用戶輸入搜索文本，點擊搜索按鈕，就進入了搜索結果頁流程，此時搜索框內應當保留搜索文本，以便于用戶明確搜索的內容（不要依賴用戶的記憶力），同時，也便于用戶再次編輯搜索文本。

1）一鍵清除

考慮到輸入/清除的便捷性，應用也應當提供一鍵清除按鈕，點擊一鍵清除搜索的文本，減少用戶的操作成本。

2）普通文本形式

搜索結果頁的搜索文本的展示一般會有兩種形式：標簽文本形式、普通文本形式。

普通文本形式：用戶輸入文本后，在結果頁以正常的文本形式展示，這種形式最為常見。同樣如果基于體驗，在搜索欄右側應當放置關閉按鈕。

標簽文本形式：用戶輸入文本后，在結果頁以標簽形式展示，標簽右側一般會附帶有關閉按鈕，對于刪除提示而言會更清晰。

2. 結果信息展示

結果信息展示依據產品類型的不同，有很大的差異，很難一一枚舉，但是主要的架構是 3 種：

1）同類信息展示

同類信息展示比較常見，適用于產品結果類型單一的情況，一般會采用同一樣式，信息位置固定，用戶可以沿著的同一瀏覽動線搜尋目標內容。

2）分欄信息展示

分欄信息展示適用于內容類型較多的場景，以欄目劃分信息，不同的欄目下的信息展示形式有所不同，但通過欄目類型，用戶可以快速找到目標內容在哪一欄目，有利于信息聚焦。

3）隨機卡片展示

常用于內容類型極其復雜的場景，如瀏覽器類產品，瀏覽器通過搜索引擎可以搜索不同類型的信息，這些信息無法以同類信息展示、分欄信息展示的形式體現，所以只能以多種不同類型卡片組合的形式展示。

3. 商業&體驗優化

搜索結果頁往往也需要承載相應的商業化目標，在設計形式上也有體現，商業化是大部分產品無法繞過的，在此基礎上，設計師可以通過設計表現自然地融入商業化。

1）首位卡片設計

我們常常能看到搜索結果頁的頭部信息會以特殊設計形式作為處理，在結果頁中，首位卡片設計常常能夠營造氛圍感和官方可信度。搜索首位一直是互聯網廣告售賣中吃香的地位，品牌重視形象曝光，而首位的設計剛好滿足這一點。

除了商業化的好處，首位卡片設計對于用戶關注關鍵信息也有很強的作用，因為這種設計，代表了首位信息的重要性以及權威性，并且還有結合功能玩法的空間。

2）驚喜感展示

搜索結果頁是用戶行為目標相對精準的場景，應用可以獲取用戶相對精準的搜索需求，所以在這個場景可以結合巧妙的玩法，比如搜索驚喜感展示。驚喜感彩蛋在設計時，要注意這是基于用戶行為的，假如沒有用戶精準行為，就不會有很強的驚喜感，甚至會有反效果。

百度在搜索“黑洞”時，搜索結果頁會跳出黑洞畫面，并且將頁面中的其他信息吸收進去。這種設計將黑洞的趣味玩法與用戶搜索的關鍵詞結合在一起，被許多人當作搜索的經典案例。

谷歌在搜索“askew”（傾斜）時，搜索結果頁的畫面會有略微傾斜，與百度同樣的，也是基于用戶搜索的關鍵詞觸發埋藏的驚喜彩蛋，讓用戶會心一笑。

3）輔助搜索決策

搜索除了與設計本身交互行為密切相關外，還與搜索結果的內容本身的體驗相關，當用戶搜索一個關鍵詞時，獲取的內容如果無法幫助用戶更好地篩選、查詢，那么設計體驗本身再好，也挽救不了內容本身的體驗缺失。

淘寶在搜索內容上的體驗比較值得參考：用戶在搜索時，有時候并不知道具體的內容需求，于是會搜索比較寬泛的詞匯，比如搜索“電腦”，電腦是一個很泛的詞語，里面包含筆記本、臺式機、一體機等等，普通用戶本身可能沒有很強的電腦類型的概念，而淘寶的搜索結果頁，會根據一些關鍵詞，展示輔助用戶做篩選決策的分類。

4. 極端情況處理

1）容錯處理

用戶的輸入一定存在千奇百怪的可能性，所以搜索場景應當盡可能具備更強的容錯處理能力，當用戶表述不準確時，加強對用戶搜索目標的預測，并且提供搜索結果指引。

夸克搜索結果頁中，測試搜索了“計設互交”，在判斷我搜索目標是“交互設計”的情況下，優先顯示正常的搜索結果，并且提示我是否確認正在搜索的關鍵詞。

2）搜索異常場景

設計師在設計時，需要注意異常場景的相關提示，例如搜索理論上必然存在無結果的狀態，搜索無結果的空狀態需進行告知。

09 搜索過渡動畫

1. 流程過渡切換

前文介紹了搜索包含幾個流程，雖然是幾個流程，但是對于用戶而言卻是連貫的，所以設計師在搜索時，需要注意這幾個流程的過渡是順暢的、無感知的。

1）優秀的搜索場景過渡

點擊搜索入口后，沒有明顯的頁面切換斷層，而是采用自然銜接的過渡方式，現階段許多產品都已經開始注意這些細節體驗了， 整體搜索流程很順暢。

2）粗糙的搜索場景過渡

點擊搜索入口后，頁面采用普通的頁面從右往左進場，或者生硬的切換，而這相當于將搜索入口和搜索狀態切割成明顯的兩種狀態，即使普通用戶沒有明顯感知，但這在流程上仍然是生硬的，在用戶體驗上仍有優化的空間。

3）搜索按鈕過渡

不僅是搜索框可以做流暢的流程過渡切換，搜索按鈕同樣可以做到自然過渡。

2. 頁面滑動過渡

搜索框一般情況下處于導航欄，在默認首屏狀態下，功能屬性較強，所以需要更顯眼，而用戶如果沒有搜索需求，而是瀏覽頁面時，搜索場景的重要程度也可能按照產品特性而變化，這種變化也可以考慮采用更自然的過渡方式。

比如京東首頁，搜索框由最首屏狀態時的通欄狀態，隨著頁面滑動，過渡為半欄狀態，重要程度發生變化，而這種過渡效果在視覺上十分順滑。

攜程首頁搜索在頁面上下滑動時的過渡也值得參考。

10 結語

本文總結梳理了搜索功能，從搜索方式、元素，到搜索流程，再到搜索過渡，都進行了闡述。搜索是我們日常中頻繁接觸的功能，但即使它常見，設計師在真正設計時也可能無從下手。我側重于從交互體驗層面介紹搜索，因為搜索除了數據匹配精準度、搜索內容廣度之外，搜索體驗的便捷性也會影響用戶搜索的感受。

乍一看，搜索可能就是簡單的輸入操作，但實際上里面包含的細節規則卻很多，所以在設計時需要細心拆分，注意用戶在搜索各個流程中的可能操作，包括正向流程、反向流程。

搜索包含了許多細節元素，并且元素的位置、動畫、交互行為都有許多講究，需要根據具體的產品類型選擇適合的設計方式。

搜索流程是可以被清晰劃分的，當我們了解了搜索流程，就可以理解在搜索不同流程中用戶需求的不同，比如從搜索推薦頁至結果頁，需求清晰程度是從模糊到清晰的。也可以理解為什么大部分應用的搜索設計方式大同小異，并且基于此嘗試挖掘更多搜索體驗的細膩性、可玩性。

搜索過渡動畫是大家最不容易注意到的點，卻可以幫我們判斷一個產品細心程度，我們往往會聚焦于設計的功能性本身，卻容易忽略功能性之外的交互流暢性感知。

最后，希望本文可以對大家有幫助。

本文由 @熱風 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議