本文主要從搜索的官方規(guī)范和實際用戶體驗角度進行了總結，希望可以給大家?guī)硪稽c啟發(fā)。

一、搜索官方規(guī)范

Android（Google Material Design）

搜索操作應該至少包含以下4個動作要素：

打開、輸入、提交、展示。

下面的元素可以幫助提高搜索的體驗：

1. 語音搜索；
2. 搜索歷史；
3. 搜索詞自動補充，且補充的結果是你的應用的數(shù)據(jù)庫中的已有詞匯。

iOS

蘋果建議搜索框可以包含下面的三個元素：

默認提示詞、取消按鈕、清空按鈕。

蘋果還給出了一些搜索欄在設計上的建議：

1. 如果有必要，可在搜索欄中提供一些提示和上下文（來幫助用戶）。

比如輸入框中的默認提示詞，文案可以為：“搜索衣服 鞋 首飾”或者單純的“搜索”兩個字。在輸入框的上面，也可以提供簡明的一句話提示，如圖所示：

2. 考慮在搜索欄下方提供快速入口和其他內(nèi)容，以幫助用戶更快找到結果。

例如iOS自帶應用Safari，當你點擊搜索欄的輸入框時，應用就會展示你的書簽，或者歷史搜索，這樣通過點擊內(nèi)容，有時候能免去輸入的麻煩。

3. 在搜索欄的下面，可加入“分段選擇控件”，以幫助用戶縮小搜索的范圍。

很多電商APP已經(jīng)做了對搜索列表的篩選操作，如淘寶、天貓。

個人輸出交互設計規(guī)范——搜索

搜索欄獲取用戶鍵入的文本，用以作為搜索的關鍵字*。

• A.初始狀態(tài)時，鍵盤默認收起，搜索框左側顯示搜索按鈕，輸入框內(nèi)可以顯示占位符，用來描述控件的作用例如“搜索”）或者提醒用戶是在哪里搜索；
• B.點擊搜索框后，文本框內(nèi)顯示光標定位（和引導文字），同時彈出鍵盤；
• C.當輸入文字后，引導文字消失，右邊顯示清空按鈕；點擊清空按鈕，可以清除所有搜索欄中的內(nèi)容。點擊清空按鈕不會退出搜索模式，只是清空內(nèi)容；
• D.完成輸入后，光標及刪除按鈕消失，文本框處于不可輸入狀態(tài)，鍵盤收起。

二、搜索用戶體驗描述

【搜索入口】用戶的起點，功能權重的體現(xiàn)

目標明確用戶：知道自己想要什么，以及對結果有一定的心理預期。

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

搜索入口從類型上可分為四種：

1. 獨立的導航標簽；
2. 常駐的通欄搜索條；
3. 導航上或其他位置的icon入口；
4. 集成多種功能或特殊樣式。

其中前三種樣式較為常見。

1.獨立的導航標簽

• 直接出現(xiàn)在底部或頂部導航欄中，屬于產(chǎn)品的一級菜單；
• 用戶在切換幾個模塊頁面時，搜索的入口是實時存在的，全局性的設計讓用戶可以隨時點擊進入到搜索頁面；
• 一般來講這種形式的搜索觸發(fā)后對應的搜索頁面功能、層級也更加豐富；承載著與搜索、發(fā)現(xiàn)相關的延伸功能。

例：【微博】

2.常駐通欄搜索條

• 占據(jù)了足夠的屏幕寬度，同時在高度上壓縮了其他內(nèi)容的展示區(qū)域；
• 在頁面頂部位置出現(xiàn)，用戶對此一目了然，可以快速點擊搜索；
• 一般在首頁或者二級頁出現(xiàn)，讓用戶能夠更容易接觸到搜索功能。

例：【QQ音樂】

注：不建議更深層級或者底層頁上加上搜索入口:

• 頁面跳轉邏輯的混亂：混淆用戶的使用預期；
• 占據(jù)頁面高度：在較深層級頁面中，內(nèi)容往往比功能更重要；
• 缺少業(yè)務場景：用戶在更深層的內(nèi)容詳情頁，對于搜索功能沒有那么強的場景訴求，無限制的增加入口很容易將操作帶入一個死循環(huán)中。

3.導航上或其他位置的icon入口

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

例：【抖音】

4.集成多種功能或特殊樣式

• 特殊樣式的搜索與App本身的設計風格相關，如：Android原生應用中的懸浮按鈕功能等；
• 部分搜索入口中還會露出輔助功能，付拍照掃碼、切換分類內(nèi)容等。

例：【美團】

【搜索中間頁】挖掘用戶潛在需求，產(chǎn)品運營關鍵頁面

從用戶層面來看，用戶點擊搜索入口后，第一直覺是直接進入搜索功能，調(diào)起輸入法進行關鍵詞輸入，這是用戶最直觀的需求。用戶的潛在需求卻包含更多信息，用戶需要知道在這里可以搜索什么、怎么去搜索的指導。

搜索中間頁，實際上除了滿足產(chǎn)品運營需求以外，也是對用戶潛在需求的挖掘和滿足，也是產(chǎn)品可靠性的一種體現(xiàn)。

1.提示信息

提示信息時與該場景下能夠?qū)崿F(xiàn)的搜索功能相關的文案內(nèi)容，常見樣式為出現(xiàn)在搜索框中的純文案，當然也可以在整個頁面中展示。

例：【今日頭條】

2.分類搜索功能

搜索前就能夠選擇搜索范圍的功能，在一些平臺內(nèi)容較多需要細分的App中較為常見。

例：【微信】

3.搜索歷史

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

例：【淘寶】

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

