什么是高級搜索？

搜索是一種從巨大內(nèi)容中查找所需信息的方法。基礎(chǔ)搜索是用于查找項目的單個參數(shù)（通常是名稱）。高級搜索是一種通過指定包含多個參數(shù)的條件從大型項目列表中查找內(nèi)容的方法。

我們來看一些示例并提取最佳實踐，這些實踐會幫助你設(shè)計簡單有效的用戶體驗，在設(shè)計產(chǎn)品時執(zhí)行高級搜索。

如何進行高級搜索？

高級搜索選項通常位于用戶界面上的基本搜索框附近，便于用戶可以輕松找到。

用戶定義搜索過濾器并將其應用在大數(shù)據(jù)上以縮小其范圍。通過添加不同的參數(shù)來創(chuàng)建過濾器。例如，搜索的內(nèi)容列表，參數(shù)可以是名稱，ID，類型，狀態(tài)，創(chuàng)建日期，作者等。用戶選擇參數(shù)并定義它的價值。一個參數(shù)可以有一組用于選擇的值，例如類型可以是圖片，文檔，PDF等。

為特定標準定義的多個參數(shù)構(gòu)成過濾器。用戶可以定義并保存過濾器以供以后使用。執(zhí)行搜索時，顯示結(jié)果，用戶可以查看并進一步縮小這些結(jié)果的范圍。

這就是高級搜索的工作原理。

下面介紹了一些用于高級搜索用戶界面定義簡單直觀的用戶體驗的案例和最佳實踐。

一、如何添加搜索參數(shù)

搜索參數(shù)和參數(shù)值可以以不同方式顯示。

1. 前端用戶界面上可用的所有參數(shù)

高級搜索頁面在前端用戶界面上顯示所有可用參數(shù)，用戶無需顯式添加參數(shù)。他只需根據(jù)所需參數(shù)選擇值即可。這稱為分面搜索。

Microsoft招聘頁面在左側(cè)面板中顯示搜索參數(shù)。默認情況下，所有參數(shù)都處于折疊狀態(tài)，用戶可以逐個展開它們并選擇值。

Microsoft招聘頁面在左側(cè)面板中顯示搜索參數(shù)（構(gòu)面）

分析：

a. 在前端UI上顯示所有參數(shù)是一種用戶友好的方法，用戶可以輕松掃描它們。

b. 適用于大量內(nèi)容。

c. 唯一的缺點是需要足夠的空間來顯示所有參數(shù)，有時它會給用戶界面造成混亂。

2. 在前端用戶界面上使用常用的參數(shù)

此方法在前端用戶界面上顯示常用的搜索參數(shù)。參數(shù)顯示在下拉菜單中，用戶可以從菜單中選擇所需的參數(shù)。

每次重復相同的步驟添加參數(shù)。

Jira在用戶界面上顯示常用參數(shù)，用戶可以從可用列表中添加更多參數(shù)。

Jira在頂部顯示常用的搜索參數(shù)

單擊“更多”選項會顯示一個菜單，其中列出可添加到搜索條件的可用參數(shù)。每次用戶想要添加參數(shù)時，都會轉(zhuǎn)到“更多”并從列表中選擇所需的選項。

單擊“更多”將顯示列出可用參數(shù)的菜單

Linkedin在擴展面板中顯示詳細參數(shù)。

Linkedin顯示擴展面板并列出所有參數(shù)

eBay在對話框中顯示詳細參數(shù)。

eBay用一個對話框列出所有參數(shù)

分析：

a. 這種方法適用于大多數(shù)常用參數(shù)用于執(zhí)行搜索的情況。用戶不再擔心不需要的細節(jié)。

b. 在用戶界面上僅顯示少量參數(shù)需要更少的空間，因此在用戶界面上的混亂更少。

c. 每用戶添加參數(shù)都需要更多次點擊。

d. 對于復雜內(nèi)容不好。

二、如何選擇參數(shù)值

有不同的方法可以根據(jù)參數(shù)顯示值?？梢赃x擇最適合當前環(huán)境和要求的方法。

1. 輸入框

如果用戶要輸入?yún)?shù)，則會顯示一個簡單的文本框。

Twitter顯示一個搜索表單，用于定義包含參數(shù)輸入框的搜索條件，以便用戶可以輸入所需的值。

Twitter高級搜索表單

分析：

a. 當沒有可用于參數(shù)的定義值時，使用輸入框。

b. 有關(guān)所需輸入的類型和格式的占位符文本對用戶很有幫助。

c. 如果輸入框可以包含多個值，則應向用戶明確指示。例如，諸如“添加由逗號分隔的多個值”之類的幫助文本很有用。

