通用原则

• 当搜索为高频操作功能或鼓励用户使用该功能的场景下，搜索入口需使用完整形态

• 当搜索在模块内，或为非高频操作的场景下，搜索入口可仅使用「搜索图标」

• 搜索均为实时搜索

• 当用户退出搜索时，通常直接清空搜索关键词，不做保留

• 业务中通常还可与「搜索推荐、历史搜索」等搭配使用

构成

1. 图标：视觉上直接传达搜索的含义。

   1. 特殊情况下，可默认仅使用图标作为搜索入口。

2. 占位符：用于提醒用户可搜索的范围及对象。在用户输入搜索关键词后消失，清空关键词后再显示。

3. 容器

4. 搜索关键词：用户输入的搜索关键词

5. 清空：当用户已经输入搜索关键词后，鼠标 hover 容器则出现「清空」，点击后清除搜索关键词，搜索组件回到未激活状态。

行为

激活搜索组件

鼠标任意点击容器，即可激活搜索组件

实时搜索

输入任意关键词，无需 Enter，实时反馈搜索结果

退出搜索

• 一键清空搜索关键词，则立即退出搜索

• 手动删除搜索关键词后，点击页面其他地方，则立即退出搜索

实践案例

---

样式

尺寸

尺寸	M	S	XS
高度	36	32	28

• 宽度：根据所在容器的间距变化或由设计师在实际场景中指定

• 高度：与按钮的三种高度一致