杏吧app下载,关婷娜被揉胸视频直播,杏吧之春暖花开有你

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) "服務(wù)"
  ["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) "定制開發(fā)-APP定制開發(fā),微信定制開發(fā),小程序定制開發(fā),網(wǎng)站定制開發(fā)"
    ["meta_keywords"] => string(75) "APP定制開發(fā),微信定制開發(fā),小程序定制開發(fā),網(wǎng)站定制開發(fā)"
    ["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) "小程序開發(fā)"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(112) "專業(yè)微信小程序解決方案|各種場(chǎng)景核心功能,提前布局微信新生態(tài),搶占第一波紅利"
      ["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) "小程序_商城小程序_門店小程序_微圈小程序_餐飲小程序開發(fā)-藝源科技小程序開發(fā)"
        ["meta_keywords"] => string(103) "小程序開發(fā),商城小程序開發(fā),門店小程序開發(fā),微圈小程序開發(fā),餐飲小程序開發(fā)"
        ["meta_description"] => string(269) "專注提供專注提供小程序、商城小程序、門店小程序、微圈小程序、餐飲小程序開發(fā),專業(yè)團(tuán)隊(duì),一對(duì)一服務(wù),助企業(yè)快速生成自己的移動(dòng)端微商城平臺(tái). 藝源科技小程序采用高性能數(shù)據(jù)架構(gòu),系統(tǒng)穩(wěn)定安全。"
        ["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開發(fā)"
      ["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開發(fā)_app定制開發(fā)_app制作開發(fā)公司【藝源科技】"
        ["meta_keywords"] => string(53) "app開發(fā),app定制開發(fā)公司,app制作開發(fā)公司"
        ["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) "快抖霸屏_抖音快手霸屏_短視頻營(yíng)銷獲客技術(shù)提供商!"
        ["meta_keywords"] => string(69) "快抖霸屏,抖音快手霸屏,快抖短視頻搜索,同城爆店碼"
        ["meta_description"] => string(161) "藝源智能云推廣系統(tǒng)13325455411專注快抖霸屏,抖音快手霸屏,同城爆店碼,一款線下與線上流量緊密結(jié)合的營(yíng)銷爆客解決方案。"
        ["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智能名片_名片小程序_智能名片_讓銷售更簡(jiǎn)單"
        ["meta_keywords"] => string(97) "藝源AI智能名片,名片小程序,智能名片_讓銷售更簡(jiǎn)單,電子名片,二維碼名片"
        ["meta_description"] => string(184) "藝源AI智能名片-讓銷售更簡(jiǎn)單。藝源AI智能名片為企業(yè)提供名片小程序,智能名片,企業(yè)名片,小程序名片,電子名片,二維碼名片等相關(guān)的服務(wù)。"
        ["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) "版權(quán)登記"
      ["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) "商標(biāo)注冊(cè)"
      ["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) "商標(biāo)注冊(cè)_商標(biāo)注冊(cè)流程_商標(biāo)注冊(cè)流程及費(fèi)用_西安商標(biāo)注冊(cè)_西安商標(biāo)注冊(cè)代理-「源知果」藝源科技"
        ["meta_keywords"] => string(103) "商標(biāo)注冊(cè),商標(biāo)注冊(cè)流程,商標(biāo)注冊(cè)流程及費(fèi)用,西安商標(biāo)注冊(cè),西安商標(biāo)注冊(cè)代理"
        ["meta_description"] => string(182) "「源知果」西安提供代理版權(quán)登記,代理商標(biāo)注冊(cè),代理專利申請(qǐng),代理企業(yè)貫標(biāo),代理高新技術(shù)企業(yè)認(rèn)定的服務(wù);咨詢電話: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) "網(wǎng)站建設(shè)"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2019/06/21/06144566585327511.jpg"
      ["desc"] => string(149) "節(jié)約IT成本/降低運(yùn)維成本/網(wǎng)站安全穩(wěn)定/不滿意全額退款|節(jié)約IT成本/降低運(yùn)維成本/網(wǎng)站安全穩(wěn)定/不滿意全額退款"
      ["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) "西安商城網(wǎng)站建設(shè)_政府網(wǎng)站建設(shè)_學(xué)校網(wǎng)站建設(shè)就選藝源科技"
        ["meta_keywords"] => string(113) "西安網(wǎng)站建設(shè),西安網(wǎng)絡(luò)公司,西安網(wǎng)頁(yè)設(shè)計(jì),商城網(wǎng)站建設(shè),政府網(wǎng)站建設(shè),學(xué)校網(wǎng)站建設(shè)"
        ["meta_description"] => string(248) "「藝源科技」是西安一家專業(yè)的西安商城網(wǎng)站建設(shè),政府網(wǎng)站建設(shè),學(xué)校網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,咨詢電話:029-88810146/150 9401 9029。公司擁有10年實(shí)踐經(jīng)驗(yàn),為您提供一條龍的互聯(lián)網(wǎng)應(yīng)用解決方案。"
        ["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) "云服務(wù)平臺(tái)"
      ["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優(yōu)化"
      ["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優(yōu)化_西安網(wǎng)站優(yōu)化_關(guān)鍵詞排名優(yōu)化】-SEO優(yōu)化公司藝源科技"
        ["meta_keywords"] => string(81) "西安SEO優(yōu)化,西安SEO優(yōu)化公司,西安網(wǎng)站優(yōu)化,西安網(wǎng)站優(yōu)化公司"
        ["meta_description"] => string(244) "藝源科技(yysweb.com),專注為企業(yè)提供百度等搜索引擎整站SEO優(yōu)化服務(wù),針對(duì)不同行業(yè)、網(wǎng)站情況給出不同策略、報(bào)價(jià)和SEO建議;是您值得信賴的seo診斷、顧問(wèn)咨詢等云SEO技術(shù)服務(wù)外包商。"
        ["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
    }
  }
}
				
當(dāng)前位置: 首頁(yè) > 售后 > 藝源智庫(kù)
如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!
時(shí)間:2019-08-24 11:17:42
文章發(fā)布:李陽(yáng)
原創(chuàng)作者:未知
來(lái)源:互聯(lián)網(wǎng)

無(wú)論網(wǎng)站或是App,搜索功能幾乎成了標(biāo)配,在其間占據(jù)著或輕或重的位置。一方面,搜索可以幫助用戶節(jié)約時(shí)間、直達(dá)目的;另一方面,它也是用戶主動(dòng)表達(dá)意愿的一個(gè)窗口,可以幫助搜集用戶需求、引導(dǎo)用戶行為。

在不同業(yè)務(wù)類型、不同場(chǎng)景下,搜索的定位和形式可能大不相同,有沒(méi)有一種通用的思路,可以cover住各類搜索的體驗(yàn)設(shè)計(jì)呢?

我最近把玩了30+個(gè)App,涉及搜索、資訊、知識(shí)、電商、社交、視頻、音樂(lè)、導(dǎo)航、工具、O2O、生活服務(wù)等十幾種類別,歸納總結(jié)了搜索設(shè)計(jì)的一些套路和設(shè)計(jì)形式,將其拆解開來(lái),與大家分享、探討。大家可以結(jié)合自家的業(yè)務(wù)類型、具體的應(yīng)用場(chǎng)景,選取適合的形式,提升搜索體驗(yàn)。


搜索體驗(yàn)的「三度」

打造滿意的搜索體驗(yàn),需做好三個(gè)「度」:速度、溫度、準(zhǔn)確度。

速度指讓用戶更快得到搜索結(jié)果、完成搜索過(guò)程。

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

準(zhǔn)確度指搜索結(jié)果準(zhǔn)確,符合用戶期望。

乍一看,速度和準(zhǔn)確度似乎與技術(shù)更相關(guān),跟設(shè)計(jì)沒(méi)啥關(guān)系。但其實(shí)三者相輔相成,我們可以通過(guò)合理而帶有溫度的設(shè)計(jì),提升搜索的效率和體驗(yàn),讓用戶搜得更快、更準(zhǔn)、更舒心。


搜索體驗(yàn)的設(shè)計(jì)拆解

我們可以把搜索拆解為三個(gè)部分:搜索入口、搜索過(guò)程、搜索結(jié)果。

搜索過(guò)程又可拆解為三個(gè)動(dòng)作:點(diǎn)擊搜索框/icon → 輸入文字/字符 → 點(diǎn)擊搜索按鈕/關(guān)鍵詞。每個(gè)動(dòng)作觸發(fā)后,都會(huì)有相應(yīng)反饋。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 搜索過(guò)程及反饋

接下來(lái)我會(huì)將各個(gè)部分拆分開來(lái),分析體驗(yàn)設(shè)計(jì)的要點(diǎn)。結(jié)構(gòu)及目錄見(jiàn)下圖:

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 本文結(jié)構(gòu)與目錄


第一部分 搜索入口

搜索入口具有提示和引導(dǎo)作用,常見(jiàn)的有4種:

  • 獨(dú)立的一級(jí)tab

  • 搜索框

  • 搜索icon

  • 隱藏式搜索框/icon

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 四類搜索入口形式

1. 獨(dú)立的一級(jí)tab

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

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

2. 搜索框

應(yīng)用廣泛的一種形式,大多居于頁(yè)面頂部,較為醒目。有些App在滑動(dòng)頁(yè)面時(shí),還會(huì)將搜索框吸頂顯示,便于用戶隨時(shí)使用。

搜索框內(nèi)一般會(huì)有預(yù)設(shè)文案,提示用戶可搜索的關(guān)鍵詞類型。目前越來(lái)越多的App(尤其是電商類)把搜索框作為運(yùn)營(yíng)的入口,放入一些熱詞、活動(dòng)、新品/新功能等,并且不局限于一個(gè)詞,可能是一個(gè)字、一個(gè)短語(yǔ),甚至是一個(gè)句子。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 搜索框中的預(yù)設(shè)文案

3. 搜索icon

搜索icon應(yīng)用廣泛,位置一般在頁(yè)面右上角。相對(duì)搜索框來(lái)說(shuō),搜索icon的引導(dǎo)性稍差,運(yùn)營(yíng)空間也有限,但可以節(jié)約導(dǎo)航欄空間,適合于將搜索作為輔助功能的場(chǎng)景。

比如得到的今日學(xué)習(xí)模塊,以feed流的形式,展示用戶每天的學(xué)習(xí)任務(wù)。這個(gè)模塊預(yù)設(shè)功能是瀏覽、收聽,且內(nèi)容有限(只包括用戶付費(fèi)訂閱的內(nèi)容和平臺(tái)為該用戶個(gè)性化推薦的內(nèi)容),搜索在此僅僅是輔助功能,所以將入口弱化。并且得到將此處搜索設(shè)定為全局搜索(搜索全App),可以引導(dǎo)用戶發(fā)現(xiàn)更多內(nèi)容,避免出現(xiàn)無(wú)結(jié)果/少結(jié)果的情況。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 得到今日學(xué)習(xí)模塊

4. 隱藏式搜索框/icon

這種形式的搜索功能是被弱化的,入口在主頁(yè)上不可見(jiàn),有的折疊在其它入口中,有的可通過(guò)手勢(shì)喚起。

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


第二部分 搜索過(guò)程

搜索過(guò)程是提高搜索體驗(yàn)的關(guān)鍵部分,過(guò)程可分為三個(gè)階段:點(diǎn)擊搜索框/icon → 輸入文字/字符 → 點(diǎn)擊搜索按鈕/關(guān)鍵詞。

第一階段的反饋如下:

  • 跳轉(zhuǎn):跳轉(zhuǎn)到搜索頁(yè)

  • 激活:激活搜索框,光標(biāo)閃爍,并顯示引導(dǎo)文案

  • 調(diào)起:調(diào)起搜索鍵盤

  • 搜索頁(yè)

本文的搜索頁(yè),指點(diǎn)擊搜索框/icon后跳轉(zhuǎn)的頁(yè)面。

搜索頁(yè)包括兩部分,搜索欄和輔助區(qū)(搜索欄以外的部分)。進(jìn)入搜索頁(yè)后,一般默認(rèn)調(diào)起搜索鍵盤。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 搜索頁(yè)結(jié)構(gòu)

1. 搜索欄

搜索欄有兩種常見(jiàn)的形式:

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 搜索欄形式

兩種形式區(qū)別在于按鈕的設(shè)計(jì),前者有「返回」和「搜索」兩個(gè)按鈕,后者僅有「取消」按鈕。這里「返回」和「取消」功能相同,都是結(jié)束搜索,返回上頁(yè)。

因?yàn)檎{(diào)起的鍵盤通常為搜索鍵盤,自帶「搜索」按鈕,并且從操作連貫性方面來(lái)說(shuō),鍵盤上的搜索按鈕更符合用戶習(xí)慣。所以目前大多數(shù)App在界面上僅保留了取消按鈕,這樣也更利于用戶聚焦。

有些App突破了傳統(tǒng)搜索框樣式,采用了更突出的形式(如愛(ài)彼迎)。還有些增加了圖片、語(yǔ)音、二維碼識(shí)別的入口,這也為信息輸入提供了更多的途徑。

2. 輔助區(qū)

輔助區(qū)主要為用戶提供合適的推薦,以提高搜索效率。此外,也兼具運(yùn)營(yíng)屬性,可以作為推廣入口。

輔助區(qū)的推薦主要有歷史記錄、熱搜和分類。不同類型的App在設(shè)計(jì)上有所偏重,如電商類App,熱搜可以作為運(yùn)營(yíng)入口、為某些品類導(dǎo)量,但工具類App,如印象筆記,搜索功能主要用來(lái)查找用戶自己的筆記,不具備運(yùn)營(yíng)屬性,也就不需要熱搜。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

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

3. 歷史記錄

歷史記錄適用兩種場(chǎng)景:

  • 搜索詞與歷史搜索有一定相關(guān)性,需要在歷史搜索的基礎(chǔ)上調(diào)整關(guān)鍵詞。

  • 搜索的關(guān)鍵詞,搜索結(jié)果可能有更新(如在58搜索酒仙橋三室一廳的租房信息,房源信息可能會(huì)增加)、搜索結(jié)果之前并未處理完(如在京東搜索加濕器,只瀏覽了第一頁(yè),并未完成購(gòu)買)或者需要再次搜索(如高德地圖中從不同的起點(diǎn)搜索某地、做路線規(guī)劃),這時(shí)需要重新輸入關(guān)鍵詞。

歷史記錄能提升重復(fù)搜索時(shí)的效率,但并非所有的搜索都需要?dú)v史記錄。如果搜索結(jié)果操作較為簡(jiǎn)單,且通過(guò)一次即可完成,那么就可視情況省略。

比如App Store,無(wú)論是搜索關(guān)鍵詞或者精確的App名稱,用戶搜到之后,有可能的動(dòng)作就是下載。如果不滿意,可能會(huì)離開,但離開后再搜索同一App的可能性很小,歷史記錄起到的作用有限。

考慮到搜索頁(yè)的空間、有效性,通常需要控制歷史記錄的數(shù)目和時(shí)間范圍。

歷史記錄的形式主要有兩種:一種是標(biāo)簽式,一種是列表式。標(biāo)簽式節(jié)約空間,列表式擴(kuò)展性強(qiáng)(可以展示更詳細(xì)的信息,也可支持收藏、刪除等操作)。

考慮到隱私問(wèn)題,歷史記錄一般支持刪除。刪除有兩種,一種是刪除單條,一種是清空所有。刪除單條功能多見(jiàn)于列表式,一些標(biāo)簽類的也可采用長(zhǎng)按的方式刪除單條(比如淘寶)。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 歷史記錄

需要注意的一點(diǎn),歷史記錄只用于搜索初期,后續(xù)可在適合的場(chǎng)景下,引導(dǎo)用戶使用收藏、訂閱、足跡等功能,打造更好的體驗(yàn)。例如,騰訊視頻記錄觀看歷史,不但使用戶免于搜索,而且可以記錄進(jìn)度。什么值得買,在搜索結(jié)果頁(yè)添加了「關(guān)注」按鈕,關(guān)注后用戶可以在首頁(yè)「關(guān)注動(dòng)態(tài)」tab看到持續(xù)更新的搜索結(jié)果。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 更豐富的引導(dǎo)方式

4. 熱搜

熱搜的作用類似于搜索框中的預(yù)設(shè)文案,起引導(dǎo)作用。但因?yàn)檩o助區(qū)的空間有限(鍵盤會(huì)遮蓋一部分),為盡可能提高利用率,熱搜的字?jǐn)?shù)通常會(huì)作出限制。

常見(jiàn)的熱搜主要有4種:

  • 整個(gè)平臺(tái)用戶的熱搜

  • 基于用戶的個(gè)性化推薦(根據(jù)用戶資料、軌跡等信息做智能化推薦)

  • 平臺(tái)運(yùn)營(yíng)內(nèi)容(為某些品類引流)

  • 推廣(商業(yè)廣告)

熱搜的展示形式以標(biāo)簽為主。因?yàn)椴糠譄崴咽莻€(gè)性化推薦,可能會(huì)暴露隱私,一些App還貼心的設(shè)置了隱藏按鈕。

5. 分類搜索

當(dāng)App中涉及到的業(yè)務(wù)、類型、品類多時(shí),可能出現(xiàn)多種類別的搜索結(jié)果,其形式和操作也不同。為了讓一部分目的明確的用戶(明確知道要搜索的類別),從中快速、準(zhǔn)確地找到自己預(yù)期的結(jié)果,常常采用分類搜索的方式。

具體有3種方式:

  • 搜索框分類選擇

  • 輔助區(qū)分類選擇

  • 搜索結(jié)果頁(yè)分類選擇

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

未在搜索框中選擇分類的,仍然有機(jī)會(huì)在搜索過(guò)程中選擇分類。淘寶采用tab的方式,區(qū)別展示「全部」、「天貓」、「店鋪」的搜索建議和結(jié)果。亞馬遜則在輸入過(guò)程中,提供類別的選擇(默認(rèn)搜索全部分類,但提供搜索小類的入口),同樣的還有58、京東、閑魚等。

更多的App采用搜索結(jié)果分類的方式,將結(jié)果分門別類呈現(xiàn),減少用戶在搜索過(guò)程中的決策壓力。常見(jiàn)的形式是tab式(代表:知乎、支付寶),第一個(gè)tab一般為各類結(jié)果的堆疊,后面每個(gè)tab為一類,便于切換。還有的采用標(biāo)簽來(lái)區(qū)分(代表:Facebook、網(wǎng)易考拉、京東)、用列表作為類別入口(代表:58)、直接將各個(gè)類別模塊堆疊起來(lái)(更像是列表式的擴(kuò)展,每個(gè)類別外露一些內(nèi)容,代表:微信、豆瓣)。

這幾種方式并不是完全獨(dú)立的,可以根據(jù)需要靈活運(yùn)用。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 分類搜索的常見(jiàn)形式

搜索過(guò)程第二階段(開始輸入文字/字符)的反饋如下:

  • 變化:搜索框中,引導(dǎo)文案消失,出現(xiàn)清除icon

  • 匹配:根據(jù)輸入的內(nèi)容,進(jìn)行關(guān)鍵詞聯(lián)想

  • 清除icon

清除icon是一個(gè)貼心的小設(shè)計(jì)。它的作用是一鍵清空搜索框中內(nèi)容,與引導(dǎo)文案交替出現(xiàn):鍵入文字時(shí),引導(dǎo)文案消失,清除icon出現(xiàn);點(diǎn)擊清除icon,文字清空,引導(dǎo)文案出現(xiàn)。

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

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

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

6. 兩種匹配機(jī)制

分析關(guān)鍵詞聯(lián)想之前,我們先來(lái)了解下兩種匹配機(jī)制:一種是輸入過(guò)程匹配,一種是輸入完成匹配。

輸入過(guò)程匹配:在輸入時(shí),每輸入一個(gè)字/字母/字符,就進(jìn)行一次匹配,同時(shí)更新頁(yè)面信息。這里更新的信息,可以是針對(duì)輸入內(nèi)容進(jìn)行推薦的信息,也可以是直接的搜索結(jié)果。

前者是對(duì)輸入的內(nèi)容進(jìn)行關(guān)鍵詞聯(lián)想,如輸入「女」,推薦信息顯示「女包」「女鞋」「襪子女」等等。這種方式可以即時(shí)提供搜索建議、引導(dǎo)性強(qiáng)、可提高效率。

后者則是每輸入一個(gè)字/字母/字符,就立即對(duì)數(shù)據(jù)庫(kù)進(jìn)行一次搜索,同時(shí)把搜索結(jié)果展示出來(lái)。這種無(wú)需點(diǎn)擊搜索按鈕就實(shí)時(shí)展示搜索結(jié)果的方式,被稱為「即時(shí)搜索」。

即時(shí)搜索可以直接、快速地看到結(jié)果,在一定程度上可以提高搜索效率,但對(duì)計(jì)算能力要求高,若計(jì)算能力跟不上,則可能需要等待加載,從而影響體驗(yàn)。一般適合于數(shù)據(jù)量不大或者數(shù)據(jù)庫(kù)已經(jīng)下載到本地的情況。

例如,QQ郵箱預(yù)先已下載部分?jǐn)?shù)據(jù)到本地,搜索可即時(shí)看到結(jié)果(僅包含已下載的數(shù)據(jù)),點(diǎn)擊「在服務(wù)器上繼續(xù)搜索」,才向服務(wù)器請(qǐng)求數(shù)據(jù)。

輸入完成匹配:僅在輸入完成后,點(diǎn)擊「搜索」按鈕時(shí),才開始進(jìn)行搜索、匹配,直接展示搜索結(jié)果。這種方式省去了對(duì)輸入過(guò)程實(shí)時(shí)分析、引導(dǎo)的過(guò)程,適用于對(duì)搜索功能要求不高的情況。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 即時(shí)搜索與輸入完成匹配

目前很多App采用組合方式:輸入過(guò)程關(guān)鍵詞聯(lián)想+輸入完成執(zhí)行搜索。

這是一個(gè)很討巧的組合。既對(duì)用戶提供了必要的幫助和引導(dǎo),又減少了請(qǐng)求次數(shù),避免出現(xiàn)等待加載的狀況。

7. 關(guān)鍵詞聯(lián)想

關(guān)鍵詞到底有什么作用?簡(jiǎn)單來(lái)說(shuō)是:聯(lián)想、匹配、引導(dǎo)、糾正。展開來(lái)說(shuō),有四個(gè)作用:

  • 用戶不一定清楚要搜的精確名稱,關(guān)鍵詞可以作為引導(dǎo)。

  • 系統(tǒng)可以根據(jù)已有的搜索數(shù)據(jù),對(duì)關(guān)鍵詞進(jìn)行關(guān)聯(lián)分類,并且與數(shù)據(jù)庫(kù)精確匹配。如果用戶選擇了做過(guò)關(guān)聯(lián)處理的詞,就可以獲得內(nèi)容更精確、數(shù)量更可控的搜索結(jié)果(而這次選擇,對(duì)系統(tǒng)本身也是一次反饋)。同時(shí),因?yàn)橐杨A(yù)先做了分類,搜索時(shí)可以直接調(diào)取、減少計(jì)算量,速度也更快。

  • 可以減少用戶的輸入錯(cuò)誤。

  • 提供很多很動(dòng)態(tài)的運(yùn)營(yíng)位。

關(guān)鍵詞的展示形式比較靈活。簡(jiǎn)單的是根據(jù)輸入詞,直接展示聯(lián)想的關(guān)鍵詞(如今日頭條),但因?yàn)轫?yè)面空間有限,被鍵盤遮蓋后只能露出幾條,于是大家又發(fā)明了二級(jí)標(biāo)簽。它伴隨關(guān)鍵詞一起出現(xiàn),提供更多相關(guān)的入口。

如下圖,搜索「niu rou」,推薦關(guān)鍵詞「牛肉」,后面跟著3個(gè)小標(biāo)簽「風(fēng)干」「手撕」「張飛」,這3個(gè)關(guān)鍵詞都是對(duì)「牛肉」的再次聯(lián)想。點(diǎn)擊整欄,執(zhí)行搜索「牛肉」;點(diǎn)擊二級(jí)標(biāo)簽(如“張飛”),執(zhí)行搜索「牛肉張飛」。需要注意的是,二級(jí)標(biāo)簽的操作區(qū)域很小,對(duì)于操作精準(zhǔn)度要求高,數(shù)量不能超過(guò)3個(gè)。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 今日頭條直接展示聯(lián)想詞、京東采用二級(jí)關(guān)鍵詞標(biāo)簽

有時(shí)系統(tǒng)推薦的關(guān)鍵詞不夠精確,用戶需在后面輸入其它內(nèi)容。但無(wú)論是關(guān)鍵詞,還是二級(jí)標(biāo)簽,點(diǎn)擊后都直接執(zhí)行搜索,這就需要用戶在搜索結(jié)果頁(yè)再去激活搜索框,繼續(xù)完善搜索詞,中斷了搜索過(guò)程。YouTube、Facebook、亞馬遜、淘寶等采用了「向上補(bǔ)全」功能,點(diǎn)擊關(guān)鍵詞或二級(jí)標(biāo)簽,執(zhí)行搜索,點(diǎn)擊向上補(bǔ)全icon,會(huì)將關(guān)鍵詞補(bǔ)全到搜索框中。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 淘寶的向上補(bǔ)全功能

還可以將關(guān)鍵詞對(duì)應(yīng)的搜索結(jié)果數(shù)量前置,便于用戶控制搜索詞的顆粒度,也避免出現(xiàn)無(wú)結(jié)果或者少結(jié)果的情況。代表有Twitter、大眾點(diǎn)評(píng)、喜馬拉雅、鏈家、百度外賣等。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 關(guān)鍵詞后顯示結(jié)果數(shù)目

除了提供關(guān)鍵詞,還可以對(duì)輸入詞進(jìn)行判斷,適時(shí)提供分類建議(如58、京東、亞馬遜、閑魚等,可參考前文「J.分類搜索」一節(jié))。58作為一個(gè)綜合的生活服務(wù)平臺(tái),業(yè)務(wù)類別多,搜索「牛肉」,在很多類別都有相關(guān)信息,選取「食品」和「招商加盟」這兩個(gè)可能性很大的類別推薦給用戶。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 58對(duì)輸入詞提供分類建議

另外,也可以將部分搜索結(jié)果前置,與關(guān)鍵詞一起顯示。這些搜索結(jié)果,可能是平臺(tái)用戶的熱搜、對(duì)當(dāng)前用戶的個(gè)性化推薦,也可能是平臺(tái)運(yùn)營(yíng)、推廣的內(nèi)容。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 將部分搜索結(jié)果前置顯示

搜索過(guò)程第三階段,點(diǎn)擊搜索按鈕/關(guān)鍵詞后,跳轉(zhuǎn)至搜索結(jié)果頁(yè)。


第三部分 搜索結(jié)果

1. 搜索結(jié)果

搜索后,通常會(huì)得到N多個(gè)結(jié)果,它們可能不是同一類型,展示形式也會(huì)有差異。如何把這些結(jié)果清晰有序地展示出來(lái),讓用戶準(zhǔn)確、快速地找到想要的結(jié)果?這涉及到幾個(gè)問(wèn)題:

  • 智能糾錯(cuò)

  • 結(jié)果分類(如果需要)

  • 默認(rèn)排序

  • 保留搜索詞

  • 結(jié)果與搜索詞對(duì)應(yīng)

  • 排序與篩選

  • 無(wú)結(jié)果或少結(jié)果

智能糾錯(cuò):當(dāng)用戶輸入了錯(cuò)誤的詞,可能搜索不到結(jié)果。需要系統(tǒng)判斷識(shí)別,推薦正確的詞,或者直接將正確結(jié)果展示出來(lái)。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 智能糾錯(cuò)

結(jié)果分類:可以通過(guò)tab、標(biāo)簽、列表等形式將結(jié)果分類,具體可參考前文「J.分類搜索」一節(jié)。

默認(rèn)排序:默認(rèn)的排序結(jié)果決定了用戶第一眼會(huì)看到什么,對(duì)后續(xù)的轉(zhuǎn)化有直接影響。通常會(huì)根據(jù)一些因素做綜合排序,如用戶偏好、點(diǎn)擊量、轉(zhuǎn)化率、平臺(tái)運(yùn)營(yíng)、商業(yè)推廣等。排序策略通常比較復(fù)雜,不同的平臺(tái)會(huì)考慮不同因素、賦予不同的權(quán)重。

保留搜索詞:點(diǎn)擊進(jìn)入搜索頁(yè)時(shí),仍然在搜索框中保留輸入的詞,一方面提示所搜的關(guān)鍵詞,另一方面便于用戶修改、進(jìn)行二次搜索。

結(jié)果與搜索詞對(duì)應(yīng):很多App的搜索內(nèi)容,不局限于標(biāo)題和結(jié)果列表露出的部分,這就導(dǎo)致搜索結(jié)果看起來(lái)與搜索詞并沒(méi)什么關(guān)系,容易造成用戶困惑。

這點(diǎn)往往會(huì)被我們忽略。在必要時(shí),我們應(yīng)將搜索詞顯示在搜索結(jié)果中,保持搜索詞的可見(jiàn)性。

大眾點(diǎn)評(píng)做了一個(gè)很好的示例:我們搜索「牛欄山」(“牛欄山”是一個(gè)地名,同時(shí)也是酒的品牌)。大眾點(diǎn)評(píng)搜索內(nèi)容包括店鋪名、地點(diǎn)和推薦菜,那么可能會(huì)有3種搜索結(jié)果:

  • 名字中含「牛欄山」的店鋪。

  • 位于牛欄山商圈的店鋪。

  • 推薦菜中有「牛欄山」的店鋪。

大眾點(diǎn)評(píng)對(duì)結(jié)果列表做了適配,顯示出命中搜索詞的推薦菜(平時(shí)并不會(huì)顯示),符合用戶預(yù)期。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 大眾點(diǎn)評(píng)的結(jié)果與搜索詞對(duì)應(yīng)

排序與篩選:排序與篩選維度與業(yè)務(wù)類型密切相關(guān),不同行業(yè)差異較大。大致來(lái)說(shuō),排序有時(shí)間、距離、熱度、價(jià)格、銷量等維度;篩選維度則更加豐富和個(gè)性化,甚至?xí)鶕?jù)搜索內(nèi)容進(jìn)行變化。

