即使是如輸入框尺寸的微小變化，或是改變搜索框內展示的關鍵詞引導，都能提升搜索功能的可用性進而影響整個產品的體驗。

一. 前言

搜索就像是用戶與app或者網站之間的對話：用戶通過提問表達信息需求，app或者網站通過展示結果來作為回應。用戶期待流暢的搜索體驗，并且基于搜索結果的質量用戶通常會對一個app的價值形成一個快速的判斷。

當我們設計搜索界面的時候有很多點是需要考慮的，不過為了方便閱讀，我將這篇文章分為兩部分來講：搜索欄的設計和結果展示頁的設計。盡管文中的某些具體建議對于你的設計需求和目標來說會顯得比較主觀，但還是有一些通用的設計要點是行之有效的，它可以適用于不同的app和網站。在開始整篇文章之前，我們先思考一個問題——什么時候需要用到搜索？

二. 什么場景下該用/不該用搜索

小的站點最好不要有搜索功能。當一個網站的內容有限時，其實沒必要有搜索功能。

只有當網站的規模和復雜度都達到一定程度的時候搜索功能才會顯得尤其重要。由于用戶通常需要找到某一個具體的商品，因此電商網站或許是使用搜索功能最常見的案例了。在一些大型的電商網站，搜索欄甚至會獨立于頭部并且會在UI界面中占據視覺焦點的位置。高達30%的用戶會使用網站內的搜索工具，而這一行為會極大地幫助商家搞清楚用戶到底需要什么。

搜索功能對那些像訂機票或者提供信息服務的網站來說也尤其重要。

三.?如何設計好搜索框

搜索框是輸入區域和提交按鈕的組合。也許有人會認為搜索框根本不需要設計，畢竟它就只有兩個元素。但是由于搜索框在海量信息內容的網站是最常被使用的設計元素，因此其易用性不言而喻。下文將分為8各部分來說明如何設計好搜索框：

1. 在視覺上突出搜索框
2. 搜索框與放大鏡icon配合使用
3. 將搜索框置于用戶預期的位置
4. 提供搜索按鈕
5. 告訴用戶他們可以搜索哪些內容
6. 每個頁面都要有搜索框
7. 合適的尺寸
8. 使用智能推薦/匹配機制

1. 在視覺上突出搜索框

搜索框設計最重要的原則就是讓它變得很醒目。如果搜索在你的網站或者app里是一個很重要的功能，那么它應該被放在最醒目的位置，因為它是用戶查找內容最快捷的路徑。

通過點擊單獨的icon或者按鈕來激活隱藏的搜索框有以下劣勢：

• 搜索功能不容易被用戶注意到。相比于開放式的文案輸入框，icon所占用的空間更小，因此在視覺上單獨的icon和按鈕更難被用戶注意到。
• 增加交互成本。換句話說在用戶使用搜索框之前還得增加一步操作。

2. 搜索框與放大鏡icon配合使用

Icon從其含義理解是某種事物、行為或者想法的視覺符號。擁有放之四海皆準的可識別的icon是少之又少，而放大鏡卻是其中之一，甚至不需要多余的文案標簽用戶就能知道放大鏡代表的是“搜索”。

Tip：使用最簡單的放大鏡icon，因為越少的視覺細節越能減輕用戶的認知負擔從而提高認知的效率。

3. 將搜索框置于用戶預期的位置

關于把搜索框放在一個網頁中的什么位置最合適的爭論一致持續不斷。但是許多著名的網站如YouTube, Amazon, IMDB, BEST BUY把搜索框放在頂部中央或者頂部偏右側的地方。A. Dawn Shaikh和Keisi Lenz做了一份有142人參加的調研，并根據這份調研結果總結出了一個用戶關于搜索框預期位置的圖表。這項研究發現頁面的左上角或者右上角是用戶最容易注意到的地方，利用這種F型的視覺瀏覽形式用戶會很容易找到搜索框。而將其放在其他不在用戶預期內的位置則意味著用戶需要付出額外的成本去尋找搜索框。

用戶首先會在頁面的右上角去找搜索框，如果沒有找到那他們就會開始瀏覽頁面的頂部內容了。

Tip：利用眼動熱力圖或者其他眼部追蹤工具去研究用戶瀏覽行為可以幫助你找到用戶關注的頁面區域，這樣你就知道搜索框該放在哪里了。

4. 提供搜索按鈕

盡管點擊鍵盤的回車鍵可以觸發搜索，但有些用戶仍然愿意使用傳統的“(搜索)提交”按鈕。有個按鈕在同樣會使用戶意識到原來觸發搜索動作還需要額外的一個步驟，即使這個步驟是按回車鍵。

Tip：

（1）確保提交按鈕大小合適，從而使用戶在使用鼠標或者手指進行點擊的時候不需要特別精準的操作。一個足夠大的可點擊區域可以讓用戶發現和點擊這個按鈕都變得更容易。

