搜索界面設計思考

你有沒有曾思考過這樣一個問題:為什麼搜索框總是在頂部而輸入框卻總在下方?針對這個問題,作者將自己的思考整理如下。

搜索界面設計思考
搜索界面設計思考

Quora上有一個很有趣的問題:為什麼搜索框總是在頂部而輸入框卻總在下方?

有設計師給出瞭一些解答,譬如搜索框應易尋、大部分人會首先使用搜索等。而我認為,在功能模塊眾多,信息架構復雜的當下,搜索這一組件的重要性將愈發突出。

在近期參與的產品中,我經歷瞭多個搜索界面的設計,借此機會,整理一下搜索設計的一些思路。

一、常用搜索組件分解

入口

搜索界面設計思考
搜索界面設計思考

從左至右:微博 谷歌 唯物

  1. 獨立標簽頁 微博9.0改版中,原本用於發微博的標簽頁中間位置改為“發現”頁,這一改動將內容產生權重降低,內容消費權重上升。發現標簽頁正是獨立標簽頁類型的搜索入口,這一形式適用於坐擁龐大內容的成熟SNS產品,例如抖音、推特也使用瞭此樣式,根據產品的不同,搜索標簽頁的架構也各有不同;
  2. 搜索框式 除瞭百度和谷歌,一些資源聚合類網站依然使用此樣式,譬如圖片分享網站Flickr。在寸土寸金的移動端,搜索框一般會搭配推薦內容出現;
  3. icon式 搜索功能需要較好的功能可見性,但不代表它需要占據較高視覺權重,此外,“放大鏡”是一個成熟而準確的意符,作為icon,用戶很容易理解“這裡可以進行搜索”這一含義。當你希望提供搜索功能,又不想打破界面沉浸感時,在右上角提供一個icon作為入口會是較好的選擇。

中間頁

用戶準備輸入時展開的臨時界面,常見於移動端,桌面端多為下拉菜單。

搜索界面設計思考
搜索界面設計思考

左:美團  右:唯物

  1. 歷史記錄 有些產品中也會以“上次使用項”呈現;
  2. 熱門推薦 當你需要引導用戶時,推薦項是一個較好的交互方式。此外,歷史記錄和熱門推薦常組合使用。

引導語

用於揭示搜索結果。

搜索界面設計思考
搜索界面設計思考

從左至右:推特 三星Bixby 淘寶

  1. 功能頁本身反映 推特的發現頁會根據用戶熱點進行模糊推薦:“這會是你想搜索的內容嗎?”
  2. 中間頁展現 表面上看,中間頁與功能頁沒有太大區別。實際上兩者不同主要在交互邏輯上,中間頁是搜索時產生的臨時頁面,而功能頁則是獨立模塊。
  3. 文案 主要有兩種方式,一種是使用引導語鼓勵用戶使用搜索。另一種則是根據用戶數據推斷用戶可能感興趣的搜索目標,淘寶、網易雲音樂都使用瞭這一形式。

搜索中

搜索界面設計思考
搜索界面設計思考

左:谷歌  右:今日頭條

  1. 搜索聯想/即時建議;
  2. 過渡動畫 搜索通常需要較長響應時間,可以在搜索過程中添加過渡動畫。

結果呈現

大部分app會將多種方式組合使用,這裡隻需要一個釘釘的結果頁作為例子就可以瞭

搜索界面設計思考
搜索界面設計思考

釘釘搜索結果頁

  1. 多維度展示;
  2. 通過篩選導航;
  3. 關鍵字高亮;
  4. 結果糾錯(模糊匹配)。

順便一提,釘釘中用戶輸入的同時會動態呈現搜索結果。也就是說,它的中間頁和結果頁相同,在下文將會分析此功能。

二、實際案例

在項目中,搜索功能的設計常包含多個元素復合使用的情況,這也是其難點所在,而解決方案仍然是基於使用情景進行設計。

下面以我近期產品(教育類)為例,探討一下設計思路。(考慮保密問題,與實際產品有一定出入)

搜索界面設計思考
搜索界面設計思考

視頻模塊搜索界面設計

