search

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Build search experiences that help users find what they need quickly, even when they are uncertain about what they are looking for. The goal is not perfect relevance on the first try; it is guiding users from intent to outcome through forgiving search and clear results.

Consult the search and filtering UX reference for autocomplete patterns, filter architecture, result presentation, and zero-results recovery. Consult the search and findability reference for site search, autosuggest, command palettes, and intent-aware findability. Consult the collection browsing and filtering reference for long result lists, faceted browsing, and filter overlays. Consult the predictive and intent-driven UI reference for recommendations, smart defaults, and resume flows.

构建能够帮助用户快速找到所需内容的搜索体验，即使用户尚不确定自己想要什么。目标并不是在第一次尝试时就实现完美相关性；而是通过宽容的搜索和清晰的结果，引导用户从意图走向目标。

查阅搜索与筛选 UX 参考资料，了解自动补全模式、筛选架构、结果展示和零结果恢复方式。查阅搜索与可发现性参考资料，了解站内搜索、自动建议、命令面板和基于意图的可发现性。查阅集合浏览与筛选参考资料，了解长结果列表、分面浏览和筛选浮层。查阅预测式与意图驱动 UI 参考资料，了解推荐、智能默认值和继续流程。

MANDATORY PREPARATION

强制准备

Users start this workflow with

/search

. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first. Additionally gather: what users typically search for, what common queries fail, and how large the searchable dataset is.

用户通过

/search

启动此工作流。此 skill 激活后，需要加载

$frontend-design

——其中包含设计原则、反模式和 Context Gathering Protocol。继续执行前必须遵循该协议；如果尚不存在设计上下文，则必须先加载

$setup

。此外还需收集：用户通常搜索什么、哪些常见查询会失败，以及可搜索数据集的规模。

Assess Search Needs

评估搜索需求

Understand the search context before designing the interface:

Search intent: Are users looking for a specific item (known-item search), exploring a category (exploratory), or trying to complete a task (transactional)?
Dataset size: Small datasets (< 100 items) may not need search; filtering or categorization may suffice. Large datasets need faceted search and ranking.
Query patterns: What do users actually type? Common misspellings, synonyms, and abbreviations should be handled.
Failure modes: What happens when search returns nothing? When it returns too much?

设计界面前，需要了解搜索上下文：

搜索意图：用户是在查找特定项目（已知项搜索）、浏览某个类别（探索式搜索），还是尝试完成某项任务（事务式搜索）？
数据集规模：小型数据集（少于 100 个项目）可能不需要搜索；筛选或分类即可满足需求。大型数据集需要分面搜索和排序。
查询模式：用户实际会输入什么？应处理常见拼写错误、同义词和缩写。
失败模式：搜索无结果时会发生什么？返回结果过多时又会怎样？

Search Interface Design

搜索界面设计

Query input

查询输入

Use concrete placeholder text ("Search for "project alpha"") instead of generic filler
Show a clear button once the user has typed
Support Enter to submit; do not rely solely on live results
Include a visible search button, not just a decorative icon
If scope is selectable ("All", "Products", "Help"), make it obvious and changeable

使用具体的占位文本（“搜索 project alpha”），而不是泛泛的提示语
用户输入内容后显示清除按钮
支持按 Enter 键提交；不要仅依赖实时结果
设置可见的搜索按钮，而不只是装饰性图标
如果可以选择搜索范围（“全部”“产品”“帮助”），应使其显而易见且易于更改

Autocomplete and suggestions

自动补全与建议

Show suggestions after 2-3 characters
Group by type: recent searches, popular queries, products, help articles
Bold the matching substring
Support arrow-key navigation, Enter to select, Escape to close
On mobile, ensure suggestions are scrollable and do not overflow
Show a helpful message when nothing matches instead of an empty list

输入 2-3 个字符后显示建议
按类型分组：最近搜索、热门查询、产品、帮助文章
加粗匹配的子字符串
支持方向键导航、按 Enter 键选择、按 Escape 键关闭
在移动设备上，确保建议列表可以滚动且不会溢出
没有匹配项时显示有用的消息，而不是空白列表

Filter integration

筛选集成

