术语 · 界面图鉴

数据表

Table

把同类数据一行一条、一列一项摆成网格,能排序能筛选,是后台页面的主角。

这一块由什么组成

表格是最古老的界面零件——账本就是它的祖先。它的本事只有一个:把同类数据按行和列对齐,让眼睛沿着一列扫下去就能比较。拆开看:

  1. 表头Header

    第一行,给每一列起名字,点它通常能排序。

  2. 数据行Row

    一行就是一条记录:一个订单、一个用户。

  3. 单元格Cell

    行列交叉的小格子,数字靠右、文字靠左。

  4. 行操作Row Actions

    行尾的「···」或按钮,对这一条做点什么。

  5. 工具条Toolbar

    表格上方的搜索、筛选、导出,管整张表。

同一个零件,几种摆法

基础型

横线分隔,行数少的时候最清爽。

斑马纹

隔行浅灰,行多列宽时眼睛不串行。

带选择列

最左一列复选框,批量操作的前提。

这个页面里,哪一块是数据表?

三块都在列东西,但只有一块是「行对行、列对列」地摆。

点一块试试,看看它叫什么

什么时候该上它

适合

  • 同类记录成批比较、排序、筛选
  • 后台管理页的订单、用户、日志
  • 数字多、要对齐小数点的数据

先别用

  • 每条内容差异很大、有图有长文——用卡片
  • 手机屏幕上超过四列
  • 只有三五条、不需要比较的信息

想一想

五十个订单,用户要按金额排序、按状态筛选。用什么摆最合适?

让 AI 改它时,这样说

把列名一个个说出来,AI 就不会自己发明字段;顺手说清要不要排序和筛选。

订单列表改成数据表,列是订单号、客户、金额、状态

表头点一下按金额排序,再点一下反过来

表格每行右边加「查看」和「删除」两个操作

手机上表格改成横向可滚动,别挤成一团

最容易踩的坑

表格不是万能容器。每行长得都不一样的内容硬塞进表格,用户会看得头晕——列越多越要问自己一句「真的需要比较吗」。

⌘K搜索知识库

最近收录

正在载入知识索引…