App搜索功能探析（附原型模板）

說到一個應用的搜索功能，大家是否立刻會想到一個放大鏡的圖標和一個矩形輸入框？搜索功能在眾多app里都佔據一個或重或輕的位置，為了充分利用到產品中的資源，讓用戶能夠快速準確地找到目標信息，搜索功能就顯得很有必要。但是不同類別的APP，不同的使用場景下，搜索功能的設計以及搜索結果的呈現也有所不同。今天我們就從搜索前後分別來分析app的搜索功能~

搜索入口

輸入搜索內容前，我們可以看到的是搜索入口的設計。從入口的設計來看，大體有如下幾種：

1. 獨立的一級tab，將一級界面作為獨立搜索頁面的形式；
2. 頂欄為搜索欄，搜索輸入框直接呈現的形式；
3. 呈現一個在頂欄的icon按鈕點擊展開的形式；
4. 下拉後展現搜索欄，非固定展現形式。如下圖↓

以上面的截圖為例分析，獨立的一級tab體現搜索功能在app中級別相對較高，搜索功能相對重要；

搜索欄置頂存在，相較於第一種來說搜索功能層級更低，但也能方便用戶不論是在瀏覽過程或是切換tab時都隨時進行搜索操作，用戶在使用app的過程中，如果沒有即時能夠進行的操作，易降低用戶依賴度；

對於入口僅為一個icon按鈕的情況下，減少了導航欄佔用，但相對地也弱化了搜索功能。嗶哩嗶哩的視頻大多由用戶自己上傳，即使是上線了最新官方內容，對於用戶來說想要瀏覽的新內容都是未知的，既然依賴於推送，自然搜索功能也就相對弱化；

通過下拉手勢展示的搜索框，可能表示該app較為弱化了搜索功能，對於多數用戶來說下拉手勢屬於習慣性手勢之一，由於用戶的習慣性下拉操作，搜索欄在不佔用頂欄的狀態下也能讓用戶立刻找到。

搜索方式

• 文字搜索

從搜索方式來看，搜索功能呈現出的形式越來越豐富。最基礎最常見的就是文字搜索。但是豐富的其他形式也是作為一種搜索的輔助功能，引導用戶在搜索上獲得更便捷更高效的體驗。

搜索時，直接輸入文字，搜索到與輸入文字相關的信息。大多app都有採用邊輸入邊聯想的輸入模式，這樣可以提高搜索效率，作為輔助搜索時獲得信息更加快捷。

如下圖↓

淘寶的輔助多重篩選搜索，輸入時展現的一系列聯想內容，點擊右邊的一個拓展icon，就可以採用聯想出的內容，在此基礎上繼續縮小範圍篩選，從而幫助用戶獲得最接近需求的內容。如下圖↓

點擊這裡查看示例→ xiaopiu-淘寶多重篩選示例

當應用里的內容涉及的類別較多、範圍較為廣泛，為了搜索出的內容更加準確，減少用戶在眾多相似的搜索結果中選擇內容時的干擾，可採用分類標籤的方式便於用戶搜索。這種主要適用於用戶已知需要搜索的內容的類別，縮小搜索範圍。如下圖↓

點擊這裡查看示例→ xiaopiu-按分類搜索示例

對於用來獲得最新資訊、熱門、新聞等的應用，針對無目的性瀏覽搜索和對要搜的內容並沒有多少了解的用戶，目的就是為了讓他們了解到這些內容，所以熱搜標籤會是一個很常見且高效的選擇。這種提供降低了用戶搜索成本，提供了搜索建議，在一定程度上還可以進行運營推廣。如下圖↓

點擊這裡查看示例→ xiaopiu-熱搜標籤示例

按歷史搜索的出現給在搜索後臨時退出app或要再次搜索之前搜索過的內容的用戶提高了搜索效率。

多數用戶會在重新輸入一次搜索過的內容的時候失去部分耐心，因而降低用戶體驗。