一般排序功能會(huì)放在搜索欄與結(jié)果之間,便于切換。但有些App(主要是國(guó)外App,如亞馬遜、YouTube),將排序功能收起,操作便利性不如前者。

篩選項(xiàng)維度少時(shí),可以將篩選(與排序一起)放置在搜索欄與結(jié)果之間,點(diǎn)擊后以下拉菜單的形式出現(xiàn);若維度豐富,一般使用側(cè)邊欄形式。需要注意的是,多個(gè)篩選維度的疊加可能會(huì)導(dǎo)致結(jié)果過(guò)少,前置篩選結(jié)果數(shù)量是個(gè)不錯(cuò)的辦法(如網(wǎng)易考拉海購(gòu))。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 排序與篩選

無(wú)結(jié)果或少結(jié)果:出現(xiàn)無(wú)結(jié)果或少結(jié)果時(shí),可能有這幾種情況:

  • 選擇了錯(cuò)誤的分類

  • 輸入錯(cuò)誤

  • 搜索結(jié)果少或無(wú)

對(duì)于前兩種,可以提示用戶,或者自動(dòng)幫用戶糾正錯(cuò)誤;對(duì)于后一種,一般會(huì)匹配相關(guān)結(jié)果進(jìn)行補(bǔ)足,或者提示用戶更換關(guān)鍵詞、擴(kuò)大搜索范圍、進(jìn)行訂閱等。

