本文主要從交互設(shè)計的角度，討論搜索的交互行為、信息組織形式與規(guī)則本身，從用戶操作行為的維度提升搜索的體驗(yàn)。

搜索概述

搜索是許多應(yīng)用的必備功能，能幫助用戶從紛繁復(fù)雜的信息中找到目標(biāo)內(nèi)容，在我們?nèi)粘Ｊ褂玫膽?yīng)用中，搜索功能的設(shè)計方式各式各樣，交互體驗(yàn)也稂莠不齊。

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

本文主要從交互設(shè)計的角度，討論搜索的交互行為、信息組織形式與規(guī)則本身，從用戶操作行為的維度提升搜索的體驗(yàn)。下面對搜索功能進(jìn)行了梳理和總結(jié)，希望可以幫助大家更好地了解搜索功能的流程和設(shè)計。

搜索流程

搜索功能是有完整脈絡(luò)的，即用戶從觸發(fā)搜索開始，就會有一套習(xí)慣的體驗(yàn)流程。盡管從用戶的角度，未必對搜索的流程有清晰的流程感受，但從設(shè)計師角度，想要設(shè)計流暢的搜索體驗(yàn)是無法避開梳理搜索流程的，因?yàn)檫@對于設(shè)計師考慮完整的搜索鏈路和用戶關(guān)鍵體驗(yàn)路徑來說尤為重要。

在大部分互聯(lián)網(wǎng)產(chǎn)品中，搜索基本可以分為 4 個流程，大部分應(yīng)用都圍繞這 4 個流程進(jìn)行設(shè)計。分別是：搜索入口——搜索推薦頁——搜索聯(lián)想頁——搜索結(jié)果頁（或具體結(jié)果詳情頁）。

這里雖然被拆分成 4 個流程，但并不能簡單理解為 4 個頁面，因?yàn)槲幢匦枰婕暗巾撁嫣D(zhuǎn)，具體下文會進(jìn)行闡述。另外，在這 4 個流程中，還涉及到流程之間過渡的流暢性等體驗(yàn)點(diǎn)，以達(dá)到更自然的流程流暢無感知狀態(tài)。

正向流程我們比較了解，因?yàn)檫@基本上都是用戶的必經(jīng)路徑，而搜索還需要考慮到反向流程，即用戶從搜索結(jié)果頁返回時，應(yīng)該返回至什么頁面，是否會影響用戶觸發(fā)再次搜索操作？

常見的搜索返回流程有：

第一種：搜索結(jié)果頁——返回搜索推薦頁——返回搜索入口

第二種：搜索結(jié)果頁——返回搜索入口

返回流程的路徑區(qū)別主要是：取消搜索行為時，是否需要返回搜索推薦頁？這兩種路徑，均有產(chǎn)品使用，也可能基于不同的考慮。

第一種：搜索結(jié)果頁——返回搜索推薦頁——返回搜索入口。可能的原因：

• 符合移動端的原路返回邏輯（哪里來回哪里去）
• 符合商業(yè)化規(guī)則，返回至搜索推薦頁，多一層頁面的曝光機(jī)會
• 便于用戶觸發(fā)再次搜索的行為

第二種：搜索結(jié)果頁——返回搜索入口?？赡艿脑颍?/p>

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

除了上述所列的原因，或許還有產(chǎn)品的其他考慮因素（當(dāng)然也并非所有產(chǎn)品都有仔細(xì)考慮），產(chǎn)品可根據(jù)不同商業(yè)訴求或體驗(yàn)理解選擇適合的返回流程。

當(dāng)然，對于簡單的搜索功能而言，也并非必須經(jīng)過上面的 4 個流程，常見的就是不需要涉及到聯(lián)網(wǎng)的搜索功能，比如搜索本地的內(nèi)容，以下方 iPhone 日歷應(yīng)用為例，基本流程就是：搜索入口——搜索聯(lián)想頁——搜索結(jié)果頁。

