界面設計1:移動端搜索設計

在不同的APP或者不同的場景下搜索入口有著不同的表現形式,具體的表現形式取決于產品對搜索功能權重的定義,如果說在某一場景下搜索功能是用戶常用的核心功能那么他在界面上所表現出來的權重就要高些,反之則低些。


1:搜索入口

下圖是常見的搜索功能的入口形式,他們的權重從左到右依次降低,我將對它們進行精細分析。

圖片發自簡書App


方式一:如下圖APP Store的搜索入口

圖片發自簡書App
搜索放在標簽欄上作為一個獨立的功能模塊,它的功能層級是最高的。不管用戶操作到哪里都可以隨時進入搜索頁面,這樣的搜索入口通常用在搜索場景非常多的內容型APP上,方便用戶在任何時候快速進入搜索頁面。


方式二:搜索框外漏在nav bar上

圖片發自簡書App

這樣的形式有著兩個設計的關鍵點:

關鍵點一:搜索框外漏在頂部導航條上

搜索框直接外漏在導航條上是為了突顯該功能,這一功能往往是用戶在該頁面非常核心的操作任務,類似天貓京東這類電商型app,通常情況下用戶都是帶著明確目的來購買東西的,那么他們采取的最快最直接的方式就是搜索。

關鍵點二:在向上滾動界面時,搜索框一直懸停在頂部

這樣做的場景是這樣的,在用戶滾動頁面尋找內容時,可能并不能找到自己想要的內容,搜索框一直懸停一是為了暗示用戶可以進行搜索,二是為了讓用戶在想搜索時快速觸發搜索

方式三:出現在NAV BAR下面,默認隱藏或顯示

圖片發自簡書App

如上圖是微信在聊天頁面和通訊錄頁面的搜索入口,初始化狀態時聊天頁面的搜索框是不出現在用戶的可視范圍內的,當頁面下滑時搜索框才出現,而在通訊錄頁面里搜索框是默認出現在用戶的可視范圍內的。

分析:微信在最近聯系人和通訊錄上搜索框的默認狀態不同,這很好地詮釋了這兩種場景下的搜索功能的權重。最近聯系人頁面上的搜索入口顯得更加隱蔽,因為在這個頁面下用戶產生搜索的場景很少,把其隱藏簡化了界面的元素,提升了界面的美觀性。

方式四:通過點擊icon觸發搜索

圖片發自簡書App

如上圖今日頭條的搜索的入口,通過點擊右上角的搜索icon進入搜索頁面:

分析:在界面權重上,這樣的方式相對于以上三種方式來說顯得較弱一點,因為在這樣的場景下用戶使用搜索的概率并不是很高,如果把搜索外漏就會占據更多的屏幕空間,破壞界面的權重等級和美觀性。

總結:依據用戶的需求場景,搜索入口放在不同的位置,如果說在該頁面搜索是一個主要的功能,我們就應該去突顯它,提升它在界面上的權重,反之則減輕它的權重。

2:搜索中間頁

搜索中間頁本來應該是一個輕量化的頁面,用戶在這里輸入內容進行搜索即可。但隨著運營需求的擴張,這個頁面逐漸成為了一個運營重災區,多了很多推薦的內容。我將從“輸入框提示信息、搜索分類、搜索歷史、搜索推薦、搜索輸入、搜索建議”等方面分析一下這個頁面的設計。

1. 輸入框提示信息

圖片發自簡書App

搜索框內的提示信息通常是提示用戶當下可以搜索什么樣的內容,如上圖bilibi的搜索提示,告訴用戶可以進行“視頻、番劇、UP主或者AV號”的搜索,這樣的提示信息對用戶也是一種良性的引導,給用戶提供了一個心理預期,同時也對用戶隨意輸入關鍵詞造成無結果的傷害體驗的可能進行了限制。例如一個房產APP,搜索框內提示輸入樓盤或小區名,如果沒有這樣的提示有的用戶可能就會去輸入價格去篩選房源,這句提示語很好地降低了這樣的風險。

但隨著人們對APP使用的熟悉,用戶在這里的認知負擔基本消除,運營人員逐漸搶占了這塊地方,這句話變成了內容的推薦或者產品的Slogan,這些推薦的內容可以是運營人員手動維護的也可以是依據用戶的購買和行為習慣進行推薦的。如上圖右邊是淘寶的搜索提示,搜索框的文案變成了“紅人最愛潮牌名服”,這就是運營人員在為特定內容進行導流。

2. 搜索分類

在內容型APP中搜索時通常會對內容進行分類搜索,這是為了幫助用戶更精確地找到相關內容,分類的操作可以發生在搜索前也可以發生在搜索后,如下圖是“淘寶、微信、網易云音樂”搜索分類的方式,我將分別對他們進行分析。

