用途:search-ux 提供搜索界面的设计规范,覆盖搜索输入、自动补全、结果展示和零结果处理四个环节,适合需要设计站内搜索或产品搜索体验的场景。
主要能力与要点: 搜索输入:位置醒目,置于页面顶部或页头栏;占位文字要具体,如“Search products...”而非“Search...”;输入框内或旁放置放大镜图标;输入文字后出现清除按钮;为高级用户提供键盘快捷键(Cmd+K 或 /)。 自动补全:输入 2-3 个字符后显示建议;防抖为最后一次按键后 200-300ms;对结果分类(Products、Articles、Users);在建议中高亮匹配文字;建议上方显示最近搜索;最多可见 7-10 条建议。 结果页:显示结果数量,如“42 results for 'design systems'”;每条结果提供摘要/预览并高亮查询词;排序选项包括 Relevance(默认)、Date、Popularity;筛选器在桌面端用侧边栏,移动端用抽屉。 零结果:不要只显示“No results found.”,应提供拼写建议(“Did you mean...?”)、相关分类或标签、热门/趋势内容、清除搜索并浏览的选项,以及适当情况下的联系支持链接。
使用方式与限制:资料未提供具体安装命令、代码示例或平台集成方式,仅给出设计层面的规则与建议,实际落地需结合具体产品实现。