如何設(shè)計(jì)搜索功能的入口 ?

0 評論 9322 瀏覽 39 收藏 12 分鐘

搜索入口相當(dāng)于用戶搜索流程的第一步,在設(shè)計(jì)上不同品類的設(shè)計(jì)方案不盡相同,本文就來聊一下搜索入口都有哪幾種設(shè)計(jì)方案?

不知道大家有沒有注意到一點(diǎn),當(dāng)我們?nèi)ド虉鰰r(shí),一進(jìn)門總是能看到一個(gè)叫做服務(wù)臺的區(qū)域,一旦在商場里有什么疑問,當(dāng)我看到服務(wù)臺三個(gè)字,就知道,可以去那里咨詢。

那么用戶使用app的時(shí)候也是一樣,某一頁面出現(xiàn)的搜索入口就相當(dāng)于寫著服務(wù)臺的工位,當(dāng)用戶看到搜索兩字或者相關(guān)標(biāo)識,就可以獲取到一個(gè)信息,在這里我可以使用搜索功能,可以進(jìn)行搜索。

所以對于搜索入口的設(shè)計(jì),有兩個(gè)原則:

  • 在用戶需要的時(shí)候隨時(shí)都可以找到它;
  • 在用戶不需要的時(shí)候,它可以隱藏。

也就是讓它,既顯眼,又沒有存在感。搜索入口在頁面中一般具有鮮明簡單的標(biāo)志,在頁面提示用戶可以在這里進(jìn)行搜索,也可以引導(dǎo)用戶怎樣去搜索。

所以說搜索入口相當(dāng)于用戶搜索流程的第一步,在設(shè)計(jì)上不同品類設(shè)計(jì)方案也不盡相同,今天我們來聊一下搜索入口都有哪幾種設(shè)計(jì)方案?

01 頂部搜索框

我們可以注意到,一般主流的產(chǎn)品,都會(huì)將搜索入口放置頂部。頁面是平面圖形,放眼望去,頁面的各個(gè)部分盡收眼底;但事實(shí)上,不同的位置,用戶的關(guān)注點(diǎn)并不相同。

通常情況下,我們會(huì)習(xí)慣性的從頁面的中上部開始閱讀,這也就是為什么往往電商app會(huì)將輪播廣告放在這里。所以,放在頁面頂部的搜索框此時(shí)便毫無存在感;但當(dāng)用戶有需求,從上往下排查時(shí),第一眼便可看到。

當(dāng)用戶進(jìn)入頁面,內(nèi)容繁多,想要通過搜索進(jìn)行篩選,這時(shí)頁面頂部放置一個(gè)搜索入口,即可滿足用戶需求。

1. 引導(dǎo)類

上面我們說到了在頂部放一個(gè)搜索入口,讓用戶想搜索的時(shí)候,可以立刻找到搜索功能并使用。

那么如何讓用戶知道這里是搜索呢?

頂部的搜索入口有一類為頂部搜索框。這樣我們就可以將文案在搜索框內(nèi)顯示,對用戶進(jìn)行引導(dǎo)。

我們來看在iOS系統(tǒng)設(shè)置頁面的場景,內(nèi)容其實(shí)不算很多,但每個(gè)菜單下都存在子級,子級里面又含有子級,用戶如果想要進(jìn)行一個(gè)鎖屏密碼的設(shè)置,了解流程的情況下,也要點(diǎn)開三個(gè)子級才能找到。此時(shí)如果放個(gè)搜索入口,文本框內(nèi)提示搜索兩字,便能對用戶達(dá)成引導(dǎo)目的,告訴他這里是搜索入口,可以搜索定位相關(guān)功能。

2. 推薦信息類

在滿足了引導(dǎo)用戶找到搜索入口以后,我們可以對文本框的內(nèi)容進(jìn)行進(jìn)一步提升,在引導(dǎo)用戶使用的同時(shí),加強(qiáng)用戶搜索時(shí)候的聯(lián)想性。也就是我們平時(shí)說的默認(rèn)詞放入框內(nèi),其參考內(nèi)容可能是產(chǎn)品當(dāng)下的熱門品類或活動(dòng),也可能是大數(shù)據(jù)根據(jù)用戶的日常瀏覽搜索記錄匹配出來的智能推薦,主要針對于消費(fèi)場景的app多一些。

這種推薦式的細(xì)節(jié)功能,使得用戶在app內(nèi)的單次留存時(shí)間變長;也是app對自身產(chǎn)品的二次推廣,比如電商軟件在雙十一的時(shí)候,將默認(rèn)詞改為雙十一活動(dòng)文案,增加了活動(dòng)的宣傳性,也讓用戶有更多的百分比可以進(jìn)入活動(dòng)頁面購買下單。如果活動(dòng)有多個(gè),部分軟件將默認(rèn)詞以輪播的形式展出,同樣也是達(dá)到了加強(qiáng)了宣傳效果,促進(jìn)用戶了解消費(fèi)。

3. 當(dāng)前信息類

上述兩類只針對單一內(nèi)容進(jìn)行搜索,但當(dāng)搜索內(nèi)容多元化的時(shí)候,便可以將搜索信息進(jìn)行代入,引用當(dāng)前信息,進(jìn)行n+1次搜索加速系統(tǒng)篩選顆粒度。

如高德地圖app,用戶查找一個(gè)地點(diǎn)后,再對該點(diǎn)附近的地點(diǎn)展開搜索,使得搜索結(jié)果更加精細(xì)準(zhǔn)確。

02 頂部搜索icon

