[思考]設(shè)計(jì)更好的搜索功能

>搜索功能作為尋找目標(biāo)內(nèi)容的快速入口张峰,存在于很多的應(yīng)用當(dāng)中;在不同的使用場景下棒旗,搜索功能也變得更加懂你喘批。這篇文章將談及搜索的適用范圍,功能細(xì)分铣揉,和其他部分閑話饶深。

基礎(chǔ)形式

就我個(gè)人觀點(diǎn)而言,搜索是一個(gè)非主要功能(不涉及獨(dú)立搜索逛拱,如Google敌厘、Bing等),臨時(shí)的中間態(tài)朽合,用戶不會在這個(gè)操作上長時(shí)停留俱两,應(yīng)該盡快前往目標(biāo)內(nèi)容,搜索過程就像游戲中施放傳送時(shí)的施法吟唱曹步。

在web/pc平臺上宪彩,大都是以 input+button 或 search icon的形式存在于界面上,如下圖:

在移動(dòng)端上箭窜,也會是search bar的形式存在毯焕,而且大部分會處在操作較少的上半屏區(qū)域,搜索功能作為對內(nèi)容的補(bǔ)充磺樱,是一個(gè)用戶操作動(dòng)機(jī)較強(qiáng)的功能纳猫,大多數(shù)app都是滑動(dòng)向下瀏覽,上部的搜索不太容易干擾到用戶的操作竹捉,實(shí)際中也會根據(jù)產(chǎn)品自身對搜索功能的定義芜辕,做出一些差異性的設(shè)計(jì)(例如作為tab項(xiàng)加入到bottom bar中去)。

接下來會通過搜索操作的過程順序块差,分析個(gè)中的設(shè)計(jì)方法侵续。

一、搜索框的默認(rèn)狀態(tài)(default)

即使你不去使用搜索功能憨闰,一個(gè)搜索框也會默認(rèn)的傳遞出一些信息状蜗。常見的方法就是在輸入框中默認(rèn)放入一些灰字內(nèi)容。

1.在搜索框中放置用戶先前搜索過的相關(guān)詞鹉动,方便用戶對之前的搜索內(nèi)容進(jìn)行二次瀏覽轧坎,也會添加搜索詞云的交替呈現(xiàn)形式,增加多搜索詞的曝光率泽示。

例如天貓就會根據(jù)我之前搜索的搜索詞(紅棗)缸血,默認(rèn)顯示脆棗蜜氨,脆冬棗,冬棗等相關(guān)詞捎泻,刺激感興趣的用戶前去了解飒炎,進(jìn)行操作。

通過相近搜索詞引導(dǎo)用戶搜索

2.在搜索框中放入近期活動(dòng)信息笆豁,增加用戶對活動(dòng)的參與度郎汪,這會有平臺或企業(yè)近期的運(yùn)營策略相關(guān),作為一個(gè)用戶了解參與的活動(dòng)入口渔呵。

例如京東為了推廣年貨節(jié)怒竿,引入了灰字吸引用戶搜索了解內(nèi)容。

3.引入搜索類型提示扩氢,用戶對一個(gè)寬泛的搜索框耕驰,可能會各種不同的搜索目標(biāo),通過加入灰字對搜索詞類型進(jìn)行說明录豺,可以減少一些沒有結(jié)果的搜索操作朦肘。

例如知乎對搜索類型進(jìn)行了說明,告知用戶搜索類型為問答双饥、文章媒抠、話題和用戶。


二咏花、觸發(fā)

在用戶激活操作趴生,還未輸入時(shí)的狀態(tài),這時(shí)會給用戶提供一些能夠幫助他們快速搜索的輔助信息昏翰,依然是前往搜索內(nèi)容的加速器苍匆。

1.提供搜索記錄和當(dāng)前熱搜,搜索一些當(dāng)前的熱點(diǎn)和之前搜索過的內(nèi)容棚菊,都是去提供一些可能性來與用戶心中的搜素目標(biāo)進(jìn)行匹配浸踩,就像是“你到了餐廳坐下來,服務(wù)員向你介紹了一些招牌菜品并詢問要不要來份上次吃過的炒菜”统求,這遠(yuǎn)比“服務(wù)員僅詢問你吃什么然后自己去翻菜譜”來的更加方便一些检碗。

例如微博作為熱點(diǎn)聚集地,所以在觸發(fā)搜索框后對話題性內(nèi)容做出了展示码邻。也會根據(jù)平臺的差異折剃,調(diào)整搜索記錄和熱點(diǎn)的比例(微博最多只顯示兩個(gè)搜索記錄詞)。


提供熱搜內(nèi)容的微博

2.對潛在的搜索內(nèi)容做大類劃分像屋,將可能的搜索內(nèi)容按大類劃分微驶,用戶自行選擇目標(biāo)類型再進(jìn)行搜索,對于無關(guān)的搜索類型可以在展示頁之前就進(jìn)行過濾。

例如QQ瀏覽器因苹,用戶搜索的內(nèi)容過于龐雜,一個(gè)大類的劃分可能會提高不少效率篇恒,就像搜索一部電影名稱扶檐,結(jié)果可能是包含新聞、影評胁艰、海報(bào)款筑、視頻等多種類型,過多的內(nèi)容交織腾么,采用這種方法可以減少用戶的篩選工作奈梳。

對搜索內(nèi)容提供預(yù)先劃分

3.提供其他搜索方式(語音、拍照)解虱,搜索的使用場景非常多樣攘须,單純的文字輸入不太能夠覆蓋到所有場景,我可能在不方便打字的時(shí)候使用語音搜索殴泰,或者在不知道該如何描述的時(shí)候拍一張照來搜索是什么于宙。

