[系列]APP設計之三:搜索

2 評論 16898 瀏覽 112 收藏 5 分鐘

無論是在app還是在web端,搜索都是一個發現內容的重要方式。與web端不同,app上的搜索功能在設計方面有自己獨特的展現方式。

綜合了解了豌豆莢、優酷、京東、天貓等一些app的搜索功能后,個人感覺app的搜索功能可以參照以下流程進行設計:

一、搜索功能的呈現:

在有搜索功能的app中,搜索往往會作為一個公共功能出現在幾乎所有頁面,就像在web端出現在導航類似。但與web端不同的是,搜索功能在不同的頁面會有不同的展示方式。

  • 如果一個app的核心在于搜索,比如豌豆莢,或者搜索的使用率非常之高,則在app的首頁可以搜索框的形式展現,這樣能夠吸引用戶足夠的注意力。
  • 如果搜索只是輔助功能,則可以搜索圖標形式呈現,提示用戶軟件有搜索功能。

當然,在app的其它頁面,搜索功能一般會以圖標的形式呈現,以節約界面空間。

48923-872de810564548bd

二、搜索功能的激活:

點擊搜索框或者搜索圖標后,app將會激活搜索功能。搜索功能將會以以下方式呈現:

1.在新界面打開。如有必要,新界面中展示搜索歷史(未登錄展示本機搜索歷史,登錄展示賬號搜索歷史)、熱搜詞、推廣詞、廣告等。這些內容根據業務需要進行排序和組合。搜索歷史、熱搜詞、推廣詞等選擇后,被選擇詞作為搜索詞展現搜索結果。

48923-af3c0379dddcd95b

2.鍵入搜索詞。要允許多詞搜索;若有必要,提供關聯詞選項;若關聯選項有對應的核心操作,也可直接展現,可方便用戶直接進行操作。

48923-63aeb6bbd8c83acf

三、搜索結果的呈現

鍵入搜索詞進行搜索后,在本界面呈現搜索結果。在此界面,需要注意:

  1. 搜索結果根據業務不同展現不同內容。
  2. 搜索結果有可能會需要按照分類進行展示,需要考慮界面交互。
  3. 需要提供清除搜索詞的操作圖標,多數時候未“x”圖標。
  4. 允許在搜索結果頁面清除當前搜索此后再次搜索,不再打開新界面,當前界面再次展示新的搜索結果。

48923-95e8eadfdde2cc3c

四、其它事項:

  1. 短期內,如果不是為了凸顯自己的技術實力,不要添加語音搜索。測試了幾個語音搜索,準確率不高。準確率高的對發音及音量大小等有比較嚴格的要求。方言就更不要說了。
  2. 尊重設計規范。前面所說的關于搜索的流程在android和ios系統上都是可行的。只是在設計上盡量遵循各操作系統的設計規范比較好。雖然很多公司的用一套設計來支持這兩個操作系統。

最后,對于搜索這塊,在看了很多app之后,發現做得最好的是豌豆莢。對我來說,如果要做搜索,可以作為范本。

完。

#專欄作家#

岳山丘,微信公眾號:iamyueshanqiu,人人都是產品經理專欄作家,慕課網產品經理。兜兜轉轉好多年,一直在教育行業做產品。初始做內容,后來開始做WEB端。關注在線教育、互聯網金融(順便賺點小錢花)。最近一段時間開始研究移動APP產品,希望能夠多學習一些東西。

本文系作者授權發布,未經許可,不得轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 允許在搜索結果頁面清除當前搜索此后再次搜索,不再打開新界面,當前界面再次展示新的搜索結果。有沒有例子呀~

    來自福建 回復
    1. ??

      來自福建 回復