在中後臺產品的搜索設計中,難點主要在搜索和篩選的優先級取舍,我們要做的是讓用戶快速完成目標任務。此模塊提供視頻內容給教師用於課堂展示,一個常見的情況是:教學視頻的標題通常以數字進行分類,如“第一課”、“No.3+課程標題”等形式,這也意味著,作為用戶的教師未必能記得搜索目標名稱。

因此,此界面篩選優先於搜索,而軟件本身可讀取當前班級的科目信息,預先進行一級篩選,此外,“上次使用”功能相當於模糊檢索結果,大概率減少用戶操作路徑。搜索結果的呈現則使用關鍵字高亮的方式,易於閱讀。

現實中龐大的資料、檔案往往伴隨著復雜而有序的排列方式。譬如,電視劇中表現警察檢查檔案的場景時,會展現一大排資料架,各類文檔按照時間或A-Z的順序排列,警察們從架子上逐個挑選,抱下一堆資料反復查看。

然而在軟件中,用戶不需要做這樣的事情,他們往往很明確自己的目標:要麼是資料的名稱,要麼是資料相關者——總之,用戶所希望的是他們在搜索框中輸入這樣一個關鍵詞,就直接得到想要的結果,而翻找資料的工作,應當由進程來完成。

搜索界面設計思考
搜索界面設計思考

資料檢索頁的條件篩選

此界面中,搜索框的大小反映瞭其優先級。而條件篩選未必沒有意義——它以下拉菜單的形式呈現,當搜索框中無內容時,它承擔模糊檢索的功能,在搜索時,它承擔中間頁的功能,而當用戶收起篩選菜單時,意味著搜索條件被清空,用戶可以再次搜索所有內容。

搜索界面設計思考
搜索界面設計思考

篩選組件中標簽的交互

模糊檢索這一訴求也應得到滿足。資料模塊與視頻模塊不同之處在於:我們難以預測用戶檢索內容,並依此簡化操作。因此我采用“熱門”作為二級標簽列表,將常用類目作為內容,當用戶點擊“熱門”標簽中對象(乙瑛碑)時,搜索該對象並高亮顯示結果,采用提供線索的方式進行篩選模塊設計。

最後,以國民應用微信的搜索功能分析作為結尾。

搜索界面設計思考
搜索界面設計思考

微信搜索中間頁

點擊右上角搜索icon後,用戶便打開瞭微信搜索中間頁。可以看到此頁采用標簽頁形式劃分瞭六個模塊,用戶點擊後可以搜索特定模塊,另一方面,這些模塊名稱也起到引導語的作用,揭示搜索結果。

搜索界面設計思考
搜索界面設計思考

搜索中&搜索結果頁面

搜索中與搜索結果是同一頁面,在用戶輸入的同時動態顯示結果,並以多維度分類展現。這一搜索方式適用於搜索本地資源(內部搜索),畢竟外部搜索需要較長響應時間,QQ、釘釘也采用瞭類似的策略,順便一提,QQ采用瞭同時即時顯示內部和外部結果的策略,但外部結果加載耗時較長,因此放在內部結果下方。

最下方的“搜一搜”則是微信的外部搜索入口,此外,我們知道“發現”標簽頁中也有搜一搜的入口,並且,此處的搜一搜中間頁除瞭六個標簽頁之外,還有微信熱點這一功能。

搜索界面設計思考
搜索界面設計思考

“發現”標簽頁中的搜一搜

搜索界面設計思考
搜索界面設計思考

從進入微信到搜一搜結果有兩種路徑

從進程邏輯上來說,他們都是搜一搜模塊,隻不過有不同方式可以到達,但對用戶來說,這是兩種不同的功能。搜索按鈕中,搜一搜結果是對內部搜索的補充,不將多餘的內容呈現給用戶,保持克制,而“發現”中的搜一搜,則是將微信龐大的內容展現給用戶。

參考文章:

《深入理解搜索和篩選功能在產品設計中的異同》

本文由 @SekiM 原創發佈於人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議

Via www.woshipm.com

Ref. https://union-click.jd.com/jdc?d=ZKPlW2

推薦閱讀:

Spread the love

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *