搜索结果页
搜完看到的那一页：顶部留着搜索词，下面结果列表，带筛选、排序和「没找到」的兜底。
搜索框
Search Bar
带放大镜的那个输入框：圆角胶囊、浅灰底，里面写着「搜你想要的」。
全平台通用搜索与筛选顶部导航组件
大白话说明
搜索框是用户主动表达需求的入口：放大镜图标定身份，浅底弱边降低压迫感，占位符给示例。电商和内容产品常在占位符里轮播热词，右侧挂语音、扫码等快捷输入。
什么时候用
内容量大到翻页找不到、或用户目的明确（来搜某个东西）时，它应该在首屏最显眼处。
什么时候不用
内容总量只有几十条的产品别把搜索放首屏 C 位——用户更需要的是分类浏览。
细节与变体
- 点击后进入独立搜索页（带历史与热词），不要在当前页硬展开
- 输入框热区高度至少 40px，图标只是视觉中心不是热区边界
- 占位符轮播要慢（≥3 秒一条）且可被真实输入打断
配套效果见下方「可用效果」。
配套提示词（点开填空、复制）
可用效果
参考实现（开源）
- Ant Design（蚂蚁） ↗ MIT · 免费（MIT）
国内中后台的事实标准：表格、表单、列表都是行业参照物。
- TDesign（腾讯） ↗ MIT · 免费（MIT）
腾讯出品的全栈设计系统：Web、移动、小程序、桌面都有，国内生态最完整的一套。
- MUI（Material UI） ↗ MIT · 免费（MIT，核心）
React 生态最老牌的 Material 组件库：组件全、文档厚、AI 生成命中率最高之一。