除了頂部文本框的搜素,頂部還有純粹的圖標(biāo)搜索,雖然都是頂部搜索入口,但兩者并不相同。當(dāng)app采用搜索icon的設(shè)計(jì),可以減少頁面排版空間,搜索功能相對來說沒有那么重要。

設(shè)計(jì)者的希望用戶先從中上部瀏覽頁面內(nèi)容,瀏覽完畢后,當(dāng)用戶有其他需求,從頂部開始排查時(shí),按照通常閱讀習(xí)慣,從左往右依次看過去,最后才到搜索icon,所以一般搜索icon都是放在頁面的右上角。

相對于頂部搜索框,頂部搜索icon是對搜索入口的一種弱化,設(shè)計(jì)時(shí),希望用戶先瀏覽完頁面的所有內(nèi)容,再進(jìn)行搜索操作。

比如螞蟻財(cái)富,主要是通過向用戶提供理財(cái)服務(wù)、行情介紹,進(jìn)而促進(jìn)用戶下單,相對于淘寶餓了么此類app而言,用戶的搜索目的沒有那么明確。

不過對于搜索icon的選擇,建議還是越明顯越好,讓用戶一看就知道是搜索功能,大多數(shù)產(chǎn)品使用的都是放大鏡icon,不過為了表現(xiàn)特色,每個(gè)設(shè)計(jì)師多多少少會(huì)在大小粗細(xì)顏色等細(xì)節(jié)進(jìn)行修改美化,但千萬不要過度設(shè)計(jì)。

03 底部tab欄

那么除了頂部可以讓搜索入口既顯眼又無存在感,哪里也可以達(dá)到這種效果呢?

那就是頁面底部tab。

底部tab設(shè)置為搜索,說明在這里搜索是該場景下的主要功能之一。用戶在任何時(shí)間都可以進(jìn)入搜索頁面,一般偏內(nèi)容類的app多些。這類app的頁面功能較少,目的性較強(qiáng),搜索會(huì)作為一個(gè)底部tab出現(xiàn),比如小說閱讀器等;

這類搜索入口外面可布置的內(nèi)容較多,可將熱門搜索展示在入口頁面,給用戶推薦一些熱門搜索內(nèi)容,幫助用戶思考,增加更多可能性,拉長用戶在此app的使用時(shí)間。

推薦熱詞的設(shè)置和默認(rèn)詞類似,但是可以找不同的是,一般來講,熱詞對字?jǐn)?shù)有一定限制,相對簡潔精短,那么默認(rèn)詞占長度優(yōu)勢,可以描述的更加詳細(xì)。

但如果此時(shí)app底部導(dǎo)航已經(jīng)含有四個(gè)及以上的更重要的功能tab,那么就無需再將搜索功能加入,以防tab過多,影響用戶使用感受。

那么,當(dāng)我們對以上搜索入口進(jìn)行設(shè)計(jì)時(shí),要考慮哪幾點(diǎn)呢?

1. 搜索入口要足夠明顯

搜索入口主要是讓用戶快速進(jìn)行搜索操作,那么搜索框的位置需要足夠明顯,讓用戶在頁面內(nèi)可以第一瞬間捕捉到。

2. 搜索入口的樣式設(shè)計(jì)

當(dāng)一個(gè)搜索入口擺在頁面,除了文字,用戶如何知道這是一個(gè)搜索框呢?

最好是一個(gè)顯而易見的查找圖片,調(diào)查發(fā)現(xiàn),多數(shù)app做這個(gè)功能時(shí),都選用了放大鏡圖標(biāo),首先放大鏡意味著搜索,這一印象已經(jīng)深入人心;其次這一設(shè)計(jì)簡潔明了,符合搜索入口的設(shè)計(jì)要求。

調(diào)研放大鏡圖標(biāo)時(shí),桃浪注意到了一點(diǎn),幾乎所有的放大鏡icon,它的把手都是沖著右下角,我認(rèn)為,這可能是在模擬多數(shù)人用放大鏡去找東西這一動(dòng)作,當(dāng)然左撇子的朋友不要抓住我這一點(diǎn)討論哦~大家有什么不一樣的想法也可以在下面留言,我們一起討論~

3. 新增除文字以外的其他搜索字符

隨著科技的發(fā)展,我們使用手機(jī)等移動(dòng)產(chǎn)品時(shí),已經(jīng)開始運(yùn)用語音,圖片等語言方式,來更快速的表達(dá)想法。搜索也是如此,增加圖片、語音等其他搜索入口,可以增加搜索效率,提升用戶體驗(yàn)。比如用戶不方便打字時(shí),可以通過語音進(jìn)行搜索;在搜索一些無法用言語表達(dá)清楚的數(shù)據(jù)時(shí),可以發(fā)送圖片智能識別匹配。

4. 風(fēng)格高效簡潔

搜索入口的職責(zé)就是幫助用戶快速使用搜索功能,注重簡單高效,如無特殊要求,則不需要繁瑣的設(shè)計(jì),只要將搜索框或搜索圖標(biāo)等基礎(chǔ)內(nèi)容展現(xiàn)出來就足夠了,裝飾過多反而影響用戶使用。

5. 搜索按鈕

貫徹一切從簡、高效的原則,調(diào)研下來我發(fā)現(xiàn),很多搜索入口其實(shí)已經(jīng)隱藏了搜索按鈕,取而代之的是輸入法的回車鍵,那么從用戶的使用角度來看,相對于還需要點(diǎn)擊搜索按鈕進(jìn)行搜素,直接利用輸入法的回車鍵觸發(fā)搜索條件,簡化了用戶的操作動(dòng)作,相對來說更加便捷高效。

 

作者:桃浪;公眾號:桃浪產(chǎn)品日記

本文由 @桃浪 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!