日歷應(yīng)用在觸發(fā)搜索操作時，并沒有進(jìn)入搜索推薦頁狀態(tài)，因?yàn)樵谶@里搜索功能被定義為強(qiáng)工具屬性，不需要具備推薦功能，目標(biāo)就是幫助用戶快速找到想要的信息，減少搜索過程中的干擾。

搜索方式

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

文字搜索，基于用戶輸入文字觸發(fā)的搜索，雖然是最基本的搜索方式，但是因?yàn)槲淖种噶x的復(fù)雜性，系統(tǒng)識別用戶的期望操作也并不輕松，用戶的文字搜索可以粗略劃分為精確搜索和模糊搜索。

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

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

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

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

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

搜索元素

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

1. 弱化搜索功能——搜索按鈕形態(tài)：

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

2. 強(qiáng)化搜索功能——搜索框形態(tài)：

搜索框形態(tài)的組成相對而言比較復(fù)雜，里面的信息也有比較多的考究，常見組成是：搜索圖標(biāo)、搜索暗文、搜索方式、搜索按鈕、搜索類型方式。

搜索圖標(biāo)：

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

在瀏覽器等產(chǎn)品中，搜索圖標(biāo)還具備隱藏屬性，比如點(diǎn)擊更換搜索引擎，但是這種搜索隱藏操作可能大部分用戶都沒發(fā)現(xiàn)。

搜索暗文：

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

• 固定型暗文：

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

• 推薦型暗文：

即處于時刻變化中的提示暗文，十分常見，具備搜索商業(yè)化引導(dǎo)的高價值。可用于用戶個性化搜索引導(dǎo)、廣告位售賣等，暗文內(nèi)容常常由推薦算法、運(yùn)營配置的方式?jīng)Q定，推薦算法的準(zhǔn)確性也能影響搜索的轉(zhuǎn)化率。

推薦型暗文一般是與應(yīng)用的核心內(nèi)容相結(jié)合，比如電商類產(chǎn)品的暗文一般是商品、書籍類產(chǎn)品的暗文一般是書籍。此外，由于暗文的內(nèi)容不固定，需要注意控制暗文的展示字?jǐn)?shù)，盡量避免文字展示不全的情況，對于搜索體驗(yàn)來說并不友好。

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

輪播時間：比如兩個暗文的輪播時間間隔過短，就不利于用戶從發(fā)現(xiàn)——點(diǎn)擊的反應(yīng)流程、假如時間間隔過長，就不利于推薦轉(zhuǎn)化（相同時間內(nèi)推薦的數(shù)量更少了）。

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

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

搜索方式：

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

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

搜索指引按鈕：

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

搜索類型：

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

搜索入口

大部分產(chǎn)品中，搜索欄都是置于導(dǎo)航欄的位置，用戶也早已形成了位置習(xí)慣，常見的搜索入口結(jié)構(gòu)有：通欄結(jié)構(gòu)、非通欄結(jié)構(gòu)、按鈕狀態(tài)，對于搜索功能的優(yōu)先層級依次遞減。

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

搜索推薦頁

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

1. 操作觸發(fā)

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

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

而 Behance 則是在用戶點(diǎn)擊后自動彈出鍵盤，更符合用戶習(xí)慣的體驗(yàn)。

2. 關(guān)鍵信息

搜索記錄：

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

在展示形式方面，多以列表形式和標(biāo)簽形式展示，標(biāo)簽形式理論上會更多，因?yàn)榭梢员M可能減少搜索記錄的高度，讓更多推薦內(nèi)容有更多的曝光以提升轉(zhuǎn)化。

搜索記錄會涉及對用戶行為的記錄，關(guān)系到用戶的搜索隱私，所以應(yīng)當(dāng)允許用戶手動刪除?；诋a(chǎn)品特點(diǎn)，可以選擇在刪除時是否做二次確認(rèn)。

搜索發(fā)現(xiàn)：

