注：即使是如輸入框尺寸的微小變化，或是改變搜索框內(nèi)展示的關(guān)鍵詞引導(dǎo)，都能提升搜索功能的可用性進(jìn)而影響整個(gè)產(chǎn)品的體驗(yàn)。

一. 前言

搜索就像是用戶與app或者網(wǎng)站之間的對(duì)話：用戶通過提問表達(dá)信息需求，app或者網(wǎng)站通過展示結(jié)果來作為回應(yīng)。用戶期待流暢的搜索體驗(yàn)，并且基于搜索結(jié)果的質(zhì)量用戶通常會(huì)對(duì)一個(gè)app的價(jià)值形成一個(gè)快速的判斷。

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

二. 什么場(chǎng)景下該用/不該用搜索

小的站點(diǎn)最好不要有搜索功能。當(dāng)一個(gè)網(wǎng)站的內(nèi)容有限時(shí)，其實(shí)沒必要有搜索功能。

只有當(dāng)網(wǎng)站的規(guī)模和復(fù)雜度都達(dá)到一定程度的時(shí)候搜索功能才會(huì)顯得尤其重要。由于用戶通常需要找到某一個(gè)具體的商品，因此電商網(wǎng)站或許是使用搜索功能最常見的案例了。在一些大型的電商網(wǎng)站，搜索欄甚至?xí)?dú)立于頭部并且會(huì)在UI界面中占據(jù)視覺焦點(diǎn)的位置。高達(dá)30%的用戶會(huì)使用網(wǎng)站內(nèi)的搜索工具，而這一行為會(huì)極大地幫助商家搞清楚用戶到底需要什么。

搜索功能對(duì)那些像訂機(jī)票或者提供信息服務(wù)的網(wǎng)站來說也尤其重要。

三. 如何設(shè)計(jì)好搜索框

搜索框是輸入?yún)^(qū)域和提交按鈕的組合。也許有人會(huì)認(rèn)為搜索框根本不需要設(shè)計(jì)，畢竟它就只有兩個(gè)元素。但是由于搜索框在海量信息內(nèi)容的網(wǎng)站是最常被使用的設(shè)計(jì)元素，因此其易用性不言而喻。下文將分為 8 各部分來說明如何設(shè)計(jì)好搜索框：

1. 在視覺上突出搜索框

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

3. 將搜索框置于用戶預(yù)期的位置

4. 提供搜索按鈕

5. 告訴用戶他們可以搜索哪些內(nèi)容

6. 每個(gè)頁(yè)面都要有搜索框

7. 合適的尺寸

8. 使用智能推薦/匹配機(jī)制

1. 在視覺上突出搜索框

搜索框設(shè)計(jì)最重要的原則就是讓它變得很醒目。如果搜索在你的網(wǎng)站或者app里是一個(gè)很重要的功能，那么它應(yīng)該被放在最醒目的位置，因?yàn)樗怯脩舨檎覂?nèi)容最快捷的路徑。

通過點(diǎn)擊單獨(dú)的icon或者按鈕來激活隱藏的搜索框有以下劣勢(shì)：

• 搜索功能不容易被用戶注意到。相比于開放式的文案輸入框，icon所占用的空間更小，因此在視覺上單獨(dú)的icon和按鈕更難被用戶注意到。

• 增加交互成本。換句話說在用戶使用搜索框之前還得增加一步操作。

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

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

Tip：使用最簡(jiǎn)單的放大鏡icon，因?yàn)樵缴俚囊曈X細(xì)節(jié)越能減輕用戶的認(rèn)知負(fù)擔(dān)從而提高認(rèn)知的效率。

3. 將搜索框置于用戶預(yù)期的位置

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

用戶首先會(huì)在頁(yè)面的右上角去找搜索框，如果沒有找到那他們就會(huì)開始瀏覽頁(yè)面的頂部?jī)?nèi)容了。

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

4. 提供搜索按鈕

盡管點(diǎn)擊鍵盤的回車鍵可以觸發(fā)搜索，但有些用戶仍然愿意使用傳統(tǒng)的“(搜索)提交”按鈕。有個(gè)按鈕在同樣會(huì)使用戶意識(shí)到原來觸發(fā)搜索動(dòng)作還需要額外的一個(gè)步驟，即使這個(gè)步驟是按回車鍵。

Tip：