例如天貓?jiān)谟|發(fā)搜索,會提供拍照搜索和語音搜索的功能悍汛。

提供拍照和語音的搜索方式

4.識別剪切板內(nèi)容捞魁,這一類的識別較為特殊,抓住的還是:復(fù)制->粘貼->搜索 這一較高頻率的搜索過程离咐,但是因?yàn)榧羟邪逯械膬?nèi)容會很多樣谱俭,盲目的識別再讓用戶取消就有點(diǎn)多此一舉了,所以QQ瀏覽器中會注意識別是否為地址字段宵蛀,猜測用戶可能會選擇前往(好像某段時(shí)間也能識別短時(shí)間內(nèi)的新圖片昆著,后來拿掉了)。

這里的搜索識別了我剪切板中的Bing地址

三糖埋、輸入

到了輸入過程的時(shí)候宣吱,設(shè)計(jì)的目標(biāo)依然是以降低用戶搜素成本,盡快離開前往目標(biāo)內(nèi)容瞳别。

1.實(shí)時(shí)模糊匹配征候,從用戶開始輸入第一個(gè)字的內(nèi)容后,就開始相應(yīng)的匹配祟敛,通過羅列出一些可能的搜索項(xiàng)來幫助用戶快速前往疤坝。這里還會存在兩點(diǎn)需要注意的內(nèi)容,就是匹配內(nèi)容的界定和對匹配信息的遞進(jìn)馆铁。匹配內(nèi)容的界定可能會按照“當(dāng)前用戶的搜索頻次”和“之前的搜索內(nèi)容關(guān)聯(lián)度”進(jìn)行處理跑揉。對匹配內(nèi)容的遞進(jìn),不僅是在羅列項(xiàng)中的上下順序,還有對搜索內(nèi)容詳細(xì)程度历谍。

例如高德地圖现拒,會在匹配詞越多時(shí),提供更詳盡的匹配詞信息望侈。望京公園的信息印蔬,在搜索詞從“望京”到“望京公園”的呈現(xiàn)不同,匹配程度更高時(shí)放在了更上方的位置脱衙,并提供了小門和交通信息侥猬。

高德地圖中,搜索匹配信息的呈現(xiàn)方式

2.按照類型對匹配信息區(qū)分捐韩,如果上一步?jīng)]有對搜索的分類退唠,那么可以在匹配結(jié)果中進(jìn)行劃分,信息的類型看起來更加豐滿和有條理荤胁。

例如知乎會按照之前在搜索框內(nèi)的提示信息瞧预,對搜索結(jié)果進(jìn)行分類。

bilibili的搜索結(jié)果包含話題寨蹋、內(nèi)容等多個(gè)類型的匹配分類

四松蒜、結(jié)果

搜索結(jié)果的呈現(xiàn)也是多樣化,會根據(jù)產(chǎn)品自身對內(nèi)容的組織來進(jìn)行設(shè)計(jì)已旧,列表秸苗,卡片都是解決的方法。這里不進(jìn)行更多的討論运褪。想要提及的是在天貓中的一個(gè)有意思的設(shè)計(jì)惊楼,將搜索結(jié)果在樣式上標(biāo)簽化,這一交互形式可能是因?yàn)榻斩铮跇I(yè)務(wù)上功能間的沖突而做出的調(diào)整檀咙,拍照功能和清楚搜索框在擺放位置上的沖突,所以對搜索的關(guān)鍵詞做出異化璃诀,同樣也能方便快速清除弧可,重新搜索,那么這樣方案是一個(gè)優(yōu)秀的設(shè)計(jì)嗎劣欢?:)

搜索詞樣式的特殊設(shè)計(jì)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末棕诵,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子凿将,更是在濱河造成了極大的恐慌校套,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件牧抵,死亡現(xiàn)場離奇詭異笛匙,居然都是意外死亡侨把,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進(jìn)店門妹孙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來秋柄,“玉大人,你說我怎么就攤上這事涕蜂』遥” “怎么了?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵机隙,是天一觀的道長。 經(jīng)常有香客問我萨西,道長有鹿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任谎脯,我火速辦了婚禮葱跋,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘源梭。我一直安慰自己娱俺,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布废麻。 她就那樣靜靜地躺著荠卷,像睡著了一般。 火紅的嫁衣襯著肌膚如雪烛愧。 梳的紋絲不亂的頭發(fā)上油宜,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天,我揣著相機(jī)與錄音怜姿,去河邊找鬼慎冤。 笑死,一個(gè)胖子當(dāng)著我的面吹牛沧卢,可吹牛的內(nèi)容都是我干的蚁堤。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼但狭,長吁一口氣:“原來是場噩夢啊……” “哼披诗!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起熟空,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤藤巢,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后息罗,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體掂咒,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了绍刮。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片温圆。...
    茶點(diǎn)故事閱讀 39,696評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖孩革,靈堂內(nèi)的尸體忽然破棺而出岁歉,到底是詐尸還是另有隱情,我是刑警寧澤膝蜈,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布锅移,位于F島的核電站,受9級特大地震影響饱搏,放射性物質(zhì)發(fā)生泄漏非剃。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一推沸、第九天 我趴在偏房一處隱蔽的房頂上張望备绽。 院中可真熱鬧,春花似錦鬓催、人聲如沸肺素。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽倍靡。三九已至,卻和暖如春飞苇,著一層夾襖步出監(jiān)牢的瞬間菌瘫,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工布卡, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留雨让,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓忿等,卻偏偏與公主長得像栖忠,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子贸街,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內(nèi)容