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

　　搜索就像用戶(hù)和系統(tǒng)之間的對(duì)話(huà)：用戶(hù)將他們的信息需求提交上來(lái)查詢(xún)，系統(tǒng)針對(duì)提交的信息進(jìn)行檢索，再?gòu)慕缑嫔辖o用戶(hù)以反饋，呈現(xiàn)為一組結(jié)果。所以，搜索結(jié)果頁(yè)是搜索的最重要的組成部分之一，它滿(mǎn)足了用戶(hù)對(duì)于特定信息的需求。

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

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

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

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

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

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

　　3、使用有效的自動(dòng)建議

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

　　4、內(nèi)容糾錯(cuò)

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

　　蘋(píng)果的0條目的搜索頁(yè)面并不支持搜索結(jié)果自動(dòng)更正

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

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

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

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

　　6、保留最近的用戶(hù)查詢(xún)

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

　　尊重用戶(hù)的努力。

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

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

　　小貼士：盡量一次展示不超過(guò)10個(gè)條目，這樣不會(huì)讓用戶(hù)覺(jué)得信息過(guò)載。

　　7、選擇合適的頁(yè)面布局

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

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

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

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

　　小貼士：

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

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

　　8、展示搜索過(guò)程

　　理想狀況下，用戶(hù)點(diǎn)擊搜索按鍵之后，搜索結(jié)果會(huì)立刻顯現(xiàn)出來(lái)。但是實(shí)際情況是，它通常是需要有一個(gè)過(guò)程的。通過(guò)進(jìn)度條和動(dòng)效讓用戶(hù)明白他們大概需要等多久，或者讓等待的過(guò)程更加有趣。

　　小貼士：動(dòng)效可以有效的分散用戶(hù)等待過(guò)程中的無(wú)聊感，讓用戶(hù)實(shí)際等待的體驗(yàn)更好。

　　9、提供排序和過(guò)濾的選項(xiàng)

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

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

　　小貼士：

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

　　·不要隱藏排序功能。

　　·當(dāng)用戶(hù)篩選到了一個(gè)相對(duì)狹窄的搜索范圍的時(shí)候，在結(jié)果頁(yè)面的頂部對(duì)此范圍進(jìn)行標(biāo)注和說(shuō)明。

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

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

　　結(jié)語(yǔ)

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

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

最新評(píng)論