2016-11-3 資深UI設計者
如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里
搜索功能無論在web端還是移動端，都是產品中十分重要的功能。文章主要從用戶體驗和產品功能、策略角度來分析，提出一些對應的設計方法。
搜索能夠幫助用戶快速找到想要的結果，其中兩個重要目標是提高搜索結果的相關性，降低結果觸達的延遲性。用戶使用搜索功能來滿足其信息獲取的需求，其搜索目的是在搜索結果中進行內容消費。搜索功能一般來說都是全局性質的“模糊搜索”（用戶可以搜索到產品的主要內容），有時也會出現在局部結構中（如某個功能模塊下的“定向搜索”）。
產品的用戶體驗一般包括感官體驗、交互體驗、情感體驗、瀏覽體驗和信任體驗幾種，對應的產品屬性特征為舒適性、易用性和可用性、友好性、吸引力及可靠性。其中用戶在移動端的搜索過程中對于感官體驗影響較弱以外，其他幾種體驗都會在整個搜索過程中涉及到。
搜索功能用戶體驗描述
從用戶角度來看，搜索是給用戶提供其需要的東西，功能目標的指向性更強；搜索過程出現的所有相關功能入口或功能訴求點，推薦內容作為錦上添花，而不是作為主要的功能載體；對于功能完整度高的搜索功能，體驗的重點更多落腳到搜索結果的內容和呈現上，而結果的呈現，與用戶的選擇行為和認知息息相關。
從產品角度來看，搜索結果滿足更多用戶的直接和潛在需求，如運營和廣告需求；露出更多功能和內容點，提高UV和VV，并向其他入口導流。
本文源于設計師在實際設計過程中的經驗積累與感觸，寫作邏輯更加傾向于交互設計師的實際設計過程與思考，結合產品和前端開發(fā)的模塊劃分，一般將整個搜索流程分為搜索入口，搜索中間頁，搜索過程和搜索結果頁四部分。這也與用戶搜索操作流程相一致，但是并不是每個功能會有都會遇到，這也與實際的產品訴求相關。從“峰終理論”角度來看，用戶體驗的關鍵點出現在過程的峰值和終點部分，這是影響用戶對整個過程體驗的兩個關鍵點。搜索過程中的峰值，一般出現在搜索中間頁，讓用戶實現便捷搜索同時獲得更多的相關信息；終點毋庸置疑是搜索結果頁。
搜索中的產品、設計與用戶體驗
一．搜索入口-用戶需求的起點，產品功能權重的體現
搜索入口是用戶開始搜索功能的起點，入口的可見性、易用性是影響產品初次搜索體驗的要素。搜索入口沒有差異化，但是用戶存在差異化特征：
1.目標明確型用戶：知道自己想要搜索什么，以及對搜索結果有一定的心理預期；
2.目標模糊型用戶：操作無目的或目的不明確，對更多目標內容沒有預期，或者不了解搜索功能索涵蓋的范圍。
從產品策略層分析，尤其對于內容消費的產品而言，搜索功能所占據的功能權重更加重要，其功能架構也更加厚重，搜索入口的設計方式，是產品屬性、功能策略的一種直觀反映。
因此從入口開始，便能看出搜索功能在產品中的權重如何。搜索入口從類型上可分為四種，包括獨立的導航標簽、常駐的通欄導航條、功能布點的icon入口以及特殊樣式，其中前三種樣式較為常見，權重依次降低。
三種主要搜索入口樣式
1.獨立的導航標簽
直接出現在底部或頂部導航欄中，這樣用戶在切換幾個導航頁面時，搜索的入口是實時存在的，全局性的設計讓用戶可以隨時點擊進入到搜索頁面，一般而言，此類操作觸發(fā)后對應的搜索頁面功能和層級也更加豐富，承載與搜索、發(fā)現相關的延伸功能。例如微博的搜索頁面，切換至搜索導航標簽時，進入的是一個獨立的頁面，其內容的豐富程度不亞于首頁，而且承載了話題、明星等更深層級的入口，功能屬性層次感十分飽滿。
微博
2.頂部通欄樣式
這種設計方式占據了足夠的屏幕寬度，同時在高度上壓縮了其他內容的展示區(qū)域；在頁面頂部位置出現，用戶對此一目了然，可以快速點擊搜索；這種搜索入口設計一般在首頁或者二級頁出現，讓用戶能夠更容易接觸到搜索功能；更深層級或者落地頁上貿然加上搜索入口，可能會帶來以下幾方面問題：（1）頁面跳轉邏輯的混亂：混淆用戶的使用預期，也給開發(fā)帶來不便；（2）壓縮頁面高度：在較深層級頁面中，內容往往比功能更重要，露出更多內容有益于產品目標的實現；（3）用戶缺乏訴求：最重要的一點，用戶在更深層的內容詳情頁，對于搜索功能沒有那么強的場景訴求，此時更多內容的露出是用戶當前的主要關注點，無限制的增加入口很容易將操作帶入一個死循環(huán)中。如貓眼電影的首頁的搜索入口為頂部通欄樣式。
貓眼
3.icon入口樣式
以用戶最好理解的放大鏡icon作為搜索的入口，由于占據空間較小，出現的位置沒有嚴格限制；盡管icon樣式的入口能夠有效地觸發(fā)搜索功能，但是形式上的顯著程度不高，因此放置位置較為靈活，可以出現在頁面角落或者收起在更多入口當中，避免與其他同等權重或高權重需求爭奪顯著性。
Bilibili 澎湃新聞
4.特殊樣式
一般特殊樣式的搜索入口與App本身的設計風格緊密相關，如Android原生應用中的懸浮按鈕功能等；另外，部分搜索入口中還會露出輔助功能，付拍照掃碼、切換分類內容等。
空格
二．搜索中間頁-滿足用戶潛在需求，產品運營關鍵頁面
一般而言，用戶點擊搜索入口后會跳轉至獨立的搜索頁面，此時出現的頁面筆者習慣稱之為搜索（過程的）中間頁，實際上是獨立的搜索頁面。
從用戶層面來看，用戶點擊搜索入口后，第一直覺是直接進入搜索功能，調起輸入法進行關鍵詞輸入，這是用戶最直觀的需求，也是大部分App所做的。但是用戶的潛在需求卻包含更多信息，用戶需要知道在這里可以搜索什么、怎么去搜索的指導，搜索中間頁，實際上除了滿足產品運營需求以外，也是對用戶潛在需求的挖掘和滿足，也是產品可靠性的一種體現。
從產品策略層來看，對于輕量化的搜索功能，可以不使用搜索中間頁，從而降低信息體量和頁面冗余度，因為這種頁面往往是產品策略和運營需求的“重災區(qū)”，動態(tài)推廣內容或者需要提升點擊量、導流的入口，都可以讓在這個頁面承載。
綜上來看，在整個搜索過程中，搜索中間頁可以認為是僅次于搜索結果頁而存在的，這也是用戶在整個搜索過程中產生“峰值體驗”的關鍵點，也是給用戶帶來驚喜，滿足潛在需求的方式。搜索中間頁，主要的設計要素包括：提示信息、分類搜索功能、搜索歷史、熱門搜索詞、其他用戶推薦信息與廣告運營位幾種。
1.提示信息
提示信息時與該場景下能夠實現的搜索功能相關的文案內容，常見樣式為出現在搜索框中的純文案，當然也可以在整個頁面中展示。文案提示信息在用戶體驗中相當于一種前置反饋，這種設計體現產品友好性的一個小細節(jié)，對用戶也是一種良性的引導，給用戶提供了一個心理預期，同時也對用戶隨意輸入關鍵詞造成無結果的傷害體驗的可能進行了限制。例如視頻App的搜索，不僅可以搜索自己站內視頻，也可以搜索其他平臺的視頻，不僅可以搜索視頻，還可以搜索明星、娛樂事件等。另一方面，露出必要的提示，有時也是一種宣傳手段。當然，對于通欄的搜索入口，提示信息一般會直接顯示在入口中，進入搜索中間頁后會直接帶入當前文案信息。
橘子娛樂 bilibili 天天快報
2.分類搜索功能
是指在搜索前就能夠選擇搜索范圍的功能，在一些平臺內容較多需要細分的App中較為常見。搜索功能是全局性的，僅在搜索框中出現提示詞也不足以滿足用戶對于信息分類搜索的需求，因此需要獨立設置分類搜索按鈕進行設置，在搜索開始前就縮小搜索范圍，提升操作的便捷性和智能化效果；但是不足之處是如果用戶對此感知不足的話，對與搜索結果只呈現小范圍內的信息會產生疑惑，因此需要注意對范圍限制的提醒以及各個搜索范圍入口的打通。
虎撲 淘寶
3.搜索歷史
搜索歷史前端可以作為一種快速搜索的功能入口，呈現用戶的搜索歷史，一來可以方便用戶下次點擊的時候對于重復性的內容實現快速搜索，二來也便于收集用戶習慣。
在設計搜索歷史是需要注意以下幾點，包括用戶行為特征和產品策略的內容:
（1）位置：根據認知心理學中的相似律，搜索內容位置會處于頁面頂部，緊貼搜索框展示，此時用戶的視覺焦點在這里，更容易注意到，也不會產生認知偏差，因此該位置要避免被其他信息模塊占據從而割裂二者的聯系；
（2）顯示樣式：一般搜索詞會作為一個完整的搜索內容呈現，而且會涉及到點擊操作，因此不適合折行或者截斷顯示，以便讓用戶一目了然自己搜索了哪些詞，一般的處理方式固定行數顯示，或者以btn樣式顯示，強化可點擊的操作意象；
（3）編輯操作：并不是所有用戶對于占據頁面大部分高度的內容都是認同或需要的，編輯刪除操作必不可少；
（4）數量限制：最后還要限制一下露出數量，前面由于限制了顯示策略，因此要根據用戶潛在的搜索內容文案數量確認當前的露出數量；露出內容少則對用戶的了意義不大，因為舊的內容很容易被新的搜索詞替換掉，露出較多則會占據頁面太多高度，考慮到此時頁面會調起輸入法，因此也不適合露出太多內容。
4.熱門搜索詞
當前平臺主推的內容，或者高頻的搜索詞都可以放置于此。搜索熱詞一般是產品需求驅動出現的，可以讓頁面內容更加豐滿，同時也露出當前的主推內容，提升內容的曝光率和點擊量。熱門搜索詞和搜索歷史的誰家要點相似性很多，因此需要注意在樣式上與搜索歷史內容進行區(qū)分；另一方面，不同于搜索歷史的時，這是產品后臺配置的內容，不是用戶主動有意識或無意識觸發(fā)的，因此就存在用戶接受度的問題。在數量上需要更加斟酌。根據產品內容屬性的不同，純文案的搜索詞在10（或7±2）個左右能夠讓用戶一目了然，較為復雜樣式的搜索詞則更要簡化數量，讓用戶能夠抓住信息的重點。放置過多搜索詞，不僅會稀釋用戶的注意力，更多的情況是被調起的輸入法遮擋，反而降低曝光率。
愛奇藝 網易新聞
5.其他用戶推薦信息與廣告運營位
依據平臺產品不同，可擴展呈現更多的推薦內容或者相關內容，更有甚者可以把平臺內容分模塊展現出來。廣告運營位與其他推薦信息的屬性是一致的，只是把內容替換成廣告推廣信息。
微博
三．搜索過程-用戶操作便捷化與簡潔化，產品功能人性化與智能化
從用戶操作場景來看：在實際的點擊過程中，用戶點擊搜索框，調起輸入法開始進行輸入行為進行搜索，核心目標就是快速輸入關鍵詞，同時對于一些較長的關鍵詞，能夠快速輸入進去；或者說，輸入過程的簡潔、便捷、快速是影響用戶體驗的關鍵痛點，這種快速很難在系統(tǒng)輸入法上做文章，但是可以在其他方面實現給用戶帶來“便捷”“快速”的體驗，包括輸入框結構相應的變化以及即時呈現的搜索推薦詞，這也是搜索功能好用性和易用性的一種體現。
從產品策略來看：此時用戶主要的注意力焦點在輸入過程中，因此目前的過程是操作功能為主，策略也需要以更好地滿足用戶的操作功能為導向。
輸入搜索詞的過程中，光標已經定位于此，搜索框處于激活狀態(tài)，此時的頁面元素一般包括：（1）搜索框（一般帶著提示詞）；（2）清除按鈕（一般以X的形式出現，點擊可清空當前全部搜索詞，同時點擊后可返回搜索中間頁或跳出搜索功能）；（3）搜索btn（iOS端鍵盤有搜索按鍵，但Android的輸入法可能不是原生的，無法判斷當前的狀態(tài)，因此從通用性角度考慮，適宜放置一個顯著的搜索btn）。
QQ音樂 橘子娛樂
除了搜索框的變化，用戶在輸入搜索詞的過程中也伴隨著對應的反饋，此時出現的即時反饋主要包括兩種樣式，搜索聯想詞和分類匹配，提高產品的友好性體驗。
1.搜索聯想詞
搜索聯想詞，也稱為搜索suggestion，是根據用戶逐漸輸入內容而不斷呈現的包含輸入關鍵詞的列表。對于功能完整的搜索過程，搜索聯想詞能夠幫助用戶的輸入信息起到糾正、提醒、引導的作用，對于有固定搜索結果頁的產品而言，搜索聯想詞是起到便捷搜索的作用，例如愛奇藝App的搜索功能；但是對于一些輕量化的搜索功能而言，即搜索目標單一、搜索維度單一或者無專門的搜索結果聚合頁面來說，則可以不設置搜索中間頁，直接通過suggestion列表的樣式呈現搜索結果，點擊后直接跳轉至搜索結果頁或者對應的目標落地頁，從而幫助用戶實現快速搜索功能，例如產品中的地區(qū)設置搜索（維度單一）或者百度地圖App中的搜索（目標單一）等。
愛奇藝 百度地圖
2.分類匹配
對于多某塊或者多內容的產品來說，不僅在結構中需要對不同范疇或屬性下的內容進行分類，在搜索過程中也要明確告知用戶該分類下的內容，提高信息內容的清晰度。用戶在搜索的過程中可以實時切換分類范圍，同時顯示固定范圍下的搜索數量，不斷自己的搜索范圍能夠讓最終的搜索結果更加準確。此類設計方式在電商應用中更常見。
根據分類結果或產品策略的不同，可以使用標簽或者列表上的入口引導樣式來設計，如下圖所示。
京東 淘寶 nice
四．搜索結果頁-用戶的終極目標，產品策略的爆發(fā)地
搜索結果頁是指用戶點擊搜索后看到的搜索內容的聚合頁面，是用戶搜索的目標所在。
從用戶操作場景來看，搜索結果頁就是想找到我想找的信息，因此目標的準確性呈現是重點，用戶需要一眼就看到目標信息；另一方面，本著所見即所得的觀念，有了目標信息，全端通用的交互操作和功能，在這里也都需要能夠實現；這樣全端的操作體驗才具有一致性和連續(xù)性。
從產品策略來看，搜索結果頁也是一個信息內容聚合的關鍵頁面，除了呈現必要的目標信息，往往還可以在其中放置更多偏向于產品策略的相關信息。當然，其中還存在一類輕量化的搜索結果頁樣式，與搜索suggestion樣式相似。
1.多維度展示
當內容品類過多時，可以分tab標簽或者分card顯示對應的內容；盡管搜索結果頁不是固定常駐的頁面，每次搜索都會重新請求服務器加載新的內容，但是頁面聚合的信息內容的種類是固定的，同樣需要按模塊進行管理，提升信息的清晰度和可讀性，幫助用戶快速找到目標信息。
2.功能操作
與搜索結果的屬性相關，主要用戶大部分中間用戶快速完成相關功能操作，縮短操作路徑。如果視頻類內容，則會露出播放或下載緩存btn，如電商類產品則可出現購買或者加入購物車btn，用戶可直接點擊加入購物車，縮短整個流程的操作次數等。
淘寶 愛奇藝 美團
3.輕量化搜索結果頁
一些輕量化的搜索設計，會在用戶輸入的過程中實時顯示搜索結果，樣式與suggestion列表相似，但是實際呈現的是具體的搜索結果，而非搜索關鍵詞，用戶點擊后直接跳轉到對應的詳情頁或者觸發(fā)相應的交互操作。這種搜索結果頁樣式使用戶單維度的搜索，例如電話簿或者地區(qū)選擇等，搜索的結果和用戶的搜索目標都是單一維度且高度一致的。這種設計方式主要源自于以下幾種原因：（1）用戶端：用戶在這種搜索場景下的目標比較單一和固定，同時對于結果有一定的預期，因此可直接顯示搜索結果；（2）產品端：搜索范圍固定，內容固定，目標內容在很長一段時間內不會變化，同時搜索功能在該場景下較弱，因此可以實現快速搜索，避免了請求服務器的加載loading過程中耗費的時間；（3）其他：一般需要有搜索結果的頁面，除了搜索結果的內容，還會放置很多結構化、模塊化或者推薦的內容；反觀地區(qū)或者電話聯系人搜索功能，用戶不需要再搜索結果頁中推薦多余的無關信息，不需要雜亂的信息干擾自己的操作目標，而且在這兩種場景下，用戶的搜索結果是單一的，內容局限性較強，使用獨立的搜索結果頁，可能大部分的頁面空間是空白的，也會影響頁面的視覺美觀效果。
貓眼
文章內容對于搜索功能，從用戶體驗和產品策略兩個方面進行了分析，并結合自身的設計經驗提出了一些設計策略，基本涵蓋了較為完整的搜索功能設計樣式，但是也并不全面，只是對較為常見的搜索樣式設計并不是固定化的，是根據產品需求、目標人群、技術實現、后臺數據等因素共同作用的結果，因此并不需要拘泥于一定的樣式。在設計過程中還是需要根據實際情況進行調整，滿足用戶在目標場景下的需求，同時達到產品的KPI目標。
作者：蝦米&胖喵
原文鏈接：http://fatcatdesign.lofter.com/post/28e14e_ca5b455
藍藍設計( www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制、 用戶體驗 、交互設計、 網站建設 、平面設計服務
