复杂数据表格设计的注意点及规范与例子分享！

对复杂数据表的设计稍加澄清，可能会使表更清晰。

上一篇文章提到了数据表设计的一些注意事项。本文将继续补充这些预防措施。同时结合最近看到的一些复杂表格的规范和例子，分享一些个人看法。

1.浮动操作

如果表格需要编辑，通常会有相应的操作按钮，有时直接显示按钮，整个表格会有一排重复的操作按钮，在界面上有点多余如果将表格的操作改为浮动按钮的形式，按钮在浮动时出现，这样一方面可以集中操作，另一方面可以让页面更加简洁。但这也取决于情况。如果按钮出现浮动，则界面上的位置会有一些空白。太多的空白也会造成界面浪费，所以你可能需要把握好程度。

（浮动操作示例）

2.多模态弹窗

如果表单的信息输入或修改需要包含更多的信息，如果全部显示出来，视觉负担会太重。因此，也可以使用多层弹出窗口进行显示。模态弹窗显示的优点之一是可以显示。填写信息时弱化其他区域，使填写更加集中。

（多次弹出操作）

3. 分页

分页操作可以给表格带来更多的显示空间。在这个场景中，用户可以选择表格来显示不同的行数，以便用户可以根据个人习惯调整表格的显示方式。

（分页示例）

4. 编辑属性面板

除了表格项属性的模态显示外，还有拉出右端面板的形式。其实两者都可以用，但具体的用途还是要看场景区分，需要综合考虑整个产品。比如右端做成属性面板，产品全局必须指定对应的属性面板区域，以训练用户查看属性的一些路径。

（弹出属性面板示例）

5.可调宽表

如果表格中的数据很长，往往会被隐藏，无法完整显示。如果表格的每一列的宽度是可调的，用户可以根据需要进行调整，以显示全部信息，方便阅读。

（可调节桌子示例）

6.带斑马纹的表格

表的形式可以说是统一的，也可以说是单一的，所以有时候需要缓解一下单一的印象。如果加上斑马纹的颜色区分，可以让整体线条和线条更加明显。这也可以增加表格的可读性。

（带有斑马纹的表格示例）

7.查看表格详情

同样是查看表格详情的操作，那么和上面第四项交互有什么不同呢，除了内容？其实仔细看会发现这里的关闭操作是在左上角，而不是经常看到的右上角。在这种情况下，从点击到展开的路径缩短了。这是针对需要扩展的多个操作。将提高用户效率。

（查看表格详情示例）

8. 可排序的标题

对于表格，因为信息量很大，用户需要挑出自己需要的信息。因此，有时会用到搜索、过滤、过滤等操作，不同的操作一般分布在不同的区域。当子操作有点碎片化时。但是下图中的设计是将搜索和头部结合的设计，这样操作会比较集中。但缺点是占用更多空间。

（可分类标题示例）

9. 排序表

表格排序也是选择表格信息的一种方式，通常以表格头部的小箭头形式出现。比如日期头可以通过排序来排序。

（可排序表的示例）

10.视觉形式

如上所述，表格的信息是统一单一的，所以图形化的数据展示是一个很好的切入点，可以让人对表格中的数据有一个整体的印象，一目了然。当然，数据可视化并不是说到就可以做到的。它需要与开发者沟通并获得他们的支持与合作。在做之前，也可以用excel尽可能逼真地模拟效果，使最终效果最接近，增加说服力。

（表格的可视化示例）

当然，有时候因为技术的限制教案模板空白表格设计，并不是每一个属性都可以照顾到，但是如果你能尽力而为，表格的设计会趋于更加完美。

一些想法和例子1、还有很大的完善空间

虽然这些属性看起来很全面教案模板空白表格设计，有时候看一些标准化的网站，在表单的设计上还是有很多地方可以改进的。比如 Ant Design 就提到了表单的批量选择。如果我们选择跨页信息，我们如何将选择的信息传递给用户？ Ant Design 进行了以下设计改进：

（Ant Design 对所选信息展示的设计）

只要用户进行选择，选中的信息就会以“标签”的形式出现在列表的顶部，方便用户浏览选中的信息，而这种设计也使得交叉页面信息选择“增删查改”更快。

2、即使是企业级的成熟设计也会有缺陷

以最近看到的一个小例子作为参考，Salesforce Lightning，作为全球排名第一的云CRM平台，虽然他们的表格设计在视觉上是统一的，但对于表格设计的属性进行了细化。 ，还有很大的优化空间。例如下图是多选表后批量操作的流程图。

（Salesforce Lightning 表批量操作）

首先，选择区域和操作区域之间的移动距离在页面上是对角线的，距离比较远。另外，表操作区的功能组划分，在批量操作层面，是将“不相关的操作”和“相关的操作”放在一起，所以用户在选择批量后可能更难想到“批量” . “与“按钮组”关联，从而中断操作。

（Salesforce Lightning 表格操作按钮）

但是，毕竟一个系统的设计不能总是考虑方方面面，因为信息的展示也可以从不同的维度来考虑。所以我个人理解，即使是领头的系统，为了维持整个系统的功能平衡，也会从全局考虑，避免捡芝麻丢西瓜，所以一些细节会放在次要位置。想一想，这就是我刚才提到的一些问题出现的原因。最近，我在读一本关于 Koshi Sato 的书和一本关于整理的书。还提到了可以用来分解和解决“梳理”、“排序”、“分类”等复杂问题的方法。我觉得这种思维跟“设计的时候要考虑方方面面”差不多。

虽然结果不一定是最完美的，但我认为作为设计师，我会考虑所有可以考虑的细节，并尽可能多地考虑可以考虑的问题。对我自己的积累总是有帮助的。相互鼓励。