UI DESIGN LAB
  • 首页
  • 社区
  • 资源库
  • 知识库
  • 文档
EN登录
返回知识库
Interaction Responsive Motion

响应式表格与比较

表格用于比较,响应式处理必须保留列关系、排序和关键操作。

tablesresponsivecomparison

设计原则

把表格随意改成卡片会损失比较能力,需要按数据任务选择模式。

原则 把表格随意改成卡片会损失比较能力,需要按数据任务选择模式。

设计动作 桌面保留表格列对齐;移动端优先横向滚动或摘要卡片加展开详情,关键操作固定可见。

正反例 正向示例:审核队列、CRM 客户列表、指标排行、权限表。 反向示例:移动端隐藏关键列。

适用场景 审核队列、CRM 客户列表、指标排行、权限表。 用户需要横向比较数值。

来源提示 来源提示:综合 Apple HIG、Material Design、GOV.UK/Polaris/Atlassian 组件实践和交互可访问性原则整理。

Agent 指令

桌面保留表格列对齐;移动端优先横向滚动或摘要卡片加展开详情,关键操作固定可见。

适用场景

  • 审核队列、CRM 客户列表、指标排行、权限表。
  • 用户需要横向比较数值。

避免做法

  • 移动端隐藏关键列。
  • 卡片化后排序和批量操作消失。

知识元数据

分类
Interaction Responsive Motion
质量分
82%
版本
v1
发布
2026/6/6