編者按：資深設(shè)計(jì)師經(jīng)常強(qiáng)調(diào)的「場(chǎng)景」是什么？今天@拉瓦像阿拉蕾 通過(guò)5個(gè)搜索的案例，帶你認(rèn)識(shí)場(chǎng)景的魅力。

在toB類(lèi)的系統(tǒng)設(shè)計(jì)中，表格頁(yè)面應(yīng)該是比較常用的用于展示數(shù)據(jù)信息的方式之一了。大多數(shù)場(chǎng)景下，承載了大數(shù)據(jù)量的表格用戶(hù)需要通過(guò)「搜索」的場(chǎng)景來(lái)快速找到需要的信息。下面是在數(shù)據(jù)表格中，幾乎可以涵蓋到所有搜索需求的交互模式。

一.?單搜索框

顧名思義就是搜索框只有一個(gè)，這種場(chǎng)景比較常見(jiàn)的是「單屬性搜索」，當(dāng)用戶(hù)可以簡(jiǎn)單地通過(guò)一個(gè)屬性就能快速定位到目標(biāo)，比如搜索「產(chǎn)品ID」這種具有唯一識(shí)別性的屬性。

另外，這種場(chǎng)景也同樣適用于「模糊搜索」的場(chǎng)景，也就是用戶(hù)在一個(gè)「萬(wàn)能」輸入框中，輸入關(guān)鍵字，進(jìn)行多屬性的關(guān)鍵字匹配，從而幫助用戶(hù)找到相關(guān)信息。

二.?多條件組合搜索

這種搜索框是基于表格數(shù)據(jù)維度很多的情況下，用戶(hù)需要通過(guò)多個(gè)屬性組合，更加精確和快速地找到相關(guān)的條目。在這種情況下，我們不建議「大而全」地把表格所有的屬性都列出來(lái)讓作為搜索條件，產(chǎn)品往往需要去了解清楚哪些屬性對(duì)于用戶(hù)來(lái)說(shuō)是高識(shí)別度的、高使用頻次的，進(jìn)而決策幾個(gè)對(duì)用戶(hù)幫助最大的屬性作為組合搜索的條件。根據(jù)「7±2法則」，組合搜索的條件最好不要超過(guò)5個(gè)，否則再增加一個(gè)，對(duì)用戶(hù)就多一份負(fù)擔(dān)。

三.?多條件折疊搜索

△ ?收起狀態(tài)

△ ?展開(kāi)更多

在復(fù)雜業(yè)務(wù)的系統(tǒng)中，我們常常會(huì)發(fā)現(xiàn)當(dāng)數(shù)據(jù)量特別多，維度特別復(fù)雜的情況下，用戶(hù)在不同業(yè)務(wù)場(chǎng)景中需要用到不同的搜索條件來(lái)幫助定位信息，這些搜索條件可能使用頻率不高，但是卻是必要存在的，因此這時(shí)候搜索條件常常會(huì)有7-8個(gè)，甚至10個(gè)以上都有可能。那么在這個(gè)情況下，把所有搜索條件一次過(guò)暴露給用戶(hù)不是一個(gè)好的做法。

我們常見(jiàn)的做法是，把搜索頻次最高的屬性和數(shù)據(jù)覆蓋面最廣的2-3個(gè)屬性暴露給所有用戶(hù)，其他必要的但是使用頻次比較低的屬性通過(guò)折疊的方式隱藏，用戶(hù)需要時(shí)點(diǎn)擊展開(kāi)更多搜索條件。

四. 模糊搜索+精確篩選

△ ?高級(jí)篩選收起

△ ?高級(jí)篩選展開(kāi)

這種模式其實(shí)嚴(yán)格意義來(lái)講也是屬于「多條件組合搜索」的一種，至于它跟上面提到的不同點(diǎn)在于用戶(hù)的任務(wù)流順序不同。這個(gè)的用戶(hù)任務(wù)流是「輸入關(guān)鍵字 -?搜索結(jié)果?-?篩選條件?- 找到目標(biāo)」，而上述的多條件搜索的用戶(hù)任務(wù)流是「?篩選條件?- 輸入關(guān)鍵字 -?搜索結(jié)果?- 找到目標(biāo)」。

那么在使用場(chǎng)景上跟上述的多條件組合搜索的區(qū)別在于：

• 多條件組合搜索：

表格信息是內(nèi)容與屬性一一對(duì)應(yīng)的比較多的情況下。比如，一個(gè)花名對(duì)應(yīng)的就是「創(chuàng)建人」，一個(gè)日期在表格中就對(duì)應(yīng)的是「創(chuàng)建日期」。這就要求用戶(hù)對(duì)于要找的信息有明確的定位，知道可以通過(guò)哪些維度可以找到自己想要的，更有目的性，更精確。

• 模糊搜索+篩選：

模糊搜索的字段會(huì)對(duì)應(yīng)到多個(gè)屬性的，比如一個(gè)花名會(huì)分別對(duì)應(yīng)「創(chuàng)建人」、「處理人」、「審批人」，那么這時(shí)候通過(guò)一個(gè)模糊搜索框，「撈」出一堆已經(jīng)分類(lèi)號(hào)的信息，直接通過(guò)這些類(lèi)別進(jìn)行篩選，從而快速找到目標(biāo)。

五.?表頭搜索

△ ?每列的表頭增加一個(gè)篩選的圖標(biāo)按鈕

最后這種就是在表格中定制化的表頭搜索的功能。這種搜索方式，用戶(hù)直接在表格的表頭中找到對(duì)應(yīng)的屬性，在該屬性下對(duì)關(guān)鍵字進(jìn)行搜索。這種使用場(chǎng)景常常是因?yàn)橛脩?hù)對(duì)表格的每一列，每一個(gè)屬性都有搜索的需求，這種情況比較少。還有一種使用場(chǎng)景是：在產(chǎn)品規(guī)劃的前期不清楚哪些條件對(duì)用戶(hù)有更大的幫助，使用這種模式，在每個(gè)表頭的搜索按鈕進(jìn)行埋點(diǎn)，后期收集數(shù)據(jù)，從而知道哪些屬性使用頻次高的，可以被單獨(dú)拎出來(lái)作為表格之外的搜索條件，幫助用戶(hù)更快速更有效地找到目標(biāo)。

最后

有了交互模式，更需要對(duì)用戶(hù)有更多的了解，以及對(duì)業(yè)務(wù)和需求的深刻把握，才能把交互模式「用好」，設(shè)計(jì)出能真正幫助用戶(hù)提高效率的產(chǎn)品。

「交互設(shè)計(jì)的案例實(shí)戰(zhàn)」

1. 阿里設(shè)計(jì)專(zhuān)家的經(jīng)驗(yàn)：《為什么設(shè)計(jì)師也要學(xué)會(huì)判斷優(yōu)先級(jí)？》
2. 交互設(shè)計(jì)中的按鈕：《三個(gè)按鈕背后由小見(jiàn)大的交互思考》
3. 什么是正確的需求：《聊聊設(shè)計(jì)中「需求」的正確打開(kāi)方式》