跳到正文

表格

Table

初级通用

表格(Table)是把同类数据按行和列组织起来的内容展示方式,每一列说明一种属性,每一行对应一条记录。它让你能沿着同一列比较多条记录,比如在订单后台对照金额、状态和下单时间。

你可能会说:「我想把后台这些订单排整齐,让人能按金额、状态和时间快速对照。」

动手看看

最近订单
共 4 笔
订单编号
金额
状态
下单时间
OD-20841
¥ 1,280.00
已支付
06-18 14:32
OD-20840
¥ 298.00
待付款
06-18 13:08
OD-20839
¥ 856.00
已支付
06-18 11:46
OD-20838
¥ 2,430.00
已退款
06-17 17:21
表格密度

每一行是一笔订单,每一列是同一种属性。沿着「金额」或「状态」往下看,就能直接比较不同订单;试试悬停、用 Tab 聚焦某一行,再切换表格密度。

基础表格留出了更宽松的行距,适合日常查看和逐条处理订单;悬停反馈能帮你确认自己正在看哪一笔。

要点

  1. 1

    一行对应一条可比较的记录

    你做订单后台时,可以让每行对应一笔订单,每列固定展示订单号、金额和状态。因为信息的位置一致,用户往下扫就能比较不同订单。

  2. 2

    列标题说明每个值的含义

    同一列里的值最好回答同一个问题,例如「创建时间」列都放时间。这样用户看到某个单元格,就能借助列标题判断它代表什么,而不用逐条猜。

  3. 3

    交互围绕查找和处理记录

    当订单很多时,筛选、排序或分页能帮用户缩小范围。若每行还有「查看详情」,它是针对这条记录的操作;表格负责让记录可查、可比,不必塞进所有详情。

  4. 4

    窄屏先保住关键对照信息

    表格列多时,手机屏幕放不下。你可以优先保留用户要比较的列,让其他信息进入详情页,或允许横向滚动;关键是用户仍能认出每个值属于哪条记录。

容易混淆的地方

表格和列表都能展示多条内容,但表格强调多条记录在相同字段上的横向、纵向对照;列表更适合逐条阅读标题和摘要。它也不同于卡片:卡片能容纳图片、说明和多个操作,适合浏览单个对象;如果用户主要想比较价格、状态等固定属性,表格通常更直接。

什么时候用

适合用

  • 做订单管理页时,客服需要同时查看多笔订单的金额、状态和创建时间,并定位异常订单。
  • 做 AI 工具的任务记录页时,用户要对照各次运行的模型、耗时、费用和结果。
  • 做成员管理后台时,管理员要按角色或加入时间查找成员,再处理某一行的账号。

不适合用

  • 文章页只是按发布时间展示标题和摘要,读者主要逐篇阅读,用列表比表格合适。
  • 商品首页以图片和卖点帮助用户浏览,每件商品的信息结构也不完全相同,用卡片更合适。
  • 页面只想突出今天的总收入和订单总数,没有多条记录需要对照,用统计数值展示即可。

练一练

你要做一个 AI 任务后台,用户想快速找出费用最高的几次运行,并对照每次的模型、耗时和结果。哪种展示方式更合适?

让 AI 帮你做

请为 AI 任务后台制作表格:每行是一条运行记录,列出任务名称、模型、费用、耗时、结果和运行时间。支持按费用排序,并能进入单条记录的详情。窄屏时优先保留名称、费用和结果,确保每个值仍能对应到正确记录。

接下来学什么