交互基礎小課堂！移動端「搜索功能」設計超全面總結！

在我接觸交互設計之前，我一直把搜索功能的設計看作「搜索框+提示詞+刪除icon+取消button」的設計，但其實看似簡單的搜索框背后擁有十分復雜的場景，復雜的邏輯還有復雜的算法規則等。

Peter Morville 有一本書《搜索模式》里面將搜索剖析得十分細，從搜索結構到行為模式到設計模式再到發現引擎都拆解開來一一講解，不過偏 web端，而且有點復雜，建議閱讀方法是只看目錄，知道搜索功能設計有哪些要點，然后自己結合案例分析總結即可。

這篇文章主要還是介紹移動端的搜索功能設計，根據用戶對搜索框的使用場景，拆解為：觸發入口——激活搜索框——輸入信息，即時反饋——結果展示——異常情況等。

一、搜索功能入口

我們可以根據搜索功能的重要性程度，將觸發搜索功能的入口分為四大類別：

一種是作為底部獨立的一個 tabbar 存在，比如 app store 里面的搜索；

一種是在頂部放置的一個搜索框入口，比如豆瓣；

一種是以一個 icon 的形式存在于某一角落處，觸發后即可開始搜索，比如站酷app 客戶端；

還有一種像小猿搜題，這樣的以搜索導向的特殊存在形式；

也有像自如這種搜索框作為懸浮按鈕存在于頁面中間的形式。

簡單總結一下這幾種搜索功能入口的適用場景：

二、激活搜索框

1. 搜索方式

當搜索框激活時，我們可以通過文字，語音，圖片，掃描二維碼等形式進行輸入。最常見的當然是文字輸入，比如36kr；

還有通過語音搜索，比如最常見的是支付寶的語音搜索，還有網易有道詞典的語音搜索；

而對于拍照搜索的話，最常見的是電商平臺里的拍照搜索，比如亞馬遜；

還有掃碼搜索，比如京東可以通過掃一掃搜索。

2. 沒有輸入內容時

在搜索框沒有輸入任何內容的時候，我們可以通過一些方式引導用戶搜索。比如：熱門搜索，熱門搜索的規則也是需要指定的，不同的平臺熱門搜索展示的規則不一樣，是每日熱搜還是每周還是每小時呢？每次呈現多少條熱搜以及是否可以在熱搜里加入運營的內容呢？也是我們需要考慮的。

比如歷史搜索，但是歷史搜索需要注意的是如果用戶是第一次搜索，那么是沒有歷史搜索，這個時候是否需要顯示歷史搜索呢？我觀察的絕大部分 app 如果第一次搜索或者清除了歷史搜索的時候，是不需要顯示歷史搜索字樣的，比如：

另外像高德地圖，可以根據用戶需求，通過一些固定的入口引導用戶快捷搜索，比如美食，酒店，公交站等。

另外當用戶沒有輸入內容的時候，搜索框會提供一些默認提示詞，這些提示詞絕大部分是來自運營的需求，用戶不用輸入任何內容，直接回車即可搜索默認提示詞，比如：

3. 提供搜索范圍

當 app 里內容十分多的時候，可以通過縮小搜索范圍，可以按照搜索結果的類型進行分類，比如用戶，信息，標簽等，一般用 tab形式比較多，比如詞典，微信，lofter，或者使用單選框形式，比如豆瓣。

三、輸入信息，即時反饋

在輸入完關鍵詞內容后，以前的 app 大都需要用戶點擊搜索后才執行搜索指令，現在絕大部分 app 都可以通過即時反饋完成實時搜索, 比如：

1. 關鍵詞聯想

用戶在輸入不完整的關鍵詞的時候，可以通過關鍵詞模糊匹配，但是需要注意的是：結果的排序規則以及匹配的結果條數。

舉個例子，比如我在天貓的搜索里面輸入「書」，排序第一的是「書架」，排序第二的是「書包」，這個排序規則可能是計算出的數據里書架比書包的點擊次數或者搜索頻次更高，所以會展示在前面，但是在這類電商平臺里與「書」有關的關鍵詞，十分多，不可能全部在關鍵詞聯想里展示出來，展示的數目也是有規則限制的。

2. 多詞搜索

不知道大家有沒有發現過多詞搜索的情況，比如當我們搜索一個帶定語的關鍵詞的時候，在定語與名詞之間用空格鍵隔開的時候，會變成兩個關鍵詞。

舉個例子，比如豆果美食，當我在搜索框里面輸入「土豆雞蛋」時，系統識別的結果是一個關鍵詞；當我輸入「土豆 雞蛋」的時候，系統識別的是兩個關鍵詞，但是對于結果的區別并不是很大，但是在設計交互的時候，也需要定義好規則。

四、搜索結果展示

1. 搜索展現形式

當輸入完搜索的內容時候，因為結果有多種不同的類目，對于內容的展現形式會有兩種：

