三個案例告訴你:“搜索框”該如何設計?

63 評論 3329560 瀏覽 1922 收藏 15 分鐘

不管是在2C還是2B產品,“搜索”是產品中最常見且必不可少的功能模塊之一。對于用戶來說,在眾多功能模塊和信息層級中如何快速定位到目標,通過輸入已知的關鍵詞進行搜索是最便捷的方式,沒有之一。所以,做為一名交互設計師、體驗設計師,應該如何設計“搜索框”并構建良好的用戶體驗呢?

一、搜索框的定義

輸入框+按鈕=搜索框

搜索框是由兩種基本元素“輸入框”、“按鈕”組合而成的一種組件。

在AntDesign(螞蟻金服出品的設計體系)中,輸入框(Input)的定義為:通過鼠標或鍵盤輸入內容,是最基礎的表單域的包裝。

其應用場景之一就是“帶搜索的輸入框”。按鈕(Button)的定義為:用于開始一個即時操作。其應用場景有“標記一個操作命令”、“響應用戶點擊行為”、“觸發相應的業務邏輯”。

綜上,可以給“搜索框”一個基礎定義:通過輸入內容以觸發搜索行為的組件。

但是,這只是在UI層面解釋了什么是“搜索框”,從體驗層面上看,良好的用戶體驗要反映在“搜索框”的使用流程中,可將其劃分為3步:Before、Doing、After。

  • Before:使用前,搜索框要具有醒目的視覺位置,以便用戶能迅速找到。
  • Doing:使用過程中,搜索框要能根據用戶的輸入內容有所反饋,與用戶產生交互。
  • After:使用后,給用戶想要的結果。

搜索框的的使用流程

本文選取“搜索框”的三種用戶常見場景以進行說明:搜索引擎—百度、電商—蘇寧易購、站內—阿里云。

二、搜索引擎—百度

