原文引自 Ksenia Toloknova 的文章《Mobile search:Which pattern should you choose?》，譯文內容已做部份刪減和調整。

推薦閱讀

Ksenia Toloknova 及她的團隊為 Alfabank 工作，并參與設計應用程序的模式，在本篇文章中，我們將跟隨該團隊一起討論搜索設計模式。

我們會：

1. 分析搜索模式的各種選擇方案；
2. 研究搜索設計指南；
3. 考慮一些用戶體驗誤區；

搜索是一個靈活的工具，它的工作方式可能會因場景而異。為了更好地理解這個話題，我們列出了一系列搜索操作的原則。

移動應用程序搜索機制信息圖

下面我們將逐一探討這些原則和設計要點：

一、原則 1：搜索入口

搜索入口的選擇和位置取決于搜索需求的重要程度。

Suzanne Scacca 在 2019 年為《Smashing Magazine》寫的文章中，概述了各種入口的可選方案，并提到搜索可以被設置在頁面的頂部或底部。我們補充一點，搜索不止可以出現在頂部或底部，它也可以位于屏幕內。

讓我們考慮 3 種最常見的選擇：

1. 搜索條

當主要焦點必須放在搜索功能上時，此選項更可取。搜索條占據了屏幕上的重要空間，使用戶更容易訪問。在搜索是關鍵功能或是與內容交互的主要方式的情況下，這種方案尤其方便。實用搜索條的示例可以在 Google 地圖、Airbnb、DoorDash 等應用程序中找到。

搜索入口 — 搜索條

2. 底部導航圖標

將搜索圖標放置底部導航欄中，可以在應用程序的任何場景下訪問搜索功能。此選項適用于搜索在整體導航中起著重要作用的應用程序，用戶可以在任何上下文環境下快速切換到搜索。這種方法使搜索功能更容易被訪問。你可以在 Instagram、Uber Eats、Apple TV 等應用程序中看到這種使用方式。

值得一提的是搜索條和底部搜索圖標可以在同一個屏幕里并存。

搜索入口 — 底部導航

3. 頂部導航圖標

使用搜索圖標放置在頂部導航欄適用于搜索功能的優先級較低或使用頻率較低時。這種方式幫助節省屏幕空間，通常意味著用戶在開始搜索之前將先關注應用程序的其他方面。在前文中，Suzanne 建議如果搜索不是應用程序中唯一重要的操作時使用這種類型的搜索入口。你經?？梢哉业竭@種頂部導航圖標的應用示例，比如在 Youtube、Youtube Music、Twitch 等程序中就有。

搜索入口 — 頂部導航

搜索入口也可以被隱藏。例如，它可以位于下拉菜單中。如果你的場景中很少需要用到搜索，則適合使用此選擇。

搜索入口的選擇應該根據用戶需求和應用程序本身的特性來確定，以確保最大的可用性并與應用程序的整體導航和設計策略保持一致。

二、原則 2：搜索結果范圍

搜索可以是全局的或局部的。兩種類型的搜索都有其優點并且用戶的需求是平等的。

1. 全局搜索

全局搜索對于內容量大的應用程序來說是必要的，也是導航方式之一。它不限于任何一種類型的內容，除非應用本身限制。

全局搜索的示例可以在谷歌地圖應用程序中找到，其中搜索是主要的導航方式。你可以通過搜索找到你需要的一切——最近的加油站、咖啡館、餐廳或地標。

開發人員的有用提示：“雖然是以單獨頁面的樣式出現，但這種搜索是用模態窗口實現的。這可以通過觀察屏幕出現的方式來直觀地理解——它不是從側面出現的動畫”

開發人員的有用提示：“如果語音搜索只是作為語言識別器工作，那么實現語音搜索并不困難。識別時使用的語言取決于手機的系統設置?！?/p>

谷歌地圖應用的全局搜索

全局搜索通?？梢灾苯訌膽贸绦虻闹髌聊恢蝎@取到。除了谷歌地圖之外，這樣的設計方式還可以在 Booking、Airbnb、Zillow 等許多其他應用中找到。

如果用戶可能需要不確定的或不具體的內容，你的應用程序里就應該包含全局搜索。

2. 局部搜索

局部搜索幫助用戶在特定場景下更簡單地找到相關信息。

一個局部搜索的案例，Facebook 的朋友 Tab，在這里，搜索入口被設計為經典的放大鏡圖標，通過點擊此圖標，用戶可以進入搜索朋友列表，這里的搜索僅限于朋友列表，換句話說，它是局部的。

