熱門文章

      最新文章

      設計全方位搜索

      發布時間:2021-06-22 15:26:45

      您可以為每個實體構建一個單獨的搜索字段,或者您可以將它們全部合并到一個輸入字段中。這被稱為全方位搜索。

      全方位搜索是可以完全改變產品用戶體驗的功能之一。由于幾乎每個產品都具有搜索功能,因此絕對值得深入了解 Omni 選項。然而,由于搜索至少在表面上是一個帶有結果下拉菜單的平均輸入框,它看起來非常簡單。我向你保證,事實并非如此。

      我個人喜歡 我使用的產品中的全方位搜索,并且我自己構建了其中的一些。這樣做后,我發現網絡上關于它的可用資源少得驚人,這就是促使我寫這篇文章的原因。

      實體與屬性

      首先,快速術語概述。在搜索中,實體是您搜索的內容,而屬性是您搜索的內容。這可能會令人困惑,因為搜索詞可以同時出現。繼續前面的示例,您可以通過屬性“name”和“artist”來查找 Song 實體。但是您也可以通過屬性“藝術家姓名”和“歌曲”來查找藝術家實體。

      通常,實體將對應于數據庫中的一個表,而屬性將對應于該表的字段。

      全方位搜索的例子

      首先,讓我們看看全方位搜索的幾個很好的例子,以及它們如何影響產品。

      Spotify

      作為全方位搜索的典型示例,Spotify 非常擅長幫助您找到所需的內容,而且他們的結果頁面可能是最好的。

      在 Spotify 上,您可以查找 8 個不同的實體:歌曲、藝術家、專輯、播放列表、播客、劇集、個人資料和流派。你能想象這個應用程序在有 8 個輸入字段時會是什么樣子嗎?


      中等的

      不要停止閱讀來測試這個!:)

      在 Medium 上,您可以查找故事、人物、出版物和標簽。他們采用獨特的方法來顯示結果,我將在下面展示。


      完整故事

      這是我個人的最愛。如果您不知道,FullStory 是一個用于定性分析的會話記錄工具。在我看來,它是迄今為止最好的,全方位搜索是它的主要原因。

      FullStory 使用全方位搜索過濾器,它有大約 30 個過濾器。雖然您可以轉到過濾器 > 選擇過濾器 > 輸入您的查詢,但只需輸入您要查找的內容并讓全方位搜索找到它,就容易多了。

      輸入一個電子郵件地址,FullStory 會推薦使用該電子郵件的用戶。輸入一個 CSS 選擇器,他們會建議“點擊”。這就是全方位搜索的神奇之處——如果操作得當,您會感覺該應用程序可以讀取您的想法。


      設計全方位搜索

      可搜索實體

      為了構建全方位搜索,您需要做的第一件事是映射用戶可能正在搜索的實體。請記住:這不是他們搜索的內容 - 只是他們想找到的內容。

      您可能不確定什么是“實體”。例如,在 Google 云端硬盤上,您可以搜索 PDF、表格或文檔。這些是不同的實體嗎?雖然有一個我不會參與的技術討論,但根據經驗,如果所有候選人共享相同的屬性(例如文檔名稱、創建者、日期……),那么它可以被視為具有“類型”屬性的同一實體.

      可搜索的屬性

      選擇要搜索的實體后,讓我們選擇用戶可以搜索的屬性。不要試圖使用所有可用的屬性——這會降低性能并產生不好的結果。相反,僅使用您的用戶可能會使用的屬性。如果您不確定,請猜測,然后在發布后返回并查看您的用戶嘗試搜索的內容。

      示例:在 Spotify 上,每個藝術家都有一個“關于”屬性,您可以在單擊藝術家(一直在底部)后看到該屬性。但是,如果您嘗試將“關于”文本復制粘貼到全方位搜索中,您將找不到藝術家,因為 Spotify 不會通過“關于”屬性搜索藝術家,這是有道理的:不太可能有人會嘗試在任何合理的用例中通過它進行搜索。

      搜索行為

      您還需要在搜索中定義一些其他參數:

      子串位置:

      讓我們以 The Chainsmokers 為例。您認為應該使用以下哪些搜索詞找到它們:“連鎖店”、“連鎖店”或“吸煙者”?

      如果你三個都猜對了,那你就對了。但情況并非總是如此。讓我們嘗試尋找中等出版物值得注意的。如果您搜索“notew”,您會找到它,但如果您搜索“值得的”,則不會。

      這與數據的索引方式有很大關系,有三個主要選項可供選擇:

      1. 字符串的開始(例如“鏈”)

      2. 每個單詞的開頭(例如“chains”)

      3. 所有子字符串(例如“smokers”或“ainsmoke”)

      同樣,更多并不總是更好。選擇最適合您的用戶可能會搜索的內容。

      嚴格與模糊搜索

      用戶會犯錯。由于打字錯誤或拼寫錯誤,他們可能會輸入“the chansmokers”,而忽略了“i”。模糊搜索將捕捉到這一點。太模糊的搜索也會抓到很多垃圾結果。

      開始搜索

      大多數搜索在您輸入至少 2-3 個字母之前不會顯示結果。

      去抖

      我們打字很快。您不希望每次擊鍵都開始新的搜索,因為這對用戶來說似乎很緊張。您通常在擊鍵后等待 0.1 秒左右(不要讓我堅持那個數字),以確保用戶停止輸入。

      大寫

      關于這一點,不用多說。搜索的99%,應區分的敏感。

      分數和權重

      這部分有點復雜,可以單獨寫一整篇文章,但我會盡量解釋它的要點:

      在非常簡單的搜索中,搜索詞要么找到,要么找不到。1 或 0。使用更現代的搜索工具(Elasticsearch 是最流行的),每個結果都會根據子字符串的位置、準確性和一些其他參數獲得一個分數。

      除此之外,還可以對這些分數進行加權。假設您同時按曲目名稱和藝術家搜索歌曲。“年輕”一詞可以找到 Peter、Bjorn 和 John 的 Young Folks,也可以找到 Neil Young 的 Heart of Gold。然而,在尋找歌曲時,更應該重視歌曲名稱而不是藝術家(當然,當您尋找藝術家時,反之亦然)。

      顯示結果

      這就是樂趣開始的時候!結果可以以 3 種基本格式顯示:

      1. 快速預覽 — 顯示大約 10 個最佳結果的彈出窗口

      2. 結果摘要——一個完整的頁面,顯示每個實體的主要結果

      3. 所有結果 — 特定實體的所有結果


      并非所有應用程序都使用所有 3 種格式。上面顯示的 Facebook 示例確實使用了所有三個,但 Medium 跳過了“結果摘要”并從“快速預覽”轉到特定實體的“所有結果”。另一方面,Spotify 跳過“預覽彈出窗口”并在“結果摘要”頁面中顯示結果,然后允許“所有結果”向下鉆取。

      顯示結果時要考慮的其他事項

      • 單擊搜索時,在輸入之前,請考慮顯示“最近的搜索”或“熱門搜索”以便于選擇。

      • 例如,在顯示結果時,您可以按實體對它們進行分組,以便將歌曲與藝術家分開。另一種方法是通過搜索相關性來顯示它們,在這種情況下,您可以根據他們與查詢的匹配程度顯示一位藝術家,然后是一首歌曲,然后是另一位藝術家。這就是他們在 FullStory 中的做法,這對于他們的特定用例來說非常出色。這是有道理的,因為有很多實體,所以按它們分組意味著太多的結果。

      • 如果您選擇按實體對結果進行分組,您仍然需要決定是始終以相同的順序顯示它們以保持一致性,還是按相關性設置組的順序。

      • 根據您在前幾節中所做的選擇,您需要決定結果卡的外觀。如果您不按實體分組,則需要為每個實體設置圖標以方便使用。在其他情況下,您可能希望卡片上有 2-3 個屬性。例如,在專輯結果下,Spotify 會顯示藝術家姓名、專輯名稱和專輯封面。

      • 在您的結果中標記查詢字符串確實很棒,但它帶來了一個新的腦筋急轉彎:如果您的實體有 5 個可搜索的屬性,但結果卡只顯示其中的 3 個怎么辦?在這種情況下,您可能會找到結果但不會在卡片上顯示該屬性!一種替代方法是在卡片上設置一個“靈活”屬性,以便您始終顯示找到搜索詞的位置。在上面的示例中,這可能意味著在專輯結果中,您可能會顯示封面、專輯名稱和發行日期,而不是藝術家的姓名。這會損害一致性并可能隱藏重要信息,因此請考慮適合您的用例的最佳解決方案。

      概括

      Omni-search 是那些乍一看很簡單的功能之一,但當您開始深入研究它們時,它實際上是超級復雜的。我想展示我們在設計時所做的所有不同的變化和設計選擇,但在一天結束時不要忘記這一點——一切都是為了找到你正在尋找的東西。

      希望你發現這很有用。如果您正在構建自己的全方位搜索,請隨時在下面的評論中進行咨詢。


      返回頂部
      主站蜘蛛池模板: 国产精品视频分类一区| 亚洲国产精品第一区二区三区| 精品人妻少妇一区二区| 日本视频一区在线观看免费| 中文字幕色AV一区二区三区| 美女视频一区二区| 亚洲av无码一区二区三区天堂古代 | 一区二区三区在线观看免费| 麻豆果冻传媒2021精品传媒一区下载| 久久久久久免费一区二区三区| aⅴ一区二区三区无卡无码| 精品国产一区二区三区久| 国产一区二区三区乱码在线观看| 国产对白精品刺激一区二区| 日韩人妻无码一区二区三区99| 国产一区二区视频在线观看| 国产精品污WWW一区二区三区| 日本人真淫视频一区二区三区| 国产精品一区二区久久沈樵| 精品国产亚洲一区二区三区在线观看 | 日韩美女视频一区| 成人无号精品一区二区三区| 亚洲国产成人久久一区二区三区| 中文字幕在线一区二区在线| 91在线看片一区国产| 亚洲一区动漫卡通在线播放| 麻豆果冻传媒2021精品传媒一区下载| 99热门精品一区二区三区无码| 一区二区传媒有限公司| 日本无卡码免费一区二区三区| 国产无吗一区二区三区在线欢| 精品一区精品二区| 久久毛片免费看一区二区三区| 中文字幕在线精品视频入口一区| 国产激情无码一区二区app| 无码日韩精品一区二区三区免费| 亚洲综合一区二区国产精品| 亚洲.国产.欧美一区二区三区| 制服美女视频一区| 日本亚洲国产一区二区三区| 亚洲国产福利精品一区二区|