（2）為用戶保留按回車鍵和按鈕兩種形式的搜索觸發邏輯。許多用戶仍然習慣于點擊實體按鍵來提交搜索請求。

5. 告訴用戶他們可以搜索哪些內容

在搜索框內放置搜索查詢的案例說明是一個非常好的設計(搜索引導)這樣可以告訴用戶可以搜索到哪一類的內容。如果用戶可搜索內容的種類很多，那搜索輸入提示就顯得比較重要了。但是搜索輸入提示一定要限制字數，否則會增加用戶的認知負擔。

占位符文案提示用戶他們可以搜索哪些內容。

然而根據Mike Madaio最近提出，在有些情況下占位符文案會產生可用性問題：如果占位符文案使用比普通文案更淺的顏色，那樣會產生對比度問題 — 它不能遵循被廣泛接受的網頁可用性規范。此外，根據W3C里的一些觀點，占位符文案不一定能被廣泛運用在一些輔助技術里面(這里應該指在不同硬件設備上不一定能顯示出讓用戶識別的足夠對比度的淺色引導文案)，這將使得此類用戶不知道要用搜索框搜索哪些內容。

6. 每個頁面都要有搜索框

在UX Booth的另一片文章里，Tucker FizGerald強調了用戶在每個頁面都要能使用搜索框的重要性。在用戶找不到他們想要的內容時尤其需要搜索框，特別是在出現404這種頁面的時候。

7. 合適的尺寸

把輸入框設計得過小是現在設計師的通病。誠然，即使是一個短的輸入框用戶仍然可以輸入長的搜索文案，但是這會導致長文案只有一部分是可視的，這樣用戶就不能很好的審視或者編輯整段文案，這種體驗是不好的。并且在大部分情況下，如果搜索框過于短小，由于長文案的可讀性較差用戶更會傾向于輸入簡短和不準確的搜索文案。如果輸入框的尺寸能夠根據用戶預期的輸入文案來進行定義，那么它在可讀性和展示性的體驗上會更好。根據經驗來說，一個搜索欄的輸入框最好能展示27個字母。

Tip：

（1）使用em(a unit for measuring the width of printed matter, equal to the height of the type size being used)來設置寬度，而不僅僅是像素或者點。1em的寬度和高度等于一個m字母(不管這個m字母是用什么字體)

（2）如果你不得不節省頁面空間，而又想要搜索框變得醒目，可以選擇使用寬度可變的搜索框，它可以在用戶點擊后展開全部寬度。這種形式的設計可以在節約空間的基礎上提供足夠的視覺線索讓用戶快速找到并進行搜索。

8. 使用智能推薦/匹配機制

智能匹配可以節省用戶的輸入成本。設計師經常認為智能匹配機制旨在提升用戶輸入的速度，但它實際上對于幫助用戶組織搜索語言的作用更大。普通用戶不太善于組織搜索語言：在這種情況下如果他們沒有在第一步就表達清楚問題，那么接下來也很難成功找到合適的搜索結果。當智能匹配發揮作用后，它就能幫助用戶表達清楚搜索的問題。

Tip：

（1）確保智能匹配是符合可用性原則的，有些差的設計反倒會干擾或者使用戶感到困惑。因此，使用拼寫修正，識別詞根以及文案預判可以提升智能匹配的可用性。

（2）智能匹配的推薦項目不要超過10個以便信息不會過載。

（3）允許用戶使用鍵盤來對匹配列表的內容進行導航操作(這里主要針對PC端)。一但用戶下滑到最后一個項目，這時候他們會想回到匹配列表的頂部。應該允許用戶使用Esc鍵進行這種操作。

（4）強化用戶輸入的文案信息與智能匹配的文案信息的不同之處。比如，用戶輸入的文案是標準字號，而智能匹配的文案是加粗字號？

（5）除了文案描述，通過增加列表項內容的縮略圖來提升搜索內容的感知。

四. 結果頁如何展示

在盡可能快速、便捷、準確地幫助用戶輸入搜索信息后，這時候我們的目標就是以一種清晰易讀的方式來展現搜索結果了。結果頁的展示是搜索體驗里面至關重要的一環：它的展現提供了一次可以引導用戶需求的一個對話機會。

1. 不要刪掉用戶輸入的搜索文案
2. 選擇合適的信息排版
3. 展示搜索結果的數量
4. 展示搜索進程
5. 不要給用戶展示“沒有搜索結果”
6. 提供過濾查找和分類展示的功能

1. 不要刪掉用戶輸入的搜索文案

(跳轉到結果頁后)保留原有的搜索文案(記錄)。搜索信息重組是搜索流程中的關鍵一步：如果用戶沒有找到他們想要的內容，他們可能會通過文案的微調來重新進行搜索。為了使這個流程變得更便捷，在搜索框保留原始的搜索文案以便用戶在再次搜索時進行微調。

