搜索看似簡單，但是細(xì)節(jié)很多，早前寫過一篇關(guān)于搜索方面的文章《交互設(shè)計基本功：如何設(shè)計一個好用的搜索框？》，幫大家普及了搜索方面的知識，但是不同設(shè)備、不同場景下搜索功能的設(shè)計千差萬別，做好搜索的交互設(shè)計，還需要大量的案例實踐。本次帶來了一個后臺全局搜索的設(shè)計案例，幫助大家打開思路。
導(dǎo)讀目錄：
Chapter1 需求背景
Chapter2 需求分析
Chapter3 交互設(shè)計：搜索一般狀態(tài)、搜索異常狀態(tài)、其他限制條件
Chapter1 需求背景
一個類CRM的后臺管理系統(tǒng)，客戶經(jīng)理可以通過客戶列表檢索名下的客戶，現(xiàn)在增加客戶全景視圖（客戶詳情），點擊列表上的客戶名稱即可打開客戶全景視圖。新的需求是，增加一個全局搜索的功能，通過搜索客戶名稱或者客戶編號即可直達(dá)客戶全景視圖。
拿到這個需求之后，是不是覺得很簡單？不就是在頂部顯眼的位置增加一個搜索框嘛，只需要1分鐘就可以搞定，連設(shè)計圖都準(zhǔn)備好了（見下圖）。然而，我們都知道，搜索功能并非這么簡單，換個說法就是，這樣的設(shè)計稿并沒有把所有細(xì)節(jié)考慮周全，是不可能通過設(shè)計評審的。
Chapter2 需求分析
既然沒有那么簡單，我們拿到需求的第一步還是需要進(jìn)行需求分析，需求分析的過程和方法見仁見智，這個例子可以用一種自問自答的方法進(jìn)行需求分析：
1.這個全局搜索的功能是否值得做？——值得，為直達(dá)單客戶全景視圖增加了入口，且節(jié)省中間先查看列表的步驟，該功能使用頻次高。
2.搜索功能放在哪個位置比較合適？——全局搜索，一般放在右上角比較顯眼的位置（個別網(wǎng)站在頂部中央），遵循web網(wǎng)站的搜索習(xí)慣。
3.搜索的數(shù)據(jù)量大不大？——據(jù)了解，每一名客戶經(jīng)理名下平均有1000名客戶，數(shù)據(jù)量不大。（這涉及到從數(shù)據(jù)庫提取數(shù)據(jù)的效率）。
4.是否有搜索權(quán)限控制？——有數(shù)據(jù)權(quán)限控制，客戶經(jīng)理只能搜索到自己名下的客戶，不能搜索到其他客戶經(jīng)理的客戶。
5.搜索是模糊匹配還是精準(zhǔn)匹配？——精準(zhǔn)匹配，客戶經(jīng)理輸入客戶姓名/編號進(jìn)行匹配，編號是唯一標(biāo)識，用于區(qū)分同名客戶，精確匹配，同時也意味著可以放棄展示模糊搜索結(jié)果頁，從搜索匹配列表中選擇結(jié)果。
6.大致的交互流程是怎么樣的？——輸入客戶姓名/編號→選中客戶→跳轉(zhuǎn)到全景視圖。
Chapter3 交互設(shè)計
1.搜索一般狀態(tài)
搜索一般狀態(tài)通常指默認(rèn)狀態(tài)、獲取焦點、輸入中、失去焦點4種狀態(tài)，只需要把示例圖和說明列示出來，就很容易理解了。
（1）默認(rèn)狀態(tài)：輸入框提示語為：請輸入客戶姓名/編號。
（2）獲取焦點：獲取輸入光標(biāo)，提示語不消失。
（3）輸入中：①輸入中，實時顯示聯(lián)想結(jié)果，匹配的詞匯高亮顯示；②鼠標(biāo)懸浮結(jié)果列表時，樣式有變化；③點擊列表結(jié)果，在新窗口打開相應(yīng)客戶全景視圖。
（4）失去焦點：保留輸入的內(nèi)容。
2.搜索異常狀態(tài)
本案例中，搜索的異常狀態(tài)會分為兩種情形，其中一種是搜索不到客戶，即搜索無匹配的結(jié)果，這時需要增加相應(yīng)的提示，例如“沒有找到相關(guān)客戶”；另外一種是客戶經(jīng)理輸入非法字符，如“#@￥%……&*（）”這些，系統(tǒng)是不支持的，這時可以采用輸入非法字符不展示或者用錯誤提示“請輸入中文字符或數(shù)字”的方式來規(guī)避。
但是，再進(jìn)一步思考，這兩種異常情形可以合并簡化處理，因為客戶經(jīng)理的目標(biāo)是搜索到相應(yīng)的客戶，而不是完成表單輸入，他輸入的內(nèi)容不會保存到數(shù)據(jù)庫，所以不需要強(qiáng)制輸入有效字符，我們可以把兩種情形都?xì)w結(jié)為他的輸入“沒有找到相關(guān)的客戶”。
統(tǒng)一處理方法為：輸入內(nèi)容匹配不到結(jié)果，或者輸入非法字符，統(tǒng)一醒目提示“沒有找到相關(guān)的客戶”。
3.其他限制條件
（1）數(shù)據(jù)權(quán)限
根據(jù)需求分析得知，客戶經(jīng)理只能搜索到自己名下的客戶，不能搜索到其他客戶經(jīng)理的客戶，交互說明中要增加相應(yīng)的注明文字。
（2）匹配結(jié)果限制
當(dāng)搜索匹配結(jié)果太多時，例如輸入大姓“張”可能匹配到幾百個姓張的客戶，如果全部列出來則需要搜索結(jié)果列表出現(xiàn)滾動條，且影響搜索效率，所以限制最多返回10條匹配結(jié)果。
（3）限制“Enter”鍵搜索、點擊圖標(biāo)搜索
由于是精準(zhǔn)搜索，需要從匹配結(jié)果中進(jìn)行選擇，而不是根據(jù)關(guān)鍵詞匹配到一個搜索結(jié)果頁，所以限制了使用鍵盤“Enter”鍵和點擊圖標(biāo)搜索。
以上，就是一個完整的后臺全局搜索的設(shè)計案例，它是基于后臺產(chǎn)品的實際場景提供的設(shè)計解決方案，不適用于所有場景，僅提供一些設(shè)計思路供參考。
更多我的原創(chuàng)精彩的文章推薦（讀完多點贊哦）
精品（超過700贊）：干貨：讓你全方位學(xué)習(xí)成為一名交互設(shè)計師（1.6萬字誠意之作）
交互設(shè)計系列：資源有限時怎么對待細(xì)節(jié)優(yōu)化？