2. 多選框列表

如果用戶可以為所選參數(shù)選擇多個選項，就會顯示多選框列表。此多選框列表可以作為單獨的列表提供，也可以封裝在下拉菜單中節(jié)省空間。

當用戶展開參數(shù)名稱時，Microsoft招聘搜索頁面會顯示參數(shù)的可用選項。此外，可以在下圖中看到輸入框可用于在值內(nèi)搜索。

在Microsoft招聘搜索頁面上，搜索參數(shù)值在多選框列表中顯示

Linkedin工作搜索以多選框列表的形式在下拉菜單中顯示所選參數(shù)的選項。

Linkedin搜索參數(shù)顯示值作為下拉菜單多選框列表

分析：

a. 如果用戶必須從多個選項中進行選擇，多選框列表則是一個不錯的選擇。

b. 多選框列表是一個用戶友好的控件，因為它提供了選擇和取消選擇值的清晰體驗。

c. 應該取消選中默認狀態(tài)，因為選擇所需選項對用戶來說更方便，而不是取消選擇他們不想要的內(nèi)容。

d. 在下拉菜單中提供多選框列表可節(jié)省空間，但需要更多點擊。此外，在下拉框中顯示多個選定選項是一項挑戰(zhàn)。

3. 超鏈接

很少有搜索參數(shù)需要給定值列表的單個輸入。超鏈接用于此目的。

由于超鏈接具有多個層級，因此有時僅在用戶界面上顯示當前級別。

Amazon使用選擇性隱藏的父級超鏈接方法?！安块T”是顯示部門列表的主要級別鏈接。當用戶選擇部門時，Amazon隱藏了指向其他部門的鏈接。這意味著用戶現(xiàn)在只能關(guān)注所選部門的詳細信息。

Amazon搜索作為超鏈接在左側(cè)面板中顯示部門

選擇部門鏈接僅顯示子鏈接并隱藏其他部門

但eBay不隱藏任何內(nèi)容，無論是否選擇了鏈接，層次結(jié)構(gòu)中的所有鏈接仍然可見且可訪問。

在eBay搜索的任何等級中所有類別都保留在左面板中，且不考慮選擇的類別

分析：

a. 超鏈接用于立即執(zhí)行搜索，用戶無需選擇“查詢”按鈕便可查看結(jié)果。

b. 所選超鏈接應顯示為選定狀態(tài)，以便用戶可以輕松地將其與其他超鏈接區(qū)分開來。

c. 從多級列表中選擇鏈接時，最好只顯示層次結(jié)構(gòu)中的當前級別。當用戶只想在一個級別工作時顯示所有級別會產(chǎn)生額外的混亂。

4. 單選按鈕列表

當用戶必須為參數(shù)選擇一個值時，單選按鈕也可用于顯示值。

eBay在搜索方面以及高級搜索表單中顯示單選選項，用戶可以在其中為參數(shù)選擇單個選項。

eBay：單選選項可用，用戶只能為參數(shù)選擇一個值

eBay：高級搜索對話框?qū)?shù)值顯示為單選按鈕

當參數(shù)需要單一選擇時，Linkedin也使用相同的方法。

Linkedin：下拉菜單中的參數(shù)值顯示為單選按鈕

分析：

a. 用戶在進行選擇后必須明確執(zhí)行搜索時，可以用單選按鈕。否則，超鏈接是在運行時顯示結(jié)果的更好方法。

5. 視覺圖標

像圖像、圖標或顏色框這樣的視覺表示用作特定類型參數(shù)的值。

客戶評論由Amazon顯示為星形圖標。

Amazon：標志性的客戶評論

eBay為搜索表單中的顏色選擇提供顏色名稱。

eBay：文本形式的顏色值

但Amazon展示了用于顏色選擇的可視顏色框。

Amazon：顏色列表顯示為顏色框

分析：

a. 視覺提供了一種良好且吸引人的信息呈現(xiàn)方式。如果搜索參數(shù)包含使用視覺效果最佳理解值

b. 使用它們就會是最佳實踐。例如，顏色應以視覺形式而不是名稱給出。

c. 提供工具提示、圖標及視覺效果使其更易于理解是一種很好的方法。

d. 標準圖標及視覺效果需要在適用的地方使用，以便用戶輕松地將其聯(lián)系起來。

6. 滑動條

當用戶必須從范圍內(nèi)選擇值時，可以使用滑動條。

Mango使用滑動條顯示價格范圍，用戶可以拖動按鈕進行選擇。

Mango滑動條顯示價格的選擇

分析：

a. 滑動條可快速了解可用范圍和選定值。

