分享一篇Nick babich的3月4日的新文巫击，原文點擊此處，翻譯不當之處請指出莉擒。

UX:Search Results

搜索就像一個用戶和系統(tǒng)之間的對話：用戶表達他們的信息需求去查詢钝计，系統(tǒng)顯示一組結(jié)果為其響應(yīng)恋博。結(jié)果頁面是搜索體驗的一個關(guān)鍵部分，它提供了一個機會私恬，引發(fā)了與用戶信息需求的對話债沮。

在這篇文章中，我想分享10種實踐將幫助你提高搜索結(jié)果頁的用戶體驗本鸣。

1.不要在用戶點擊搜索按鈕后刪除用戶的查詢疫衩。

保留原始文本。重復(fù)查詢是許多信息查找中的關(guān)鍵一步永高。如果用戶沒有找到他們正在尋找的隧土，那么他們可能使用稍微修改的查詢再次搜索提针。為了使這樣的操作更容易命爬，就應(yīng)該將初始搜索項文本留在搜索框中曹傀，這樣用戶就不必重新輸入整個查詢字段。

2.提供準確和相關(guān)的結(jié)果

結(jié)果頁第一頁是最重要的饲宛。搜索結(jié)果頁面是搜索體驗的主要焦點皆愉，并與是否提升網(wǎng)站的轉(zhuǎn)換率極為相關(guān)。用戶通常會根據(jù)一組或兩組搜索結(jié)果的質(zhì)量對網(wǎng)站的價值做出快速判斷艇抠。

將準確的結(jié)果返回給用戶顯然很重要幕庐，否則他們不會信任搜索工具。因此家淤，重要的是异剥，你的搜索重要性劃分對提升用戶體驗來說是一個非常有用的方法，讓所有最重要的（相關(guān)性強的）點擊出現(xiàn)在第一頁絮重。

3.使用有效的自動提示

無效的自動提供會提供很差的用戶體驗冤寿。要確保自動提示是有用的。當用戶輸入文本青伤，一些有用的功能包括識別詞根督怜、預(yù)測文本和建議，而用戶進入文本狠角。他們有助于加快搜索過程号杠，并維持用戶在任務(wù)中自由轉(zhuǎn)換。

ThinkWithGoogle

4.糾正拼寫錯誤

打字是很容易出錯的丰歌。如果用戶輸入錯誤的搜索詞姨蟋，你能察覺這一點，你可以展示給他們的猜測的結(jié)果和糾正的搜索詞來代替立帖。這樣可以避免由于沒有結(jié)果顯示而迫使用戶再次進行搜索而導(dǎo)致的沮喪芬探。

蘋果商店不支持拼寫改正

Asos做了一個很好的范例，當用戶輸入錯誤的時候厘惦，會出現(xiàn)“we also searched for Overcoats”字樣提示用戶已修正輸入的內(nèi)容

5.顯示搜索結(jié)果的數(shù)目

顯示可用的搜索結(jié)果的總數(shù)偷仿，以便用戶可以決定他們想花多長時間看結(jié)果。

具體的數(shù)據(jù)可以幫助用戶判斷需不需要更詳細的重新查詢

6.留存用戶最近搜索的查詢

即使用戶熟悉搜索功能宵蕉，搜索也需要從他們的記憶中回憶信息酝静。要響應(yīng)一個有意義的查詢，用戶需要思考與他的目標相關(guān)的詞羡玛，并將它們納入查詢中别智。在設(shè)計搜索框的用戶體驗時，你應(yīng)該記住一個基本的可用性規(guī)則：

尊重用戶的努力

您的站點應(yīng)該存儲所有最近的搜索稼稿，以便在下次進行搜索時向用戶提供這些數(shù)據(jù)薄榛。

最近的結(jié)果會幫助用戶重復(fù)查找是節(jié)省時間和精力

您的站點應(yīng)該存儲所有最近的搜索讳窟，以便在下次進行搜索時向用戶提供這些數(shù)據(jù)。

提示：最近的搜索保留少于10個敞恋，（不要設(shè)有滾動條）丽啡，這樣信息也不至于太多。

7.選擇適當?shù)捻撁娌季?/h3>

