如何讓搜索框的體驗更好？我總結了這些設計套路！

　　

<option id="uausy"></option>

<li id="uausy"></li>

array(23) {
  ["id"] => string(2) "96"
  ["siteid"] => string(1) "1"
  ["type"] => string(1) "1"
  ["m_id"] => string(1) "0"
  ["p_id"] => string(1) "0"
  ["name"] => string(6) "服務"
  ["thumb"] => string(63) "/modules/cms/uploads/recommend/2018/05/15/05797102164099283.png"
  ["image"] => string(0) ""
  ["desc"] => string(0) ""
  ["pdir"] => string(0) ""
  ["dir"] => string(7) "service"
  ["url"] => string(0) ""
  ["setting"] => array(15) {
    ["is_html"] => int(1)
    ["content_is_html"] => int(0)
    ["urlrule"] => int(1)
    ["contenturlrule"] => int(0)
    ["meta_title"] => string(88) "定制開發-APP定制開發,微信定制開發,小程序定制開發,網站定制開發"
    ["meta_keywords"] => string(75) "APP定制開發,微信定制開發,小程序定制開發,網站定制開發"
    ["meta_description"] => string(0) ""
    ["category_template"] => string(0) ""
    ["list_template"] => string(0) ""
    ["show_template"] => string(21) "show_page_dingzhi.tpl"
    ["formid"] => string(0) ""
    ["url"] => string(0) ""
    ["target"] => string(0) ""
    ["pri_grade_visit"] => array(0) {
    }
    ["pri_grade_add"] => array(0) {
    }
  }
  ["order"] => string(1) "1"
  ["sethtml"] => string(1) "0"
  ["stat"] => string(1) "2"
  ["flowid"] => string(1) "0"
  ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2018/05/25/05805654599261264.jpg"
  ["page_num"] => string(1) "0"
  ["wxstat"] => string(1) "0"
  ["scope"] => string(0) ""
  ["modelname"] => NULL
  ["son"] => array(9) {
    [0] => array(22) {
      ["id"] => string(3) "187"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(15) "小程序開發"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(112) "專業微信小程序解決方案|各種場景核心功能，提前布局微信新生態，搶占第一波紅利"
      ["pdir"] => string(0) ""
      ["dir"] => string(6) "wechat"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(107) "小程序_商城小程序_門店小程序_微圈小程序_餐飲小程序開發-藝源科技小程序開發"
        ["meta_keywords"] => string(103) "小程序開發,商城小程序開發,門店小程序開發,微圈小程序開發,餐飲小程序開發"
        ["meta_description"] => string(269) "專注提供專注提供小程序、商城小程序、門店小程序、微圈小程序、餐飲小程序開發，專業團隊,一對一服務,助企業快速生成自己的移動端微商城平臺. 藝源科技小程序采用高性能數據架構,系統穩定安全。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(17) "show_page_xcx.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "0"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "1"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [1] => array(22) {
      ["id"] => string(3) "199"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(9) "APP開發"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(3) "APP"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(65) "app開發_app定制開發_app制作開發公司【藝源科技】"
        ["meta_keywords"] => string(53) "app開發,app定制開發公司,app制作開發公司"
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(17) "show_page_app.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "1"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [2] => array(22) {
      ["id"] => string(3) "244"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "快抖霸屏"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(7) "kuaidou"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(71) "快抖霸屏_抖音快手霸屏_短視頻營銷獲客技術提供商！"
        ["meta_keywords"] => string(69) "快抖霸屏,抖音快手霸屏,快抖短視頻搜索,同城爆店碼"
        ["meta_description"] => string(161) "藝源智能云推廣系統13325455411專注快抖霸屏,抖音快手霸屏,同城爆店碼,一款線下與線上流量緊密結合的營銷爆客解決方案。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(20) "show_page_douyin.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "2"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(27) "需要短視頻推廣排名"
      ["modelname"] => NULL
    }
    [3] => array(22) {
      ["id"] => string(3) "207"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(14) "AI智能名片"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2019/07/04/06155550417466502.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(2) "ai"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(68) "藝源AI智能名片_名片小程序_智能名片_讓銷售更簡單"
        ["meta_keywords"] => string(97) "藝源AI智能名片,名片小程序,智能名片_讓銷售更簡單,電子名片,二維碼名片"
        ["meta_description"] => string(184) "藝源AI智能名片-讓銷售更簡單。藝源AI智能名片為企業提供名片小程序,智能名片,企業名片,小程序名片,電子名片,二維碼名片等相關的服務。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(16) "show_page_ai.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "3"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [4] => array(22) {
      ["id"] => string(3) "201"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "版權登記"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814062280145708.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(9) "copyright"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(0) ""
        ["meta_keywords"] => string(0) ""
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(23) "show_page_copyright.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "4"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814063838873717.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [5] => array(22) {
      ["id"] => string(3) "203"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "商標注冊"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813359170749750.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(9) "trademark"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(131) "商標注冊_商標注冊流程_商標注冊流程及費用_西安商標注冊_西安商標注冊代理-「源知果」藝源科技"
        ["meta_keywords"] => string(103) "商標注冊,商標注冊流程,商標注冊流程及費用,西安商標注冊,西安商標注冊代理"
        ["meta_description"] => string(182) "「源知果」西安提供代理版權登記，代理商標注冊，代理專利申請，代理企業貫標，代理高新技術企業認定的服務；咨詢電話：13325455411。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(23) "show_page_trademark.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "5"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/11/06135617157272716.png"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [6] => array(22) {
      ["id"] => string(3) "205"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "網站建設"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2019/06/21/06144566585327511.jpg"
      ["desc"] => string(149) "節約IT成本/降低運維成本/網站安全穩定/不滿意全額退款|節約IT成本/降低運維成本/網站安全穩定/不滿意全額退款"
      ["pdir"] => string(0) ""
      ["dir"] => string(7) "website"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(80) "西安商城網站建設_政府網站建設_學校網站建設就選藝源科技"
        ["meta_keywords"] => string(113) "西安網站建設,西安網絡公司,西安網頁設計,商城網站建設,政府網站建設,學校網站建設"
        ["meta_description"] => string(248) "「藝源科技」是西安一家專業的西安商城網站建設,政府網站建設,學校網站建設的網絡公司，咨詢電話:029-88810146/150 9401 9029。公司擁有10年實踐經驗,為您提供一條龍的互聯網應用解決方案。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(21) "show_page_website.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "6"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/24/06146855992801864.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [7] => array(22) {
      ["id"] => string(3) "208"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "2"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(15) "云服務平臺"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(0) ""
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(0)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(0)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(0) ""
        ["meta_keywords"] => string(0) ""
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(0) ""
        ["formid"] => string(0) ""
        ["url"] => string(21) "http://www.qulvkj.com"
        ["target"] => string(6) "_blank"
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "7"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [8] => array(22) {
      ["id"] => string(3) "202"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(9) "SEO優化"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813061683398516.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(3) "seo"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(90) "【西安SEO優化_西安網站優化_關鍵詞排名優化】-SEO優化公司藝源科技"
        ["meta_keywords"] => string(81) "西安SEO優化,西安SEO優化公司,西安網站優化,西安網站優化公司"
        ["meta_description"] => string(244) "藝源科技（yysweb.com）,專注為企業提供百度等搜索引擎整站SEO優化服務,針對不同行業、網站情況給出不同策略、報價和SEO建議;是您值得信賴的seo診斷、顧問咨詢等云SEO技術服務外包商。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(17) "show_page_seo.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "8"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813062712033401.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
  }
}

當前位置：首頁 > 售后 > 藝源智庫

如何讓搜索框的體驗更好？我總結了這些設計套路！

時間：2019-08-24 11:17:42

文章發布：李陽

原創作者：未知

來源：互聯網

無論網站或是App，搜索功能幾乎成了標配，在其間占據著或輕或重的位置。一方面，搜索可以幫助用戶節約時間、直達目的；另一方面，它也是用戶主動表達意愿的一個窗口，可以幫助搜集用戶需求、引導用戶行為。

在不同業務類型、不同場景下，搜索的定位和形式可能大不相同，有沒有一種通用的思路，可以cover住各類搜索的體驗設計呢？

我最近把玩了30+個App，涉及搜索、資訊、知識、電商、社交、視頻、音樂、導航、工具、O2O、生活服務等十幾種類別，歸納總結了搜索設計的一些套路和設計形式，將其拆解開來，與大家分享、探討。大家可以結合自家的業務類型、具體的應用場景，選取適合的形式，提升搜索體驗。

搜索體驗的「三度」

打造滿意的搜索體驗，需做好三個「度」：速度、溫度、準確度。

速度指讓用戶更快得到搜索結果、完成搜索過程。

溫度指搜索過程人性化，易于理解和操作，讓用戶感到貼心、甚至是驚喜。

準確度指搜索結果準確，符合用戶期望。

乍一看，速度和準確度似乎與技術更相關，跟設計沒啥關系。但其實三者相輔相成，我們可以通過合理而帶有溫度的設計，提升搜索的效率和體驗，讓用戶搜得更快、更準、更舒心。

搜索體驗的設計拆解

我們可以把搜索拆解為三個部分：搜索入口、搜索過程、搜索結果。

搜索過程又可拆解為三個動作：點擊搜索框/icon → 輸入文字/字符 → 點擊搜索按鈕/關鍵詞。每個動作觸發后，都會有相應反饋。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 搜索過程及反饋

接下來我會將各個部分拆分開來，分析體驗設計的要點。結構及目錄見下圖：

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 本文結構與目錄

第一部分搜索入口

搜索入口具有提示和引導作用，常見的有4種：

獨立的一級tab
搜索框
搜索icon
隱藏式搜索框/icon

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 四類搜索入口形式

1. 獨立的一級tab

把一個獨立的tab作為搜索入口，整個tab頁面圍繞搜索功能進行展開。這一整頁，為搜索功能的拓展提供了很大空間，可以做各種嘗試，適合將搜索作為重要流量入口的App。

代表有App Store、Twitter、新浪微博。App Store、Twitter的tab頁面中只保留了搜索框和搜索熱詞推薦。新浪微博的嘗試更加豐富，包括分類、話題以及不同類型的推薦，運營的空間更大。

2. 搜索框

應用廣泛的一種形式，大多居于頁面頂部，較為醒目。有些App在滑動頁面時，還會將搜索框吸頂顯示，便于用戶隨時使用。

搜索框內一般會有預設文案，提示用戶可搜索的關鍵詞類型。目前越來越多的App（尤其是電商類）把搜索框作為運營的入口，放入一些熱詞、活動、新品/新功能等，并且不局限于一個詞，可能是一個字、一個短語，甚至是一個句子。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 搜索框中的預設文案

3. 搜索icon

搜索icon應用廣泛，位置一般在頁面右上角。相對搜索框來說，搜索icon的引導性稍差，運營空間也有限，但可以節約導航欄空間，適合于將搜索作為輔助功能的場景。

比如得到的今日學習模塊，以feed流的形式，展示用戶每天的學習任務。這個模塊預設功能是瀏覽、收聽，且內容有限（只包括用戶付費訂閱的內容和平臺為該用戶個性化推薦的內容），搜索在此僅僅是輔助功能，所以將入口弱化。并且得到將此處搜索設定為全局搜索（搜索全App），可以引導用戶發現更多內容，避免出現無結果/少結果的情況。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 得到今日學習模塊

4. 隱藏式搜索框/icon

這種形式的搜索功能是被弱化的，入口在主頁上不可見，有的折疊在其它入口中，有的可通過手勢喚起。

典型的一種是下拉出現搜索框：平時搜索入口隱藏，不占用空間，需要時又可下拉迅速呼出。微信和iOS桌面、備忘錄都采用了這種形式。

第二部分搜索過程

搜索過程是提高搜索體驗的關鍵部分，過程可分為三個階段：點擊搜索框/icon → 輸入文字/字符 → 點擊搜索按鈕/關鍵詞。

第一階段的反饋如下：

跳轉：跳轉到搜索頁
激活：激活搜索框，光標閃爍，并顯示引導文案
調起：調起搜索鍵盤
搜索頁

本文的搜索頁，指點擊搜索框/icon后跳轉的頁面。

搜索頁包括兩部分，搜索欄和輔助區（搜索欄以外的部分）。進入搜索頁后，一般默認調起搜索鍵盤。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 搜索頁結構

1. 搜索欄

搜索欄有兩種常見的形式：

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 搜索欄形式

兩種形式區別在于按鈕的設計，前者有「返回」和「搜索」兩個按鈕，后者僅有「取消」按鈕。這里「返回」和「取消」功能相同，都是結束搜索，返回上頁。

因為調起的鍵盤通常為搜索鍵盤，自帶「搜索」按鈕，并且從操作連貫性方面來說，鍵盤上的搜索按鈕更符合用戶習慣。所以目前大多數App在界面上僅保留了取消按鈕，這樣也更利于用戶聚焦。

有些App突破了傳統搜索框樣式，采用了更突出的形式（如愛彼迎）。還有些增加了圖片、語音、二維碼識別的入口，這也為信息輸入提供了更多的途徑。

2. 輔助區

輔助區主要為用戶提供合適的推薦，以提高搜索效率。此外，也兼具運營屬性，可以作為推廣入口。

輔助區的推薦主要有歷史記錄、熱搜和分類。不同類型的App在設計上有所偏重，如電商類App，熱搜可以作為運營入口、為某些品類導量，但工具類App，如印象筆記，搜索功能主要用來查找用戶自己的筆記，不具備運營屬性，也就不需要熱搜。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 輔助區中的歷史記錄、熱搜和分類

3. 歷史記錄

歷史記錄適用兩種場景：

搜索詞與歷史搜索有一定相關性，需要在歷史搜索的基礎上調整關鍵詞。
搜索的關鍵詞，搜索結果可能有更新（如在58搜索酒仙橋三室一廳的租房信息，房源信息可能會增加）、搜索結果之前并未處理完（如在京東搜索加濕器，只瀏覽了第一頁，并未完成購買）或者需要再次搜索（如高德地圖中從不同的起點搜索某地、做路線規劃），這時需要重新輸入關鍵詞。

歷史記錄能提升重復搜索時的效率，但并非所有的搜索都需要歷史記錄。如果搜索結果操作較為簡單，且通過一次即可完成，那么就可視情況省略。

比如App Store，無論是搜索關鍵詞或者精確的App名稱，用戶搜到之后，有可能的動作就是下載。如果不滿意，可能會離開，但離開后再搜索同一App的可能性很小，歷史記錄起到的作用有限。

考慮到搜索頁的空間、有效性，通常需要控制歷史記錄的數目和時間范圍。

歷史記錄的形式主要有兩種：一種是標簽式，一種是列表式。標簽式節約空間，列表式擴展性強（可以展示更詳細的信息，也可支持收藏、刪除等操作）。

考慮到隱私問題，歷史記錄一般支持刪除。刪除有兩種，一種是刪除單條，一種是清空所有。刪除單條功能多見于列表式，一些標簽類的也可采用長按的方式刪除單條（比如淘寶）。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 歷史記錄

需要注意的一點，歷史記錄只用于搜索初期，后續可在適合的場景下，引導用戶使用收藏、訂閱、足跡等功能，打造更好的體驗。例如，騰訊視頻記錄觀看歷史，不但使用戶免于搜索，而且可以記錄進度。什么值得買，在搜索結果頁添加了「關注」按鈕，關注后用戶可以在首頁「關注動態」tab看到持續更新的搜索結果。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 更豐富的引導方式

4. 熱搜

熱搜的作用類似于搜索框中的預設文案，起引導作用。但因為輔助區的空間有限（鍵盤會遮蓋一部分），為盡可能提高利用率，熱搜的字數通常會作出限制。

常見的熱搜主要有4種：

整個平臺用戶的熱搜
基于用戶的個性化推薦（根據用戶資料、軌跡等信息做智能化推薦）
平臺運營內容（為某些品類引流）
推廣（商業廣告）

熱搜的展示形式以標簽為主。因為部分熱搜是個性化推薦，可能會暴露隱私，一些App還貼心的設置了隱藏按鈕。

5. 分類搜索

當App中涉及到的業務、類型、品類多時，可能出現多種類別的搜索結果，其形式和操作也不同。為了讓一部分目的明確的用戶（明確知道要搜索的類別），從中快速、準確地找到自己預期的結果，常常采用分類搜索的方式。

具體有3種方式：

搜索框分類選擇
輔助區分類選擇
搜索結果頁分類選擇

搜索框中的分類選擇，適合那些需求明確的用戶。如在鏈家中，搜索二手房還是租房，用戶是特別明確的。在搜索框中默認限定類別，可能會導致搜索結果偏差。為了照顧到更多用戶，大多數App提供了「全部」類別，并默認搜索「全部」類別下的結果，比如微博。

未在搜索框中選擇分類的，仍然有機會在搜索過程中選擇分類。淘寶采用tab的方式，區別展示「全部」、「天貓」、「店鋪」的搜索建議和結果。亞馬遜則在輸入過程中，提供類別的選擇（默認搜索全部分類，但提供搜索小類的入口），同樣的還有58、京東、閑魚等。

更多的App采用搜索結果分類的方式，將結果分門別類呈現，減少用戶在搜索過程中的決策壓力。常見的形式是tab式（代表：知乎、支付寶），第一個tab一般為各類結果的堆疊，后面每個tab為一類，便于切換。還有的采用標簽來區分（代表：Facebook、網易考拉、京東）、用列表作為類別入口（代表：58）、直接將各個類別模塊堆疊起來（更像是列表式的擴展，每個類別外露一些內容，代表：微信、豆瓣）。

這幾種方式并不是完全獨立的，可以根據需要靈活運用。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 分類搜索的常見形式

搜索過程第二階段（開始輸入文字/字符）的反饋如下：

變化：搜索框中，引導文案消失，出現清除icon
匹配：根據輸入的內容，進行關鍵詞聯想
清除icon

清除icon是一個貼心的小設計。它的作用是一鍵清空搜索框中內容，與引導文案交替出現：鍵入文字時，引導文案消失，清除icon出現；點擊清除icon，文字清空，引導文案出現。

下圖是某App的截圖，需要注意取消按鈕的形式，避免與清除icon沖突，引起用戶困惑。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 避免取消按鈕和清除icon沖突

6. 兩種匹配機制

分析關鍵詞聯想之前，我們先來了解下兩種匹配機制：一種是輸入過程匹配，一種是輸入完成匹配。

輸入過程匹配：在輸入時，每輸入一個字/字母/字符，就進行一次匹配，同時更新頁面信息。這里更新的信息，可以是針對輸入內容進行推薦的信息，也可以是直接的搜索結果。

前者是對輸入的內容進行關鍵詞聯想，如輸入「女」，推薦信息顯示「女包」「女鞋」「襪子女」等等。這種方式可以即時提供搜索建議、引導性強、可提高效率。

后者則是每輸入一個字/字母/字符，就立即對數據庫進行一次搜索，同時把搜索結果展示出來。這種無需點擊搜索按鈕就實時展示搜索結果的方式，被稱為「即時搜索」。

即時搜索可以直接、快速地看到結果，在一定程度上可以提高搜索效率，但對計算能力要求高，若計算能力跟不上，則可能需要等待加載，從而影響體驗。一般適合于數據量不大或者數據庫已經下載到本地的情況。

例如，QQ郵箱預先已下載部分數據到本地，搜索可即時看到結果（僅包含已下載的數據），點擊「在服務器上繼續搜索」，才向服務器請求數據。

輸入完成匹配：僅在輸入完成后，點擊「搜索」按鈕時，才開始進行搜索、匹配，直接展示搜索結果。這種方式省去了對輸入過程實時分析、引導的過程，適用于對搜索功能要求不高的情況。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 即時搜索與輸入完成匹配

目前很多App采用組合方式：輸入過程關鍵詞聯想+輸入完成執行搜索。

這是一個很討巧的組合。既對用戶提供了必要的幫助和引導，又減少了請求次數，避免出現等待加載的狀況。

7. 關鍵詞聯想

關鍵詞到底有什么作用？簡單來說是：聯想、匹配、引導、糾正。展開來說，有四個作用：

用戶不一定清楚要搜的精確名稱，關鍵詞可以作為引導。
系統可以根據已有的搜索數據，對關鍵詞進行關聯分類，并且與數據庫精確匹配。如果用戶選擇了做過關聯處理的詞，就可以獲得內容更精確、數量更可控的搜索結果（而這次選擇，對系統本身也是一次反饋）。同時，因為已預先做了分類，搜索時可以直接調取、減少計算量，速度也更快。
可以減少用戶的輸入錯誤。
提供很多很動態的運營位。

關鍵詞的展示形式比較靈活。簡單的是根據輸入詞，直接展示聯想的關鍵詞（如今日頭條），但因為頁面空間有限，被鍵盤遮蓋后只能露出幾條，于是大家又發明了二級標簽。它伴隨關鍵詞一起出現，提供更多相關的入口。

如下圖，搜索「niu rou」，推薦關鍵詞「牛肉」，后面跟著3個小標簽「風干」「手撕」「張飛」，這3個關鍵詞都是對「牛肉」的再次聯想。點擊整欄，執行搜索「牛肉」；點擊二級標簽（如“張飛”），執行搜索「牛肉張飛」。需要注意的是，二級標簽的操作區域很小，對于操作精準度要求高，數量不能超過3個。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 今日頭條直接展示聯想詞、京東采用二級關鍵詞標簽

有時系統推薦的關鍵詞不夠精確，用戶需在后面輸入其它內容。但無論是關鍵詞，還是二級標簽，點擊后都直接執行搜索，這就需要用戶在搜索結果頁再去激活搜索框，繼續完善搜索詞，中斷了搜索過程。YouTube、Facebook、亞馬遜、淘寶等采用了「向上補全」功能，點擊關鍵詞或二級標簽，執行搜索，點擊向上補全icon，會將關鍵詞補全到搜索框中。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 淘寶的向上補全功能

還可以將關鍵詞對應的搜索結果數量前置，便于用戶控制搜索詞的顆粒度，也避免出現無結果或者少結果的情況。代表有Twitter、大眾點評、喜馬拉雅、鏈家、百度外賣等。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 關鍵詞后顯示結果數目

除了提供關鍵詞，還可以對輸入詞進行判斷，適時提供分類建議（如58、京東、亞馬遜、閑魚等，可參考前文「J.分類搜索」一節）。58作為一個綜合的生活服務平臺，業務類別多，搜索「牛肉」，在很多類別都有相關信息，選取「食品」和「招商加盟」這兩個可能性很大的類別推薦給用戶。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 58對輸入詞提供分類建議

另外，也可以將部分搜索結果前置，與關鍵詞一起顯示。這些搜索結果，可能是平臺用戶的熱搜、對當前用戶的個性化推薦，也可能是平臺運營、推廣的內容。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 將部分搜索結果前置顯示

搜索過程第三階段，點擊搜索按鈕/關鍵詞后，跳轉至搜索結果頁。

第三部分搜索結果

1. 搜索結果

搜索后，通常會得到N多個結果，它們可能不是同一類型，展示形式也會有差異。如何把這些結果清晰有序地展示出來，讓用戶準確、快速地找到想要的結果？這涉及到幾個問題：

智能糾錯
結果分類（如果需要）
默認排序
保留搜索詞
結果與搜索詞對應
排序與篩選
無結果或少結果

智能糾錯：當用戶輸入了錯誤的詞，可能搜索不到結果。需要系統判斷識別，推薦正確的詞，或者直接將正確結果展示出來。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 智能糾錯

結果分類：可以通過tab、標簽、列表等形式將結果分類，具體可參考前文「J.分類搜索」一節。

默認排序：默認的排序結果決定了用戶第一眼會看到什么，對后續的轉化有直接影響。通常會根據一些因素做綜合排序，如用戶偏好、點擊量、轉化率、平臺運營、商業推廣等。排序策略通常比較復雜，不同的平臺會考慮不同因素、賦予不同的權重。

保留搜索詞：點擊進入搜索頁時，仍然在搜索框中保留輸入的詞，一方面提示所搜的關鍵詞，另一方面便于用戶修改、進行二次搜索。

結果與搜索詞對應：很多App的搜索內容，不局限于標題和結果列表露出的部分，這就導致搜索結果看起來與搜索詞并沒什么關系，容易造成用戶困惑。

這點往往會被我們忽略。在必要時，我們應將搜索詞顯示在搜索結果中，保持搜索詞的可見性。

大眾點評做了一個很好的示例：我們搜索「牛欄山」（“牛欄山”是一個地名，同時也是酒的品牌）。大眾點評搜索內容包括店鋪名、地點和推薦菜，那么可能會有3種搜索結果：

名字中含「牛欄山」的店鋪。
位于牛欄山商圈的店鋪。
推薦菜中有「牛欄山」的店鋪。

大眾點評對結果列表做了適配，顯示出命中搜索詞的推薦菜（平時并不會顯示），符合用戶預期。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 大眾點評的結果與搜索詞對應

排序與篩選：排序與篩選維度與業務類型密切相關，不同行業差異較大。大致來說，排序有時間、距離、熱度、價格、銷量等維度；篩選維度則更加豐富和個性化，甚至會根據搜索內容進行變化。

一般排序功能會放在搜索欄與結果之間，便于切換。但有些App（主要是國外App，如亞馬遜、YouTube），將排序功能收起，操作便利性不如前者。

篩選項維度少時，可以將篩選（與排序一起）放置在搜索欄與結果之間，點擊后以下拉菜單的形式出現；若維度豐富，一般使用側邊欄形式。需要注意的是，多個篩選維度的疊加可能會導致結果過少，前置篩選結果數量是個不錯的辦法（如網易考拉海購）。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 排序與篩選

無結果或少結果：出現無結果或少結果時，可能有這幾種情況：

選擇了錯誤的分類
輸入錯誤
搜索結果少或無

對于前兩種，可以提示用戶，或者自動幫用戶糾正錯誤；對于后一種，一般會匹配相關結果進行補足，或者提示用戶更換關鍵詞、擴大搜索范圍、進行訂閱等。

例如58在搜索結果不足時，會引導用戶訂閱，當搜索結果更新時，會向用戶主動推送。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 結果不足時，補足信息+訂閱引導

2. 更多搜索方式

隨著技術的發展，搜索方式越來越豐富。

比如語音搜索，不但為視力不佳的老年人提供了一種友善的方式，也適用于一些輸入不便的移動場景。比如導航類內置語音搜索，可以在駕車途中實現路況查詢、地點搜索、路線規劃等功能。另外在一些音樂類App中，可以帶入音律，實現「聽歌識曲」，甚至是「哼唱識曲」。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 語音搜索

借助圖像識別技術，圖像搜索也得到了廣泛應用。百度的「以圖搜圖」，可以搜索相似圖片、追蹤圖片來源、獲取不同尺寸的圖片；小猿搜題的「拍照搜題」，利用OCR技術，進行快速識別，省去了輸入的繁瑣過程；淘寶等電商的「拍立淘」，一方面可以搜同款商品，一方面在無法準確描述商品名稱的時候，也能進行搜索。

如何讓搜索框的體驗更好？我總結了這些設計套路！-藝源科技

△ 圖像搜索

結語

各個App采用不同的設計形式，本質上是因為它們對搜索功能的定位不同。

文章中已拆解分析了各種設計形式，希望能給大家帶來一些啟發。限于篇幅和自身水平，一些內容只是稍作介紹，更深的應用還需要大家去探索。

實踐出真知。一方面，我們接觸到一個App，可以從搜索的具體形式，來反推它的功能定位和應用場景，并且思考是否有更優的方案，以此提高自己的思辨能力。另一方面，在今后的設計實踐中，我們應該從功能出發，綜合考慮業務類型、功能定位、目標用戶、應用場景，選用合適的形式，提升搜索體驗，讓用戶搜得更快、更準、更舒心。

小程序開發

標簽：搜索框設計用戶體驗經驗分享

*版權申明:本站部分文章由藝源科技收集整理，不代表我們的觀點。如果這篇轉載侵犯您的版權，請及時聯系我們刪除！

返回

↑ 上一篇：【網站建設】網站制作流程是什么樣的？

↓ 下一篇：網站關停后，為什么必須要注銷備案信息？

為您推薦

最新文章

免費獲取解決方案

您有需求，剛好我們很專業！為您服務是我們的榮幸！
藝源為您提供專業的藝源為您提供專業的軟件開發，系統開發，App開發，小程序開發，微信小程序開發等互聯網+解決方案

藝源為您提供專業的軟件開發，系統開發，App開發，小程序開發，微信小程序開發

7x24h
24h全面監控服務器

安全保障,高頻度系統安全更新-藝源科技

安全保障
高頻度系統安全更新

全面服務,域名備案、營銷指導-藝源科技

全面服務
域名備案、營銷指導

定時訪問,主動回訪了解客戶需求-藝源科技

定時訪問
主動回訪了解客戶需求

友情鏈接：合作伙伴投訴建議站內地圖我要應聘企業郵箱免責聲明

Have Requests?

國家高新技術企業：GR202461001382

您有需求，剛好我們很專業！為您服務是我們的榮幸！
優質的設計瞬間奪人眼球，而扎實的技術實力需要經年默默積累，看得到的看不到的我們都努力做到最好！

微信小程序開發-藝源聯系地址

Address

西安市高新區唐延路11號，i都會。

APP開發-藝源聯系電話

Phones

①150 9401 9029 ②133 2545 5411

網站開發-藝源電子郵件

E-mail

sales@yysweb.com

微信開發-藝源官網微信公眾號

Wechat

官方微信公眾號 & 產品經理

藝源官網微信公眾號

久久青草费线频观看地址_少妇久久久久久久久久_亚洲欧洲自拍拍偷午夜色_国产sm重味一区二区三区

<option id="uausy"></option>

<li id="uausy"></li>