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

導(dǎo)讀目錄：

• Chapter 1 需求背景
• Chapter 2 需求分析
• Chapter 3 交互設(shè)計(jì)：搜索一般狀態(tài)、搜索異常狀態(tài)、其他限制條件

Chapter 1 需求背景

一個(gè)類CRM的后臺(tái)管理系統(tǒng)，客戶經(jīng)理可以通過客戶列表檢索名下的客戶，現(xiàn)在增加客戶全景視圖（客戶詳情），點(diǎn)擊列表上的客戶名稱即可打開客戶全景視圖。新的需求是，增加一個(gè)全局搜索的功能，通過搜索客戶名稱或者客戶編號(hào)即可直達(dá)客戶全景視圖。

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

Chapter 2 需求分析

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

1. 這個(gè)全局搜索的功能是否值得做？——值得，為直達(dá)單客戶全景視圖增加了入口，且節(jié)省中間先查看列表的步驟，該功能使用頻次高。
2. 搜索功能放在哪個(gè)位置比較合適？——全局搜索，一般放在右上角比較顯眼的位置（個(gè)別網(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)理輸入客戶姓名/編號(hào)進(jìn)行匹配，編號(hào)是唯一標(biāo)識(shí)，用于區(qū)分同名客戶，精確匹配，同時(shí)也意味著可以放棄展示模糊搜索結(jié)果頁，從搜索匹配列表中選擇結(jié)果。
6. 大致的交互流程是怎么樣的？——輸入客戶姓名/編號(hào)→選中客戶→跳轉(zhuǎn)到全景視圖。

Chapter 3 交互設(shè)計(jì)

1.搜索一般狀態(tài)

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

• 默認(rèn)狀態(tài)：輸入框提示語為：請(qǐng)輸入客戶姓名/編號(hào)。
• 獲取焦點(diǎn)：獲取輸入光標(biāo)，提示語不消失。
• 輸入中：①輸入中，實(shí)時(shí)顯示聯(lián)想結(jié)果，匹配的詞匯高亮顯示；②鼠標(biāo)懸浮結(jié)果列表時(shí)，樣式有變化；③點(diǎn)擊列表結(jié)果，在新窗口打開相應(yīng)客戶全景視圖。
• 失去焦點(diǎn)：保留輸入的內(nèi)容。

2.搜索異常狀態(tài)

本案例中，搜索的異常狀態(tài)會(huì)分為兩種情形，其中一種是搜索不到客戶，即搜索無匹配的結(jié)果，這時(shí)需要增加相應(yīng)的提示，例如“沒有找到相關(guān)客戶”；另外一種是客戶經(jīng)理輸入非法字符，如“#@￥%……&*（）”這些，系統(tǒng)是不支持的，這時(shí)可以采用輸入非法字符不展示或者用錯(cuò)誤提示“請(qǐng)輸入中文字符或數(shù)字”的方式來規(guī)避。

但是，再進(jìn)一步思考，這兩種異常情形可以合并簡(jiǎn)化處理，因?yàn)榭蛻艚?jīng)理的目標(biāo)是搜索到相應(yīng)的客戶，而不是完成表單輸入，他輸入的內(nèi)容不會(huì)保存到數(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é)果太多時(shí)，例如輸入大姓“張”可能匹配到幾百個(gè)姓張的客戶，如果全部列出來則需要搜索結(jié)果列表出現(xiàn)滾動(dòng)條，且影響搜索效率，所以限制最多返回10條匹配結(jié)果。

（3）限制“Enter”鍵搜索、點(diǎn)擊圖標(biāo)搜索

由于是精準(zhǔn)搜索，需要從匹配結(jié)果中進(jìn)行選擇，而不是根據(jù)關(guān)鍵詞匹配到一個(gè)搜索結(jié)果頁，所以限制了使用鍵盤“Enter”鍵和點(diǎn)擊圖標(biāo)搜索。

以上，就是一個(gè)完整的后臺(tái)全局搜索的設(shè)計(jì)案例，它是基于后臺(tái)產(chǎn)品的實(shí)際場(chǎng)景提供的設(shè)計(jì)解決方案，不適用于所有場(chǎng)景，僅提供一些設(shè)計(jì)思路供參考。

作者：夜雨，高級(jí)交互設(shè)計(jì)師，專注金融行業(yè)-智能投顧方向，大部分時(shí)間在復(fù)雜后臺(tái)系統(tǒng)中遨游。簡(jiǎn)書：夜雨y；微信公眾號(hào)：iueuxd。

本文由 @夜雨 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自u(píng)nsplash，基于CC0協(xié)議