搜索页
Search Page
别名:搜索结果页搜索页面搜东西的页面全站搜索查询结果页搜索列表页搜一搜
这是什么
承接查询意图并返回结果的内容发现页面：顶部常驻搜索框（保留查询词、可修改重搜）， 一侧是类型与筛选器，主体按相关度排列结果条目（标题 + 摘要 + 高亮命中词）， 底部用分页或无限滚动续接。空结果和无结果关键词是必须设计好的两个状态。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 内容量大、用户靠关键词定位信息
- 结果需要按类型、时间、标签过滤
- 查询词与结果的匹配过程需要透明（高亮、计数）
✕ 不适用场景
- 内容量极小、浏览即可覆盖
- 结构化数据的精确查询（用筛选器或表格更直接）
- 命令式快捷操作（用命令面板更轻）
常见形式
列表结果
Results List
标题 + 摘要纵排，搜索引擎经典
网格结果
Grid Results
卡片网格，适合图片或商品
即时搜索
Instant Search
边输入边出结果，无需回车
多面筛选
Faceted Search
左侧筛选器 + 右侧结果，电商与文档常用
页面结构
- 01
搜索框
页面主入口，保留上次查询并支持即时联想。
- 02
筛选面板
分类、范围、排序等，可折叠或常驻侧边。
- 03
结果列表
命中数与耗时反馈；无结果时给引导而非空白。
- 04
单条结果
标题可点、摘要高亮命中词、来源与时间。
- 05
分页
翻页或无限滚动，保持筛选条件与滚动位置。
实现要点
gridflexscroll-behavior: smoothtext-wrap: balance搜索框常驻顶部并保留查询词（受控 input）；即时搜索用 debounce（250～400ms）+ AbortController 取消过期请求。命中词高亮用 <mark> 样式区分。筛选器变化写入 URL query（可分享、可回退）。空关键词给引导态，无结果给换词建议与热门内容。
相关概念
用快捷键（⌘K / Ctrl+K）唤出的浮动搜索面板：输入即筛选命令、页面或内容， 键盘上下选择、回车执行。macOS Spotlight 把它带入大众视野， 现在是效率工具和开发者产品的标配。
组件包含组件集中承载筛选条件的面板，常驻列表侧边或以抽屉、浮层唤起：复选组、单选、滑杆组合出当前查询。 与列表实时联动刷新结果数，并支持已选条件回显与一键清除。
组件包含组件用即时过滤把大列表缩到与当前输入相关的一小部分：用户在搜索框敲字，列表随之实时收窄， 并显示命中数量与空结果提示。它把"查找"变成"修剪"，不用提交、不用等跳转，反馈就在眼前。
交互模式使用模式用带页码的控件把长结果集切分为离散页面：用户显式点击页码或上一页 / 下一页 按钮取回对应片段，当前位置永远可知、可分享、可回退。与无限滚动的"失控 漂移"相对，它是数据浏览中最可控的方式，也是搜索结果与后台表格的默认选择。
组件包含组件当列表或页面没有数据时，不留一片空白，而是用插图、一句说明和一个明确的下一步操作填充。 它解决的是"用户面对空白不知道发生了什么、也不知道该做什么"的问题—— 把空档变成引导起点：首次使用教用户开始，搜索无结果给出路。
交互模式使用模式