根據最新統計:百度搜索(http://www.baidu.com)在國內市場份額占比超過70%。

在日常生活中,經常會聽到人說去“百度一下”,可見百度在用戶生活中影響之深。

以“百度”為例:

Before

進入百度首頁,搜索框占其主要頁面十分醒目,不僅提供文字輸入,也提供圖片搜索功能

如何設計“搜索框”并構建良好的用戶體驗

百度搜索-Before

Doing

以前段時間熱門電影《我不是藥神》的名稱為例:在輸入過程中,搜索框推薦了輸入內容的相關詞條。

相比于需要大腦組織語言并提煉關鍵詞的“輸入”操作,用戶更愿意通過點點點達到目的。因此,如果推薦中出現了用戶目標中相符的詞條,用戶會更愿意“無需思考”點擊而不再輸入。

這種根據用戶輸入內容、推薦相關詞條的交互反饋,能極大降低用戶的思考時間,提高搜索效率,因為在關鍵詞的輸入時需要用戶在大腦中開展一段思考活動。點擊推薦詞條,會直接跳轉至搜索結果頁,省卻“百度一下”,又降低用戶的操作步驟。

如何設計“搜索框”并構建良好的用戶體驗

百度搜索-Doing

After

用戶點擊推薦詞條,或輸入內容后“百度一下”,跳轉至搜索結果頁面。

百度默認將“網頁”結果作為首選頁面,同時提供“視頻、圖片、貼吧”等其他模塊內容的Tab切換。在模塊Tab下,告知用戶搜索的結果數目,讓用戶對搜索結果有一個心理預告。

如何設計“搜索框”并構建良好的用戶體驗

百度搜索-After

PS:

當輸入較多字符時,會提示用戶需要將搜索關鍵詞限制在38個漢字以內。

雖然字符超過百度的規定,但并沒有禁用搜索功能、提示用戶刪減字符,而是繼續完成搜索、未打斷用戶的操作流程,并在搜索結果頁面提示用戶“超過規定字符數之后的內容忽略”。這樣如果搜索頁面不符合用戶目標,用戶再次搜索前會根據自己需要進行刪減字符。

這種交互有兩個好處:一是不打斷用戶使用流程,二是用戶懂得如何二次搜索。

如何設計“搜索框”并構建良好的用戶體驗

百度搜索-輸入字符限制提示

三、電商搜索—蘇寧易購

2018年全國網上零售額超9萬億,占社會消費總額23%。電商已成為用戶高頻使用的軟件之一,用戶在瀏覽電商網站時,如果有明確的購物需求,一般會直接使用搜索來查找目標寶貝。

以蘇寧易購(http://www.suning.com)為例:

Before

搜索框在頂部主要位置,用戶進入首頁后能迅速注意到“搜索框”在頂部。其后不管用戶瀏覽到哪個位置,都能通過“回到頂部”這一想法而定位到搜索框。

需要注意的是:在輸入框內會默認給出一條搜索內容,并且在搜索框下面緊貼著有多個關鍵詞,和上文的百度推薦詞類似,點擊后可直接跳轉至相應的營銷頁面。

這個位置往往是近期需大力推廣的活動或商品,也會根據用戶的用戶行為記錄,推薦目標商品,提高轉化率。

如何設計“搜索框”并構建良好的用戶體驗

蘇寧易購搜索-Before

Doing

最近天氣炎熱,空調是居家旅行必備之物,就以“空調”為搜索條件。

輸入“空調”后,與上文百度搜索一樣,會出現推薦詞條,細看能發現有點不一樣——這里的推薦內容出現了分類:空調類別推薦、關鍵詞匹配、相關店鋪。

這種是主動幫用戶預設目標場景(空調—商業空調、空調—空調1.5匹、空調—空調店鋪),能極大提高用戶的搜索準確度,并節省用戶查找過程中消耗的網絡資源、時間成本。

如何設計“搜索框”并構建良好的用戶體驗

蘇寧易購搜索-Doing

After

當點擊“搜索”按鈕或推薦詞后,跳轉至搜索結果頁面。

基于電商的兩大特征“商品SKU量大、廣告收入來源豐厚”導致了搜索結果頁面的“賣家吆喝”的特點,主要表現在以下幾點:推廣最新活動(特價促銷),加大曝光相關品牌(知名品牌),介紹爆款商品(人氣旺盛)。這些的目標只有一個,幫助用戶快速找到目標商品下單購買。

在商品列表上,有一行不起眼的Tab是排序條件,默認為“綜合”,同時提供“銷量、評價數”的排序選項,這利用了用戶的從眾心理。

如何設計“搜索框”并構建良好的用戶體驗

蘇寧易購搜索-After

PS:電商的本質是賣貨,需要服從于營收,因此有時候搜索結果雖然符合用戶需求,但也符合電商的需求,那就是讓用戶迅速掏錢購買、盡可能掏出更多的錢購買。因此當,搜索結果為空的時候,仍然會提供推薦商品,以提高用戶掏錢的概率。

如何設計“搜索框”并構建良好的用戶體驗

蘇寧易購搜索-搜索為空時提供商品推薦

四、站內搜索—阿里云

2018自然年阿里云(http://www.aliyun.com)營收規模達到213.6億元,4年間增長了約20倍,已成長為全球第三大云服務提供商。以阿里云為例,用戶如果想查看站內的某一內容,最便捷的方式就是使用搜索功能。

Before

在阿里云內,搜索框位于頂部固定菜單欄。相比于同一級別菜單內其他功能,搜索的優先級不是特別明顯,因此納入統一操作級別是合理的。

固定的位置帶來的好處就是:用戶不管在哪個位置都能迅速定位至搜索功能。

有意思的是:搜速框內也推薦了默認關鍵詞,這和電商類似,應該也是促使用戶買買買的手段之一。

阿里云搜索-Before

Doing

以“對象存儲”為搜索詞進行輸入,輸入“對象”后,與上文百度搜索一樣會出現推薦詞條, 細看推薦內容不僅有產品名稱,也有貌似是操作手冊內容“如何退訂”字樣(點擊后確認是幫助文檔內容)。

因為在這種工具型產品中,如何操作對用戶是需要學習成本的。因此,將幫助文檔納入搜索體系與產品并存,拓寬了搜索的價值,也提高了用戶的使用效率,無需先進入幫助文檔然后再搜索。

如何設計“搜索框”并構建良好的用戶體驗

阿里云搜索-Doing

After

選擇“對象存儲”點擊進入搜索結果頁面。搜索結果根據阿里云功能模塊進行了分類“全部、網站、幫助文檔、云棲社區…”,并且每種類別名稱后面注有搜索的結果數目,以方便用戶快速進行判斷。

與百度直接顯示詳細數目不同,這里最多只顯示“999+”字樣,對于這種站內搜索,數目越多帶給用戶的不一定是好感,也有可能是惶恐。

與電商類似,搜索結果也有產品的推廣,以達到讓用戶掏錢的目的。

在搜索框、產品推廣,列表旁邊均有推薦產品搜索內容,目的也是猜測用戶相關需求,例如:從產品信息、如何使用、資源鏈接等多維度幫助用戶全面了解“對象存儲”產品,節省用戶下單購買的考慮時間。

阿里云搜索-After

PS:阿里云雖然是一個2B產品,但具有一些2C的特征。因為阿里云不僅要提供用戶功能的使用,更要向用戶售賣更多的云服務及產品。這種屬性決定了阿里云不僅是一個2B工具,也要做好2C的一面以提高營收。

五、總結

通過對以上百度、蘇寧易購、阿里云三個產品內搜索框的分析,能夠發現“搜索框”良好的體驗設計具有如下一些特點:

  1. 功能復雜的產品中都會有搜索框,并且優先級不低。
  2. 搜索內容不管類別有多少,搜索框只有一個,即搜索功能的入口唯一。
  3. 搜索框內輸入任何內容都是有可能的,盡量不約束用戶的輸入內容。
  4. 根據用戶輸入提供推薦是搜索框的必備交互反饋。
  5. 搜索的結果類別最好要劃分清晰,方便用戶迅速做出判斷。
  6. 搜索結果的數目最好要讓用戶可知,提供心理預期。
  7. 搜索出現為空的時候,盡量告知用戶其原因,避免二次犯錯。
  8. 不管在搜索的哪個階段,內容推薦永遠有“機”可乘。

構建良好體驗的“搜索框”還有很多方法和設計范式,此文僅為拋磚引玉。

 

本文由 @吹拉彈大師 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 非常好的總結????

    回復
  2. ??

    回復
  3. 感謝分享

    回復
  4. 這個閱讀量好高

    回復
  5. 不錯

    回復
  6. 很不錯

    回復
  7. 有啟發,非常感謝

    回復
    1. 不錯

      回復
    2. ??

      回復
  8. 寫的好!對我很有啟發,謝謝!

    回復
  9. 感謝分享??

    回復
  10. 真好(?▽?)

    回復
  11. 感謝分享

    回復
  12. 還有搜索歷史,也很重要.我不明白為什么微信的搜索沒有搜索歷史記錄

    回復
  13. 很好

    回復
  14. 為什么寫文章都喜歡是不是蹦出來幾個英文?

    回復
  15. 挺好

    回復
  16. 寫得好

    回復
  17. 感覺還可以提一點 就是搜索框在什么場景下會隨著內容滑動什么場景下會固定??

    回復
  18. 百度搜索框 字數超出提示
    為什么不在用戶字數超出限制或者差一點超出限制時提示修改提示呢?
    直接在搜索框下提示小字同樣不打斷操作。
    而且我搜索完一次提示錯誤,感覺之前做的努力白做了
    我覺得這個環節應該能設計得更好,現有環節實際上有損傷體驗。

    回復
  19. 你好,其實在點進來之前我還在想墨刀的搜索框組件那么豐富哈哈 抱著一個疑問臉進來。知其然,知其所以然!謝謝分享?。。?/p>

    回復
    1. 你都在哪里找墨刀的搜索框的啊

      回復
  20. bnnznn?n?n

    回復
  21. 講的有點淺,結合算法推薦講透一個小點就行,不是說你講了一個百度的一個阿里的就怎樣怎樣了。

    回復
    1. 同意

      回復
    2. 懂行

      回復
    3. 對于很多剛入門的產品以及UI設計師來講這個足夠用了,畢竟不是很多人很多公司了解算法知識圖譜等

      回復
  22. 總結的很好

    回復
  23. 現在我看到阿里云,頂部的導航欄沒有固定呀

    來自浙江 回復
    1. 你是理解為吸頂嗎?阿里云沒有,電商有這樣做的

      來自江蘇 回復
  24. 你好,我想請教一下,為啥有些產品在搜索的時候,會提示用戶歷史搜索記錄信息,有些產品沒有呢?這個背后的機制是什么呢?謝謝

    來自陜西 回復
    1. 提供搜索記錄是方便用戶二次進入的時候能快速定位至歷史頁面,一般出現在高頻剛需的產品內:1、對產品來說,用戶使用頻率越高,就更需要投入精力去采集、研究用戶的行為,搜索記錄就是用戶行為數據的一種;2、對用戶來說,使用頻率越高意味著重復相同行為的概率更高,相比于“輸入關鍵詞”這種行為層、反思層的操作,用戶更愿意“點擊搜索記錄”這種本能層的操作,可以參考文中“百度-doing”章節。

      來自江蘇 回復
  25. 可以,但還需標明作者:吹拉彈大師

    來自江蘇 回復
  26. 您好,我是網頁設計精選的小編,可以轉載您的這篇文章么?我們會在顯著位置標明出處和鏈接,期待您的回復

    來自山東 回復
    1. 可以,但還需標明作者:吹拉彈大師

      來自江蘇 回復
    2. 好的。謝謝

      來自山東 回復
  27. 遇到同事了,哈哈

    來自江蘇 回復
    1. ?

      來自江蘇 回復
  28. 其實我想問個問題,為什么百度有字數限制,蘇寧的卻沒有呢?作者能給我答復么?

    來自上海 回復
    1. 個人認為字數限制原因應該是經過調優之后得到的一個平衡方案,字數越多會帶來性能、準確率方面的問題,猜想百度經過技術論證認為38是一個比較合適的大小,既能滿足99.99%的搜索場景,也不會損耗過多性能導致延遲。

      蘇寧也好,電商也好,這種可以認為是一種站內搜索,搜索目標相比于百度這種搜索引擎,量級實在太小。百度就好比是大海撈針,站內搜索就是在一個茶杯里撈針,技術上沒必要去限制用戶行為。

      來自江蘇 回復
    2. 多謝您得答復,非常感謝!

      來自上海 回復
    3. 贊一個

      回復
    4. 業務場景不一樣,一個是內容搜索場景,關鍵詞不斷從簡短的核心詞拓展到長尾關鍵詞甚至一句話,而另一個是電商場景,關鍵詞拓展的范圍不會過于縱深。個人理解如此。

      回復
  29. 百度和阿里的設計用意解釋非常牽強

    來自江蘇 回復
    1. 謝謝,我再接再厲

      來自江蘇 回復
  30. 來加你到全國云產品群

    回復
    1. 謝謝,多多學習

      來自江蘇 回復