一種是在一個頁面堆疊全部展示，這種一般適合單個類目結果不是很多的情況 ，并且在下滑的過程中，越往后的內容其實閱讀量會很低，用戶關注度也不高，比如在36kr 搜索「投資」，會出現不同類型跟投資有關的結果，如文章，快訊，視頻，音頻，專題，話題，投票，作者等：

還有一種是每一個類目都是用戶想要關注的，并且單個類目里的結果也比較多，一般可以選擇 tabbar 的形式進行對結果分類，比如站酷：

另外知乎的搜索結果展示做法是，穿插式地展示，以回答為主，期間穿插一些其他類目，比如話題，用戶，專欄等，但是它也會給用戶提供一個篩選的入口，讓用戶快速獲取想要的內容。

還有像一些 app 比如 unsplash，它們在搜索完的結果會另外一個頁面展示：

2. 搜索結果展示規則

對于搜索結果的展示規則，也是交互設計師需要考究的，比如我們需要定義搜索結果展示哪些字段，搜索結果的排序規則，關鍵詞與內容的匹配規則。

舉個例子：比如我在 TIM 上搜索「騰訊」，會出現很多和騰訊有關的內容，如果對于長字段的文本來說，不可能全部展示在這個預覽的頁面，我們需要定義可以展示哪些字段以及不能展示的字段怎么顯示，比如用「…」的方式。

這種情況在新聞咨詢類 app 里面十分常見，比如36kr 的文章，如果正文中某處出現與搜索的關鍵詞相匹配，那么在結果展示頁面，對于正文關鍵詞前面的信息是怎么顯示的呢？也是可以通過定義規則來實現的。

3. 搜索結果快捷操作

我們可以通過點擊搜索結果進入下一個頁面，也可以在當前頁面對搜索結果直接操作，在搜索結果里，為了方便用戶操作，加上功能按鈕，這種一般是我們前期已經了解好了人物模型的目標，知道他搜索的最終目的，才添加的快捷操作，常見的有關注，播放等，比如：

五、異常情況

對于搜索的異常情況，我們可以從用戶輸入異常，沒有搜索結果，網絡異常等幾個角度來考慮。

比如用戶輸入異常，可能是用戶輸入錯誤，比如我在淘寶上搜索「筆記笨」，系統查找無結果后，可以理解并糾正我的錯誤，將結果展示為「筆記本」的搜索結果，不過這種糾錯算法成本就比較高了。

對于沒有搜索結果的情況，我們也可以通過推薦相關的內容展示給用戶，這里一般是運營的最佳地方，或者是直接用比較人性化的設計告訴用戶沒有搜索結果，比如空白頁的小插畫設計。

如果是網絡異常，那么我們還需要考慮不同頁面的異常情況處理方式：比如在激活狀態，是不是熱門推薦等信息是沒法展示的呢？怎么告訴用戶現在沒有網絡，是等他輸入完之后再告訴他沒有網絡，還是在輸入的時候，就提醒用戶當前沒有網絡呢？在關鍵詞聯想頁面，如果沒有網絡，應該怎么顯示呢？在獲取搜索結果的時候，沒有網絡應該怎么展示給用戶呢？

從心理學的角度上來講，其實用戶并不需要知道現在沒有網，他不需要知道理由，只需要一個解決辦法，最好是系統能夠幫助我解決這個問題，我覺得在設計的時候，人性化的設計應該是在沒有網的時候，提供一個入口，幫助用戶快捷進入設置并且打開網絡。

而對于一些搜索的細節，比如如何刪除搜索的關鍵詞，以及如何取消/退出搜索，我們可以通過鍵盤上的刪除鍵一個一個刪除輸入的文字，也可以在輸入文字信息后，在搜索框上提供「X」icon，因為如果輸入的信息過多，那么用戶一個一個刪除會比較麻煩，這個時候提供一個一鍵刪除的 icon 也是體驗十分棒的，不過要注意的是在輸入文字前是不需要存在這個 icon 的。

至于退出搜索的話，一般是通過點擊「取消」按鈕取消搜索 。

總結

• 搜索功能的入口有四種形式；
• 搜索的方式也有文字，語音，圖片，二維碼等形式；
• 沒有輸入內容時，我們通過一些方式引導用戶輸入；
• 對于內容比較多的 app，通過一些形式來縮小搜索范圍；
• 輸入信息后，即時反饋，實時搜索；
• 關聯詞聯想，多詞搜索要定義好規則；
• 搜索結果有多種展現形式；
• 定義搜索結果展示的規則；
• 要考慮異常情況的處理方式。

歡迎關注作者的微信公眾號：「UED設計筆記」

圖片素材作者：Ted Kulakevich

「搜索設計體驗細節」

• 《超全面總結！搜索體系的建立與優化》
• 《如何做好一個搜索體驗流程？看這篇超全面的總結！》
• 《如何讓搜索框的體驗更好？我總結了這些設計套路！》
• 《這篇搜索功能設計的總結，幫你從產品的角度看問題》