例如58在搜索結(jié)果不足時(shí),會(huì)引導(dǎo)用戶訂閱,當(dāng)搜索結(jié)果更新時(shí),會(huì)向用戶主動(dòng)推送。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 結(jié)果不足時(shí),補(bǔ)足信息+訂閱引導(dǎo)

2. 更多搜索方式

隨著技術(shù)的發(fā)展,搜索方式越來(lái)越豐富。

比如語(yǔ)音搜索,不但為視力不佳的老年人提供了一種友善的方式,也適用于一些輸入不便的移動(dòng)場(chǎng)景。比如導(dǎo)航類內(nèi)置語(yǔ)音搜索,可以在駕車途中實(shí)現(xiàn)路況查詢、地點(diǎn)搜索、路線規(guī)劃等功能。另外在一些音樂(lè)類App中,可以帶入音律,實(shí)現(xiàn)「聽歌識(shí)曲」,甚至是「哼唱識(shí)曲」。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 語(yǔ)音搜索

借助圖像識(shí)別技術(shù),圖像搜索也得到了廣泛應(yīng)用。百度的「以圖搜圖」,可以搜索相似圖片、追蹤圖片來(lái)源、獲取不同尺寸的圖片;小猿搜題的「拍照搜題」,利用OCR技術(shù),進(jìn)行快速識(shí)別,省去了輸入的繁瑣過(guò)程;淘寶等電商的「拍立淘」,一方面可以搜同款商品,一方面在無(wú)法準(zhǔn)確描述商品名稱的時(shí)候,也能進(jìn)行搜索。