2. 選擇合適的信息排版

展示搜索結果的難點之一就是不同種類的內容需要不同的排版。其中的兩個代表性的排版就是列表式和網格式。記住一條原則：包含詳情的用列表式，以圖片為主的用網格式。

讓我們在(電商網站的)產品展示場景中來檢驗這一原則。選擇列表式還是網格式的一個關鍵考慮因素就是用戶在做決策判斷時需要的信息量的多少。例如像家電類產品，型號、評級、尺寸都是用戶在決策過程中需要考慮的細節因素，這時候列表式的顯得更合適。

網格式排版常被用在那些用戶做決策時不需要依賴過多的產品信息時的場景，網格視圖用得最多的就是服裝展示，因為用戶經常是基于產品的外觀來做選擇而不是文案描述。對于這類產品來說，用戶關心的是不同款式之間的視覺差異，并且更愿意在一個長長的頁面進行瀏覽而不是在商品列表和商品詳情頁之間來回切換。

在結果展示頁為用戶提供列表視圖與網格視圖的選項，這樣你的用戶就有選擇他們自己喜歡的瀏覽展示方式的機會。

4-3.展示搜索結果的數量

將搜索到的結果數量展示給用戶，這樣用戶就可以安排一下他們瀏覽搜索結果的時間( 或者說這樣用戶就對瀏覽搜索結果的時間有一個預期。)

4. 展示搜索進程

理想狀態下的搜索結果應該(在用戶敲下回車鍵或提交按鈕后)立即展示出來，但通常情況下這是不可能的，因而搜索進程展示應該作為一種系統反饋展示給用戶，要讓用戶知道還需要等待多久。

Tip：

當等待時間過長時（比如超過10秒）你可以通過精美的動畫來分散用戶的注意力而讓用戶忽略漫長的等待時間。

5. 不要給用戶展示“沒有搜索結果”

丟給用戶一個“沒有搜索結果”會讓其感到沮喪，尤其是當他們嘗試過幾次之后。

你可以通過在沒有搜索結果的時候遵循這兩個原則來幫助用戶減少它們的挫敗感：

• 告訴用戶沒有找到合適的結果；
• 提供讓用戶進行下一步動作（繼續瀏覽）的爆點（例如線上商城可以推薦類似產品或替代產品）。

在左側的HP網站案例中搜索結果中的沒有找到結果對于用戶來說就意味著流程的結束，并沒有很好地形成閉環。而與之形成鮮明對比的是amazon的頁面中當系統沒有找到搜索結果時，會推薦相關聯的商品以及搜索問題的建議。

6. 提供過濾查找和分類展示的功能

當搜索結果對于用戶想要查找的東西不那么相關亦或者結果太多的時候，用戶會變得抓狂。這時候可以用過濾和分類(展示)功能來幫助用戶縮小(需要檢視的)數據范圍。

（1）分類展示和內容過濾并不是一回事。不要將分類與過濾混為一談 — 不同于過濾，分類并不會限制展示給用戶的內容是什么，而是改變所展示內容的順序。

（2）限制過濾選項的數量。這是由于我們大腦短期記憶儲存的信息容量較小(通常是小于等于7個項目)，不塞給用戶過多的選項就變得很重要了 — 同時展示最多7個過濾選項。如果你的搜索確實需要很多的過濾選項，那么將一些默認的選項隱藏起來，并且增加一個“查看全部過濾條件”的按鈕以便用戶能夠找到。

（3）將過濾選項按優先級進行展示。搞清楚在你的站點用戶是基于哪些維度去進行搜索的并基于你的這些發現來安排過濾選項。例如，Airbnb知道他們的用戶會基于價格去進行過濾篩選，所以他們將其置于頁面頂部。

（4）將分類邏輯展示清楚給用戶。當用戶看到一個海量信息的列表時，用戶首先會理解這個列表信息是按照什么分類邏輯進行展示的。

（5）在結果頁展示過濾選項的信息。當用戶縮小搜索范圍時，在結果頁頂部外顯突出這些范圍的篩選條件是有必要的。

我們來看看幾個案例：

五. 好的搜索體驗就是好的用戶體驗

設計好搜索功能是搭建重內容的app或網站的一個至關重要的部分。即使是如輸入框尺寸的微小變化或是改變搜索框內展示的關鍵詞引導都能提升搜索功能的可用性進而影響整個產品的體驗。

說明：喜歡翻譯國外交互設計體驗設計網站優秀文章案例，僅供互相學習探討，翻譯有版權，表述包含譯者個人理解，如有錯誤，請多指正~

原文作者：Nick Babich

原文地址：http://www.uxbooth.com/articles/best-practices-for-search/www.uxbooth.com

譯者：johnnylhj，迅雷網絡高級交互設計師

本文由 @vanhelsinglhj?翻譯發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pixabay，基于 CC0 協議