b. 當開始和結(jié)束值已知時，應使用滑動條。

c. 觸摸設(shè)備更加用戶友好，因為使用鼠標難以選擇精確值。

三、需要顯示值的數(shù)量

另一個重要的事是確定參數(shù)顯示值的數(shù)量，以便用戶可以進行選擇。

eBay的每個參數(shù)都會顯示7-8項目。選擇每個參數(shù)旁邊的“查看全部”選項會顯示對話框內(nèi)的所有值。

eBay：每個參數(shù)的“查看全部”選項，都可以查看對話框中的完整列表

Amazon使用相同的方法，在搜索方面的參數(shù)顯示為8-10個值。選擇“查看更多”選項時，可以看到剩余值。但如果計數(shù)值非常大，所有值都會在單獨的頁面上顯示。

Amazon：“查看更多”和“查看更少”選項可用于顯示和隱藏所有值

Microsoft招聘頁面在側(cè)邊滑動條上顯示的所有值。為用戶方便選擇，他們在每個參數(shù)的頂部提供了一個搜索框。

Microsoft招聘：所有值都可以在搜索方面滾動

分析：

a. 由于值以列表的形式顯示為清單、單選選項和超鏈接。列表中顯示選項數(shù)量的通用準則適用于此處。

b. 最佳方法是在小于8時顯示所有值。如果大于8，僅使用“更多”選項顯示常用值。當項目數(shù)仍然超出時，在擴展列表或?qū)υ捒蛑刑峁┦Ｓ囗椖俊?

c. 用滑動顯示同一位置的所有項目會使用戶難以找到所需的數(shù)值。

d. 用值顯示可用項目的計數(shù)是向用戶提供所要執(zhí)行搜索的項目數(shù)量的一種好方法。

四、如何執(zhí)行搜索

可以使用以下任一方式執(zhí)行搜索：

1. 點擊“搜索”或“確定”按鈕，或按Enter鍵

2. 用戶更改參數(shù)時運行。

Amazon和eBay都是在用戶設(shè)置任何給定選項后執(zhí)行搜索。

Linkedin的搜索是用戶設(shè)置參數(shù)后點擊應用按鈕時執(zhí)行的。

Linkedin：執(zhí)行搜索需求在設(shè)置參數(shù)后按“應用”按鈕

分析：

a. 在運行時執(zhí)行搜索為用戶提供愉快簡單的體驗，在每次點擊后用戶便可以看到結(jié)果。

b. 按下按鈕時執(zhí)行搜索時需要用戶設(shè)置所有參數(shù)，單擊按鈕以查看結(jié)果。如果用戶想要在每次更改后查看結(jié)果，則每次更改參數(shù)時都必須單擊該按鈕。

c. 另外，如果用戶想要回到以前的狀態(tài)，他必須恢復所有更改，況且他很可能已經(jīng)忘記了已定義的選項。

五、如何顯示搜索結(jié)果

在執(zhí)行搜索時，內(nèi)容按照已定義的過濾器顯示。顯示搜索結(jié)果時應該考慮幾個因素。

1. 搜索結(jié)果的位置

搜索結(jié)果顯示在定義過濾器的同一頁面上，或者打開一個新頁面顯示結(jié)果。

Twitter和Linkedin遵循在單獨頁面上顯示搜索結(jié)果的慣例。

Twitter在單獨的屏幕上顯示搜索參數(shù)。單擊“應用”按鈕會打開搜索結(jié)果

Linkedin列出所有搜索參數(shù)顯示擴展區(qū)域。單擊“應用”按鈕將關(guān)閉此區(qū)域顯示的結(jié)果

Microsoft招聘提供搜索結(jié)果的參數(shù)面板。加載結(jié)果時，僅自動刷新結(jié)果區(qū)域。

Microsoft招聘：搜索結(jié)果加載在用戶定義參數(shù)的同一頁面上

分析：

a. 當打開新頁面顯示搜索結(jié)果時，用戶的所在環(huán)境會發(fā)生變化，會感覺像打開了一個新內(nèi)容。

b. 如果搜索參數(shù)在單獨的屏幕或?qū)υ捒蛏巷@示，每當用戶想要更改參數(shù)時都必須返回。

c. 僅將結(jié)果區(qū)域重新刷新為Microsoft招聘是一種很好的方法，因為用戶會強烈感覺到他正在同一頁面上工作。

2. 搜索進度

搜索操作需要一些時間顯示結(jié)果。在等待期間，顯示關(guān)于搜索功能的進展的反饋。

加載結(jié)果時，Amazon會在頁面中心顯示加載圖標。

Amazon：加載圖標顯示搜索結(jié)果正在頁面中加載

