布局模式 · 特定页面
搜索结果页
Search Results Page
也叫：搜索页、检索结果页、结果列表页、SERP
用户输入关键词后看到的页面，顶部保留搜索框，侧边或上方是筛选条件，主区域按相关度列出结果并高亮关键词。
点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。
怎么跟 AI 说
改成你的业务内容再发做一个搜索结果页：顶部是保留关键词的搜索框；下方左侧 220px 是筛选栏（分类复选、价格区间、发布时间），右侧结果区顶部显示「找到 N 条结果」和排序下拉，已选筛选显示为可删除的标签；每条结果包含标题（关键词高亮）、两行摘要、来源和日期；底部分页。无结果时显示纠错建议和热门搜索。
发给
01判断
你的内容是这样吗？
对照两列，确认搜索结果页是不是你要找的。
02避坑
常见坏用法
看起来能用，其实会给用户添麻烦。
- 01
结果页不保留用户输入的关键词，想改搜索词要重新输入
下面的线框画的就是这种情况，红色虚线框是出问题的地方。右边的线框画的就是这种情况，红色虚线框是出问题的地方。
- 02
不显示结果数量，也不高亮匹配的关键词
- 03
无结果时只有一行「暂无数据」，没有任何建议
- 04
改了筛选条件后看不出当前选了什么，也不能一键清除
03识别
怎么认出它
先看整体结构，再对照几个一眼能认出的特征。
结构
顶部是搜索框，下方侧边（或顶部）是筛选条件，主区域依次是结果数量与排序栏、结果列表和分页。
组成部分点一下，在上面的线框里标出来
识别特征
- 1页面顶部有一个填着关键词的搜索框
- 2结果列表上方有「找到 N 条结果」和排序选项
- 3结果标题里有加粗或高亮的关键词，侧边有筛选条件
04解释
详细解释
搜索结果页的结构很固定：顶部是保留了关键词的搜索框；下面一行显示「找到 128 条结果」和排序方式（相关度、最新、价格）；左侧或上方是筛选条件，比如分类、价格区间、发布时间；主区域是结果列表，每条显示标题、摘要、来源和时间，匹配的关键词加粗或高亮；底部是分页或「加载更多」。
结果本身用什么形式要看内容：文章和网页用简单列表，商品用卡片网格，图片用画廊。搜索结果页负责的是外层框架：搜索框、筛选、排序、结果数量、分页，以及没有结果时怎么处理。
没有结果时不要只写「无结果」，要给出纠错建议（「你是不是要找……」）、热门搜索或清除筛选按钮。已选的筛选条件要以标签形式显示出来，并且能一键清除。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
layout-search-results- DOM 选择器
- 没有专门的选择器，靠下面的关键词、组件名和结构识别。
- 类名关键词
类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。
search-resultsresultssearch-pageresults-listsearch-resultresult-list
- 组件名
React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。
SearchResultsSearchPageResults
- 结构特征
根据元素的排列和样式算出来的特征，只用来加分，单独不判定。
重复子项
- 优先级
- 1 · 同一层有多条命中时，优先级高的胜出
- 版本
- v2 · 更新于 2026/09/30