舉一個例子，買完火車票以後查看發車時間，如果每次回去查看都要重新輸入，就會產生厭煩情緒。

在影視類app中，歷史搜索使得用戶能快速進入上次觀看的影視內容，在購物類App中，歷史搜索則使得對上次的購物滿意的用戶更快找到之前的店鋪，降低思考成本。如下圖↓

點擊這裡查看示例→ xiaopiu-歷史搜索示例

• 語音搜索

除了文字搜索，語音搜索的發展也逐漸在改變人們的使用方式。對於中老年人來說，語音搜索比文字搜索方便得多，他們使用智能機時不用再努力特意去學習打字，只要點擊一個按鈕就可以輕鬆輸入他們想要的內容。而對於年輕人來說，雖然打字是件簡單的事情，但是隨著大多數的年輕人且越來越多在走路時也玩手機的趨勢來看，語音搜索對於他們來說也是個十分便利的選擇，如同語音聊天一樣，人們會漸漸對語音輸入產生依賴。如下圖↓

聽歌識曲出現在多數音樂類app，年輕人喜歡聽音樂，也喜歡在咖啡店或者走路時享受聽音樂的樂趣，還有在即時聽到音樂的時候想要立刻獲得歌曲信息，這時候文字搜索就顯得十分局限，讓用戶點開app就能直接根據歌曲片段搜索到該首歌曲，這便讓用戶體驗達到絕佳效果，因此多數音樂類app會直接將聽歌識曲放置在首頁做成一個二級界面。如下圖↓

點擊這裡查看示例→ xiaopiu-聽歌識曲示例

部分音樂類app還針對一些場合做了些語音搜索上的優化，比如哼歌識曲。對於沒能及時聽歌識曲，沒有記住歌詞，突然想要找回以前聽過的已經不記得名字和歌詞的歌之類的情況，哼歌識曲就提高了搜索到用戶想要的內容的可能。如下圖↓

點擊這裡查看示例→ xiaopiu-哼唱識別示例

• 圖像搜索

圖像搜索也是一個便利的搜索方式。較為基礎的是大家很熟悉的「以圖搜圖」，既可以當即拍照，也可以點擊左下角上傳圖片進行識別。對於沒有二維碼和條形碼的物品，如何快速搜索到併購買該物品呢？有時候在商場看到一件衣服，覺得價格太昂貴，或是看見其他人買了一個非常喜歡的東西，也想買一個同款，卻又很難只根據顏色和表達不出的款式風格搜到最相近的物品。當場拍下物品的照片以後，用「以圖搜圖」模式搜索，識別出與拍攝物品相似的物品。如下圖↓

點擊這裡查看示例→ xiaopiu-拍立淘示例

AR掃又是「以圖搜圖」的一個優化，直接掃描即可識別物品，減少了用戶拍照又上傳的操作成本，如下圖↓

搜索結果

從搜索結果看，又有許多不同形式的功能展現。搜索結果可能有純文字列表的展示、文字加圖片的展示、以及按分類顯示的展示。以網易雲音樂為例，純文字的展示對於搜索結果來說已經是較為主要且明顯的內容，顯示出圖片沒有其他明顯的作用。而對於購物類app，物品的展示圖片就顯得相對重要，用戶會根據物品的樣圖來決定想要查看的內容。對於微信來說，微信並不是專門為用戶想看的資訊內容而生，用微信搜索的用戶可能是因為近期在微信某處看到的某個內容相關，但是突然忘記來源究竟是小程序還是朋友圈，展現的內容就按分類羅列，搜索不局限在某個區域內。如下圖↓

搜索結果還可以以其他形式展現。以大眾點評為例，在給根據地圖搜索附近商店可以給用戶直觀地展現，根據遠近和路線決定目的地。如下圖↓

點擊這裡查看示例→ xiaopiu-地圖位置搜索示例

