Search Bar
The search input: magnifier icon, pill shape, light background, placeholder hinting what to search.
Search Results
搜索结果页
The page after searching: the query stays on top, results below, with filters, sorting, and a no-results fallback.
All platformsSearchContent areaComponent
大白话说明
搜索结果页要完成三件事：让用户确认搜对了（搜索词与结果数清楚）、快速缩小范围（筛选排序 sticky 在顶部）、没结果时不死胡同（纠错词、热门推荐、清筛选入口）。
什么时候用
任何带搜索功能的产品都需要它独立成页，承载筛选、分页与空结果状态。
什么时候不用
结果永远只有一屏且不需要筛选的轻量搜索（如设置内搜索）可以内嵌，不必成页。
细节与变体
- 命中关键词在标题里加粗或标色，用户扫读速度翻倍
- 筛选条件改变要保留滚动位置的一部分上下文，别粗暴回顶部
- 空结果先给「去掉某个筛选试试」，再给热门内容，不要先甩一张大哭脸
Matching prompt (fill in & copy)
Reference implementations (open source)
- Ant Design ↗ MIT · 免费（MIT）
The de-facto standard for admin interfaces in China — tables, forms, lists.
- MUI ↗ MIT · 免费（MIT，核心）
The most established Material component library for React.