（1）確保提交按鈕大小合適，從而使用戶在使用鼠標(biāo)或者手指進(jìn)行點(diǎn)擊的時(shí)候不需要特別精準(zhǔn)的操作。一個(gè)足夠大的可點(diǎn)擊區(qū)域可以讓用戶發(fā)現(xiàn)和點(diǎn)擊這個(gè)按鈕都變得更容易。

（2）為用戶保留按回車鍵和按鈕兩種形式的搜索觸發(fā)邏輯。許多用戶仍然習(xí)慣于點(diǎn)擊實(shí)體按鍵來提交搜索請(qǐng)求。

5. 告訴用戶他們可以搜索哪些內(nèi)容

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

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

然而根據(jù)Mike Madaio最近提出，在有些情況下占位符文案會(huì)產(chǎn)生可用性問題：如果占位符文案使用比普通文案更淺的顏色，那樣會(huì)產(chǎn)生對(duì)比度問題 — 它不能遵循被廣泛接受的網(wǎng)頁(yè)可用性規(guī)范。此外，根據(jù)W3C里的一些觀點(diǎn)，占位符文案不一定能被廣泛運(yùn)用在一些輔助技術(shù)里面(這里應(yīng)該指在不同硬件設(shè)備上不一定能顯示出讓用戶識(shí)別的足夠?qū)Ρ榷鹊臏\色引導(dǎo)文案)，這將使得此類用戶不知道要用搜索框搜索哪些內(nèi)容。

6. 每個(gè)頁(yè)面都要有搜索框

在UX Booth的另一片文章里，Tucker FizGerald強(qiáng)調(diào)了用戶在每個(gè)頁(yè)面都要能使用搜索框的重要性。在用戶找不到他們想要的內(nèi)容時(shí)尤其需要搜索框，特別是在出現(xiàn) 404 這種頁(yè)面的時(shí)候。

7. 合適的尺寸

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

Tip：

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

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

8. 使用智能推薦/匹配機(jī)制

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

Tip：

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

（2）智能匹配的推薦項(xiàng)目不要超過 10 個(gè)以便信息不會(huì)過載。

（3）允許用戶使用鍵盤來對(duì)匹配列表的內(nèi)容進(jìn)行導(dǎo)航操作(這里主要針對(duì)PC端)。一但用戶下滑到最后一個(gè)項(xiàng)目，這時(shí)候他們會(huì)想回到匹配列表的頂部。應(yīng)該允許用戶使用Esc鍵進(jìn)行這種操作。

（4）強(qiáng)化用戶輸入的文案信息與智能匹配的文案信息的不同之處。比如，用戶輸入的文案是標(biāo)準(zhǔn)字號(hào)，而智能匹配的文案是加粗字號(hào)？

（5）除了文案描述，通過增加列表項(xiàng)內(nèi)容的縮略圖來提升搜索內(nèi)容的感知。

四. 結(jié)果頁(yè)如何展示

在盡可能快速、便捷、準(zhǔn)確地幫助用戶輸入搜索信息后，這時(shí)候我們的目標(biāo)就是以一種清晰易讀的方式來展現(xiàn)搜索結(jié)果了。結(jié)果頁(yè)的展示是搜索體驗(yàn)里面至關(guān)重要的一環(huán)：它的展現(xiàn)提供了一次可以引導(dǎo)用戶需求的一個(gè)對(duì)話機(jī)會(huì)。

1. 不要?jiǎng)h掉用戶輸入的搜索文案

2. 選擇合適的信息排版

3. 展示搜索結(jié)果的數(shù)量

4. 展示搜索進(jìn)程

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

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

1. 不要?jiǎng)h掉用戶輸入的搜索文案

(跳轉(zhuǎn)到結(jié)果頁(yè)后)保留原有的搜索文案(記錄)。搜索信息重組是搜索流程中的關(guān)鍵一步：如果用戶沒有找到他們想要的內(nèi)容，他們可能會(huì)通過文案的微調(diào)來重新進(jìn)行搜索。為了使這個(gè)流程變得更便捷，在搜索框保留原始的搜索文案以便用戶在再次搜索時(shí)進(jìn)行微調(diào)。

2. 選擇合適的信息排版

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

