如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

搜索功能無論在web端還是移動端，都是產(chǎn)品中十分重要的功能。文章主要從用戶體驗和產(chǎn)品功能、策略角度來分析，提出一些對應(yīng)的設(shè)計方法。

搜索能夠幫助用戶快速找到想要的結(jié)果，其中兩個重要目標(biāo)是提高搜索結(jié)果的相關(guān)性，降低結(jié)果觸達的延遲性。用戶使用搜索功能來滿足其信息獲取的需求，其搜索目的是在搜索結(jié)果中進行內(nèi)容消費。搜索功能一般來說都是全局性質(zhì)的“模糊搜索”（用戶可以搜索到產(chǎn)品的主要內(nèi)容），有時也會出現(xiàn)在局部結(jié)構(gòu)中（如某個功能模塊下的“定向搜索”）。

產(chǎn)品的用戶體驗一般包括感官體驗、交互體驗、情感體驗、瀏覽體驗和信任體驗幾種，對應(yīng)的產(chǎn)品屬性特征為舒適性、易用性和可用性、友好性、吸引力及可靠性。其中用戶在移動端的搜索過程中對于感官體驗影響較弱以外，其他幾種體驗都會在整個搜索過程中涉及到。

搜索功能用戶體驗描述

從用戶角度來看，搜索是給用戶提供其需要的東西，功能目標(biāo)的指向性更強；搜索過程出現(xiàn)的所有相關(guān)功能入口或功能訴求點，推薦內(nèi)容作為錦上添花，而不是作為主要的功能載體；對于功能完整度高的搜索功能，體驗的重點更多落腳到搜索結(jié)果的內(nèi)容和呈現(xiàn)上，而結(jié)果的呈現(xiàn)，與用戶的選擇行為和認(rèn)知息息相關(guān)。

從產(chǎn)品角度來看，搜索結(jié)果滿足更多用戶的直接和潛在需求，如運營和廣告需求；露出更多功能和內(nèi)容點，提高UV和VV，并向其他入口導(dǎo)流。

本文源于設(shè)計師在實際設(shè)計過程中的經(jīng)驗積累與感觸，寫作邏輯更加傾向于交互設(shè)計師的實際設(shè)計過程與思考，結(jié)合產(chǎn)品和前端開發(fā)的模塊劃分，一般將整個搜索流程分為搜索入口，搜索中間頁，搜索過程和搜索結(jié)果頁四部分。這也與用戶搜索操作流程相一致，但是并不是每個功能會有都會遇到，這也與實際的產(chǎn)品訴求相關(guān)。從“峰終理論”角度來看，用戶體驗的關(guān)鍵點出現(xiàn)在過程的峰值和終點部分，這是影響用戶對整個過程體驗的兩個關(guān)鍵點。搜索過程中的峰值，一般出現(xiàn)在搜索中間頁，讓用戶實現(xiàn)便捷搜索同時獲得更多的相關(guān)信息；終點毋庸置疑是搜索結(jié)果頁。

搜索中的產(chǎn)品、設(shè)計與用戶體驗

一．搜索入口-用戶需求的起點，產(chǎn)品功能權(quán)重的體現(xiàn)

搜索入口是用戶開始搜索功能的起點，入口的可見性、易用性是影響產(chǎn)品初次搜索體驗的要素。搜索入口沒有差異化，但是用戶存在差異化特征：

1.目標(biāo)明確型用戶：知道自己想要搜索什么，以及對搜索結(jié)果有一定的心理預(yù)期；

2.目標(biāo)模糊型用戶：操作無目的或目的不明確，對更多目標(biāo)內(nèi)容沒有預(yù)期，或者不了解搜索功能索涵蓋的范圍。

從產(chǎn)品策略層分析，尤其對于內(nèi)容消費的產(chǎn)品而言，搜索功能所占據(jù)的功能權(quán)重更加重要，其功能架構(gòu)也更加厚重，搜索入口的設(shè)計方式，是產(chǎn)品屬性、功能策略的一種直觀反映。

