表格

表格的作用

表格是展现数据最为清晰、高效的形式之一。它常和按钮、排序、搜索、筛选、分页等其他界面元素一起协同，适用于数据的展示、操作、筛选。它结构简单，分隔归纳明确，使信息之间更易于对比，大大提升了用户对信息的接收效率和理解程度。

目录

一：数据展示表头-信息降噪，自定义展示字段

二：数据展示单元格-内容做层级，样式降噪，提升阅读效率

三：数据操作-先判断按钮控制范围，在放准位置，最后处理好层级关系

四：数据过滤-根据使用频率和操作方式选择不同的设计方式

一：数据展示表头-信息降噪，自定义展示字段

1.展示最重要的字段，删除用户只需要了解的字段

2.在不影响用户理解字段含义的基础上，删除重复冗余文字

3.用户可自定义需要展示的字段（如果可选字段很多可以采用弹窗的交互形式，如果字段不是很多可用原位弹出窗的交互形式）

4.当字段名称过长，我们可以定义一个专有名词代替，并且在字段名称后面添加字段标注说明。

二：数据展示单元格-内容做出层级，样式降噪，提升阅读效率

信息排版

1.多信息设计（字段特别多的时候，整个表格信息凌乱、冗余，不利于高效阅读；通过下面几种方法对信息进行排版设计没调高表格的颜值和易读性）

多层展示：减少横向滚动条出现的几率从而减少操作，提高信息阅读的沉浸体验，提升阅读效率

主次展示：通过对信息文字颜色、大小、字重的处理，形成信息层级，来区分信息模块

符号化：将特殊字段设计为特定的符号，减少字段展示使用户一目了然的看到信息，提升了展示效率，降低阅读时间

标签化：对次要信息进行标签形式的处理，虽然看上去是一个设计形式的转变，但通常很多辅助信息都是内化为产品的特定状态，可减少字段头部的内容宽度，同时便于产品形成一套自身产品的标签体系

隐藏展示：主要是将大量的非重点信息进行折叠收起，提供一个较深的细节入口来隐藏掉信息，常见有下拉、浮层、提示框、弹窗…

2.少信息设计

卡片设计：字段特别少的时候，整个表格特别空，屏幕利用率低，不利于阅读体验；少量信息可以做成卡片提高信息接受效率

3.不要留空白，

没有数字用0，没有内容用-；如果空白容易给用户造成没有加载出来的误解

样式设计

1.去掉不必要的分割线和斑马线，用对齐和间距来区分列和行

2.去掉不必要的装饰和颜色

3.单元格高度

·文字大小：一般表格中的文字大小在12-16px之间，通常13、14px最为常见

·文字行高：行高是一行文本垂直方向的高度，可设置为字号的1.2-1.8倍

·边距（padding）：文字与分割线的上下间距可以设定为字号的1-1.5倍

·单元格行高：单元格的行高影响着信息排列的密度，需要根据具体的业务需求去做设计

4.单元格宽度

表格宽度有固定宽度和百分比宽度两种形式；在实际应用中通常将两种方式混合使用。实现表格自适应屏宽，避免出现内容多的列折行或者隐藏，内容少的列空白。

固定宽：表格中不是所有字段都需要宽度自适应，比如时间、状态、操作等字段可以预知宽度，可采用固定宽。

百分比宽：当表格字段数量不确定时，通常我们会为百分比列写一个最小值(min-width),以确保字段很少时可以自适应宽度，字段较多时仍然能保证完整展示表格数据，不影响对内容的阅读。

5.文字对齐方式

标题和内容：一般采用左对齐，更高效的浏览顺序；

有长短不一的数字时：右对齐，方便比较 ;

操作项一般放在尾列：右对齐；

三：数据操作-先判断按钮控制范围，在放准位置，最后处理好层级关系

表格按钮根据操作的范围可以分为单行操作、批量操作、全局操作

1.先判断操作范围>在放置合理位置>最后在优化信息层级

2.在操作按钮比较少的情况下，按钮的分布也需要考虑到合理的利用页面空间。

3.单行操作：当表格列数很多时，如果表格的操作项过多，会占用很多页面空间，将低频操作项收起，用点击更多按钮去触发选择。

四：数据过滤-根据使用频率和操作方式选择不同的设计方式

筛选条件的样式，是由筛选条件的使用频率和使用方式决定的；而且要考虑到产品的发展方向，如果要把功能做强大就得考虑到后续扩展性

1.平铺型

优点：平铺型的好处是将筛选项的结果全部或者部分放出，能够帮助用户快速理解筛选项以及快速找到自己想要的结果。

缺点：平铺型的控件占比大，需要占据大量面积展示平铺出的筛选结果

同时还可以自定义筛选过滤的字段

2.收折型

优点：用户可以直接对其常用的字段筛选进行一步操作，并且没有复杂的筛选关系，全部都是「且」的筛选逻辑，能够保证用户进行快速的筛选选择。

缺点：将所有信息全部平铺展开，信息量过于冗杂繁多，同时在做通用性产品时，这种方式很难做到通用性。

3.单侧筛选

优点：节省空间、通用性强。因为在很多 Saas 系统、Paas 系统当中，无法针对每一个客户进行设计，就要考虑到系统通用性高，做一些大而全的功能。在每个表单所需要定制化修改的地方很少，同时能容纳的信息量可以很大。

缺点：就是在后台系统当中只有这一种筛选形式会面临在我常用的几种筛选的字段中，要通过不断寻找，来满足我的筛选需求，操作麻烦。

4.表头筛选

优点：可以通过表头的点击，使用户更快捷进入到自己的筛选条件，在通常情况下，在表单越左的数据显然是越重要的，也是使用筛选去筛频率最高的，因此高频的筛选场景基本还是得到满足。

缺点：用户第一次进入系统很难理解这种交互形式，且在每个表头都会有一个 icon，影响用户对于表头的识别。

5.弹窗式

优点：是能够在节省面积的情况下，可以进行很复杂的筛选，同时可以支持复杂情况下的筛选。

缺点：弹窗会遮挡一部分表单数据，会影响筛选人的判断，其次筛选条件的添加也相对更繁琐。

参考链接

https://ant.design/components/form-cn/

https://element.eleme.cn/#/zh-CN/component/form

https://www.uisdc.com/b-end-form-design-3

https://www.uisdc.com/b-end-form-design

https://www.uisdc.com/filter-controls