搜索界面設(shè)計思考
你有沒有曾思考過這樣一個問題:為什么搜索框總是在頂部而輸入框卻總在下方?針對這個問題,作者將自己的思考整理如下。
Quora上有一個很有趣的問題:為什么搜索框總是在頂部而輸入框卻總在下方?
有設(shè)計師給出了一些解答,譬如搜索框應(yīng)易尋、大部分人會首先使用搜索等。而我認(rèn)為,在功能模塊眾多,信息架構(gòu)復(fù)雜的當(dāng)下,搜索這一組件的重要性將愈發(fā)突出。
在近期參與的產(chǎn)品中,我經(jīng)歷了多個搜索界面的設(shè)計,借此機會,整理一下搜索設(shè)計的一些思路。
一、常用搜索組件分解
入口
從左至右:微博 谷歌 唯物
- 獨立標(biāo)簽頁 微博9.0改版中,原本用于發(fā)微博的標(biāo)簽頁中間位置改為“發(fā)現(xiàn)”頁,這一改動將內(nèi)容產(chǎn)生權(quán)重降低,內(nèi)容消費權(quán)重上升。發(fā)現(xiàn)標(biāo)簽頁正是獨立標(biāo)簽頁類型的搜索入口,這一形式適用于坐擁龐大內(nèi)容的成熟SNS產(chǎn)品,例如抖音、推特也使用了此樣式,根據(jù)產(chǎn)品的不同,搜索標(biāo)簽頁的架構(gòu)也各有不同;
- 搜索框式 除了百度和谷歌,一些資源聚合類網(wǎng)站依然使用此樣式,譬如圖片分享網(wǎng)站Flickr。在寸土寸金的移動端,搜索框一般會搭配推薦內(nèi)容出現(xiàn);
- icon式 搜索功能需要較好的功能可見性,但不代表它需要占據(jù)較高視覺權(quán)重,此外,“放大鏡”是一個成熟而準(zhǔn)確的意符,作為icon,用戶很容易理解“這里可以進(jìn)行搜索”這一含義。當(dāng)你希望提供搜索功能,又不想打破界面沉浸感時,在右上角提供一個icon作為入口會是較好的選擇。
中間頁
用戶準(zhǔn)備輸入時展開的臨時界面,常見于移動端,桌面端多為下拉菜單。
左:美團(tuán)? 右:唯物
- 歷史記錄 有些產(chǎn)品中也會以“上次使用項”呈現(xiàn);
- 熱門推薦 當(dāng)你需要引導(dǎo)用戶時,推薦項是一個較好的交互方式。此外,歷史記錄和熱門推薦常組合使用。
引導(dǎo)語
用于揭示搜索結(jié)果。
從左至右:推特 三星Bixby 淘寶
- 功能頁本身反映 推特的發(fā)現(xiàn)頁會根據(jù)用戶熱點進(jìn)行模糊推薦:“這會是你想搜索的內(nèi)容嗎?”
- 中間頁展現(xiàn) 表面上看,中間頁與功能頁沒有太大區(qū)別。實際上兩者不同主要在交互邏輯上,中間頁是搜索時產(chǎn)生的臨時頁面,而功能頁則是獨立模塊。
- 文案 主要有兩種方式,一種是使用引導(dǎo)語鼓勵用戶使用搜索。另一種則是根據(jù)用戶數(shù)據(jù)推斷用戶可能感興趣的搜索目標(biāo),淘寶、網(wǎng)易云音樂都使用了這一形式。
搜索中
左:谷歌? 右:今日頭條
- 搜索聯(lián)想/即時建議;
- 過渡動畫 搜索通常需要較長響應(yīng)時間,可以在搜索過程中添加過渡動畫。
結(jié)果呈現(xiàn)
大部分app會將多種方式組合使用,這里只需要一個釘釘?shù)慕Y(jié)果頁作為例子就可以了
釘釘搜索結(jié)果頁
- 多維度展示;
- 通過篩選導(dǎo)航;
- 關(guān)鍵字高亮;
- 結(jié)果糾錯(模糊匹配)。
順便一提,釘釘中用戶輸入的同時會動態(tài)呈現(xiàn)搜索結(jié)果。也就是說,它的中間頁和結(jié)果頁相同,在下文將會分析此功能。
二、實際案例
在項目中,搜索功能的設(shè)計常包含多個元素復(fù)合使用的情況,這也是其難點所在,而解決方案仍然是基于使用情景進(jìn)行設(shè)計。
下面以我近期產(chǎn)品(教育類)為例,探討一下設(shè)計思路。(考慮保密問題,與實際產(chǎn)品有一定出入)
視頻模塊搜索界面設(shè)計
在中后臺產(chǎn)品的搜索設(shè)計中,難點主要在搜索和篩選的優(yōu)先級取舍,我們要做的是讓用戶快速完成目標(biāo)任務(wù)。此模塊提供視頻內(nèi)容給教師用于課堂展示,一個常見的情況是:教學(xué)視頻的標(biāo)題通常以數(shù)字進(jìn)行分類,如“第一課”、“No.3+課程標(biāo)題”等形式,這也意味著,作為使用者的教師未必能記得搜索目標(biāo)名稱。
因此,此界面篩選優(yōu)先于搜索,而軟件本身可讀取當(dāng)前班級的科目信息,預(yù)先進(jìn)行一級篩選,此外,“上次使用”功能相當(dāng)于模糊檢索結(jié)果,大概率減少用戶操作路徑。搜索結(jié)果的呈現(xiàn)則使用關(guān)鍵字高亮的方式,易于閱讀。
現(xiàn)實中龐大的資料、檔案往往伴隨著復(fù)雜而有序的排列方式。譬如,電視劇中表現(xiàn)警察檢查檔案的場景時,會展現(xiàn)一大排資料架,各類文件按照時間或A-Z的順序排列,警察們從架子上逐個挑選,抱下一堆資料反復(fù)查看。
然而在軟件中,用戶不需要做這樣的事情,他們往往很明確自己的目標(biāo):要么是資料的名稱,要么是資料相關(guān)者——總之,用戶所希望的是他們在搜索框中輸入這樣一個關(guān)鍵詞,就直接得到想要的結(jié)果,而翻找資料的工作,應(yīng)當(dāng)由程序來完成。
資料檢索頁的條件篩選
此界面中,搜索框的大小反映了其優(yōu)先級。而條件篩選未必沒有意義——它以下拉菜單的形式呈現(xiàn),當(dāng)搜索框中無內(nèi)容時,它承擔(dān)模糊檢索的功能,在搜索時,它承擔(dān)中間頁的功能,而當(dāng)用戶收起篩選菜單時,意味著搜索條件被清空,用戶可以再次搜索所有內(nèi)容。
篩選組件中標(biāo)簽的交互
模糊檢索這一訴求也應(yīng)得到滿足。資料模塊與視頻模塊不同之處在于:我們難以預(yù)測用戶檢索內(nèi)容,并依此簡化操作。因此我采用“熱門”作為二級標(biāo)簽列表,將常用類目作為內(nèi)容,當(dāng)用戶點擊“熱門”標(biāo)簽中對象(乙瑛碑)時,搜索該對象并高亮顯示結(jié)果,采用提供線索的方式進(jìn)行篩選模塊設(shè)計。
最后,以國民應(yīng)用微信的搜索功能分析作為結(jié)尾。
微信搜索中間頁
點擊右上角搜索icon后,用戶便打開了微信搜索中間頁??梢钥吹酱隧摬捎脴?biāo)簽頁形式劃分了六個模塊,用戶點擊后可以搜索特定模塊,另一方面,這些模塊名稱也起到引導(dǎo)語的作用,揭示搜索結(jié)果。
搜索中&搜索結(jié)果頁面
搜索中與搜索結(jié)果是同一頁面,在用戶輸入的同時動態(tài)顯示結(jié)果,并以多維度分類展現(xiàn)。這一搜索方式適用于搜索本地資源(內(nèi)部搜索),畢竟外部搜索需要較長響應(yīng)時間,QQ、釘釘也采用了類似的策略,順便一提,QQ采用了同時即時顯示內(nèi)部和外部結(jié)果的策略,但外部結(jié)果加載耗時較長,因此放在內(nèi)部結(jié)果下方。
最下方的“搜一搜”則是微信的外部搜索入口,此外,我們知道“發(fā)現(xiàn)”標(biāo)簽頁中也有搜一搜的入口,并且,此處的搜一搜中間頁除了六個標(biāo)簽頁之外,還有微信熱點這一功能。
“發(fā)現(xiàn)”標(biāo)簽頁中的搜一搜
從進(jìn)入微信到搜一搜結(jié)果有兩種路徑
從程序邏輯上來說,他們都是搜一搜模塊,只不過有不同方式可以到達(dá),但對用戶來說,這是兩種不同的功能。搜索按鈕中,搜一搜結(jié)果是對內(nèi)部搜索的補充,不將多余的內(nèi)容呈現(xiàn)給用戶,保持克制,而“發(fā)現(xiàn)”中的搜一搜,則是將微信龐大的內(nèi)容展現(xiàn)給用戶。
參考文章:
《深入理解搜索和篩選功能在產(chǎn)品設(shè)計中的異同》
本文由 @SekiM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
感謝
以案例來講解問題,真的很棒,匠心一枚,感謝分享
文章寫的有實用價值。雖然每一個部分都講的比較精簡。為啥沒人評論。