因此從入口開始，便能看出搜索功能在產(chǎn)品中的權(quán)重如何。搜索入口從類型上可分為四種，包括獨立的導(dǎo)航標(biāo)簽、常駐的通欄導(dǎo)航條、功能布點的icon入口以及特殊樣式，其中前三種樣式較為常見，權(quán)重依次降低。

三種主要搜索入口樣式

1.獨立的導(dǎo)航標(biāo)簽

直接出現(xiàn)在底部或頂部導(dǎo)航欄中，這樣用戶在切換幾個導(dǎo)航頁面時，搜索的入口是實時存在的，全局性的設(shè)計讓用戶可以隨時點擊進入到搜索頁面，一般而言，此類操作觸發(fā)后對應(yīng)的搜索頁面功能和層級也更加豐富，承載與搜索、發(fā)現(xiàn)相關(guān)的延伸功能。例如微博的搜索頁面，切換至搜索導(dǎo)航標(biāo)簽時，進入的是一個獨立的頁面，其內(nèi)容的豐富程度不亞于首頁，而且承載了話題、明星等更深層級的入口，功能屬性層次感十分飽滿。

微博

2.頂部通欄樣式

這種設(shè)計方式占據(jù)了足夠的屏幕寬度，同時在高度上壓縮了其他內(nèi)容的展示區(qū)域；在頁面頂部位置出現(xiàn)，用戶對此一目了然，可以快速點擊搜索；這種搜索入口設(shè)計一般在首頁或者二級頁出現(xiàn)，讓用戶能夠更容易接觸到搜索功能；更深層級或者落地頁上貿(mào)然加上搜索入口，可能會帶來以下幾方面問題：（1）頁面跳轉(zhuǎn)邏輯的混亂：混淆用戶的使用預(yù)期，也給開發(fā)帶來不便；（2）壓縮頁面高度：在較深層級頁面中，內(nèi)容往往比功能更重要，露出更多內(nèi)容有益于產(chǎn)品目標(biāo)的實現(xiàn)；（3）用戶缺乏訴求：最重要的一點，用戶在更深層的內(nèi)容詳情頁，對于搜索功能沒有那么強的場景訴求，此時更多內(nèi)容的露出是用戶當(dāng)前的主要關(guān)注點，無限制的增加入口很容易將操作帶入一個死循環(huán)中。如貓眼電影的首頁的搜索入口為頂部通欄樣式。

貓眼

3.icon入口樣式

以用戶最好理解的放大鏡icon作為搜索的入口，由于占據(jù)空間較小，出現(xiàn)的位置沒有嚴(yán)格限制；盡管icon樣式的入口能夠有效地觸發(fā)搜索功能，但是形式上的顯著程度不高，因此放置位置較為靈活，可以出現(xiàn)在頁面角落或者收起在更多入口當(dāng)中，避免與其他同等權(quán)重或高權(quán)重需求爭奪顯著性。

Bilibili                                      澎湃新聞

4.特殊樣式

一般特殊樣式的搜索入口與App本身的設(shè)計風(fēng)格緊密相關(guān)，如Android原生應(yīng)用中的懸浮按鈕功能等；另外，部分搜索入口中還會露出輔助功能，付拍照掃碼、切換分類內(nèi)容等。

空格

二．搜索中間頁-滿足用戶潛在需求，產(chǎn)品運營關(guān)鍵頁面

一般而言，用戶點擊搜索入口后會跳轉(zhuǎn)至獨立的搜索頁面，此時出現(xiàn)的頁面筆者習(xí)慣稱之為搜索（過程的）中間頁，實際上是獨立的搜索頁面。

從用戶層面來看，用戶點擊搜索入口后，第一直覺是直接進入搜索功能，調(diào)起輸入法進行關(guān)鍵詞輸入，這是用戶最直觀的需求，也是大部分App所做的。但是用戶的潛在需求卻包含更多信息，用戶需要知道在這里可以搜索什么、怎么去搜索的指導(dǎo)，搜索中間頁，實際上除了滿足產(chǎn)品運營需求以外，也是對用戶潛在需求的挖掘和滿足，也是產(chǎn)品可靠性的一種體現(xiàn)。

從產(chǎn)品策略層來看，對于輕量化的搜索功能，可以不使用搜索中間頁，從而降低信息體量和頁面冗余度，因為這種頁面往往是產(chǎn)品策略和運營需求的“重災(zāi)區(qū)”，動態(tài)推廣內(nèi)容或者需要提升點擊量、導(dǎo)流的入口，都可以讓在這個頁面承載。

綜上來看，在整個搜索過程中，搜索中間頁可以認(rèn)為是僅次于搜索結(jié)果頁而存在的，這也是用戶在整個搜索過程中產(chǎn)生“峰值體驗”的關(guān)鍵點，也是給用戶帶來驚喜，滿足潛在需求的方式。搜索中間頁，主要的設(shè)計要素包括：提示信息、分類搜索功能、搜索歷史、熱門搜索詞、其他用戶推薦信息與廣告運營位幾種。

1.提示信息

提示信息時與該場景下能夠?qū)崿F(xiàn)的搜索功能相關(guān)的文案內(nèi)容，常見樣式為出現(xiàn)在搜索框中的純文案，當(dāng)然也可以在整個頁面中展示。文案提示信息在用戶體驗中相當(dāng)于一種前置反饋，這種設(shè)計體現(xiàn)產(chǎn)品友好性的一個小細(xì)節(jié)，對用戶也是一種良性的引導(dǎo)，給用戶提供了一個心理預(yù)期，同時也對用戶隨意輸入關(guān)鍵詞造成無結(jié)果的傷害體驗的可能進行了限制。例如視頻App的搜索，不僅可以搜索自己站內(nèi)視頻，也可以搜索其他平臺的視頻，不僅可以搜索視頻，還可以搜索明星、娛樂事件等。另一方面，露出必要的提示，有時也是一種宣傳手段。當(dāng)然，對于通欄的搜索入口，提示信息一般會直接顯示在入口中，進入搜索中間頁后會直接帶入當(dāng)前文案信息。

橘子娛樂                   bilibili                  天天快報

2.分類搜索功能

是指在搜索前就能夠選擇搜索范圍的功能，在一些平臺內(nèi)容較多需要細(xì)分的App中較為常見。搜索功能是全局性的，僅在搜索框中出現(xiàn)提示詞也不足以滿足用戶對于信息分類搜索的需求，因此需要獨立設(shè)置分類搜索按鈕進行設(shè)置，在搜索開始前就縮小搜索范圍，提升操作的便捷性和智能化效果；但是不足之處是如果用戶對此感知不足的話，對與搜索結(jié)果只呈現(xiàn)小范圍內(nèi)的信息會產(chǎn)生疑惑，因此需要注意對范圍限制的提醒以及各個搜索范圍入口的打通。

虎撲                                    淘寶

3.搜索歷史

搜索歷史前端可以作為一種快速搜索的功能入口，呈現(xiàn)用戶的搜索歷史，一來可以方便用戶下次點擊的時候?qū)τ谥貜?fù)性的內(nèi)容實現(xiàn)快速搜索，二來也便于收集用戶習(xí)慣。

在設(shè)計搜索歷史是需要注意以下幾點，包括用戶行為特征和產(chǎn)品策略的內(nèi)容:

（1）位置：根據(jù)認(rèn)知心理學(xué)中的相似律，搜索內(nèi)容位置會處于頁面頂部，緊貼搜索框展示，此時用戶的視覺焦點在這里，更容易注意到，也不會產(chǎn)生認(rèn)知偏差，因此該位置要避免被其他信息模塊占據(jù)從而割裂二者的聯(lián)系；