Microsoft招聘的顯示加載圖標是提供搜索結(jié)果將在一段時間內(nèi)顯示的指示。

Microsoft招聘：生成結(jié)果時會顯示加載圖標

分析：

a. 加載圖標是顯示正在加載內(nèi)容的一個好辦法。

b. 如果在加載結(jié)果時出現(xiàn)問題，應以正確的消息形式傳達給用戶。

3. 布局

搜索結(jié)果以適用于網(wǎng)站或應用程序的列表或網(wǎng)格形式顯示。

eBay在列表視圖中顯示結(jié)果，用戶也可將視圖改為網(wǎng)格模式。

eBay：用戶可在列表和網(wǎng)格視圖之間切換查看搜索結(jié)果

Linkedin顯示的搜索結(jié)果將默認視圖從經(jīng)典視圖改為拆分視圖。

Linkedin：搜索結(jié)果用拆分視圖和經(jīng)典視圖顯示

分析：

a. 根據(jù)搜索項目類型和用戶需求完美地描述搜索項目的布局。

4. 分頁與無限滾動

搜索結(jié)果通常包含需要在多個頁面上顯示的大內(nèi)容。分頁或無限滾動用于導航內(nèi)容。

eBay和Microsoft招聘在結(jié)果頁面的底部分頁顯示。

eBay：結(jié)果頁面的分頁控制

Microsoft招聘：結(jié)果頁面的分頁控制

當超過頁面大小時Twitter用無限滾動顯示加載的搜索結(jié)果。

Twitter的搜索結(jié)果加載了更多結(jié)果

分析：

a. 無限滾動最適合網(wǎng)站和APP的用戶生成內(nèi)容流，比如：Twitter，F(xiàn)acebook，Pinterest，Instagram。另一方面，分頁非常適合以目標為導向的網(wǎng)站和APP。

b. 當用戶自上至下查看結(jié)果時，可能會在頂部跳過頁面導航。所以一個更加對用戶友好的方法是在底部顯示分頁。

5. 應用過濾器列表

搜索結(jié)果顯示了應用于生成結(jié)果的過濾器列表。用戶可以刪除任何應用的過濾器，并相應地更新搜索結(jié)果。

eBay在搜索結(jié)果的頂部列出了所有應用的過濾器。用戶可以刪除任何他想要刪除的過濾器。單擊“全部清除”選項將立即刪除所有過濾器。

eBay：所有應用的過濾器都列在搜索結(jié)果的頂部。用戶可刪除不再需要的過濾器

Linkedin在頂部顯示應用的過濾器。由于所有過濾器前端的用戶界面都不可見，因此“清除”選項會顯示應用過濾器的數(shù)量。單擊“全部過濾器”選項時，應用過濾器的詳細信息將顯示在擴展面板中。

Linkedin：應用過濾器列表顯示在頁面頂部。要查看所有應用的過濾器，用戶單擊“所有過濾器”選項

分析：

a. 應在結(jié)果頁面上列出所有應用的過濾器，以便用戶可以輕松地將它們與結(jié)果相關(guān)聯(lián)。

b. 如果用戶必須轉(zhuǎn)到其他頁面才能查看應用的過濾器，則會向用戶提供斷開連接的行為。

6. 結(jié)果計數(shù)

結(jié)果計數(shù)顯示作為搜索結(jié)果生成的項目數(shù)。

Microsoft招聘頁面顯示頁面頂部的結(jié)果數(shù)

分析：

a. 結(jié)果計數(shù)是可幫助用戶了解為應用過濾器生成的結(jié)果數(shù)量，并查看它們所需導航數(shù)量的一種有用信息。

7. 空白結(jié)果

如果搜索結(jié)果不包含任何項目，就需要優(yōu)雅地處理。

eBay顯示空白結(jié)果的消息。但他所顯示的項目更接近標準的搜索條件。

eBay：未找到匹配的結(jié)果

Amazon顯示空結(jié)果的消息。所有內(nèi)容都顯示在結(jié)果區(qū)域中，表示未應用過濾器。

Amazon：未找到匹配的結(jié)果

Linkedin因為沒有找到結(jié)果，會顯示一條供用戶再次檢查標準定義的指令。

Linkedin：未找到匹配的結(jié)果

Microsoft招聘顯示零結(jié)果消息。它沒有對用戶顯示任何建議列表或說明。

Microsoft招聘：未找到匹配的結(jié)果

分析：

a. 為用戶提供一些回應空白搜索結(jié)果的建議。

b. eBay似乎是最好的例子。它會給出的標準結(jié)果和幾個已定義的參數(shù)相匹配。用戶更改一個或多個參數(shù)查看更新的結(jié)果會更容易。