讓我們?cè)?電商網(wǎng)站的)產(chǎn)品展示場(chǎng)景中來檢驗(yàn)這一原則。選擇列表式還是網(wǎng)格式的一個(gè)關(guān)鍵考慮因素就是用戶在做決策判斷時(shí)需要的信息量的多少。例如像家電類產(chǎn)品，型號(hào)、評(píng)級(jí)、尺寸都是用戶在決策過程中需要考慮的細(xì)節(jié)因素，這時(shí)候列表式的顯得更合適。

網(wǎng)格式排版常被用在那些用戶做決策時(shí)不需要依賴過多的產(chǎn)品信息時(shí)的場(chǎng)景，網(wǎng)格視圖用得最多的就是服裝展示，因?yàn)橛脩艚?jīng)常是基于產(chǎn)品的外觀來做選擇而不是文案描述。對(duì)于這類產(chǎn)品來說，用戶關(guān)心的是不同款式之間的視覺差異，并且更愿意在一個(gè)長(zhǎng)長(zhǎng)的頁(yè)面進(jìn)行瀏覽而不是在商品列表和商品詳情頁(yè)之間來回切換。

在結(jié)果展示頁(yè)為用戶提供列表視圖與網(wǎng)格視圖的選項(xiàng)，這樣你的用戶就有選擇他們自己喜歡的瀏覽展示方式的機(jī)會(huì)。

4-3.展示搜索結(jié)果的數(shù)量

將搜索到的結(jié)果數(shù)量展示給用戶，這樣用戶就可以安排一下他們?yōu)g覽搜索結(jié)果的時(shí)間( 或者說這樣用戶就對(duì)瀏覽搜索結(jié)果的時(shí)間有一個(gè)預(yù)期。)

4. 展示搜索進(jìn)程

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

Tip：

當(dāng)?shù)却龝r(shí)間過長(zhǎng)時(shí)（比如超過 10 秒）你可以通過精美的動(dòng)畫來分散用戶的注意力而讓用戶忽略漫長(zhǎng)的等待時(shí)間。

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

丟給用戶一個(gè)“沒有搜索結(jié)果”會(huì)讓其感到沮喪，尤其是當(dāng)他們嘗試過幾次之后。

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

• 告訴用戶沒有找到合適的結(jié)果；

• 提供讓用戶進(jìn)行下一步動(dòng)作（繼續(xù)瀏覽）的爆點(diǎn)（例如線上商城可以推薦類似產(chǎn)品或替代產(chǎn)品）。

在左側(cè)的HP網(wǎng)站案例中搜索結(jié)果中的沒有找到結(jié)果對(duì)于用戶來說就意味著流程的結(jié)束，并沒有很好地形成閉環(huán)。而與之形成鮮明對(duì)比的是amazon的頁(yè)面中當(dāng)系統(tǒng)沒有找到搜索結(jié)果時(shí)，會(huì)推薦相關(guān)聯(lián)的商品以及搜索問題的建議。

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

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

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

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

（3）將過濾選項(xiàng)按優(yōu)先級(jí)進(jìn)行展示。搞清楚在你的站點(diǎn)用戶是基于哪些維度去進(jìn)行搜索的并基于你的這些發(fā)現(xiàn)來安排過濾選項(xiàng)。例如，Airbnb知道他們的用戶會(huì)基于價(jià)格去進(jìn)行過濾篩選，所以他們將其置于頁(yè)面頂部。

（4）將分類邏輯展示清楚給用戶。當(dāng)用戶看到一個(gè)海量信息的列表時(shí)，用戶首先會(huì)理解這個(gè)列表信息是按照什么分類邏輯進(jìn)行展示的。

（5）在結(jié)果頁(yè)展示過濾選項(xiàng)的信息。當(dāng)用戶縮小搜索范圍時(shí)，在結(jié)果頁(yè)頂部外顯突出這些范圍的篩選條件是有必要的。

我們來看看幾個(gè)案例：

五. 好的搜索體驗(yàn)就是好的用戶體驗(yàn)

設(shè)計(jì)好搜索功能是搭建重內(nèi)容的app或網(wǎng)站的一個(gè)至關(guān)重要的部分。即使是如輸入框尺寸的微小變化或是改變搜索框內(nèi)展示的關(guān)鍵詞引導(dǎo)都能提升搜索功能的可用性進(jìn)而影響整個(gè)產(chǎn)品的體驗(yàn)。