顯示搜索結(jié)果的一個挑戰(zhàn)是不同類型的內(nèi)容需要不同的布局硬猫。內(nèi)容呈現(xiàn)的兩個基本布局是列表視圖和網(wǎng)格視圖补箍。經(jīng)驗法則：

細節(jié)通過列表實現(xiàn)，圖片通過網(wǎng)格來顯示

讓我們看看在產(chǎn)品頁面上下文的規(guī)則啸蜜。產(chǎn)品的詳情是非常重要的坑雅。比如家用電器， 有很多細節(jié)衬横，型號裹粤、產(chǎn)品的額定值和尺寸都是在用戶在選擇過程中的主要因素，列表視圖需要合情合理地展示出來蜂林。

列表視圖非常適合于面向細節(jié)的布局）

網(wǎng)格視圖是App中一個很好的選擇遥诉，因為所展示的商品詳情只需要較少的信息或類似的商品內(nèi)容。如服裝這類商品悉尾，當文字的產(chǎn)品信息少突那，那么用戶需要商品外觀之間做選擇。對于這類商品构眯，用戶關(guān)心的是每個商品之間的視覺區(qū)別愕难，并寧愿滾動長的單頁，而不是在列表頁和商品詳情頁反復(fù)切換惫霸。

網(wǎng)格視圖更適合視覺導(dǎo)向布局

提示:

• 允許用戶選擇搜索結(jié)果的“列表視圖”或“網(wǎng)格視圖”猫缭。這使用戶更好地選擇他們看待搜索結(jié)果的方式。

• 當設(shè)計網(wǎng)格布局時壹店，選擇合適的圖像大小猜丹，需要足夠識別的大，也需要一次被更多的產(chǎn)品看得到的小硅卢。

  
  
  允許用戶通過提供一系列視圖來更改布局射窒。

8.顯示搜索進度

理想的搜索結(jié)果應(yīng)該立即顯示出來，但如果這是不可能的将塑，那么進度指示器作為用戶反饋系統(tǒng)脉顿，應(yīng)該給你的用戶一個明確的指示，他們需要等待多久点寥。

Aviasales網(wǎng)站通知用戶搜索需要一些時間艾疟。

提示：如果搜索時間過長可以使用動畫。好的動畫可以分散用戶的注意力，讓他們忽略長時間的搜索蔽莱。

9·提供排序和篩選選項

當他們的搜索結(jié)果中似乎有太多以及不相關(guān)的結(jié)果弟疆，會導(dǎo)致用戶變得不知所措。你應(yīng)該向用戶提供與搜索相關(guān)的篩選選項盗冷，并使其每次篩選結(jié)果時可以多選篩選項怠苔。

過濾選項可以幫助用戶縮小搜索結(jié)果，否則需要滾動或分頁來顯示全部的結(jié)果正塌。

提示:

• 也需要注意的是不要用太多的選項給用戶壓力嘀略。如果你的搜索需要大量的篩選項恤溶，那還不如默認崩潰乓诽。
• 不要隱藏篩選器的分類排序功能，他們是不同的任務(wù)咒程。

• 當用戶選擇一個狹窄的搜索范圍時鸠天，應(yīng)該在結(jié)果頁的頂部明確地顯示。

  
  

10.不要回饋“沒有結(jié)果”

沒有結(jié)果的頁面上會讓用戶沮喪帐姻，特別是如果他們嘗試了好幾次搜索稠集。當搜索沒有匹配的結(jié)果時，你應(yīng)該避免在體驗中給用戶帶來死角饥瓷，為用戶提供有價值的其他選項（例如在線商店可以從類似類別中推薦替代產(chǎn)品）剥纷。

對比hp的沒結(jié)果和亞馬遜的替代結(jié)果

總結(jié)

搜索是構(gòu)建商業(yè)網(wǎng)站的關(guān)鍵因素。當用戶尋找和和獲知商品時呢铆，他們期望流暢的用戶體驗晦鞋。他們通常通過搜索結(jié)果的質(zhì)量很快判斷出網(wǎng)站的價值，一個優(yōu)秀的搜索工具應(yīng)該幫助用戶快速方便地找到他們想要的東西棺克。

以上悠垛，感謝閱讀（其實很多內(nèi)容書里都講爛了，我就是當學習英語翻譯玩吧~）