六、過濾搜索結(jié)果

搜索結(jié)果通常包含很多用戶信息。最好提供一些用戶可以在結(jié)果上應用的邏輯過濾器。

排序選項幫助用戶按所需順序?qū)Y(jié)果進行排序。

用戶還可以在首選布局中更改查看結(jié)果的視圖方式。

eBay提供排序，更改視圖，過濾和分組選項以縮小搜索結(jié)果范圍。

eBay：提供排序，更改視圖，過濾，分組等選項以縮小搜索結(jié)果范圍

Twitter搜索結(jié)果包含頂部的類型明智過濾器和左側(cè)面板中的屬性明智搜索過濾器。這些可以幫助用戶進一步優(yōu)化搜索結(jié)果。

Twitter：搜索結(jié)果包含過濾器和搜索選項，以優(yōu)化搜索結(jié)果

分析：

a. 過濾器可用于進一步限制結(jié)果的數(shù)量。

b. 但在結(jié)果頁面上提供大量過濾器并不是一個好想法，這會讓用戶對結(jié)果的搜索感到困難。確定一些幫助用戶過濾結(jié)果的邏輯過濾器。

七、如何保存并訪問過濾器

保存應用的搜索過濾器，以便可以用于以后的搜索是一種常見做法。也可以選擇已保存的過濾器并進行更改以創(chuàng)建新過濾器。

eBay中的搜索結(jié)果和用戶點擊“保存此搜索”選項，保存此過濾器。使用基于定義的過濾器的自動生成的名稱保存過濾器。填充的心形圖標和“已保存”文本顯示已保存過濾器。

eBay：用戶可以使用“保存此搜索”選項保存已定義的參數(shù)

eBay：保存已定義的參數(shù)

用戶可以通過轉(zhuǎn)到“My eBay”設(shè)置來訪問此保存的過濾器。過濾器列表提供了用戶可以在過濾器上應用的一些功能：排序，編輯搜索過濾器，查看結(jié)果。

eBay：可以根據(jù)要求執(zhí)行和更新已保存的搜索

Jira在搜索頁面上提供了“另存為”選項，用戶可以單擊該選項，命名搜索過濾器并保存。保存的過濾器顯示在左側(cè)面板中，用戶只需單擊過濾器即可執(zhí)行。

可以對選定的過濾器應用不同的功能，包括重命名、復制和刪除。

Jira：保存過濾器

Jira：左側(cè)面板中顯示保存的過濾器

Twitter在搜索結(jié)果頁面的下拉列表中提供“保存過濾器”選項。過濾器以默認名稱保存，可以再次單擊菜單中的搜索框進行訪問。

Twitter：使用下拉菜單中的選項保存搜索

Twitter：在搜索菜單中顯示保存的過濾器

分析：

a. 應在高級搜索頁面上提供保存搜索的選項，方便用戶可以定義過濾器并對其進行保存。

b. 用戶應能輕松訪問過濾器并在其上執(zhí)行不同的功能，如執(zhí)行、編輯或刪除。

八、如何退出搜索模式

提供一個退出選項以便用戶返回到啟動搜索的屏幕。

eBay，Microsoft招聘，Linkedin都提供清除所有應用過濾器的“清除”選項，此為退出搜索模式。

分析：

a. 在高級搜索頁面上需要顯示簡潔易懂的選項

九、技術(shù)用戶的高級模式

查詢式搜索適用于技術(shù)用戶。

用戶可以在搜索框中編寫復雜的SQL查詢（結(jié)構(gòu)化查詢語言）。

Microsoft Outlook提供查詢式搜索。但當用戶輸入查詢參數(shù)時，無法看到任何幫助。

Microsoft Outlook提供查詢式搜索

Jira是提供即時幫助的高級搜索選項一個很棒的例子。

當用戶編寫搜索查詢時，Jira提供即時幫助

當用戶編寫搜索查詢時，Jira提供即時幫助

當用戶編寫搜索查詢時，Jira提供即時幫助

分析：

a. 當用戶編寫查詢時，需要提供正確即時的幫助。

b. 與用戶的顯式執(zhí)行操作相比，查詢格式的運行時評估更有幫助。

結(jié)論

提供執(zhí)行高級搜索的簡化體驗是一個挑戰(zhàn)?？赏ㄟ^在設(shè)計高級搜索屏幕時遵循最佳實踐來實現(xiàn)。

原文地址：https://uxplanet.org/how-to-improve-advanced-search-ux-450df698004c

原文作者：Saadia Minhas

譯者：SKYUI