編者按：Nick Babich 的UI/UX系列文章是目前最實在的設(shè)計系列文章，設(shè)計規(guī)則、最佳實踐和實戰(zhàn)案例三者兼顧，頗為值得學(xué)習(xí)。今天的文章聊的是搜索結(jié)果頁的設(shè)計，和上一篇《設(shè)計一個完美的搜索框，你需要注意這9個要素》結(jié)合起來看，風(fēng)味更佳~

搜索就像用戶和系統(tǒng)之間的對話：用戶將他們的信息需求提交上來查詢，系統(tǒng)針對提交的信息進行檢索，再從界面上給用戶以反饋，呈現(xiàn)為一組結(jié)果。所以，搜索結(jié)果頁是搜索的最重要的組成部分之一，它滿足了用戶對于特定信息的需求。

這篇文章中，我將搜索結(jié)果頁的10項最佳實踐列舉出來，它們應(yīng)當(dāng)能夠有效的幫你提升整個用戶體驗。

1、點擊搜索按鈕之后，不要清除用戶的查詢內(nèi)容

對于用戶的查詢內(nèi)容，在搜索結(jié)果頁當(dāng)中應(yīng)當(dāng)忠實地、完整地呈現(xiàn)出來。這不僅包含目前的搜索，而且應(yīng)當(dāng)涵蓋之前的搜索內(nèi)容。對于許多信息獲取的過程而言，歷史和當(dāng)前查詢內(nèi)容都是關(guān)鍵信息，如果用戶當(dāng)前的搜索關(guān)鍵詞找不到想要的結(jié)果的話，他們會稍加調(diào)整，并繼續(xù)搜索。為了方便用戶進行查詢，最好在搜索框中保留初始的關(guān)鍵詞，便于查看也便于調(diào)整進行下一次查詢。

2、提供準(zhǔn)確的和相關(guān)的搜索結(jié)果

搜索結(jié)果的第一頁是至關(guān)重要的。必須承認(rèn)，搜索結(jié)果頁給用戶提供的信息與體驗是整個搜索體驗的關(guān)鍵環(huán)節(jié)，搜索引擎的轉(zhuǎn)化率好壞與否，與之息息相關(guān)。通常只需要通過一兩次搜索，用戶就能通過搜索結(jié)果頁，快速地對整個搜索引擎的素質(zhì)進行判斷。

準(zhǔn)確地將搜索結(jié)果反饋給用戶是構(gòu)建用戶信任的基礎(chǔ)。所以，搜索引擎需要確定結(jié)果的優(yōu)先級，并且將匹配度最高的結(jié)果呈現(xiàn)在結(jié)果頁上。

3、使用有效的自動建議

無效的自動建議讓整個搜索體驗降低，而精準(zhǔn)的自動建議會讓整個體驗好上許多，它會根據(jù)用戶用戶的輸入內(nèi)容(詞匯詞根和后臺數(shù)據(jù))為用戶提供有用和精準(zhǔn)的輸入內(nèi)容建議，這有助于幫助用戶提高搜索過程的精準(zhǔn)度，提升整個搜索體驗。

4、內(nèi)容糾錯

輸入錯誤絕對是最常見的錯誤，如果用戶錯誤地輸入某個關(guān)鍵詞，而你的檢測到了，并且針對錯誤提供更正之后的結(jié)果，這樣就成功的規(guī)避了因為錯誤的關(guān)鍵詞所導(dǎo)致的不良后果，用戶也不用再次進行搜索了。

蘋果的0條目的搜索頁面并不支持搜索結(jié)果自動更正

相反，Asos 在這方面就做的很好，當(dāng)輸入錯誤發(fā)生的時候，他們會盡量以無侵略性的方式來幫助客戶，比如“您的初始搜索為Overcoatt，我們也為您搜索了Overcoats的相關(guān)結(jié)果”。

5、顯示搜索結(jié)果的數(shù)量

顯示搜索結(jié)果的數(shù)量能夠讓用戶更清楚他們需要在瀏覽結(jié)果這件事上花費的時間。

而搜索結(jié)果同時還能幫助用戶針對下一次搜索，作出跟明確的調(diào)整和選擇。

6、保留最近的用戶查詢