（2）顯示樣式：一般搜索詞會作為一個完整的搜索內(nèi)容呈現(xiàn)，而且會涉及到點擊操作，因此不適合折行或者截斷顯示，以便讓用戶一目了然自己搜索了哪些詞，一般的處理方式固定行數(shù)顯示，或者以btn樣式顯示，強化可點擊的操作意象；

（3）編輯操作：并不是所有用戶對于占據(jù)頁面大部分高度的內(nèi)容都是認(rèn)同或需要的，編輯刪除操作必不可少；

（4）數(shù)量限制：最后還要限制一下露出數(shù)量，前面由于限制了顯示策略，因此要根據(jù)用戶潛在的搜索內(nèi)容文案數(shù)量確認(rèn)當(dāng)前的露出數(shù)量；露出內(nèi)容少則對用戶的了意義不大，因為舊的內(nèi)容很容易被新的搜索詞替換掉，露出較多則會占據(jù)頁面太多高度，考慮到此時頁面會調(diào)起輸入法，因此也不適合露出太多內(nèi)容。

4.熱門搜索詞

當(dāng)前平臺主推的內(nèi)容，或者高頻的搜索詞都可以放置于此。搜索熱詞一般是產(chǎn)品需求驅(qū)動出現(xiàn)的，可以讓頁面內(nèi)容更加豐滿，同時也露出當(dāng)前的主推內(nèi)容，提升內(nèi)容的曝光率和點擊量。熱門搜索詞和搜索歷史的誰家要點相似性很多，因此需要注意在樣式上與搜索歷史內(nèi)容進行區(qū)分；另一方面，不同于搜索歷史的時，這是產(chǎn)品后臺配置的內(nèi)容，不是用戶主動有意識或無意識觸發(fā)的，因此就存在用戶接受度的問題。在數(shù)量上需要更加斟酌。根據(jù)產(chǎn)品內(nèi)容屬性的不同，純文案的搜索詞在10（或7±2）個左右能夠讓用戶一目了然，較為復(fù)雜樣式的搜索詞則更要簡化數(shù)量，讓用戶能夠抓住信息的重點。放置過多搜索詞，不僅會稀釋用戶的注意力，更多的情況是被調(diào)起的輸入法遮擋，反而降低曝光率。

愛奇藝                               網(wǎng)易新聞

5.其他用戶推薦信息與廣告運營位

依據(jù)平臺產(chǎn)品不同，可擴展呈現(xiàn)更多的推薦內(nèi)容或者相關(guān)內(nèi)容，更有甚者可以把平臺內(nèi)容分模塊展現(xiàn)出來。廣告運營位與其他推薦信息的屬性是一致的，只是把內(nèi)容替換成廣告推廣信息。

微博

三．搜索過程-用戶操作便捷化與簡潔化，產(chǎn)品功能人性化與智能化

從用戶操作場景來看：在實際的點擊過程中，用戶點擊搜索框，調(diào)起輸入法開始進行輸入行為進行搜索，核心目標(biāo)就是快速輸入關(guān)鍵詞，同時對于一些較長的關(guān)鍵詞，能夠快速輸入進去；或者說，輸入過程的簡潔、便捷、快速是影響用戶體驗的關(guān)鍵痛點，這種快速很難在系統(tǒng)輸入法上做文章，但是可以在其他方面實現(xiàn)給用戶帶來“便捷”“快速”的體驗，包括輸入框結(jié)構(gòu)相應(yīng)的變化以及即時呈現(xiàn)的搜索推薦詞，這也是搜索功能好用性和易用性的一種體現(xiàn)。

從產(chǎn)品策略來看：此時用戶主要的注意力焦點在輸入過程中，因此目前的過程是操作功能為主，策略也需要以更好地滿足用戶的操作功能為導(dǎo)向。

