33. 🔍 搜索与筛选体验 Search & Filter UX ★★★☆☆
🌏 Web 网页规范
- 即时输入联想与匹配项高亮 (Autocomplete)
- 横向芯片面包屑标签与纵向树状过滤器
- 大列表无感排序、行数分页配置规范
📱 App 移动端规范
- 原生顶部吸顶搜索栏或下拉划出行为
- 底部抽屉折叠筛选组件 (Bottom Sheet)
- 历史记录与热门搜索快捷标签平铺平滑清除
Web 网页端利用宽屏，支持多层级、多选的侧边筛选面板。在用户键入搜索词时，配合输入防抖 (Debounce) 即时检索，在页面直观罗列分类和过滤芯片。
App 移动端屏幕狭窄，在用户点击搜索框后会弹出一个干净的全屏搜索模式以避开键盘干扰。筛选操作大多隐藏在轻量过滤标签下，点击后从底部滑出抽屉进行确认。
LIVE PLAYGROUND: 搜索自动补全联想词与过滤芯片
在搜索框输入单词 (如 Anim, Onboarding)，或点击类型过滤芯片，体验搜索与筛选流程
https://web.meta-ui.edu/search
最近搜索:
类型筛选:
全部
基础
进阶
🎥 Animation (基础)
📊 Data Vis (进阶)
🚀 Onboarding (基础)
📭 Empty States (基础)
📋 大模型统一 Prompt (LLM Prompt)