起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)搜索界面的全面設(shè)計(jì)清單
本文全面分析了搜索界面設(shè)計(jì)前需要整理的問題，以及進(jìn)行原型設(shè)計(jì)時(shí)應(yīng)該考慮的元素清單，可以作為產(chǎn)品設(shè)計(jì)時(shí)的對照工具，供大家參考和學(xué)習(xí)。
向用戶提出什么問題？
進(jìn)行原型設(shè)計(jì)時(shí)要考慮什么？
設(shè)計(jì)搜索界面的最佳方式是什么？
根據(jù)項(xiàng)目的不同，搜索可能是最復(fù)雜的功能之一。用戶只看到一個(gè)搜索框，而設(shè)計(jì)人員和開發(fā)人員卻必須要了解錯(cuò)綜復(fù)雜的系統(tǒng)以及盒子后面的許多工作。
本文整理了在設(shè)計(jì)解決方案之前應(yīng)該回答的問題，以及在進(jìn)行原型設(shè)計(jì)時(shí)應(yīng)該考慮的元素清單。
一、觀察并提問
設(shè)計(jì)師應(yīng)在研究階段回答8個(gè)問題，以了解用戶為什么進(jìn)行搜索以及何時(shí)以及如何形成查詢。
1. 您的用戶的信息需求和意圖是什么？
他們是否搜索到：
- 導(dǎo)航，找到一個(gè)特定的網(wǎng)頁。
- 查找特定信息（如“布拉格天氣”，“澳大利亞首都”）。
- 查找建議（如“如何設(shè)計(jì)搜索界面”）。
- 查找資源，應(yīng)用程序，文檔。
- 查找事實(shí)和數(shù)據(jù)（如“我們的網(wǎng)站上有多少活躍用戶？”）。
- 收集來自不同來源的信息。
- 分析數(shù)據(jù)。
2. 用戶什么時(shí)候點(diǎn)擊搜索？
- 在點(diǎn)擊搜索之前，用戶正在做什么？
- 用戶會(huì)與誰交談？
- 在切換到搜索之前，他們在使用什么應(yīng)用程序？
3. 用戶如何提出問題？
與搜索的互動(dòng)就是對話，如果您知道用戶如何開始對話，則可以為他們提供正確的答案。
4. 用戶準(zhǔn)確地知道他們在尋找什么嗎？或者只是在瀏覽？
例如，用戶可能會(huì)研究友誼主題，并尋找任何書籍或一類書籍；或者正在尋找一本書。用戶會(huì)期望這兩個(gè)請求會(huì)得到不同的結(jié)果。
5. 用戶期望找到什么？
- 用戶可以描述搜索的期望結(jié)果是什么嗎？
- 用戶還能用什么方法找到此信息？
6. 下一步是什么？
- 用戶如何處理結(jié)果？
- 如果找不到要尋找的東西，用戶會(huì)怎么做？
- 搜索如何適應(yīng)用戶的工作流程？
7. 用戶操作中是否有模式？
用戶行為模式描述了用戶與搜索的交互方式，期望的結(jié)果以及下一步的步驟。在重新設(shè)計(jì)現(xiàn)有接口時(shí)，模式尤其重要。
在《搜索模式》和《搜索用戶界面》兩本書中，作者描述了以下常見的搜索模式和模型：
退出模式：用戶鍵入查詢>查看結(jié)果>退出。
縮窄模式：用戶鍵入查詢>查看結(jié)果>縮小范圍。
最佳優(yōu)先模式：用戶鍵入查詢>查看結(jié)果>打開第一個(gè)鏈接。
珍珠成長模式：用戶鍵入查詢>打開結(jié)果之一>打開文檔內(nèi)部的相關(guān)鏈接，或使用文檔中的術(shù)語進(jìn)行查詢。
8. 他們使用什么應(yīng)用程序？
如果您的產(chǎn)品是整個(gè)工作流程的一部分，那么其他工具可能會(huì)影響用戶習(xí)慣和對用戶體驗(yàn)的期望。
了解更多關(guān)于他們?nèi)绾卧谶@些工具中與搜索交互，以及什么方式最適合他們。
向您的用戶詢問他們的工具，以了解他們?nèi)绾闻c搜索互動(dòng)。
二、清單：考慮到搜索的每個(gè)部分
搜索的內(nèi)容比我們看到的更多。使用此清單有助于快速進(jìn)行原型設(shè)計(jì)，并且不會(huì)讓您有所遺忘。
聲明：此列表僅包含交互元素，未考慮算法、搜索行為、速度或結(jié)果質(zhì)量，僅考慮桌面搜索界面。移動(dòng)搜索在許多方面都不同，可能需要專門的文章進(jìn)行論述。
1. 搜索結(jié)果頁面
1）結(jié)果類型
視頻，活動(dòng)
音頻
地點(diǎn)
圖表
您的網(wǎng)站上提供哪些類型的信息？哪些類型是可以搜索的？如何更好地在結(jié)果頁上顯示不同的類型？
2）結(jié)果可視化
① 表格或列表
Paper.dropbox.com
② 卡片
Pinterest.com
③ 可變的顯示視圖
Bookmate.com
④ 分頁導(dǎo)航
根據(jù)信息架構(gòu)將搜索結(jié)果分為邏輯組，使瀏覽體驗(yàn)更加舒適。
“毫無疑問，搜索導(dǎo)航是過去十年中最重要的搜索創(chuàng)新?！薄狫effery Callender，Peter Morville
Spotify
3）一屏顯示的項(xiàng)目數(shù)
用戶一次需要查看多少個(gè)結(jié)果？我們能否通過提供其他視圖和排序讓他們舒適地查看結(jié)果？
① 視圖設(shè)置
Ebay.com
② 排序
Ikea.com
③ 分頁
④ 加載
Asos.com
⑤ 無限滾動(dòng)
Duckduckgo.com的無限滾動(dòng)
⑥ 組合方式
4）預(yù)覽
這是界面中經(jīng)過精心研究的部分，哪些部分應(yīng)當(dāng)包括在搜索結(jié)果中呢？
① 在預(yù)覽中突出顯示查詢字詞
iBooks
② 有助于區(qū)分結(jié)果的文檔摘要
Ataccama.com
③ 頁面預(yù)覽
Youtube.com
5）可訪問性
確保每個(gè)用戶都能舒適地使用我們的產(chǎn)品是我們的工作。
文本語音轉(zhuǎn)換服務(wù)是否可以掃描和讀取搜索結(jié)果？字體大小和對比度可讀嗎？人們可以在晴天戶外的手機(jī)顯示屏上閱讀它們嗎？您使用的顏色是否所有人都能識(shí)別？
6）捷徑
一些公司將結(jié)果預(yù)覽提升到了可用性的下一個(gè)層次，并在不離開結(jié)果頁面的情況下，為用戶提供必要的最少信息量和功能。
7）可操作的搜索結(jié)果
我們?nèi)绾螏椭脩舾欤孢m地完成工作？例如，讓用戶可以在不離開結(jié)果頁面的情況下，開始處理他們的搜索結(jié)果。
Spotify
這些是一些常見的動(dòng)作，它們可能因產(chǎn)品而異：
- 分享
- 保存結(jié)果，書簽，添加到愿望清單
- 加入購物車
AppStore
- 評論
- 預(yù)覽圖庫
- 大量動(dòng)作
Dropbox Paper
8）界面反饋
① 加載圖標(biāo)或進(jìn)度顯示
Skyscanner
② 關(guān)于搜索過程的信息（結(jié)果，時(shí)間，應(yīng)用的過濾器）
Fights.yandex.com
③ 系統(tǒng)通知（例如，如果結(jié)果是對時(shí)間敏感的，用戶可能需要刷新它們）
④ 未找到頁面
Skyscanner.net
⑤ 微交互
9）搜索歷史
① 最近搜索
② 熱門搜索
10）篩選器和分類
篩選器也需要有單獨(dú)的文章來探討。
設(shè)計(jì)復(fù)雜的網(wǎng)站時(shí)，定義明確的篩選器非常重要，它們會(huì)使搜索體驗(yàn)更加流暢。
Booking.com
- 類別及其顆粒度
- 標(biāo)簽
- 篩選器類型
- 放置方式
- 操作（保存和編輯自定義過濾器）
- 排序
11）自定義
如果搜索是應(yīng)用程序中的關(guān)鍵功能，并且是用戶工作流程中的重要組成部分，那么自定義對其將很重要?？梢栽试S用戶調(diào)整結(jié)果頁面的布局，更改字體和顏色，定義頁面上顯示的結(jié)果數(shù)量，保存篩選器，自定義排序參數(shù)或添加對操作的調(diào)用。
谷歌搜索
Aliexpress.com
12）個(gè)性化
考慮一下用戶設(shè)置，過去搜索的內(nèi)容，首選項(xiàng)或有關(guān)用戶的其他信息，思考如何利用它們改善搜索體驗(yàn)。
13）鍵盤快捷鍵
一組鍵盤快捷鍵將使瀏覽搜索結(jié)果更加容易。
14）相關(guān)性指標(biāo)
根據(jù)內(nèi)容的類型，結(jié)果的精確度以及結(jié)果相關(guān)性的差距有多大，相關(guān)性指標(biāo)可以幫助您更快地做出決策。
2. 搜索框設(shè)計(jì)清單
1）可視化部分
- 搜索框的位置
- 行動(dòng)召喚
- 圖標(biāo)
- 單框或多個(gè)輸入字段
Franzen和Karlgren在2000年發(fā)現(xiàn)，更寬的向輸入框會(huì)引導(dǎo)用戶建立更長的搜索問題?！端阉饔脩艚缑妗?/p>
2）輸入類型
您的搜索應(yīng)支持哪些類型的輸入？
- 文本
- 語音
- 圖片
- 標(biāo)簽
3）幫助
① 搜索提示，向用戶展示搜索的全部潛力
Stackoverflow.com
② 輸入字段中的默認(rèn)文本
Imdb.com
4）自動(dòng)補(bǔ)充填寫
自動(dòng)補(bǔ)充填寫功能可以成為一種強(qiáng)大而有效的工具，可以使搜索快速有效地進(jìn)行交互。
Fullstory.com
預(yù)定義的自動(dòng)補(bǔ)充填寫功能可能會(huì)建議最近或流行的查詢，過濾器，標(biāo)簽或起到導(dǎo)航作用。
結(jié)構(gòu)化建議可幫助用戶瀏覽復(fù)雜的網(wǎng)站。
Twitch.tv
5）微交互
- 載入中
- 錯(cuò)誤訊息
- 系統(tǒng)通知
- 快速清除搜索內(nèi)容
Google Drive
6）高級搜索
如果有很多用于搜索項(xiàng)目的參數(shù)，則可以考慮使用高級搜索選項(xiàng)和邏輯操作。
示例：我想找到住在柏林并在上個(gè)月購物且年齡在45至60歲之間的所有客戶。
我們?nèi)绾瓮ㄟ^界面支持這些類型的查詢？
① 邏輯運(yùn)算
Confluence
② 基于界面的高級搜索
fullstory.com
3. 設(shè)計(jì)跨渠道的搜索體驗(yàn)
如果您要設(shè)計(jì)多個(gè)設(shè)備，這是設(shè)計(jì)過程中至關(guān)重要的部分。我不會(huì)在這里討論這個(gè)主題，但是您可以在Tony Russell-Rose和Tyler Tate的《設(shè)計(jì)搜索體驗(yàn)》中閱讀更多內(nèi)容。
要點(diǎn)
搜索是一個(gè)復(fù)雜且昂貴的功能，技術(shù)約束將在設(shè)計(jì)中扮演重要角色。因此，從一開始（研究階段）就讓開發(fā)團(tuán)隊(duì)參與非常重要，該團(tuán)隊(duì)將了解用戶需求并幫助找到最佳解決方案。
可參考的搜索界面案例
Swiftype（https://swiftype.com/enterprise-search）
Algolia（https://www.algolia.com/）
Jira Atlassian（https://www.atlassian.com/software/jira）
FullStory（https://www.fullstory.com/）
Mac 系統(tǒng)的Finder（聚焦搜索）
YouTrack （https://www.jetbrains.com/youtrack/）
Skyscanner（https://www.skyscanner.net/）
Google Drive（https://www.google.com/drive/）
Slack（https://slack.com/lp/two）
Spotify（https://www.spotify.com/cz/）
Cars.com（https://www.cars.com/）
Zillow（https://www.zillow.com/）
LinkedIn（https://www.linkedin.com/）
VW Model Lineup（http://www.vw.com/models/）
AliExpress（http://aliexpress.com/）
Amazon（https://www.amazon.com/）
Goodreads（https://www.goodreads.com/）
IMDb（http://www.imdb.com/）
Yandex Flights（https://flights.yandex.com/）
Twitch（https://www.twitch.tv/）
書籍：
《Search Patterns: Design for Discovery》 作者：Peter Morville, Jeffery Callender。
《Search User Interfaces》 作者：Marti Hearst。
《Designing the Search Experience》 作者：Tony Russell-Rose, Tyler Tate。
《Information Architecture: For the Web and Beyond》第9章：搜索系統(tǒng) 作者：Louis Rosenfeld, Peter Morville 和 Jorge Arango.
文章：
Designing Search（https://blog.prototypr.io/designing-search-c96cc5d05ddf）
5 important things you need to consider when designing for search （https://blog.prototypr.io/5-easy-and-effective-tips-to-get-more-out-of-your-search-f53d55d063de）
Best practices for designing your web search pattern （https://medium.com/@justinmind/best-practices-for-designing-your-search-pattern-c2cbd0a63b5e）
Design a Perfect Search Box （https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c）
Best Practices for Search Results（https://uxplanet.org/best-practices-for-search-results-1bbed9d7a311）
Mobile UX Design: User-Friendly Search（https://uxplanet.org/mobile-ux-design-user-friendly-search-51e5f78f5a1e）
Search UI Patterns: Elements （https://medium.com/@ddsky/search-ui-patterns-elements-80ea9d241f97）
視頻：
[cz] Search UX best practices — relevance, rychlost, pou?itelnost（https://www.youtube.com/watch?v=sbuTVJiQyF0）
UX for eCommerce- Lecture 5: Creating a Good Search Box（https://www.youtube.com/watch?v=AMwUsyQYlbk）
本文翻譯自Nadya Tsech的Search interface: 20 things to consider，作者是Ataccama的B2B產(chǎn)品設(shè)計(jì)師。
原文：https://uxplanet.org/search-interface-20-things-to-consider-4b1466e98881
本文由 @海外設(shè)計(jì)參考 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
也太優(yōu)秀了吧，也涵蓋太全面了吧。
謝謝鼓勵(lì) ??
能不能加你的聯(lián)系方式。都想跟大神學(xué)習(xí)了~