除了搜索結果的展現形式不同外，還有搜索結果提供的可操作功能的不同。搜索範圍可以是精確搜索，也可以是模糊搜索。模糊搜索比精確搜索的範圍更廣，對比精確搜索的準確度偏低。精確搜索無法識別其中的關鍵字而給出相關結果，而是將搜索詞條整個作為整體進行的搜索，相對模糊搜索而言較為局限。如下圖↓

根據搜索的結果的範圍度可進行分類篩選，為了讓搜索結果縮小範圍，搜索更精確，如下圖↓

搜索功能中搜索的內容也可以不局限於搜索的標題和一級展示內容，可能根據搜索的結果中的部分內容而得出與之相關的結果搜索。在音樂類app中較為常見是根據歌詞搜索歌名，很多歌曲可能忘記歌名只會哼唱一兩句歌詞，比起書或文章來說，歌曲的歌詞內容較少，因此根據歌曲內容搜索也容易實現。

如下圖↓

在影視類app里比較常見還有一種功能，在搜索結果項中給出可進一步操作的按鈕。由於搜索出的結果項較少，搜索到的內容較為專一，直接操作對用戶來說減少了操作成本。不同於淘寶之類的購物類app，這類app因為需要查看更多商品詳情再做購買決定，而類似影視類app則搜到的內容基本符合用戶需求，所以搜索的結果項放置可操作按鈕。如下圖↓

點擊這裡查看示例→ xiaopiu-搜索結果點擊播放示例

總結

根據app的特性和用戶需求分析，考慮用戶在搜索時需要的搜索方式，不同app採用不同的搜索功能設計，可以提升用戶體驗。

根據用戶需求，一步步優化和改善，從最基礎的文字搜索，考慮無法滿足在文字搜索上的用戶需求，在合適的時候輔助以聲音和圖像搜索。

在圖像搜索和語音搜索上進一步改善做出新的搜索優化，正如淘寶這樣的app，從文字搜索到掃一掃，再到拍立淘，甚至複製粘貼淘口令，已經漸漸把淘寶里的搜索體系完善了。

搜索並不是只局限在一個放大鏡圖標和一個輸入框上，先仔細考慮本身產品的內容特性和不同使用場景，再來決定搜索功能對於該產品的重要性及分類以及搜索結果呈現等其它設計。

附上搜索功能的頁面原型以供預覽和下載：xiaopiu-在線APP原型設計-app搜索功能示例

（下圖為部分app搜索原型，所有搜索原型包含交互動畫，需點擊鏈接查看）

本文旨在從app的搜索功能這一小部分的討論引導大家從每一個小的細節和功能上設計好app，希望大家在看完這篇文章以後能對搜索功能有一個更為細緻的見解，從當前產品的具體形態來思考搜索功能的重要性以及它的使用場景，提供給用戶便捷的搜索方式、合理的搜索建議及精準的搜索結果，提升搜索體驗，讓用戶高效準確地找到目標信息。

其他資源分享

更多資源詳見專欄：xiaopiu工坊

或直接訪問我們的網站：xiaopiu-精選廣場

除了以上的APP模板，我們還有天貓商城、WeUI、餓了么、音樂、ZAKER、Timeline、Yahoo News Digest、澎湃新聞、loading動效、騰訊視頻、ofo小黃車、新浪微博、Instagram、Keep、支付寶、QQ、全民K歌、鬥魚、58同城、小程序-輕芒雜誌、小程序-自選股、小程序-王者榮耀排行榜、小程序-朝夕日曆、小程序-摩拜單車等幾十款精選多行業高品質原型模板等你來用哦！

歡迎大家對我們的產品提出建議，對後面分享內容有哪些期待和想法也可以跟我們交流喲！_(:?」∠)_

如果你覺得還不錯，動動手點個贊，生活更美好~(?′ ? `)?

推薦閱讀：