网站建设中怎么做好表格的设计发布者：本站     时间：2021-02-20 10:02:03

表格，是一种常见的信息组织整理手段。常用来展示、保存、对比分析、排序、筛选 、归纳等，是最清晰、高效的数据展现形式之一，由内、外两部分组成。

内部：由表头、表体、表尾共3部分组成；
外部：由筛选区域、操作按钮区、分页区共3大类组成。
从易读性和易操作性两大方面，教你做好表格设计

说完表格的组成，接下来将会从易读性和易操作性两个方面来分析下表格设计。

易读性
1. 行与列
表格的组成，也可以看作行与列的自由组合，这种组合赋予了表格多样性的特点。行与列构成了单元格的长与高，不同的长高会有疏密之分，充实与透气之感。

B端中后台通常会对应不同的角色及场景需求，根据目的及信息主体的不同，让用户根据自己的需求来定义表格的展示列及列的顺序，也可以通过行与列的显隐变化，来更好的满足信息的传达。

但需要注意的是系统应记住用户上一次的自定义列设置，减少用户重复操作。对于列的选择，应尽量减少列的数量，既要展示用户必要信息，又要避免出现用户无关数据，以免信息冗余，影响信息阅读效率性。对于用户需要的非重点、辅助性信息可以通过入口提供的方式来解决。

默认排序，应从用户目的出发，遵循用户查看数据的习惯，尊重数据之间的关联性，设计用户查看、操作数据的路径，而非随机排列。

从易读性和易操作性两大方面，教你做好表格设计

2. 数据展示
B端中后台中的表格展示的数据多且杂，这就要为用户先一步对数据进行梳理归纳，提高用户获取信息速度。

为便于对数据进行对比分析，一般需要在原始数据的基础上给出差值、升降变化、平均值、总计等数据处理结果，减少用户二次加工数据的过程，提升用户阅读信息的效率。

数据汇总展示

在表头或者表尾分别提供了总计的数据，方便用户进行快速查阅。

从易读性和易操作性两大方面，教你做好表格设计

数据对齐展示

常用对齐方式有数字右对齐，文字左对齐，混合型文本左对齐，列标签的对齐方式与数据的对齐方式保持一致。这样能形成的视觉边界线，便于视线的流动，从而快速提升数据的浏览、对比效率。

从易读性和易操作性两大方面，教你做好表格设计

空数据展示

B端中后台数据类型较多，对于空数据，切忌不要与数据为“０”进行混淆，对于空数据通用做法是用“－”表示，而不是什么都不显示，会让用户误以为是没有数据还是“0”数据。

最好做法就是为空数据做出释义，可以加在“列标签”的名词解释文案中。

从易读性和易操作性两大方面，教你做好表格设计

数据的关键属性标识展示

对于用户重点关注的数据状态、上升和下降等，可以用符号进行标识，帮助用户快速定位到目标信息。

从易读性和易操作性两大方面，教你做好表格设计

3. 固定表头、固定列和固定分页
在有限屏幕内，有限的内容展示区域内，阅读丰富且繁多的表格时，用户不得不拖动横向或纵向滚动条来阅读信息。

固定表头、固定列和固定分页，能够让用户明白当前单元格内信息的属性而不至于不知道该信息的意思。

固定表头

在固定的小区域内滚动会非常局促，而且区域滚动和全屏滚动同时存在时体验也很不好。固定表头可帮助用户识别信息，在全屏滚动上去后固定表头，有利于用户向下翻屏时能够便利的阅读数据。

从易读性和易操作性两大方面，教你做好表格设计

固定列

固定列的内容可视业务及目标用户的诉求而定，一般采用方法是固定比较重要信息，方便用户进行数据定位与对比，最好可以让用户自定义，满足不同用户诉求。

从易读性和易操作性两大方面，教你做好表格设计

固定分页

分页处理目前有放在上部、下部或上下部均有，需要根据场景来选择。分页固定目的是为了省去用户需要翻到顶部或底部进行操作的麻烦。

特别是可以自定义每页的数量和需要横向拖动数据查看，这就需要把分页固定在底部，方便用户横向拖动滑条查看信息和进行翻页操作。