即使用戶熟知搜索引擎的全部功能，也需要借助大腦記憶來挑選關(guān)鍵詞，進行搜索。想要找出有意義的、可用的搜索關(guān)鍵詞搭配，用戶需要結(jié)合他們的搜索方向，最近的查詢，聯(lián)想相關(guān)的屬性和關(guān)鍵詞，最終促成一次成功的搜索。在設(shè)計整個搜索體驗的過程中，你應(yīng)該始終記住一點：

尊重用戶的努力。

你的網(wǎng)站應(yīng)當(dāng)存儲所有最近的搜索，以便在用戶進行下一次搜索的時候，提供這些數(shù)據(jù)。

最近的搜索幫助用戶節(jié)省了在相同內(nèi)容搜索上所耗費的時間和精力。

小貼士：盡量一次展示不超過10個條目，這樣不會讓用戶覺得信息過載。

7、選擇合適的頁面布局

不同的內(nèi)容其實需要不同的頁面布局來支撐的，而我們最常見的兩種布局，列表布局和柵格布局，應(yīng)該能夠滿足絕大多數(shù)的需求。對于布局，我們的經(jīng)驗以一言以蔽之就是：

細(xì)節(jié)用列表展現(xiàn)，圖片靠柵格支撐。

讓我們在Cotext 的產(chǎn)品頁面中驗證一下這一經(jīng)驗。產(chǎn)品的細(xì)節(jié)展現(xiàn)是非常重要的時刻，對于電子產(chǎn)品而言，需要呈現(xiàn)的配置信息非常的多，所以，列表視圖是非常合理的。

而對于相對產(chǎn)品信息更少的產(chǎn)品而言，柵格式的布局則是更好的選擇。想服裝這樣的產(chǎn)品，少有需要借助文本式的產(chǎn)品信息來呈現(xiàn)其特征的，更多還是依靠圖片和視覺設(shè)計，所以這類產(chǎn)品需要柵格式的布局，而不是冗長的內(nèi)容信息。

小貼士：

·允許用戶選擇列表視圖和柵格視圖，讓用戶選擇他們更喜歡的方式來查看內(nèi)容。

·在設(shè)計柵格布局的時候，確保圖片的尺寸合理，大到足以看清其中細(xì)節(jié)，而又不會太大，讓用戶一次盡量看到更多的條目。

8、展示搜索過程

理想狀況下，用戶點擊搜索按鍵之后，搜索結(jié)果會立刻顯現(xiàn)出來。但是實際情況是，它通常是需要有一個過程的。通過進度條和動效讓用戶明白他們大概需要等多久，或者讓等待的過程更加有趣。

小貼士：動效可以有效的分散用戶等待過程中的無聊感，讓用戶實際等待的體驗更好。

9、提供排序和過濾的選項

當(dāng)用戶看到的搜索結(jié)果過多，或者相關(guān)度較低的時候，會對搜索結(jié)果非常茫然。而排序和過濾的功能則能夠很好的緩解這一情況。

過濾和排序能夠幫用戶調(diào)整和縮小搜索結(jié)果，大幅度降低用戶手工翻頁篩選的工作量。

小貼士：

·最重要的一點是不要讓用戶有太多的選擇，如果搜索本身需要大量的篩選的話，那么默認(rèn)盡量折疊或者隱藏一些相對不那么重要的結(jié)果。

·不要隱藏排序功能。

·當(dāng)用戶篩選到了一個相對狹窄的搜索范圍的時候，在結(jié)果頁面的頂部對此范圍進行標(biāo)注和說明。

10、不要告訴用戶“沒有結(jié)果”

什么都沒搜到會讓用戶感到非常沮喪的，尤其是當(dāng)用戶進行了好幾次搜索之后，依然沒有結(jié)果。你應(yīng)該盡量避免用戶陷入死胡同，當(dāng)用戶沒有搜到他們想要的內(nèi)容之時，應(yīng)當(dāng)為他們提供有價值的替代品。

結(jié)語

搜索引擎為一個網(wǎng)站所提供的價值是顯而易見的，而可用性良好，體驗平滑舒適的搜索結(jié)果頁則能夠讓用戶快速地判斷出網(wǎng)站和搜索引擎的重要價值。

一個優(yōu)秀的搜索引擎應(yīng)當(dāng)在結(jié)果頁當(dāng)中，為用戶提供有效、有用、有價值的搜索結(jié)果。

我們專注高端建站，小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗，每一個項目承諾做到滿意為止，多一次對比，一定讓您多一份收獲！