Sidebar filters for many filters on wide layouts
Top bar for a few key filters
Drawer/overlay on narrow layouts
Inline chips for active filters that can be removed directly
Synchronize filter state with the URL for shareability
Show active filter count when collapsed

宽屏布局且筛选项较多时使用侧边栏筛选
筛选项较少时使用顶部栏
窄屏布局使用抽屉或浮层
使用内联标签展示已启用的筛选条件，并允许直接移除
将筛选状态与 URL 同步，以便分享
筛选器折叠时显示已启用筛选条件的数量

Result Presentation

结果展示

Result list

结果列表

Clear hierarchy: title, metadata, snippet, thumbnail
Highlight matching query terms in titles and snippets
Consistent formatting across all results
Each result should be a clear link or have a primary action

清晰的层级结构：标题、元数据、摘要、缩略图
在标题和摘要中突出显示匹配的查询词
所有结果保持一致的格式
每个结果都应是清晰的链接或具有主要操作

Empty states

空状态

Acknowledge the query ("No results for 'xyz'")
Suggest alternatives: corrected spelling, related terms, broader categories
Offer to clear filters if any are active
Provide a fallback action ("Browse all", "Contact support")

回应用户的查询（“未找到 ‘xyz’ 的结果”）
提供替代建议：更正后的拼写、相关词、更宽泛的类别
如果存在已启用的筛选条件，提供清除筛选的选项
提供后备操作（“浏览全部”“联系支持”）

Ranking controls

排序控制

Allow users to change sort order (relevance, price, date, rating)
Label the default sort and explain why it is the default
If results are promoted, label them transparently ("Featured")

允许用户更改排序方式（相关性、价格、日期、评分）
标注默认排序方式，并说明其成为默认项的原因
如果结果经过推广，应透明地标注（“精选”）

Pagination and Loading

分页与加载

Pattern	Best for
Pagination	Large result sets, SEO-critical pages, users who reference specific pages
Infinite scroll	Discovery browsing, image galleries, social feeds
Load more	Balanced approach; user controls when to load

Show skeleton screens that match result layout during loading
Preserve previous results while loading new ones when possible

模式	适用场景
分页	大型结果集、SEO 关键页面、用户会引用特定页面的场景
无限滚动	探索式浏览、图片库、社交信息流
加载更多	平衡方案；由用户控制何时加载

加载期间显示与结果布局一致的骨架屏
尽可能在加载新结果时保留之前的结果

Accessibility

无障碍

Announce result count changes for screen readers
Associate filter controls with result regions using
```
aria-controls
```
Ensure active filters are announced when changed
Provide skip links from filters to results
Support keyboard navigation through suggestions and filters

通过屏幕阅读器播报结果数量的变化
使用
```
aria-controls
```
将筛选控件与结果区域关联起来
确保筛选条件发生变化时能够播报已启用状态
提供从筛选器跳转到结果的跳过链接
支持通过键盘在建议和筛选器之间导航

Anti-Patterns

反模式

Case-sensitive search: Users should not guess capitalization
No visual feedback during search: Silent search feels broken
Filters that produce zero results: Disable or hide invalid combinations
Overwhelming filter panels: Too many filters create decision paralysis
Hidden active filters: Users forget what they filtered
Losing filter state on refresh: Filters should persist in the URL
Infinite scroll without footer access: Users cannot reach footer links
Search requiring exact matches: Fuzzy matching and stemming are essential
No zero-results recovery: An empty screen with no guidance is a dead end
Autocomplete that hijacks the cursor: Suggestions should not auto-submit

区分大小写的搜索：不应要求用户猜测大小写
搜索期间没有视觉反馈：静默搜索会让人感觉功能失效
筛选后产生零结果：禁用或隐藏无效的组合
筛选面板令人不知所措：过多筛选项会造成决策瘫痪
隐藏已启用的筛选条件：用户会忘记自己筛选过什么
刷新后丢失筛选状态：筛选条件应保留在 URL 中
无法访问页脚的无限滚动：用户无法到达页脚链接
要求精确匹配的搜索：模糊匹配和词干提取必不可少
没有零结果恢复机制：没有引导的空白页面会成为死路
自动补全会劫持光标：建议不应自动提交