• 位置：搜索內(nèi)容位置會處于頁面頂部，緊貼搜索框展示，此時用戶的視覺焦點在這里，更容易注意到；
• 顯示樣式：一般搜索詞會作為一個完整的搜索內(nèi)容呈現(xiàn)，而且會涉及到點擊操作，因此不適合折行或者截斷顯示，以便讓用戶一目了然自己搜索了哪些詞，一般的處理方式固定行數(shù)顯示，以btn樣式顯示，強化可點擊的操作意象；
• 編輯操作：并不是所有用戶對于占據(jù)頁面大部分高度的內(nèi)容都是認同或需要的，編輯刪除操作必不可少；
• 數(shù)量限制：最后還要限制一下露出數(shù)量，前面由于限制了顯示策略，因此要根據(jù)用戶潛在的搜索內(nèi)容文案數(shù)量確認當前的露出數(shù)量；露出內(nèi)容少則對用戶的了意義不大，因為舊的內(nèi)容很容易被新的搜索詞替換掉，露出較多則會占據(jù)頁面太多高度，考慮到此時頁面會調(diào)起輸入法，因此也不適合露出太多內(nèi)容。

4.熱門搜索詞?

突出當前平臺主推的內(nèi)容，或者高頻的搜索詞都可以放置于此。搜索熱詞一般是產(chǎn)品需求驅(qū)動出現(xiàn)的，可以讓頁面內(nèi)容更加豐滿，同時也露出當前的主推內(nèi)容，提升內(nèi)容的曝光率和點擊量。

例：【京東】

*注：不同于搜索歷史的時，這部分內(nèi)容是產(chǎn)品后臺配置的，不是用戶行為產(chǎn)生的內(nèi)容，因此就存在用戶接受度的問題。

在數(shù)量上需要更加斟酌。根據(jù)產(chǎn)品內(nèi)容屬性的不同，純文案的搜索詞在10（或7±2）個左右能夠讓用戶一目了然，較為復雜樣式的搜索詞則更要簡化數(shù)量，讓用戶能夠抓住信息的重點。

放置過多搜索詞，不僅會稀釋用戶的注意力，更多的情況是被調(diào)起的輸入法遮擋，反而降低曝光率。

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

例：【抖音】

【搜索過程頁】操作便捷化與簡潔化，產(chǎn)品功能人性化與智能化

此時用戶主要的注意力焦點在輸入過程中，因此目前的過程是操作功能為主，策略也需要以更好地滿足用戶的操作功能為導向。輸入過程的簡潔、便捷、快速是影響用戶體驗的關鍵痛點。

輸入搜索詞的過程中光標已經(jīng)定位于此，搜索框處于激活狀態(tài)，此時頁面元素一般包括：

• 搜索框（一般帶著提示詞）；
• 清除按鈕（一般以X的形式出現(xiàn)，點擊可清空當前全部搜索詞，同時點擊后可返回搜索中間頁或跳出搜索功能）；
• 搜索btn（iOS端鍵盤有搜索按鍵，但Android的輸入法可能不是原生的，無法判斷當前的狀態(tài)，因此從通用性角度考慮，適宜放置一個顯著的搜索btn）。

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

根據(jù)用戶逐漸輸入內(nèi)容而不斷呈現(xiàn)的包含輸入關鍵詞的列表。搜索聯(lián)想詞能夠幫助用戶的輸入信息起到糾正、提醒、引導的作用，給用戶提供便捷搜索的作用。

例：【QQ音樂】

2.分類匹配

用戶在搜索的過程中可以實時切換分類范圍，同時顯示固定范圍下的搜索數(shù)量，不斷自己的搜索范圍能夠讓最終的搜索結果更加準確。

例：【淘寶】

【搜索結果頁】用戶的終極目標，產(chǎn)品策略的爆發(fā)地

搜索結果頁是指用戶點擊搜索后看到的搜索內(nèi)容的聚合頁面，是用戶搜索的終極目標。

從產(chǎn)品策略來看，搜索結果頁也是一個信息內(nèi)容聚合的關鍵頁面，除了呈現(xiàn)必要的目標信息，往往還可以在其中放置更多偏向于產(chǎn)品策略的相關信息。

1.多tab分類展示

當內(nèi)容品類過多時，可以分tab標簽或者分card顯示對應的內(nèi)容。

例：【今日頭條】

2.功能操作

與搜索結果的屬性相關，主要用于縮短操作路徑，大部分的用戶可以快速完成相關功能操作。

如：視頻類內(nèi)容，則會露出播放或下載緩存btn；如：電商類產(chǎn)品則可出現(xiàn)購買或者加入購物車btn，用戶可直接點擊加入購物車，縮短整個流程的操作次數(shù)。

例：【騰訊視頻】

3.輕量化搜索結果頁

這種搜索結果頁樣式使用戶單維度的搜索，例如電話簿或者地區(qū)選擇等，搜索的結果和用戶的搜索目標都是單一維度且高度一致的。

這種設計方式主要源自于以下幾種原因：

• 用戶端：用戶在這種搜索場景下的目標比較單一和固定，同時對于結果有一定的預期，因此可直接顯示搜索結果；
• 產(chǎn)品端：搜索范圍固定，內(nèi)容固定，目標內(nèi)容在很長一段時間內(nèi)不會變化，可以實現(xiàn)快速搜索，避免了請求服務器的加載loading過程中耗費的時間；

例：【美團-城市切換搜索】

以上內(nèi)容是平時積累的一些總結，當然還有一些搜索的形式，比如Google、百度等搜索引擎App，搜索則占據(jù)了整個頁面，結果頁的產(chǎn)品策略及商業(yè)化策略則更為復雜，這里就不再深入了。

本文由@ 垚一垚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載

題圖來自PEXELS，基于CC0協(xié)議