圖片發自簡書App

淘寶是將搜索分類前置,默認搜索寶貝,點擊后彈出浮層進行切換。這樣的方式存在一個明顯的缺點就是由于該入口所占空間位置不顯著,會導致用戶感知太弱。 這樣的方式通常用在用戶大多數情況下只搜索某一分類的內容,如淘寶這樣,用戶大部分的搜索場景都是在尋找寶貝。

微信默認搜索所有內容,將分類通過三個很顯著的入口放在搜索框下方,當點擊某一分類時跳轉到該分類的搜索界面,同時搜索框的文案以及搜索界面的內容發生相應變化,提示用戶搜索范圍被改變。這種方式通常用在這些分類搜索的場景都很常見時,它的缺點在于,從界面表現形式來看,這三個分類更像是三個功能的入口,他們與搜索框聯系得不是很緊密,很多用戶最開始使用時并不知道點擊這些分類是進行搜索范圍的限制。經測試3個從未使用過該功能的用戶,他們都認為點擊朋友圈后就是進入朋友圈,點擊文章后就是顯示所有文章。

網易云音樂是將搜索分類進行后置了,在下文關于搜索結果的展示我會分析它的優劣勢。

3.搜索歷史

搜索歷史記住用戶的足跡,方便用戶快速向以前搜索過的內容進行轉換。設計上我們需要注意的一點就是需要把搜索歷史和搜索推薦區分開來,在位置上,盡量讓搜索歷史靠近搜索框(如下圖),因為從認知心理學上來講,越靠近搜索框的內容越能表示它是搜索歷史。在表現形式上,搜索歷史和搜索推薦盡量采用不同的表現形式。搜索歷史伴隨的交互操作有刪除單條或者清空搜索歷史。但我們往往會被運營強制將搜索推薦放在上面。

圖片發自簡書App

4. 搜索推薦

這里的搜索推薦通常有三種來源:

第一種:按照用戶的搜索熱度進行推薦;

第二種:運營手動配置;

第三種:按照搜索行為進行計算和推薦;

它存在的目的主要有兩個:

一是挖掘用戶的潛在需求,讓用戶更快地找到想找的內容;

二是作為運營位為特定的內容導流。

建議:不要漏出太多的推薦內容,畢竟它帶有一些運營和廣告性質,用戶的接受度并不會很高。

在界面上讓推薦內容和搜索歷史有明顯的區分,方便用戶在形式上一眼就能區分出搜索歷史和推薦內容。盡量推薦一些對用戶有真正價值的內容。


5. 搜索輸入

受移動端操控方式的限制,在輸入內容時存在兩個明顯的痛點:“修改內容”和“輸入速度”。

關于修改內容:當用戶想更改語句中一部分文字時,將光標移動到想要更改的地方是一件很難的事,點擊操作真的很令人發狂,通常情況下我寧愿重新輸入。但是針對這一點搜狗輸入法做了一個很人性的交互,當用戶按住鍵盤左右滑動時就能移動光標(如下圖)。

圖片發自簡書App

關于輸入速度:很早之前偶然間發現了UC瀏覽器在輸入文字時的一個交互功能,如下圖所示,當輸入文字后,用戶可以將搜索建議的詞語直接加入到搜索框中然后繼續輸入文字。這樣的需求場景在很常見,比如我想搜索“交互設計師的前景”,當我輸入交互二字后就會有“交互設計”的搜索建議,點擊搜索建議后面的箭頭將這個詞直接加入搜索框,然后就出現了“交互設計師的前景”的搜索建議,點擊搜索建議后進入搜索結果的頁面,這個過程中我少打了很多字,對我的搜索速度有很大的提升。

圖片發自簡書App

6.搜索建議

當用戶輸入內容后,搜索框下面出現了眾多的搜索建議,這些搜索建議是為了幫助用戶快速向目標進行轉化,如下圖是京東的搜索建議,當我輸入畫框后,一系列畫框的搜索建議就出來了,它還有一個亮點就是在此提供了細化篩選條件,畫框后面緊跟了“長方形、實木、正方形”等關鍵的篩選條件,為用戶省去了到結果頁進行篩選的步驟。

圖片發自簡書App


3:搜索結果

搜索結果背后的邏輯決定了用戶是否能找到準確的內容,搜索結果是搜索過程中最關鍵的點,結果的準確性確定了用戶體驗的好壞,我將從“搜索結果的形式、搜索結果的操作、搜索結果的分類、搜索結果的排序、搜索結果的算法”等方面來對搜索結果進行分析。

1. 搜索結果的形式

搜索結果一般分為兩種,一種是所見即所得,用戶輸入內容后出現在搜索框下面的搜索建議就是搜索結果,這種搜索通常出現在一些輕量化的APP中,因為搜索建議對應的就是唯一的搜索結果,如下圖微信的搜索一樣。