輸入搜索詞的過程中，光標(biāo)已經(jīng)定位于此，搜索框處于激活狀態(tài)，此時的頁面元素一般包括：（1）搜索框（一般帶著提示詞）；（2）清除按鈕（一般以X的形式出現(xiàn)，點擊可清空當(dāng)前全部搜索詞，同時點擊后可返回搜索中間頁或跳出搜索功能）；（3）搜索btn（iOS端鍵盤有搜索按鍵，但Android的輸入法可能不是原生的，無法判斷當(dāng)前的狀態(tài)，因此從通用性角度考慮，適宜放置一個顯著的搜索btn）。

QQ音樂                               橘子娛樂

除了搜索框的變化，用戶在輸入搜索詞的過程中也伴隨著對應(yīng)的反饋，此時出現(xiàn)的即時反饋主要包括兩種樣式，搜索聯(lián)想詞和分類匹配，提高產(chǎn)品的友好性體驗。

1.搜索聯(lián)想詞

搜索聯(lián)想詞，也稱為搜索suggestion，是根據(jù)用戶逐漸輸入內(nèi)容而不斷呈現(xiàn)的包含輸入關(guān)鍵詞的列表。對于功能完整的搜索過程，搜索聯(lián)想詞能夠幫助用戶的輸入信息起到糾正、提醒、引導(dǎo)的作用，對于有固定搜索結(jié)果頁的產(chǎn)品而言，搜索聯(lián)想詞是起到便捷搜索的作用，例如愛奇藝App的搜索功能；但是對于一些輕量化的搜索功能而言，即搜索目標(biāo)單一、搜索維度單一或者無專門的搜索結(jié)果聚合頁面來說，則可以不設(shè)置搜索中間頁，直接通過suggestion列表的樣式呈現(xiàn)搜索結(jié)果，點擊后直接跳轉(zhuǎn)至搜索結(jié)果頁或者對應(yīng)的目標(biāo)落地頁，從而幫助用戶實現(xiàn)快速搜索功能，例如產(chǎn)品中的地區(qū)設(shè)置搜索（維度單一）或者百度地圖App中的搜索（目標(biāo)單一）等。

愛奇藝                                 百度地圖

2.分類匹配

對于多某塊或者多內(nèi)容的產(chǎn)品來說，不僅在結(jié)構(gòu)中需要對不同范疇或?qū)傩韵碌膬?nèi)容進行分類，在搜索過程中也要明確告知用戶該分類下的內(nèi)容，提高信息內(nèi)容的清晰度。用戶在搜索的過程中可以實時切換分類范圍，同時顯示固定范圍下的搜索數(shù)量，不斷自己的搜索范圍能夠讓最終的搜索結(jié)果更加準(zhǔn)確。此類設(shè)計方式在電商應(yīng)用中更常見。

根據(jù)分類結(jié)果或產(chǎn)品策略的不同，可以使用標(biāo)簽或者列表上的入口引導(dǎo)樣式來設(shè)計，如下圖所示。

京東                         淘寶                         nice

四．搜索結(jié)果頁-用戶的終極目標(biāo)，產(chǎn)品策略的爆發(fā)地

搜索結(jié)果頁是指用戶點擊搜索后看到的搜索內(nèi)容的聚合頁面，是用戶搜索的目標(biāo)所在。

從用戶操作場景來看，搜索結(jié)果頁就是想找到我想找的信息，因此目標(biāo)的準(zhǔn)確性呈現(xiàn)是重點，用戶需要一眼就看到目標(biāo)信息；另一方面，本著所見即所得的觀念，有了目標(biāo)信息，全端通用的交互操作和功能，在這里也都需要能夠?qū)崿F(xiàn)；這樣全端的操作體驗才具有一致性和連續(xù)性。

從產(chǎn)品策略來看，搜索結(jié)果頁也是一個信息內(nèi)容聚合的關(guān)鍵頁面，除了呈現(xiàn)必要的目標(biāo)信息，往往還可以在其中放置更多偏向于產(chǎn)品策略的相關(guān)信息。當(dāng)然，其中還存在一類輕量化的搜索結(jié)果頁樣式，與搜索suggestion樣式相似。