Facebook 中的局部搜案例

沒有任何規則定義哪種類型的搜索更好，這兩種類型都有需求，取決于用戶的需求和應用程序的功能特點。

三、原則 3：呈現方法

點擊搜索輸入框或搜索圖標后會發生兩種情況：

1. 新頁面

大多數情況下，搜索會在單獨的頁面上打開，使用戶將注意力集中在他們的搜索需求上。值得注意的是，這個屏幕可以是一個完整的屏幕，也可以是模態屏幕。從視覺上看，它們的主要區別在于搜索場景的退出點：

1. 后退箭頭圖標 點擊該圖標允許用戶退出搜索模式。這通常用于全屏視圖，但有時這種箭頭也可以放在模態視圖中。
2. 位于左側或右側的 ? 圖標 我們馬上會在下文中提到這個方案的缺點。
3. 滑動或下箭頭 展現方式根據平臺差異而通常有所不同。在 iOS 中，它通常表現為帶有滑動器和深色頂部的全屏面板。而 Android 平臺根據舊的 Material Design 指南，特點是用一個下箭頭（2014 年 2 月 5 日，指南中不再包含此項）。

呈現方式

2. 同一頁面

如果搜索在同一頁面上打開，則很可能指搜索該頁面中的內容，充當篩選器的作用。Telegram 應用程序中提供了此類篩選搜索的示例?？梢詮南吕藛沃屑せ铑l道內的搜索。點擊搜索后，導航欄中會出現一個搜索條，用于篩選內容。

Telagram 里的一個篩選搜索案例

Suzanne Scacca：“想想一個商店里每種產品都附有大量評論，如果你的用戶想關注其他消費者對于某個產品的評價（例如，露營帳篷是否防水），搜索功能將幫助他們快速獲得包含特定關鍵詞的評論?！?/p>

「獨立新頁面」和「在同一頁面內搜索」之間的選擇取決于使用的場景。獨立新頁面可以提供更集中的搜索空間，而同一頁面內搜索可以方便地快速過濾內容，無需導航到另一個頁面。

四、原則 4：搜索結果的復雜性

1. 簡單展示

簡單展示適合于內容比較統一、不需要額外區分類別的情況。它將結果線性展示，從而簡化了用戶對信息的感知。

簡單搜索結果展示案例

但是，在內容量大的情況下，由于結果過飽和，簡單的顯示可能導致難以找到必要的信息。

2. 分類和篩選展示

如果你的應用程序包含各種類型的內容，請考慮添加分類、篩選器或兩者組合的方式，提供更有條理的方法來組織結果。

分類允許用戶通過關注他們感興趣的領域更快地找到所需的信息。

分類搜索結果

而篩選有助于縮小搜索范圍，并根據特定參數（如日期、內容類型、作者等）顯示結果。可以同時使用多個維度進行篩選。

Catherine Dee 在她的文章中建議：“使用篩選來減少屏幕上的混亂?！?/p>

使用篩選搜索

另一種選擇是同時使用分類和篩選器。如果你決定用這樣一個復雜的設計，請確保你的用戶理解這些表述，正如尼爾森·諾曼集團建議的那樣：“模糊的分組和不明確的標簽會增加認知負擔?！?/p>

組合使用分類和篩選

3. 部分展示

一個不太常見但有趣的方案是展示部分結果。這種類型的方案在 Messenger 中實現了。如果你希望避免引入額外的導航，同時又希望合理地劃分內容，那么這種方案非常適合。根據 B.J.Fogg 的行為模型，這種分類可以幫助用戶減少選擇所需選項的時間，從而增強用戶體驗。

Messenger 搜索結果中的分段內容展示

五、原則 5：輸入字段的復雜性

1. 簡單搜索

簡單的搜索框是用戶在應用程序中搜索信息的最常見和熟悉的方式。它是一個標準的文本輸入框，用戶可以在其中輸入要搜索的關鍵字或短語。在下一部分將仔細討論搜索框的運作機制及考慮用戶將如何退出搜索模式。

2. 多重搜索

多重搜索允許用戶同時處理多個搜索查詢。這種方法的一個例子可以在 Zillow 應用程序中找到，它允許用戶同時搜索多個社區的房地產。選擇社區后，它會作為標簽自動添加到搜索字段中。如有必要，用戶可以通過選擇多個社區來添加多個標簽。

