<tt id="okiwm"><wbr id="okiwm"><big id="okiwm"></big></wbr></tt>

    <tt id="okiwm"><wbr id="okiwm"></wbr></tt>
    <tt id="okiwm"><pre id="okiwm"></pre></tt>

    <listing id="okiwm"></listing>
  1. <tt id="okiwm"><wbr id="okiwm"><small id="okiwm"></small></wbr></tt>

    <bdo id="okiwm"><menu id="okiwm"></menu></bdo>
  2. 三個案例告訴你:“搜索框”該如何設計?

    產品小白專屬,10周線上特訓,測、練、實戰,22位導師全程帶班,11項求職服務,保障就業!了解詳情

    不管是在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協議

    給作者打賞,鼓勵TA抓緊創作!
    評論
    歡迎留言討論~!
    1. 現在我看到阿里云,頂部的導航欄沒有固定呀

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

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

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

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

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

        回復
      2. 好的。謝謝

        回復
    4. 遇到同事了,哈哈

      回復
      1. :arrow:

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

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

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

        回復
      2. 多謝您得答復,非常感謝!

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

      回復
      1. 謝謝,我再接再厲

        回復
    7. 來加你到全國云產品群

      回復
      1. 謝謝,多多學習

        回復
    江苏11选5开奖走势图