弹窗
遮罩覆盖日常好物
6 件商品 · ¥500 以内
点击商品即可选中
遮住结果、集中完成选择；关闭后才能操作商品。
选择这个组件 →概念对比
先用同一个任务体验不同方案，再查阅逐项差异。选定后进入组件详情，把适合自己的方案带走。
先试，再选
同一个任务，不同的操作体验
试试：筛选 ¥200 以内的家居商品，关闭再打开，再点选结果。观察什么被挡住、条件是否保留。三个预览独立操作，关闭不会清除条件；重置或离开本组会清除。
侧边抽屉
非模态日常好物
6 件商品 · ¥500 以内
点击商品即可选中
本例使用非模态抽屉：条件变化时，左侧结果仍可点击。窄容器下结果可见面积会减少。
选择这个组件 →底部面板
遮罩覆盖日常好物
6 件商品 · ¥500 以内
点击商品即可选中
从底部展开，保留上方场景；内容增加时，面板内部滚动。
选择这个组件 →这是受限容器里的交互样板，用于比较行为；抽屉也可设计为模态。实际项目仍需测试设备视口、长内容与辅助技术。
逐项查阅差异
- 登录页页面
- 注册页页面
2 个概念 · 3 个维度 →
- 按钮组件
- 按压反馈动效
2 个概念 · 3 个维度 →
- 警告提示组件
- 轻提示组件
- 表单校验交互模式
3 个概念 · 3 个维度 →
- 悬停发光动效
- 悬浮上浮动效
2 个概念 · 3 个维度 →
- 进度条组件
- 骨架屏交互模式
- 加载指示器动效
3 个概念 · 4 个维度 →
- 命令面板组件
- 下拉菜单组件
2 个概念 · 3 个维度 →
- 底部抽屉组件
- 抽屉组件
- 模态框组件
- 气泡卡片组件
4 个概念 · 3 个维度 →
- 卡片组件
- 表格组件
2 个概念 · 3 个维度 →
- 菜单组件
- 顶部导航栏组件
- 侧边栏组件
3 个概念 · 3 个维度 →
- 分页组件
- 无限滚动交互模式
- 下拉刷新交互模式
3 个概念 · 3 个维度 →
- 行高基础
- 行宽基础
- 字号阶梯基础
3 个概念 · 3 个维度 →