Zillow 應用程序中的多重搜索——第 1 部分

除此之外，你還可以通過點擊篩選圖標來優化搜索請求。

Zillow 應用程序中的多重搜索——第 2 部分

另一個有趣的多重搜索功能是由谷歌公司實現的。他們集成了照片和文字搜索。

谷歌 app 里的多重搜索

實現多重搜索需要額外的功能來允許用戶同時管理多個搜索查詢。這包括添加和刪除標簽、管理其順序以及組合查詢，從而獲得更精確的結果。如果你正在設計如此復雜的搜索，那么，考慮所有的可點擊區域非常重要，因為這里有很多可點擊區域。

我們似乎已經涵蓋了搜索的主要類型，當你了解了所需的搜索類型，就該考慮細節了

六、取消輸入和退出搜索

在使用搜索功能時，我們會遇到兩個額外的需求：

1. 清除輸入字段；
2. 取消整個搜索進程；

這意味著要將兩個取消操作放在一起。那么，讓用戶清楚地理解這些操作，從而輕松地確定哪個按鈕能執行所需操作就很重要。

選擇 1：經典的 iOS 方法

iOS 人機界面指南建議：

1. 使用輸入框內的清除按鈕刪除輸入；
2. 提供取消按鈕以退出搜索模式；

這種方法也可以在 Android 平臺上實現

經典的 iOS 方法：取消輸入和退出搜索模式

選擇 2：經典的 Material Design 方法

Material Design 3（Android）建議：

1. 輸入框內有一個清除按鈕，用于刪除輸入；
2. 后退箭頭可退出搜索模式

這種方法也經常在 iOS 上使用，其原因有很多。首先后退按鈕比“取消”按鈕占用的空間更少。其次，這種排列方式使它們距離更遠，減少了因意外而誤觸的風險。

用于取消輸入和退出搜索模式的經典 Material·Design 方法

選擇 3：雙 ?

1. 輸入框內有一個清除按鈕，用于刪除輸入
2. 另一個 ? 用于退出搜索模式

我們認為，這個選擇比前兩個選擇的優勢要少一些。首先，它可能會導致混亂，其次，大量的打叉符號可能看起來不愉悅。

用于取消輸入和退出搜索模式的雙 ? 選項

其他選擇

另一種選擇是通過點擊空白區域來取消搜索。然而，大多數情況下，點擊空白區域而不意外觸發另一個可點擊元素是很有挑戰性的。當一個人想要關閉搜索時，他們可能會因為點擊空白區域而意外打開一個新頁面。

假設提問：“我們可以讓點擊(空白)內容區域不會打開任何內容嗎？”答案是“否”，因為如果我們禁止這個操作，用戶將無法點擊所需的結果。

其他選擇——點擊空白區域取消搜索

另一個可能的選擇是不要允許用戶清除已輸入的文本。如此設計，用戶只能逐個字符地刪除文本。這樣的解決方案可能會引起負面情緒，尤其是在頻繁使用搜索的情況下。

其他選擇——不允許用戶清除輸入

七、搜索結果呈現

最佳做法是在輸入 1-3 個字符后立即顯示搜索結果。這使得用戶可以減少工作量，從而大概率更快地找到所需的內容。

開發人員提示：“為了避免在輸入第一個字符后立即查詢數據庫，請實現一個監聽打字速度的“監聽器”函數。如果在輸入最后一個字符后出現停頓，則表示可以向服務器發送請求?！?/p>

另一種選擇是僅在點擊搜索按鈕后顯示結果。這種方法通常在有技術限制時使用，例如數據庫負載阻止立即顯示結果。我們建議使用此項作為備選。如果在點擊“搜索”按鈕之前有機會讓用戶受益，那么就值得探索這個可能性。

搜索結果呈現選項——點擊搜索按鈕前 / 后

八、搜索結果設計

在設計搜索結果時，不僅要考慮它們的功能，還要考慮它們的視覺外觀，這一點很重要。搜索結果可以是基于文本的簡單形式，或更復雜的形式。

1. 簡單的文字結果 是經典的，也是呈現搜索結果最常見的方式。它由與用戶請求相對應的文本鏈接列表組成。有時，該列表會用圖標進行補充。
2. 視覺復雜的結果 提供了更詳細的呈現，這種方法可以讓用戶充分了解搜索結果并簡化決策過程。例如，搜索結果可以顯示圖像縮略圖、簡短描述、評級或其他元素幫助用戶評估每個結果的相關性和興趣。

