上下文搜索

通过上下文搜索, 用户可以优化页面上的内容以查找正确的信息, 而无需在使用全局搜索时进行上下文切换和导航。上下文搜索的核心示例在列表视图和流中。

默认状态

将上下文搜索直接放在用户正在优化的内容的上方。为了帮助提高可发现性, 应公开输入, 而不是隐藏在用户必须单击的图标后面。输入的 ui 占用空间应该小于全局搜索, 以加强可视化层次结构。

例如, 在查看列表时, 上下文内搜索输入应放在列表上方, 并默认情况下公开, 以突出显示专门搜索以下列表的能力。

占位符文本告诉用户期待什么, 上下文搜索是一个具体性非常重要的地方。

特殊性: 搜索源时, 占位符应为 "搜索此提要...", 而不是 "搜索..."。搜索帐户列表时, 请使用 "搜索此列表..." 而不是 "搜索帐户..."。特殊性很重要, 因为: 用户希望上下文搜索只能搜索他们现在浏览的内容。搜索帐户... "告诉用户, 他们的帐户将被搜索, 但是否会搜索所有帐户？他们中的一些人？哪一个？关注占位符的特殊性可提高每个人的清晰度。保留占位符文本，流具有不同的视图, 相同的指南适用于此处。让用户知道将搜索此提要。对于列表和流, 占位符文本应始终显示为 "搜索此提要..." 和 "搜索此列表..."。

焦点

搜索输入采用活动样式, 由于我们正在优化屏幕上已有的信息列表, 因此无需显示自动完成菜单。

即时结果

当没有自动完成的菜单为用户提供即时结果时, 这种效率应该扩展到他们正在搜索的环境的上下文中。当用户键入时, 应开始返回结果, 而无需按 enter 键。

反馈：

结果着色

---

In-Context Search

With in-context search, users can refine content on a page to find the correct information without having to context-shift and navigate away when using global search. Core examples of in-context search are in list views and feeds.

Default State

Place the in-context search directly above the content the user is refining. To help increase discoverability, the input should be exposed, not hidden behind an icon the user must click. The input should have a smaller UI footprint than global search to reinforce a visual hierarchy.

For example, when viewing a list, the in-context search input should be placed above the list and exposed by default to highlight the ability to search the following list specifically.

Placeholder Text

Placeholder text tells the user what to expect, and in-context search is a place where specificity matters a lot.

Specificity

When searching a feed, your placeholder should be "Search this feed...", instead of "Search...". When searching a list of accounts, use "Search this list..." instead of "Search Accounts...". Specificity matters because:

Users expect in-context search to only search the content they're browsing now.

"Search Accounts..." tells the user that their Accounts will be searched, but will all Accounts be searched? Some of them? Which ones? Paying attention to placeholder specificity increases clarity for everyone.

Feeds have different views and the same guidance applies here. Let the user know that this feed will be searched.

Keeping the placeholder text & behavior consistent in different contexts transforms into intuitive behavior.

For lists and feeds, the placeholder text should always read "Search this feed..." and "Search this list..."

Focus

The search input takes on the active styling, and since we're refining a list of information already on the screen, an autocomplete menu isn't necessary to display.

Instant Results

When there isn't an autocomplete menu giving the user instant results, this efficiency should be extended to the context of environment they're searching in. As the user types, results should start to be returned without having to press the ENTER key.

Feedback

When results are being returned, give the user feedback to tell the them that we're working on their request. The content in the feed is replaced with stencils as one layer of feedback, but customers have said that with a slow connection, stencils alone aren't enough to tell them that there's something happening in the background... some think their computer could be frozen, others think they might need to refresh their app. Showing a spinner in the input is an additional form of feedback that tells the user we're still working.

Feedback on a list search already displays a spinner on top of their stencils so a second spinner in the input is avoided in this context.

Results Highlighting

Results should guide the user to the most relevant information in their results. To do this, use background color highlighting for the matched terms.

Avoid using snippets, which truncate long bodies of text to only show your matched character and its surrounding words. This is a valuable feature for finding Articles, but it hides important context from a feed post. customers have said that they need the full context so their comments aren't inaccurate.

Highlight anywhere there's a match, including the name of the poster or commenters, the body of the post, the comments, and attachments. When a user clicks on the publisher, expand all comments to give a full context of the conversation.

SLDS：In-Context Search