在不同的APP或者不同的場景下搜索入口有著不同的表現(xiàn)形式,具體的表現(xiàn)形式取決于產(chǎn)品對搜索功能權(quán)重的定義,如果說在某一場景下搜索功能是用戶常用的核心功能那么他在界面上所表現(xiàn)出來的權(quán)重就要高些,反之則低些匀们。下圖是常見的搜索功能的入口形式,他們的權(quán)重從左到右依次降低,我將對它們進(jìn)行精細(xì)分析冗栗。
方式一:如下圖APP Store的搜索入口
方式二:搜索框外漏在nav bar上
這樣的形式有著兩個設(shè)計的關(guān)鍵點(diǎn):
關(guān)鍵點(diǎn)一:搜索框外漏在頂部導(dǎo)航條上
搜索框直接外漏在導(dǎo)航條上是為了突顯該功能军浆,這一功能往往是用戶在該頁面非常核心的操作任務(wù)棕洋,類似天貓京東這類電商型app,通常情況下用戶都是帶著明確目的來購買東西的乒融,那么他們采取的最快最直接的方式就是搜索掰盘。
關(guān)鍵點(diǎn)二:在向上滾動界面時,搜索框一直懸停在頂部
這樣做的場景是這樣的赞季,在用戶滾動頁面尋找內(nèi)容時愧捕,可能并不能找到自己想要的內(nèi)容,搜索框一直懸停一是為了暗示用戶可以進(jìn)行搜索申钩,二是為了讓用戶在想搜索時快速觸發(fā)搜索
方式三:出現(xiàn)在NAV BAR下面次绘,默認(rèn)隱藏或顯示
如上圖是微信在聊天頁面和通訊錄頁面的搜索入口,初始化狀態(tài)時聊天頁面的搜索框是不出現(xiàn)在用戶的可視范圍內(nèi)的撒遣,當(dāng)頁面下滑時搜索框才出現(xiàn)邮偎,而在通訊錄頁面里搜索框是默認(rèn)出現(xiàn)在用戶的可視范圍內(nèi)的。
分析:微信在最近聯(lián)系人和通訊錄上搜索框的默認(rèn)狀態(tài)不同义黎,這很好地詮釋了這兩種場景下的搜索功能的權(quán)重禾进。最近聯(lián)系人頁面上的搜索入口顯得更加隱蔽,因為在這個頁面下用戶產(chǎn)生搜索的場景很少廉涕,把其隱藏簡化了界面的元素泻云,提升了界面的美觀性。
方式四:通過點(diǎn)擊icon觸發(fā)搜索
如上圖今日頭條的搜索的入口狐蜕,通過點(diǎn)擊右上角的搜索icon進(jìn)入搜索頁面:
分析:在界面權(quán)重上宠纯,這樣的方式相對于以上三種方式來說顯得較弱一點(diǎn),因為在這樣的場景下用戶使用搜索的概率并不是很高层释,如果把搜索外漏就會占據(jù)更多的屏幕空間征椒,破壞界面的權(quán)重等級和美觀性。
總結(jié):依據(jù)用戶的需求場景湃累,搜索入口放在不同的位置勃救,如果說在該頁面搜索是一個主要的功能,我們就應(yīng)該去突顯它治力,提升它在界面上的權(quán)重蒙秒,反之則減輕它的權(quán)重。
搜索中間頁——運(yùn)營的重災(zāi)區(qū)宵统,用戶搜索行為的關(guān)鍵點(diǎn)
搜索中間頁本來應(yīng)該是一個輕量化的頁面晕讲,用戶在這里輸入內(nèi)容進(jìn)行搜索即可覆获。但隨著運(yùn)營需求的擴(kuò)張,這個頁面逐漸成為了一個運(yùn)營重災(zāi)區(qū)瓢省,多了很多推薦的內(nèi)容弄息。我將從“輸入框提示信息、搜索分類勤婚、搜索歷史摹量、搜索推薦么伯、搜索輸入遥赚、搜索建議”等方面分析一下這個頁面的設(shè)計拌蜘。
1. 輸入框提示信息
搜索框內(nèi)的提示信息通常是提示用戶當(dāng)下可以搜索什么樣的內(nèi)容汞斧,如上圖bilibi的搜索提示,告訴用戶可以進(jìn)行“視頻翰萨、番劇铁材、UP主或者AV號”的搜索问慎,這樣的提示信息對用戶也是一種良性的引導(dǎo)型雳,給用戶提供了一個心理預(yù)期当凡,同時也對用戶隨意輸入關(guān)鍵詞造成無結(jié)果的傷害體驗的可能進(jìn)行了限制。例如一個房產(chǎn)APP纠俭,搜索框內(nèi)提示輸入樓盤或小區(qū)名沿量,如果沒有這樣的提示有的用戶可能就會去輸入價格去篩選房源,這句提示語很好地降低了這樣的風(fēng)險柑晒。
但隨著人們對APP使用的熟悉欧瘪,用戶在這里的認(rèn)知負(fù)擔(dān)基本消除眷射,運(yùn)營人員逐漸搶占了這塊地方匙赞,這句話變成了內(nèi)容的推薦或者產(chǎn)品的Slogan,這些推薦的內(nèi)容可以是運(yùn)營人員手動維護(hù)的也可以是依據(jù)用戶的購買和行為習(xí)慣進(jìn)行推薦的妖碉。如上圖右邊是淘寶的搜索提示涌庭,搜索框的文案變成了“紅人最愛潮牌名服”,這就是運(yùn)營人員在為特定內(nèi)容進(jìn)行導(dǎo)流欧宜。
2. 搜索分類
在內(nèi)容型APP中搜索時通常會對內(nèi)容進(jìn)行分類搜索坐榆,這是為了幫助用戶更精確地找到相關(guān)內(nèi)容,分類的操作可以發(fā)生在搜索前也可以發(fā)生在搜索后冗茸,如下圖是“淘寶席镀、微信、網(wǎng)易云音樂”搜索分類的方式夏漱,我將分別對他們進(jìn)行分析豪诲。
淘寶是將搜索分類前置,默認(rèn)搜索寶貝挂绰,點(diǎn)擊后彈出浮層進(jìn)行切換屎篱。這樣的方式存在一個明顯的缺點(diǎn)就是由于該入口所占空間位置不顯著,會導(dǎo)致用戶感知太弱。 這樣的方式通常用在用戶大多數(shù)情況下只搜索某一分類的內(nèi)容交播,如淘寶這樣重虑,用戶大部分的搜索場景都是在尋找寶貝。
微信默認(rèn)搜索所有內(nèi)容秦士,將分類通過三個很顯著的入口放在搜索框下方缺厉,當(dāng)點(diǎn)擊某一分類時跳轉(zhuǎn)到該分類的搜索界面,同時搜索框的文案以及搜索界面的內(nèi)容發(fā)生相應(yīng)變化伍宦,提示用戶搜索范圍被改變芽死。這種方式通常用在這些分類搜索的場景都很常見時,它的缺點(diǎn)在于次洼,從界面表現(xiàn)形式來看关贵,這三個分類更像是三個功能的入口,他們與搜索框聯(lián)系得不是很緊密卖毁,很多用戶最開始使用時并不知道點(diǎn)擊這些分類是進(jìn)行搜索范圍的限制揖曾。經(jīng)測試3個從未使用過該功能的用戶,他們都認(rèn)為點(diǎn)擊朋友圈后就是進(jìn)入朋友圈亥啦,點(diǎn)擊文章后就是顯示所有文章炭剪。
網(wǎng)易云音樂是將搜索分類進(jìn)行后置了,在下文關(guān)于搜索結(jié)果的展示我會分析它的優(yōu)劣勢翔脱。
3.搜索歷史
搜索歷史記住用戶的足跡奴拦,方便用戶快速向以前搜索過的內(nèi)容進(jìn)行轉(zhuǎn)換。設(shè)計上我們需要注意的一點(diǎn)就是需要把搜索歷史和搜索推薦區(qū)分開來届吁,在位置上错妖,盡量讓搜索歷史靠近搜索框(如下圖),因為從認(rèn)知心理學(xué)上來講疚沐,越靠近搜索框的內(nèi)容越能表示它是搜索歷史暂氯。在表現(xiàn)形式上,搜索歷史和搜索推薦盡量采用不同的表現(xiàn)形式亮蛔。搜索歷史伴隨的交互操作有刪除單條或者清空搜索歷史痴施。但我們往往會被運(yùn)營強(qiáng)制將搜索推薦放在上面。
4. 搜索推薦
這里的搜索推薦通常有三種來源:
第一種:按照用戶的搜索熱度進(jìn)行推薦究流;
第二種:運(yùn)營手動配置辣吃;
第三種:按照搜索行為進(jìn)行計算和推薦;
它存在的目的主要有兩個:
一是挖掘用戶的潛在需求,讓用戶更快地找到想找的內(nèi)容芬探;
二是作為運(yùn)營位為特定的內(nèi)容導(dǎo)流神得。
建議:
不要漏出太多的推薦內(nèi)容,畢竟它帶有一些運(yùn)營和廣告性質(zhì)灯节,用戶的接受度并不會很高循头。
在界面上讓推薦內(nèi)容和搜索歷史有明顯的區(qū)分绵估,方便用戶在形式上一眼就能區(qū)分出搜索歷史和推薦內(nèi)容
盡量推薦一些對用戶有真正價值的內(nèi)容
5. 搜索輸入
受移動端操控方式的限制,在輸入內(nèi)容時存在兩個明顯的痛點(diǎn):“修改內(nèi)容”和“輸入速度”卡骂。
關(guān)于修改內(nèi)容:當(dāng)用戶想更改語句中一部分文字時国裳,將光標(biāo)移動到想要更改的地方是一件很難的事,點(diǎn)擊操作真的很令人發(fā)狂全跨,通常情況下我寧愿重新輸入缝左。但是針對這一點(diǎn)搜狗輸入法做了一個很人性的交互,當(dāng)用戶按住鍵盤左右滑動時就能移動光標(biāo)(如下圖)浓若。
關(guān)于輸入速度:很早之前偶然間發(fā)現(xiàn)了UC瀏覽器在輸入文字時的一個交互功能渺杉,如下圖所示,當(dāng)輸入文字后挪钓,用戶可以將搜索建議的詞語直接加入到搜索框中然后繼續(xù)輸入文字是越。這樣的需求場景在很常見,比如我想搜索“交互設(shè)計師的前景”碌上,當(dāng)我輸入交互二字后就會有“交互設(shè)計”的搜索建議倚评,點(diǎn)擊搜索建議后面的箭頭將這個詞直接加入搜索框,然后就出現(xiàn)了“交互設(shè)計師的前景”的搜索建議馏予,點(diǎn)擊搜索建議后進(jìn)入搜索結(jié)果的頁面天梧,這個過程中我少打了很多字,對我的搜索速度有很大的提升霞丧。
6.搜索建議
當(dāng)用戶輸入內(nèi)容后呢岗,搜索框下面出現(xiàn)了眾多的搜索建議,這些搜索建議是為了幫助用戶快速向目標(biāo)進(jìn)行轉(zhuǎn)化蛹尝,如下圖是京東的搜索建議后豫,當(dāng)我輸入畫框后,一系列畫框的搜索建議就出來了箩言,它還有一個亮點(diǎn)就是在此提供了細(xì)化篩選條件硬贯,畫框后面緊跟了“長方形焕襟、實木陨收、正方形”等關(guān)鍵的篩選條件,為用戶省去了到結(jié)果頁進(jìn)行篩選的步驟鸵赖。
搜索結(jié)果背后的邏輯決定了用戶是否能找到準(zhǔn)確的內(nèi)容务漩,搜索結(jié)果是搜索過程中最關(guān)鍵的點(diǎn),結(jié)果的準(zhǔn)確性確定了用戶體驗的好壞它褪,我將從“搜索結(jié)果的形式饵骨、搜索結(jié)果的操作、搜索結(jié)果的分類茫打、搜索結(jié)果的排序”等方面來對搜索結(jié)果進(jìn)行分析居触。
1. 搜索結(jié)果的形式
搜索結(jié)果一般分為兩種妖混,一種是所見即所得,用戶輸入內(nèi)容后出現(xiàn)在搜索框下面的搜索建議就是搜索結(jié)果轮洋,這種搜索通常出現(xiàn)在一些輕量化的APP中制市,因為搜索建議對應(yīng)的就是唯一的搜索結(jié)果,如下圖微信的搜索一樣弊予。
2. 搜索結(jié)果的操作
依據(jù)用戶的需求目的,在搜索結(jié)果的列表上我們可以外漏用戶大部分情況下會采取的操作碾褂,比如說視頻類網(wǎng)站兽间,用戶搜索到某一內(nèi)容后,最常采取的操作就是播放正塌,我們就可以把播放按鈕外漏渡八,縮短用戶的操作路徑(如下圖愛奇藝的搜索結(jié)果頁)
3. 搜索結(jié)果的分類
通常的分類方式是tab切換和卡片,以下是微信和網(wǎng)易云音樂的分類传货。
這兩種方式有各自的應(yīng)用場景屎鳍,TAB切換主要應(yīng)用在搜索結(jié)果有固定的幾種分類,并且通常的情況下搜索結(jié)果都有很多的內(nèi)容问裕,如上圖的網(wǎng)易云音樂逮壁,每一個分類都有很多的搜索結(jié)果,如果它采用卡片式的瀑布流布局粮宛,用戶需要不停往下翻才能看到第二種分類的內(nèi)容窥淆。卡片式主要運(yùn)用在搜索結(jié)果的內(nèi)容不多巍杈,如微信這樣的情況忧饭,每一類結(jié)果并不是很多,卡片式的瀑布流布局能讓用戶快速定位到自己想要的內(nèi)容筷畦,如果這里用TAB切換就很尷尬了词裤,因為每一類的內(nèi)容都很少或者很多類里根本沒有內(nèi)容,這樣的用戶感受就不好了鳖宾。
4. 搜索結(jié)果的排序
搜索結(jié)果的排序是一個比較復(fù)雜的工作吼砂,里面涉及了很多的算法邏輯,但是一般的垂直內(nèi)容型APP并沒有這么復(fù)雜的算法在里面鼎文,就是按照搜索的關(guān)鍵字去一一匹配渔肩。
如上圖是說我在QQ閱讀輸入一個“男”字,然后就給我建議第一個字是“男”的所有可能的結(jié)果拇惋,當(dāng)?shù)谝粋€字匹配完后就匹配第二個字周偎,這樣以此類推抹剩。他們的整體順序就是按照匹配關(guān)鍵字的先后進(jìn)行排列的,其實在排序中還牽涉了很多的算法蓉坎,比如說它可能會摻雜一些“熱度吧兔、人氣、人為意圖袍嬉、語義”等因素的權(quán)重境蔼,這里不展開贅述了。