武林網web開發網為大家整理了這篇提升網站高級搜索功能的用戶體驗經驗分享，如果這篇文章在您的工作或學習中有幫助，歡迎常回來看看哦，更多精彩的教程請訪問我們的主頁,以下是教程瀏覽：
搜索是一種從巨大內容中查找所需信息的方法。基礎搜索是用于查找項目的單個參數（通常是名稱）。高級搜索是一種通過指定包含多個參數的條件從大型項目列表中查找內容的方法。
我們來看一些示例并提取最佳實踐，這些實踐會幫助你設計簡單有效的用戶體驗，在設計產品時執行高級搜索。
高級搜索選項通常位于用戶界面上的基本搜索框附近，便于用戶可以輕松找到。
用戶定義搜索過濾器并將其應用在大數據上以縮小其范圍。通過添加不同的參數來創建過濾器。例如，搜索的內容列表，參數可以是名稱，ID，類型，狀態，創建日期，作者等。用戶選擇參數并定義它的價值。一個參數可以有一組用于選擇的值，例如類型可以是圖片，文檔，PDF等。
為特定標準定義的多個參數構成過濾器。用戶可以定義并保存過濾器以供以后使用。執行搜索時，顯示結果，用戶可以查看并進一步縮小這些結果的范圍。
這就是高級搜索的工作原理。
下面介紹了一些用于高級搜索用戶界面定義簡單直觀的用戶體驗的案例和最佳實踐。
搜索參數和參數值可以以不同方式顯示。
1. 前端用戶界面上可用的所有參數
高級搜索頁面在前端用戶界面上顯示所有可用參數，用戶無需顯式添加參數。他只需根據所需參數選擇值即可。這稱為分面搜索。
Microsoft招聘頁面在左側面板中顯示搜索參數。默認情況下，所有參數都處于折疊狀態，用戶可以逐個展開它們并選擇值。
Microsoft招聘頁面在左側面板中顯示搜索參數（構面）
分析：
a. 在前端UI上顯示所有參數是一種用戶友好的方法，用戶可以輕松掃描它們。
b. 適用于大量內容。
c. 唯一的缺點是需要足夠的空間來顯示所有參數，有時它會給用戶界面造成混亂。
2. 在前端用戶界面上使用常用的參數
此方法在前端用戶界面上顯示常用的搜索參數。參數顯示在下拉菜單中，用戶可以從菜單中選擇所需的參數。
每次重復相同的步驟添加參數。
Jira在用戶界面上顯示常用參數，用戶可以從可用列表中添加更多參數。
Jira在頂部顯示常用的搜索參數
單擊“更多”選項會顯示一個菜單，其中列出可添加到搜索條件的可用參數。每次用戶想要添加參數時，都會轉到“更多”并從列表中選擇所需的選項。
單擊“更多”將顯示列出可用參數的菜單
Linkedin在擴展面板中顯示詳細參數。
Linkedin顯示擴展面板并列出所有參數
eBay在對話框中顯示詳細參數。
eBay用一個對話框列出所有參數
分析：
a. 這種方法適用于大多數常用參數用于執行搜索的情況。用戶不再擔心不需要的細節。
b. 在用戶界面上僅顯示少量參數需要更少的空間，因此在用戶界面上的混亂更少。
c. 每用戶添加參數都需要更多次點擊。
d. 對于復雜內容不好。
有不同的方法可以根據參數顯示值。可以選擇最適合當前環境和要求的方法。
1. 輸入框
如果用戶要輸入參數，則會顯示一個簡單的文本框。
Twitter顯示一個搜索表單，用于定義包含參數輸入框的搜索條件，以便用戶可以輸入所需的值。
Twitter高級搜索表單
分析：
a. 當沒有可用于參數的定義值時，使用輸入框。
b. 有關所需輸入的類型和格式的占位符文本對用戶很有幫助。
c. 如果輸入框可以包含多個值，則應向用戶明確指示。例如，諸如“添加由逗號分隔的多個值”之類的幫助文本很有用。
2. 多選框列表
如果用戶可以為所選參數選擇多個選項，就會顯示多選框列表。此多選框列表可以作為單獨的列表提供，也可以封裝在下拉菜單中節省空間。
當用戶展開參數名稱時，Microsoft招聘搜索頁面會顯示參數的可用選項。此外，可以在下圖中看到輸入框可用于在值內搜索。
在Microsoft招聘搜索頁面上，搜索參數值在多選框列表中顯示
Linkedin工作搜索以多選框列表的形式在下拉菜單中顯示所選參數的選項。
Linkedin搜索參數顯示值作為下拉菜單多選框列表
分析：
a. 如果用戶必須從多個選項中進行選擇，多選框列表則是一個不錯的選擇。
b. 多選框列表是一個用戶友好的控件，因為它提供了選擇和取消選擇值的清晰體驗。
c. 應該取消選中默認狀態，因為選擇所需選項對用戶來說更方便，而不是取消選擇他們不想要的內容。
d. 在下拉菜單中提供多選框列表可節省空間，但需要更多點擊。此外，在下拉框中顯示多個選定選項是一項挑戰。
3. 超鏈接
很少有搜索參數需要給定值列表的單個輸入。超鏈接用于此目的。
由于超鏈接具有多個層級，因此有時僅在用戶界面上顯示當前級別。
Amazon使用選擇性隱藏的父級超鏈接方法。“部門”是顯示部門列表的主要級別鏈接。當用戶選擇部門時，Amazon隱藏了指向其他部門的鏈接。這意味著用戶現在只能關注所選部門的詳細信息。
Amazon搜索作為超鏈接在左側面板中顯示部門
選擇部門鏈接僅顯示子鏈接并隱藏其他部門
但eBay不隱藏任何內容，無論是否選擇了鏈接，層次結構中的所有鏈接仍然可見且可訪問。
在eBay搜索的任何等級中所有類別都保留在左面板中，且不考慮選擇的類別
分析：
a. 超鏈接用于立即執行搜索，用戶無需選擇“查詢”按鈕便可查看結果。
b. 所選超鏈接應顯示為選定狀態，以便用戶可以輕松地將其與其他超鏈接區分開來。
c. 從多級列表中選擇鏈接時，最好只顯示層次結構中的當前級別。當用戶只想在一個級別工作時顯示所有級別會產生額外的混亂。
4. 單選按鈕列表
當用戶必須為參數選擇一個值時，單選按鈕也可用于顯示值。
eBay在搜索方面以及高級搜索表單中顯示單選選項，用戶可以在其中為參數選擇單個選項。
eBay：單選選項可用，用戶只能為參數選擇一個值
eBay：高級搜索對話框將參數值顯示為單選按鈕
當參數需要單一選擇時，Linkedin也使用相同的方法。
Linkedin：下拉菜單中的參數值顯示為單選按鈕
分析：
a. 用戶在進行選擇后必須明確執行搜索時，可以用單選按鈕。否則，超鏈接是在運行時顯示結果的更好方法。
5. 視覺圖標
像圖像、圖標或顏色框這樣的視覺表示用作特定類型參數的值。
客戶評論由Amazon顯示為星形圖標。
Amazon：標志性的客戶評論
eBay為搜索表單中的顏色選擇提供顏色名稱。
eBay：文本形式的顏色值
但Amazon展示了用于顏色選擇的可視顏色框。
Amazon：顏色列表顯示為顏色框
分析：
a. 視覺提供了一種良好且吸引人的信息呈現方式。如果搜索參數包含使用視覺效果最佳理解值
b. 使用它們就會是最佳實踐。例如，顏色應以視覺形式而不是名稱給出。
c. 提供工具提示、圖標及視覺效果使其更易于理解是一種很好的方法。
d. 標準圖標及視覺效果需要在適用的地方使用，以便用戶輕松地將其聯系起來。
6. 滑動條
當用戶必須從范圍內選擇值時，可以使用滑動條。
Mango使用滑動條顯示價格范圍，用戶可以拖動按鈕進行選擇。
Mango滑動條顯示價格的選擇
分析：
a. 滑動條可快速了解可用范圍和選定值。
b. 當開始和結束值已知時，應使用滑動條。
c. 觸摸設備更加用戶友好，因為使用鼠標難以選擇精確值。
三、需要顯示值的數量
另一個重要的事是確定參數顯示值的數量，以便用戶可以進行選擇。
eBay的每個參數都會顯示7-8項目。選擇每個參數旁邊的“查看全部”選項會顯示對話框內的所有值。
eBay：每個參數的“查看全部”選項，都可以查看對話框中的完整列表
Amazon使用相同的方法，在搜索方面的參數顯示為8-10個值。選擇“查看更多”選項時，可以看到剩余值。但如果計數值非常大，所有值都會在單獨的頁面上顯示。
Amazon：“查看更多”和“查看更少”選項可用于顯示和隱藏所有值
Microsoft招聘頁面在側邊滑動條上顯示的所有值。為用戶方便選擇，他們在每個參數的頂部提供了一個搜索框。
Microsoft招聘：所有值都可以在搜索方面滾動
分析：
a. 由于值以列表的形式顯示為清單、單選選項和超鏈接。列表中顯示選項數量的通用準則適用于此處。
b. 最佳方法是在小于8時顯示所有值。如果大于8，僅使用“更多”選項顯示常用值。當項目數仍然超出時，在擴展列表或對話框中提供剩余項目。
c. 用滑動顯示同一位置的所有項目會使用戶難以找到所需的數值。
d. 用值顯示可用項目的計數是向用戶提供所要執行搜索的項目數量的一種好方法。
可以使用以下任一方式執行搜索：
1. 點擊“搜索”或“確定”按鈕，或按Enter鍵
2. 用戶更改參數時運行。
Amazon和eBay都是在用戶設置任何給定選項后執行搜索。
Linkedin的搜索是用戶設置參數后點擊應用按鈕時執行的。
Linkedin：執行搜索需求在設置參數后按“應用”按鈕
分析：
a. 在運行時執行搜索為用戶提供愉快簡單的體驗，在每次點擊后用戶便可以看到結果。
b. 按下按鈕時執行搜索時需要用戶設置所有參數，單擊按鈕以查看結果。如果用戶想要在每次更改后查看結果，則每次更改參數時都必須單擊該按鈕。
c. 另外，如果用戶想要回到以前的狀態，他必須恢復所有更改，況且他很可能已經忘記了已定義的選項。
在執行搜索時，內容按照已定義的過濾器顯示。顯示搜索結果時應該考慮幾個因素。
1. 搜索結果的位置
搜索結果顯示在定義過濾器的同一頁面上，或者打開一個新頁面顯示結果。
Twitter和Linkedin遵循在單獨頁面上顯示搜索結果的慣例。
Twitter在單獨的屏幕上顯示搜索參數。單擊“應用”按鈕會打開搜索結果
Linkedin列出所有搜索參數顯示擴展區域。單擊“應用”按鈕將關閉此區域顯示的結果
Microsoft招聘提供搜索結果的參數面板。加載結果時，僅自動刷新結果區域。
Microsoft招聘：搜索結果加載在用戶定義參數的同一頁面上
分析：
a. 當打開新頁面顯示搜索結果時，用戶的所在環境會發生變化，會感覺像打開了一個新內容。
b. 如果搜索參數在單獨的屏幕或對話框上顯示，每當用戶想要更改參數時都必須返回。
c. 僅將結果區域重新刷新為Microsoft招聘是一種很好的方法，因為用戶會強烈感覺到他正在同一頁面上工作。
2. 搜索進度
搜索操作需要一些時間顯示結果。在等待期間，顯示關于搜索功能的進展的反饋。
加載結果時，Amazon會在頁面中心顯示加載圖標。
Amazon：加載圖標顯示搜索結果正在頁面中加載
Microsoft招聘的顯示加載圖標是提供搜索結果將在一段時間內顯示的指示。
Microsoft招聘：生成結果時會顯示加載圖標
分析：
a. 加載圖標是顯示正在加載內容的一個好辦法。
b. 如果在加載結果時出現問題，應以正確的消息形式傳達給用戶。
3. 布局
搜索結果以適用于網站或應用程序的列表或網格形式顯示。
eBay在列表視圖中顯示結果，用戶也可將視圖改為網格模式。
eBay：用戶可在列表和網格視圖之間切換查看搜索結果
Linkedin顯示的搜索結果將默認視圖從經典視圖改為拆分視圖。
Linkedin：搜索結果用拆分視圖和經典視圖顯示
分析：
a. 根據搜索項目類型和用戶需求完美地描述搜索項目的布局。
4. 分頁與無限滾動
搜索結果通常包含需要在多個頁面上顯示的大內容。分頁或無限滾動用于導航內容。
eBay和Microsoft招聘在結果頁面的底部分頁顯示。
eBay：結果頁面的分頁控制
Microsoft招聘：結果頁面的分頁控制
當超過頁面大小時Twitter用無限滾動顯示加載的搜索結果。
Twitter的搜索結果加載了更多結果
分析：
a. 無限滾動最適合網站和APP的用戶生成內容流，比如：Twitter，Facebook，Pinterest，Instagram。另一方面，分頁非常適合以目標為導向的網站和APP。
b. 當用戶自上至下查看結果時，可能會在頂部跳過頁面導航。所以一個更加對用戶友好的方法是在底部顯示分頁。
5. 應用過濾器列表
搜索結果顯示了應用于生成結果的過濾器列表。用戶可以刪除任何應用的過濾器，并相應地更新搜索結果。
eBay在搜索結果的頂部列出了所有應用的過濾器。用戶可以刪除任何他想要刪除的過濾器。單擊“全部清除”選項將立即刪除所有過濾器。
eBay：所有應用的過濾器都列在搜索結果的頂部。用戶可刪除不再需要的過濾器
Linkedin在頂部顯示應用的過濾器。由于所有過濾器前端的用戶界面都不可見，因此“清除”選項會顯示應用過濾器的數量。單擊“全部過濾器”選項時，應用過濾器的詳細信息將顯示在擴展面板中。
Linkedin：應用過濾器列表顯示在頁面頂部。要查看所有應用的過濾器，用戶單擊“所有過濾器”選項
分析：
a. 應在結果頁面上列出所有應用的過濾器，以便用戶可以輕松地將它們與結果相關聯。
b. 如果用戶必須轉到其他頁面才能查看應用的過濾器，則會向用戶提供斷開連接的行為。
6. 結果計數
結果計數顯示作為搜索結果生成的項目數。
Microsoft招聘頁面顯示頁面頂部的結果數
分析：
a. 結果計數是可幫助用戶了解為應用過濾器生成的結果數量，并查看它們所需導航數量的一種有用信息。
7. 空白結果
如果搜索結果不包含任何項目，就需要優雅地處理。
eBay顯示空白結果的消息。但他所顯示的項目更接近標準的搜索條件。
eBay：未找到匹配的結果
Amazon顯示空結果的消息。所有內容都顯示在結果區域中，表示未應用過濾器。
Amazon：未找到匹配的結果
Linkedin因為沒有找到結果，會顯示一條供用戶再次檢查標準定義的指令。
Linkedin：未找到匹配的結果
Microsoft招聘顯示零結果消息。它沒有對用戶顯示任何建議列表或說明。
Microsoft招聘：未找到匹配的結果
分析：
a. 為用戶提供一些回應空白搜索結果的建議。
b. eBay似乎是最好的例子。它會給出的標準結果和幾個已定義的參數相匹配。用戶更改一個或多個參數查看更新的結果會更容易。
搜索結果通常包含很多用戶信息。最好提供一些用戶可以在結果上應用的邏輯過濾器。
排序選項幫助用戶按所需順序對結果進行排序。
用戶還可以在首選布局中更改查看結果的視圖方式。
eBay提供排序，更改視圖，過濾和分組選項以縮小搜索結果范圍。
eBay：提供排序，更改視圖，過濾，分組等選項以縮小搜索結果范圍
Twitter搜索結果包含頂部的類型明智過濾器和左側面板中的屬性明智搜索過濾器。這些可以幫助用戶進一步優化搜索結果。
Twitter：搜索結果包含過濾器和搜索選項，以優化搜索結果
分析：
a. 過濾器可用于進一步限制結果的數量。
b. 但在結果頁面上提供大量過濾器并不是一個好想法，這會讓用戶對結果的搜索感到困難。確定一些幫助用戶過濾結果的邏輯過濾器。
保存應用的搜索過濾器，以便可以用于以后的搜索是一種常見做法。也可以選擇已保存的過濾器并進行更改以創建新過濾器。
eBay中的搜索結果和用戶點擊“保存此搜索”選項，保存此過濾器。使用基于定義的過濾器的自動生成的名稱保存過濾器。填充的心形圖標和“已保存”文本顯示已保存過濾器。
eBay：用戶可以使用“保存此搜索”選項保存已定義的參數
eBay：保存已定義的參數
用戶可以通過轉到“My eBay”設置來訪問此保存的過濾器。過濾器列表提供了用戶可以在過濾器上應用的一些功能：排序，編輯搜索過濾器，查看結果。
eBay：可以根據要求執行和更新已保存的搜索
Jira在搜索頁面上提供了“另存為”選項，用戶可以單擊該選項，命名搜索過濾器并保存。保存的過濾器顯示在左側面板中，用戶只需單擊過濾器即可執行。
可以對選定的過濾器應用不同的功能，包括重命名、復制和刪除。
Jira：保存過濾器
Jira：左側面板中顯示保存的過濾器
Twitter在搜索結果頁面的下拉列表中提供“保存過濾器”選項。過濾器以默認名稱保存，可以再次單擊菜單中的搜索框進行訪問。
Twitter：使用下拉菜單中的選項保存搜索
Twitter：在搜索菜單中顯示保存的過濾器
分析：
a. 應在高級搜索頁面上提供保存搜索的選項，方便用戶可以定義過濾器并對其進行保存。
b. 用戶應能輕松訪問過濾器并在其上執行不同的功能，如執行、編輯或刪除。
提供一個退出選項以便用戶返回到啟動搜索的屏幕。
eBay，Microsoft招聘，Linkedin都提供清除所有應用過濾器的“清除”選項，此為退出搜索模式。
分析：
a. 在高級搜索頁面上需要顯示簡潔易懂的選項
九、技術用戶的高級模式
查詢式搜索適用于技術用戶。
用戶可以在搜索框中編寫復雜的SQL查詢（結構化查詢語言）。
Microsoft Outlook提供查詢式搜索。但當用戶輸入查詢參數時，無法看到任何幫助。
Microsoft Outlook提供查詢式搜索
Jira是提供即時幫助的高級搜索選項一個很棒的例子。
當用戶編寫搜索查詢時，Jira提供即時幫助
當用戶編寫搜索查詢時，Jira提供即時幫助
當用戶編寫搜索查詢時，Jira提供即時幫助
分析：
a. 當用戶編寫查詢時，需要提供正確即時的幫助。
b. 與用戶的顯式執行操作相比，查詢格式的運行時評估更有幫助。
提供執行高級搜索的簡化體驗是一個挑戰。可通過在設計高級搜索屏幕時遵循最佳實踐來實現。
原文地址：https://uxplanet.org/how-to-improve-advanced-search-ux-450df698004c
原文作者：Saadia Minhas
譯者：SKYUI
新聞熱點
疑難解答