圖片發自簡書App
第二種形式就是一個關鍵詞對應了多個搜索建議,每個搜索建議又對應了多個搜索結果,當用戶點擊搜索后進入了一個專門的搜索結果頁,如下圖京東的搜索一樣。
圖片發自簡書App

2. 搜索結果的操作

依據用戶的需求目的,在搜索結果的列表上我們可以外漏用戶大部分情況下會采取的操作,比如說視頻類網站,用戶搜索到某一內容后,最常采取的操作就是播放,我們就可以把播放按鈕外漏,縮短用戶的操作路徑(如下圖愛奇藝的搜索結果頁)

圖片發自簡書App

3. 搜索結果的分類

通常的分類方式是tab切換和卡片,以下是微信和網易云音樂的分類。

圖片發自簡書App

這兩種方式有各自的應用場景,TAB切換主要應用在搜索結果有固定的幾種分類,并且通常的情況下搜索結果都有很多的內容,如上圖的網易云音樂,每一個分類都有很多的搜索結果,如果它采用卡片式的瀑布流布局,用戶需要不停往下翻才能看到第二種分類的內容。卡片式主要運用在搜索結果的內容不多,如微信這樣的情況,每一類結果并不是很多,卡片式的瀑布流布局能讓用戶快速定位到自己想要的內容,如果這里用TAB切換就很尷尬了,因為每一類的內容都很少或者很多類里根本沒有內容,這樣的用戶感受就不好了。

4. 搜索結果的排序

搜索結果的排序是一個比較復雜的工作,里面涉及了很多的算法邏輯,但是一般的垂直內容型APP并沒有這么復雜的算法在里面,就是按照搜索的關鍵字去一一匹配。

圖片發自簡書App

如上圖是說我在QQ閱讀輸入一個“男”字,然后就給我建議第一個字是“男”的所有可能的結果,當第一個字匹配完后就匹配第二個字,這樣以此類推。他們的整體順序就是按照匹配關鍵字的先后進行排列的。

我們通常可以看到大量的內容按照特定的邏輯順序排列,有的順序用戶可以在篩選器中設置,比如電商app中的,按價格高低排序,銷量多少排序等等,有的則是根據業務原因排序,用戶不能改變,總體來說每個app都有自己特定的邏輯順序。在這個階段的搜索欄,通常的交互方式為上滑隱藏。當搜索結果出現異常的時候?會怎么樣呢?(不考慮404)

圖片發自簡書App

1.搜索結果零匹配,會出現一些相關詞組選項,這些詞組通常是你給出的搜索內容的分詞。

2.當你打錯字的時候,結果頁優先顯示正確詞組的匹配內容。但有個前提是,其他字或詞要與相關內容匹配度非常高,這樣才能被計算出來。


5:搜索結果的算法

很多情況下用戶使用搜索功能的目的并不明確。隨著互聯網的高速發展,手機變得越來越重要,功能很多時候就不再是簡單的功能本身了。長期刷微博的小伙伴們會發現,熱搜模塊內容的變化:從鹿晗關曉彤公開戀情,到李小璐夜宿緋聞,到space x發射成功,熱搜就像是時代的風向標,每個人都害怕錯過熱點,仿佛會被這個世界淘汰。在這種現象的背后,究竟是用戶精神消費過剩?還是搜索機制的升級?我們習慣于把某個功能固定于在某個意義層面上而難以跳脫,設計搜索時,我們假定用戶為進行帶有強烈目的性搜索行為,但很多情況下,不曉得干嘛的用戶數量也非常龐大。熱搜是一種非常棒的分流手段,我們也可以遞進式拓展相關的模塊,比如,搜索欄下可以放置經常訪問博主/頭條號/專欄...入口,往大膽了想,在電商app中,針對于經常購買,瀏覽固定商家的用戶,則可以在搜索過程中變更某個固定模塊為推送固定商家,類似在售商品的信息,根據用戶的行為特點,讓內容定制化上升為模塊定制化,打破app模塊分配固定、難調配的局面。

搜索將會越來越智能,算法首當其沖。首先介紹一下搜索的物理邏輯:用戶輸入信息,系統根據輸入的信息匹配相對應的內容,再按照特有的rank邏輯進行排序展示。這個表述只是簡單的介紹,如果想要知道具體的原理,還需要深入到搜索詞庫的建立。每個搜索系統都有一個詞庫和一個索引庫,他們之間是可以進行快速的關聯匹配的,詞庫就好比一本書,索引庫就好比目錄,當你心里有具體想翻閱的某個內容時,就可以根據目錄找到頁碼,匹配到相關內容。實際上“查書”這樣的動作就已經構成一個簡單的搜索過程了。那么,機器檢索復雜在哪里?這邊要介紹一個新的概念:分詞。