搜索發(fā)現(xiàn)是系統(tǒng)基于用戶的搜索記錄，依據(jù)算法向用戶展示的搜索關(guān)鍵詞推薦，但并不是必需模塊，可以基于產(chǎn)品定位進(jìn)行考量。由于搜索發(fā)現(xiàn)也涉及用戶隱私，但應(yīng)用一般不會讓用戶直接刪除，所以應(yīng)當(dāng)允許用戶對搜索發(fā)現(xiàn)進(jìn)行隱藏，不然極其容易引起用戶的反感。

下方淘寶、京東都有搜索發(fā)現(xiàn)，并且也允許用戶進(jìn)行關(guān)閉/顯示的操作。

相關(guān)推薦：

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

知乎的熱搜就是結(jié)合熱搜、時事熱點(diǎn)等進(jìn)行推薦。淘寶則是以卡片形式進(jìn)行大量商品推薦。

搜索類型

對于搜索類型多樣或者信息量龐大的產(chǎn)品，搜索推薦頁會展示應(yīng)用的內(nèi)容類型，用戶選擇類型即可在該類型范圍內(nèi)搜索，以便用戶在搜索時快速聚焦目標(biāo)內(nèi)容所在的類型，同時也便于系統(tǒng)篩選內(nèi)容。

搜索聯(lián)想頁

當(dāng)用戶輸入文字信息，系統(tǒng)會自動將輸入的關(guān)鍵詞與庫內(nèi)信息進(jìn)行匹配，并按照某種規(guī)則排列展示，這就是搜索聯(lián)想的狀態(tài)。在這個狀態(tài)下，應(yīng)用應(yīng)當(dāng)減少多余信息的干擾，聚焦于服務(wù)用戶的搜索需求。

1. 文本差異化：

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

2. 分類展示：

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

3. 凸顯關(guān)鍵信息：

為了便于用戶找到精準(zhǔn)高效的信息或者進(jìn)行便捷操作，在搜索聯(lián)想頁狀態(tài)時，當(dāng)用戶輸入的信息足夠清晰可預(yù)測，可以將關(guān)鍵信息凸顯呈現(xiàn)，以引起用戶的注意力，在進(jìn)入搜索結(jié)果頁之前就可以提升轉(zhuǎn)化的可能性。

此外，這種關(guān)鍵信息凸顯的形式，在搜索的商業(yè)轉(zhuǎn)化方面也有明顯的作用。

搜索結(jié)果頁

搜索結(jié)果頁是用戶搜索的落腳點(diǎn)，在這個頁面，用戶會有目的性地瀏覽搜索結(jié)果，在整個搜索場景，都需要優(yōu)先匹配高關(guān)聯(lián)性內(nèi)容，減少商業(yè)化對搜索結(jié)果的干預(yù)。如果商業(yè)化對搜索結(jié)果干預(yù)過重，不僅會影響搜索效率、精準(zhǔn)性、可信度，還會引發(fā)用戶對搜索的質(zhì)疑（如百度的魏則西事件）。

1. 保留搜索文字

當(dāng)用戶輸入搜索文本，點(diǎn)擊搜索按鈕，就進(jìn)入了搜索結(jié)果頁流程，此時搜索框內(nèi)應(yīng)當(dāng)保留搜索文本，以便于用戶明確搜索的內(nèi)容（不要依賴用戶的記憶力），同時，也便于用戶再次編輯搜索文本。

一鍵清除：

考慮到輸入/清除的便捷性，應(yīng)用也應(yīng)當(dāng)提供一鍵清除按鈕，點(diǎn)擊一鍵清除搜索的文本，減少用戶的操作成本。

搜索結(jié)果頁的搜索文本的展示一般會有兩種形式：標(biāo)簽文本形式、普通文本形式。

普通文本形式：

用戶輸入文本后，在結(jié)果頁以正常的文本形式展示，這種形式最為常見。同樣如果基于體驗(yàn)，在搜索欄右側(cè)應(yīng)當(dāng)放置關(guān)閉按鈕。

標(biāo)簽文本形式：