1.多維度展示

當(dāng)內(nèi)容品類過多時，可以分tab標(biāo)簽或者分card顯示對應(yīng)的內(nèi)容；盡管搜索結(jié)果頁不是固定常駐的頁面，每次搜索都會重新請求服務(wù)器加載新的內(nèi)容，但是頁面聚合的信息內(nèi)容的種類是固定的，同樣需要按模塊進行管理，提升信息的清晰度和可讀性，幫助用戶快速找到目標(biāo)信息。

2.功能操作

與搜索結(jié)果的屬性相關(guān)，主要用戶大部分中間用戶快速完成相關(guān)功能操作，縮短操作路徑。如果視頻類內(nèi)容，則會露出播放或下載緩存btn，如電商類產(chǎn)品則可出現(xiàn)購買或者加入購物車btn，用戶可直接點擊加入購物車，縮短整個流程的操作次數(shù)等。

淘寶                       愛奇藝                        美團

3.輕量化搜索結(jié)果頁

一些輕量化的搜索設(shè)計，會在用戶輸入的過程中實時顯示搜索結(jié)果，樣式與suggestion列表相似，但是實際呈現(xiàn)的是具體的搜索結(jié)果，而非搜索關(guān)鍵詞，用戶點擊后直接跳轉(zhuǎn)到對應(yīng)的詳情頁或者觸發(fā)相應(yīng)的交互操作。這種搜索結(jié)果頁樣式使用戶單維度的搜索，例如電話簿或者地區(qū)選擇等，搜索的結(jié)果和用戶的搜索目標(biāo)都是單一維度且高度一致的。這種設(shè)計方式主要源自于以下幾種原因：（1）用戶端：用戶在這種搜索場景下的目標(biāo)比較單一和固定，同時對于結(jié)果有一定的預(yù)期，因此可直接顯示搜索結(jié)果；（2）產(chǎn)品端：搜索范圍固定，內(nèi)容固定，目標(biāo)內(nèi)容在很長一段時間內(nèi)不會變化，同時搜索功能在該場景下較弱，因此可以實現(xiàn)快速搜索，避免了請求服務(wù)器的加載loading過程中耗費的時間；（3）其他：一般需要有搜索結(jié)果的頁面，除了搜索結(jié)果的內(nèi)容，還會放置很多結(jié)構(gòu)化、模塊化或者推薦的內(nèi)容；反觀地區(qū)或者電話聯(lián)系人搜索功能，用戶不需要再搜索結(jié)果頁中推薦多余的無關(guān)信息，不需要雜亂的信息干擾自己的操作目標(biāo)，而且在這兩種場景下，用戶的搜索結(jié)果是單一的，內(nèi)容局限性較強，使用獨立的搜索結(jié)果頁，可能大部分的頁面空間是空白的，也會影響頁面的視覺美觀效果。

貓眼

文章內(nèi)容對于搜索功能，從用戶體驗和產(chǎn)品策略兩個方面進行了分析，并結(jié)合自身的設(shè)計經(jīng)驗提出了一些設(shè)計策略，基本涵蓋了較為完整的搜索功能設(shè)計樣式，但是也并不全面，只是對較為常見的搜索樣式設(shè)計并不是固定化的，是根據(jù)產(chǎn)品需求、目標(biāo)人群、技術(shù)實現(xiàn)、后臺數(shù)據(jù)等因素共同作用的結(jié)果，因此并不需要拘泥于一定的樣式。在設(shè)計過程中還是需要根據(jù)實際情況進行調(diào)整，滿足用戶在目標(biāo)場景下的需求，同時達到產(chǎn)品的KPI目標(biāo)。

作者：蝦米&胖喵

原文鏈接：http://fatcatdesign.lofter.com/post/28e14e_ca5b455

藍(lán)藍(lán)設(shè)計( m.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)