如何讓搜索框的體驗(yàn)更好?我總結(jié)了這些設(shè)計(jì)套路!-藝源科技

△ 圖像搜索


結(jié)語(yǔ)

各個(gè)App采用不同的設(shè)計(jì)形式,本質(zhì)上是因?yàn)樗鼈儗?duì)搜索功能的定位不同。

文章中已拆解分析了各種設(shè)計(jì)形式,希望能給大家?guī)?lái)一些啟發(fā)。限于篇幅和自身水平,一些內(nèi)容只是稍作介紹,更深的應(yīng)用還需要大家去探索。

實(shí)踐出真知。一方面,我們接觸到一個(gè)App,可以從搜索的具體形式,來(lái)反推它的功能定位和應(yīng)用場(chǎng)景,并且思考是否有更優(yōu)的方案,以此提高自己的思辨能力。另一方面,在今后的設(shè)計(jì)實(shí)踐中,我們應(yīng)該從功能出發(fā),綜合考慮業(yè)務(wù)類型、功能定位、目標(biāo)用戶、應(yīng)用場(chǎng)景,選用合適的形式,提升搜索體驗(yàn),讓用戶搜得更快、更準(zhǔn)、更舒心。

小程序開發(fā)
標(biāo)簽: 搜索框設(shè)計(jì) 用戶體驗(yàn) 經(jīng)驗(yàn)分享
*版權(quán)申明:本站部分文章由藝源科技收集整理,不代表我們的觀點(diǎn)。如果這篇轉(zhuǎn)載侵犯您的版權(quán),請(qǐng)及時(shí)聯(lián)系我們刪除!
為您推薦
最新文章
掃碼加他,免費(fèi)獲取方案