搜索看似簡單，但是細節很多，早前寫過一篇關于搜索方面的文章《交互設計基本功：如何設計一個好用的搜索框？》，幫大家普及了搜索方面的知識，但是不同設備、不同場景下搜索功能的設計千差萬別，做好搜索的交互設計，還需要大量的案例實踐。本次帶來了一個后臺全局搜索的設計案例，幫助大家打開思路。

導讀目錄：

Chapter1 需求背景

Chapter2 需求分析

Chapter3 交互設計：搜索一般狀態、搜索異常狀態、其他限制條件

Chapter1 需求背景

一個類CRM的后臺管理系統，客戶經理可以通過客戶列表檢索名下的客戶，現在增加客戶全景視圖（客戶詳情），點擊列表上的客戶名稱即可打開客戶全景視圖。新的需求是，增加一個全局搜索的功能，通過搜索客戶名稱或者客戶編號即可直達客戶全景視圖。

拿到這個需求之后，是不是覺得很簡單？不就是在頂部顯眼的位置增加一個搜索框嘛，只需要1分鐘就可以搞定，連設計圖都準備好了（見下圖）。然而，我們都知道，搜索功能并非這么簡單，換個說法就是，這樣的設計稿并沒有把所有細節考慮周全，是不可能通過設計評審的。

Chapter2 需求分析

既然沒有那么簡單，我們拿到需求的第一步還是需要進行需求分析，需求分析的過程和方法見仁見智，這個例子可以用一種自問自答的方法進行需求分析：

1.這個全局搜索的功能是否值得做？——值得，為直達單客戶全景視圖增加了入口，且節省中間先查看列表的步驟，該功能使用頻次高。

2.搜索功能放在哪個位置比較合適？——全局搜索，一般放在右上角比較顯眼的位置（個別網站在頂部中央），遵循web網站的搜索習慣。

3.搜索的數據量大不大？——據了解，每一名客戶經理名下平均有1000名客戶，數據量不大。（這涉及到從數據庫提取數據的效率）。

4.是否有搜索權限控制？——有數據權限控制，客戶經理只能搜索到自己名下的客戶，不能搜索到其他客戶經理的客戶。

5.搜索是模糊匹配還是精準匹配？——精準匹配，客戶經理輸入客戶姓名/編號進行匹配，編號是唯一標識，用于區分同名客戶，精確匹配，同時也意味著可以放棄展示模糊搜索結果頁，從搜索匹配列表中選擇結果。

6.大致的交互流程是怎么樣的？——輸入客戶姓名/編號→選中客戶→跳轉到全景視圖。

Chapter3 交互設計

1.搜索一般狀態

搜索一般狀態通常指默認狀態、獲取焦點、輸入中、失去焦點4種狀態，只需要把示例圖和說明列示出來，就很容易理解了。

（1）默認狀態：輸入框提示語為：請輸入客戶姓名/編號。

（2）獲取焦點：獲取輸入光標，提示語不消失。

（3）輸入中：①輸入中，實時顯示聯想結果，匹配的詞匯高亮顯示；②鼠標懸浮結果列表時，樣式有變化；③點擊列表結果，在新窗口打開相應客戶全景視圖。

（4）失去焦點：保留輸入的內容。

2.搜索異常狀態

本案例中，搜索的異常狀態會分為兩種情形，其中一種是搜索不到客戶，即搜索無匹配的結果，這時需要增加相應的提示，例如“沒有找到相關客戶”；另外一種是客戶經理輸入非法字符，如“#@￥%……&*（）”這些，系統是不支持的，這時可以采用輸入非法字符不展示或者用錯誤提示“請輸入中文字符或數字”的方式來規避。

但是，再進一步思考，這兩種異常情形可以合并簡化處理，因為客戶經理的目標是搜索到相應的客戶，而不是完成表單輸入，他輸入的內容不會保存到數據庫，所以不需要強制輸入有效字符，我們可以把兩種情形都歸結為他的輸入“沒有找到相關的客戶”。

統一處理方法為：輸入內容匹配不到結果，或者輸入非法字符，統一醒目提示“沒有找到相關的客戶”。

3.其他限制條件

（1）數據權限

根據需求分析得知，客戶經理只能搜索到自己名下的客戶，不能搜索到其他客戶經理的客戶，交互說明中要增加相應的注明文字。

（2）匹配結果限制

當搜索匹配結果太多時，例如輸入大姓“張”可能匹配到幾百個姓張的客戶，如果全部列出來則需要搜索結果列表出現滾動條，且影響搜索效率，所以限制最多返回10條匹配結果。

（3）限制“Enter”鍵搜索、點擊圖標搜索

由于是精準搜索，需要從匹配結果中進行選擇，而不是根據關鍵詞匹配到一個搜索結果頁，所以限制了使用鍵盤“Enter”鍵和點擊圖標搜索。

以上，就是一個完整的后臺全局搜索的設計案例，它是基于后臺產品的實際場景提供的設計解決方案，不適用于所有場景，僅提供一些設計思路供參考。

更多我的原創精彩的文章推薦（讀完多點贊哦）

精品（超過700贊）：干貨：讓你全方位學習成為一名交互設計師（1.6萬字誠意之作）

交互設計系列：資源有限時怎么對待細節優化？

Sketch教程：Sketch進階教程：這可能是Symbol最詳細的使用說明書