搜索結果設計選擇

九、搜索建議

輸入搜索詞前的建議常常很有用。它們可以減少用戶搜索的時間，提高可用性和忠誠度，甚至可以作為額外的銷售工具。

搜索建議示例

除了推薦之外，你還可以整合搜索歷史記錄：

正如 O'Reilly 文章（2014）中所述，“精心設計的移動界面遵循基本的可用性箴言：尊重用戶的精力。已保存、最近和熱門搜索可以幫助用戶輕松地從以前的搜索項中進行選擇，而不用重新輸入相同的關鍵字或搜索條件，以此實現這一點。”

此外，如果沒有搜索結果，你也可以使用推薦。你可以提供替代方案，而不是給用戶留下一句干巴巴的“抱歉，沒有找到任何內容”，這正是 Baymard Institute 的建議。以下是他們建議在“無結果”屏幕上使用的六個信息選項：

1. 與搜索詞所屬類別相關的建議；
2. 可替代的搜索詞
3. 個性化推薦
4. 聯系電話、聊天選項、幫助鏈接
5. 廣告
6. 熱門產品及類別

沒有搜索結果時的推薦示例

十、設計輸入框時還需要記住什么

1. 突出匹配結果

強調匹配的搜索詞是在使用搜索時增強用戶體驗的有效方法之一。它使用戶可以更輕松地在大量信息中進行檢索?？梢酝ㄟ^用顏色、粗體或彩色背景來強調相關區域，突出顯示匹配結果。

突出顯示搜索結果的案例

2. 命名搜索區，以便清楚可以搜索什么

在這里我們想分享 UX 文案同事的建議，要點是，如果可能的話，不僅要寫“搜索”，還要直接說明搜索的維度，例如“城市”、“作者或書名”、“貓的品種”等等。

用戶體驗文案示例

3. 當使用鍵盤在輸入框上打字時，考慮提示

在我們的研究中，輸入框里的提示比其他提示出現的頻率低。原因是輸入框內一次只能出現一個提示，但是在底部可以一次顯示多個提示。因此，這種提示方式與其說是獨立的，不如說是補充性的。

另外，在系統鍵盤內的提示變得越來越常見。通常數量不多，但比搜索框中的要多得多。

當在輸入框中打字時出現的提示和鍵盤上的提示

最后，我們想分享尼爾森·諾曼團隊的幾項建議，他們編制了一系列改進搜索的方法，以下是其中的一些：

1. 通過將熱搜的結果放在搜索結果列表的頂部，增強熱門搜索結果展示。
2. 考慮可替代的術語，特別是當你的內容特定于某個行業或技術時。
3. 不要僅僅依賴于精確的查詢，用派生詞擴展結果；
4. 糾正拼寫錯誤（打字錯誤非常常見，因此所有主要的搜索引擎都會使用糾錯）
5. 忽略停用詞，例如經常被使用的冠詞（“a”、"the"）、介詞（“of”、“for”）或連詞（“be”、“seem”），中文中的停用詞有“在”、“的”、“也”、“為”、“一些”...

總結

搜索在現代應用程序中發揮著重要作用，使用戶能夠快速方便地訪問所需的信息。在開發和設計搜索模式時，考慮用戶的需求、應用程序使用場景和界面設計原則非常重要。

問問自己：

1. 應該搜索整個應用程序內容，還是部分特定的內容？
2. 在你的場景下，搜索應該如何被打開——在單獨的頁面上，還是在同一個頁面上？
3. 搜索入口應該放在哪里，看起來應該是什么樣子——應該強調它，還是它在你的場景中是一個次要的功能？
4. 簡單地展示搜索結果是否足夠，還是應該分段展示部分搜索結果？
5. 輸入 1-3 個字符后，是否可以立即顯示搜索結果？
6. 是否可以在搜索開始之前添加建議，以及在沒有搜索結果的情況下，給用戶一些建議？
7. 用戶將如何清除輸入的文本并退出搜索模式？
8. 應該在搜索區填寫什么來幫助用戶了解搜索的工作原理？

只有考慮到所有這些因素，你才能創建一個不僅有效且實用，而且使用起來很愉悅的搜索系統。我們希望這篇文章能幫助你創造一個真正好的用戶體驗。

歡迎關注作者微信公眾號：「We-Design」