用戶輸入文本后，在結(jié)果頁以標(biāo)簽形式展示，標(biāo)簽右側(cè)一般會附帶有關(guān)閉按鈕，對于刪除提示而言會更清晰。

2. 結(jié)果信息展示

結(jié)果信息展示依據(jù)產(chǎn)品類型的不同，有很大的差異，很難一一枚舉，但是主要的架構(gòu)是 3 種：

同類信息展示：

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

分欄信息展示：

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

隨機(jī)卡片展示：

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

3. 商業(yè)&體驗(yàn)優(yōu)化

搜索結(jié)果頁往往也需要承載相應(yīng)的商業(yè)化目標(biāo)，在設(shè)計形式上也有體現(xiàn)，商業(yè)化是大部分產(chǎn)品無法繞過的，在此基礎(chǔ)上，設(shè)計師可以通過設(shè)計表現(xiàn)自然地融入商業(yè)化。

首位卡片設(shè)計

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

除了商業(yè)化的好處，首位卡片設(shè)計對于用戶關(guān)注關(guān)鍵信息也有很強(qiáng)的作用，因?yàn)檫@種設(shè)計，代表了首位信息的重要性以及權(quán)威性，并且還有結(jié)合功能玩法的空間。

驚喜感展示

搜索結(jié)果頁是用戶行為目標(biāo)相對精準(zhǔn)的場景，應(yīng)用可以獲取用戶相對精準(zhǔn)的搜索需求，所以在這個場景可以結(jié)合巧妙的玩法，比如搜索驚喜感展示。驚喜感彩蛋在設(shè)計時，要注意這是基于用戶行為的，假如沒有用戶精準(zhǔn)行為，就不會有很強(qiáng)的驚喜感，甚至?xí)蟹葱Ч?/p>

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

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

輔助搜索決策

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

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

4. 極端情況處理

容錯處理：

用戶的輸入一定存在千奇百怪的可能性，所以搜索場景應(yīng)當(dāng)盡可能具備更強(qiáng)的容錯處理能力，當(dāng)用戶表述不準(zhǔn)確時，加強(qiáng)對用戶搜索目標(biāo)的預(yù)測，并且提供搜索結(jié)果指引。

夸克搜索結(jié)果頁中，測試搜索了“計設(shè)互交”，在判斷我搜索目標(biāo)是“交互設(shè)計”的情況下，優(yōu)先顯示正常的搜索結(jié)果，并且提示我是否確認(rèn)正在搜索的關(guān)鍵詞。

搜索無結(jié)果：

搜索理論上必然存在無結(jié)果的狀態(tài)，在設(shè)計時需要注意搜索無結(jié)果的空狀態(tài)告知。

搜索過渡動畫

1. 流程過渡切換

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

優(yōu)秀的搜索場景過渡：

點(diǎn)擊搜索入口后，沒有明顯的頁面切換斷層，而是采用自然銜接的過渡方式，現(xiàn)階段許多產(chǎn)品都已經(jīng)開始注意這些細(xì)節(jié)體驗(yàn)了， 整體搜索流程很順暢。

粗糙的搜索場景過渡：

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

搜索按鈕過渡：

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

2. 頁面滑動過渡：

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

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

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

結(jié)語

本文總結(jié)梳理了搜索功能，從搜索方式、元素，到搜索流程，再到搜索過渡，都進(jìn)行了闡述。搜索是我們?nèi)粘Ｖ蓄l繁接觸的功能，但即使它常見，設(shè)計師在真正設(shè)計時也可能無從下手。我側(cè)重于從交互體驗(yàn)層面介紹搜索，因?yàn)樗阉鞒藬?shù)據(jù)匹配精準(zhǔn)度、搜索內(nèi)容廣度之外，搜索體驗(yàn)的便捷性也會影響用戶搜索的感受。

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

搜索包含了許多細(xì)節(jié)元素，并且元素的位置、動畫、交互行為都有許多講究，需要根據(jù)具體的產(chǎn)品類型選擇適合的設(shè)計方式。

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

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

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