圖片發自簡書App

請看上圖,你會發現,這個文本結構非常的口語化,“女兒高高胖胖穿什么好看”這更像是一個問句,很明顯用戶對于內容沒有明確的預期。如果用這樣口語化的描述性文本在淘寶中進行搜索,會出現什么樣的結果呢?結果將會是沒有匹配。

既然這樣搜不到,那我們換個思路來吧,“女兒高高胖胖穿什么好看”,是不是可以換成“高個的女孩穿顯瘦服裝”這樣的文本進行檢索呢?我們來試試看。

圖片發自簡書App

還是沒有,那我們干脆再簡化字段擴大搜索范圍吧,換成“高個女顯瘦”來搜索呢?

圖片發自簡書App

結果匹配到了漂亮時尚的絲襪,搜索完成。

回頭再梳理一遍過程,我們從“女兒高高胖胖穿什么好看”這樣的非結構化文本到“高個的女孩穿顯瘦服裝”再到“高個女顯瘦”的簡化過程,就是一次人工分詞操作。如果在足夠智能的搜索引擎上,這些都可以自動完成。分詞,簡單表述為:拆分濾用字符串。例如,三國的軍事家司馬懿。可以拆分為“三國”“的”“軍事家”“司馬懿”這些詞組。那在分詞系統中,“的”“是”“在”是常見的停用詞,通常會被直接pass掉,詞組進一步拆分為“三國”“軍事家”“司馬懿”。經過這樣的處理,非結構化的內容就會轉化成結構化的,可匹配度高的詞庫,可以輕易的匹配到想了解的內容。

說到詞庫,得介紹一下搜索系統匹配關鍵詞的規則“TF-IDF算法”,假如用戶在百度上搜索蘋果,那蘋果有很多相關的信息文檔,怎么才能準確匹配呢?系統需要提取這些信息文檔的關鍵詞,感興趣的小伙伴可以百度公式。系統計算出文檔里每個詞的TF-IDF值后,然后按降序排列,取排在最前面的幾個詞與搜索詞匹配就可以得到準確的匹配結果,不會出現我搜的是蘋果,出來的是青蘋果樂園。進一步的還有Lucene的打分系統,讓好的,召回率高的內容優先展示。還有就是詞條歸一,其實就是將同一詞義的詞組歸為同一個詞,比如蘋果的別稱有“薔薇科蘋果屬果實”“柰”“滔婆”“apple”“りんごちゃん”等等,這些詞組說的都是同一個意思,所以詞條歸一就是將這些詞組歸為同一類別,擴大匹配范圍,提高關鍵詞召回率。

我們在搜索完成后,會看到搜索結果會按照特定的順序排序,再進行展示。有些產品中,展示的順序是否能夠切合業務目標,會直接影響到產品的收益。所以,制定展示邏輯的算法要高度理解業務內容,實時回歸業務進行規則的更新。


最后總結

1:常見的搜索入口主要有四種形式:標簽欄;導航欄;導航欄下面;搜索iocn。

2:搜索中間頁包含“輸入框提示信息、搜索分類、搜索歷史、搜索推薦、搜索輸入、搜索建議”等方面信息。

3:搜索結果背后的邏輯決定了用戶是否能找到準確的內容,搜索結果是搜索過程中最關鍵的點,結果的準確性確定了用戶體驗的好壞。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,501評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,673評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,610評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,939評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,668評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,004評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,001評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,173評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,705評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,426評論 3 359
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,656評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,139評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,833評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,247評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,580評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,371評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,621評論 2 380

推薦閱讀更多精彩內容

  • 在不同的APP或者不同的場景下搜索入口有著不同的表現形式,具體的表現形式取決于產品對搜索功能權重的定義,如果說在某...
    Perry阿力閱讀 1,861評論 8 47
  • 搜索功能無論在web端還是移動端,都是產品中十分重要的功能。文章主要從用戶體驗和產品功能、策略角度來分析,提出一些...
    史蒂芬宋閱讀 2,836評論 4 44
  • 今天10點半上床睡覺。 電梯說的,在2018年設定一個大方向和小目標。然后踐行。 一,多增加自己的思維模型。 二,...
    tobesaiyi閱讀 391評論 0 0
  • 一個情緒化的人和一個冷靜的人最大的區別是什么?有的人會說性格不同。有的人會說星座不同。。。總之解釋每個人的表現都可...
    逄格亮閱讀 371評論 1 2
  • 2016年的最后一個晚上,我十一點多上床睡覺,過了一段時間還沒入睡,突然聽到窗外傳來響亮的煙花聲,以及不知道從哪里...
    _水兮_閱讀 545評論 9 10