如何设计后台界面中的表格，遵循哪些规范？

表格是后台界面中占比十分之重的一个组件，表格中内容的布局、数据的展示、操作项的罗列……每一处设计都值得细细斟酌。 前言 表格是后台界面中占比十分之重的一个组件，常以为表格设计十分简单，仔细分析后，会发现表格合理化的设计、逻辑化的设计对于一个平台而言多么重要。 想设计出一款便捷好用、直观准确的系统，表格中内容的布局、数据的展示、操作项的罗列……每一处设计都值得细细斟酌。 表格的使用场景： · 展现信息全面性：呈现大量信息，并展现数据间的复杂关系。 · 编辑性大于易读性：数据非固定，可进行增删改查。 · 需要对比数据：对比行与行之间的数据，了解两者差异。 表格的功能： · 添加数据 · 编辑数据 · 删除数据 · 搜索与筛选 · 排序 · 对比 · 显示多字段 · 计算 组成 视觉 · 行 · 列 · 布局 · 对齐 · 数字处理 · 简洁 · 层级与重点信息 · 可视化趋势 1、行 界面在不同的设备上体验会有所差异。以腾讯云为例，使用腾讯云的用户的设备分辨率分布如右图所示。 可以看出1920×1020大屏占比最多，1366×768的小屏用户仅次第二。在1920×1020的尺寸下，以表格为例，首屏可以显示11行。大屏用户表示，他们对一屏显示多少行并没有多少感知。 但对于小屏用户，在表头和页脚固定的情况下，一次只能看到6行左右，对扫视的效率确实有所影响。但是如果不固定表头和页脚，滚动时不限定区域而是全屏滚动的话，一屏也可以看到10行的内容。 数据参考：https://www.uisdc.com/high-table-row-design# 影响行信息阅读的一个关键是行高的设置，在与开发沟通过程中因为表述不一常引起歧义，几个数值表达含义需了解一下。 在文字排版中，行高的选择一般为字号的1.2~1.8倍，段间距通常使用一个行高的距离。 在考虑表格的行高时，可以参考文字排版的常用做法，将整个表格的行高分成文字行高、文字与分割线间距离，即上下间距两部分来考虑，文字行高可以设定为字号的1.21.8倍，文字与分割线间距离可以设定为字号的11.5倍。分为这样的两部分也比较符合开发同学写代码时的习惯。 推荐几个常用的行高值。 ① 字号12px，文字行高是字号的1.5倍即18px，上下间距是字号的1.2倍即15px，表格行高 48px。 这种行高整个表格最透气，在小屏下整屏可以显示9行，对于扫视效率影响不大。 ② 字号12px，文字行高是字号的1.5倍即18px，上下间距是字号的1倍即12px，表格行高 42px。 这种行高的表格间距较为适中，在小屏下整屏可以显示10行。 ③ 字号12px，文字行高是字号的1.3倍即16px，上下间距是字号的0.6倍即8px，表格行高 32px。 这种表格比较紧凑，在小屏下整屏可以显示12行。可以用于卡片中的小型表格等空间比较小的地方。 PS：自适应情况下，原本一行的文字在小屏下可能呈现出两行，即使有的文字仍只有一行，此时每行高度也要做到统一。 2、列 一行排列多少字段，每列字段宽度多少，也是设计时值得考虑的。 ① 列与列之间去掉分隔线，更利于横向阅读。 ② 给出默认宽度，字数多的时候用省略号，鼠标悬浮可展示全部文字。 ③ 列宽支持自动拉伸，根据用户需要自行拖拽。 ④ 横向滚动条，优先级高的展示出来，优先级低的滚动条展示。 ⑤ 当表格信息很多且需要对比时，可固定左侧左列，其他信息用横向滚动条展现。 ⑥ 表头放置一个设置按钮，支持字段自定义。点击设置，用户可自行决定每列显示什么字段。 3、布局 4、对齐 文字左对齐，数据右对齐。尽量保证数据的小数点后保留位数一致，若不能，则以个位数为基准对齐。 对于不存在的数据，单元格不能空置，需要用短横线代替，表示该项数据不存在，给用户明确指示。 对于数据为零的单元格，要填上0，且小数点后位数、单位，都要与上下单元格保持一致。 在任何情况下，单元格都不应该空置出现，避免用户的困惑。针对不存在的数据可以用其他占位符，告知用户该单元格不存在数据；对于数据为零的单元格，与上下数据单位、小数点相同的0来表示。 5、简洁 · 精简表头 · 减少分隔线 · 不使用斑马线 · 尽量以黑白为主 · 减少其他元素的使用 6、层级与重点信息 · 颜色的使用 用户通常优先阅读最具视觉重量的内容，因此，对用户判断有决策作用的重要内容可以尽量凸显。例如状态上的异常可以用高亮色标出等。表格中也可以用图形化的形式来帮助用户快速搜索信息，例如在表格中使用进度条来表明用量等信息。