宋代陆游的诗、纸上得来终觉浅，觉知此事要躬行。前两篇文章我们写了表格基础知识和表格的设计。

本篇文章就是理论结合实际。讲解一下在后台SaaS项目中表格是怎么进行减负提效的。

1、B端SaaS系统表格

在整个B端产品体系里面、表格可以说是一个重要的角色。也是被公认为是展示结构化数据最为清晰、高效的形式。解决表格的问题、在一定的条件下就等于解决了至少解决了B端产品80%的问题。

1.1、B端表格的意义和原则

1.1.1、B端表格的意义

B端产品中表格的意义在于整合和展示数据、提升工作效率、辅助决策分析以及提升用户体验。因此，在设计和优化B端产品时，应充分重视表格的作用，确保其能够充分发挥这些意义，为用户提供更好的使用体验和价值。

数据整合展示

表格作为一种结构化的数据展示形式，能够有效地整合和展示各类信息。为用户提供高效的数量分析的基础。

提升工作效率

表格在B端产品中通常具备丰富的操作功能，如排序、筛选、搜索等。这些功能使得用户能够更高效地处理数据，减少手动操作的时间和成本。

辅助决策分析

表格往往承载着重要的决策分析功能。通过对表格中的数据进行对比、分析和计算，用户可以得出有价值的结论和洞察，为企业的决策提供支持。

提升用户体验

优秀的表格设计还能够提升用户的使用体验。通过合理的列宽设置、清晰的标题标识、恰当的空白填充等方式，可以使得表格更加易读、易懂。同时，考虑到不同用户的使用习惯和需求，表格设计还可以提供个性化的定制选项，以满足用户的特定需求。

1.1.2、B端表格设计原则

B端产品中表格的设计应遵循清晰可读、结构化布局、功能齐全、响应式设计、可定制性和性能优化等原则。这些原则将有助于提高表格的可用性和用户体验，使表格成为B端产品中不可或缺的一部分。

清晰可读

表格的设计应首先保证清晰可读。这包括选择合适的字体、字号和颜色，确保文本和背景有足够的对比度，避免用户阅读困难。同时，列标题应简明扼要，避免使用过长或复杂的术语，方便用户快速理解表格内容。

结构化布局

表格的布局应结构清晰，遵循用户的使用习惯。例如，重要的信息应放在表格的左侧或顶部，便于用户快速定位。同时，列与列之间应保持适当的间距，避免信息过于拥挤。

功能齐全

表格应提供丰富的操作功能，以满足用户的不同需求。这包括排序、筛选、搜索等基本功能，以及数据导出、打印等辅助功能。这些功能能够提高用户的工作效率，使表格成为数据处理的有力工具。

响应式

在B端产品中，表格通常需要适应不同尺寸的屏幕和设备。因此，表格设计应采用响应式布局，确保在不同设备和屏幕尺寸下都能保持良好的可读性和可用性。

性能优化

对于包含大量数据的表格，性能优化尤为重要。设计师应关注表格的加载速度、渲染效率等方面，确保用户在处理数据时能够获得流畅的体验。

1.2、B端表格常见布局

在大部分的b端业务界面里、表格在页面中的区域是最大的。我们大部分的业务场景中都是对表格、扫视或者操作。

2、项目优化改版

我们的SaaS系统是我们行业内的No.1龙头的存在。在我进入公司时开始推动SaaS平台的整体改版。页面中的表格也是此处整体优化改版的一部分。本次我们就结合之前写的文章来介绍一下我的表格改版设计。

2.1、项目需求

随着企业数字化转型的加速，我们的客户也面临着业务效率提升和用户体验优化等的多重挑战。他们需要一个高效、易用的驾校一体化解决方案来支持日常业务运营和管理。作为一体化解决方案的核心。驾校通SaaS管理系统业务的优化等更加的重要了。

2.1.1、产品需求

丰富优化我们的SaaS系统、跟进业务需求迭代。旨在做一个款不断提升工作效率、优化用户习惯，并实现我们用户业务不断增长、企业信息化数字化的SaaS系统。

2.1.2、设计需求

设计规范规范不完善；现有页面布局拓展性太差、无法满足新增业务功能。整体视觉系统混乱。

2.2、现在问题

针对“SaaS”改版的业务端需求。基于目前产品我们进行了线下企业进行了实际走访调研听取他们对我们系统的评价、和在操作上遇到的问题。

2.2.1、交互混乱逻辑不合理

部分功能流程都走不通、功能布局不合理，操作过于繁琐。用户体验十分的差。逻辑不清晰、关系复杂和流程混乱，导致用户使用产品或服务时感到不满和困扰。

2.2.2、信息层级混乱

用户无法快速找到自己想要的数据或筛选条件，页面结构混乱、信息主次不明确。信息层级混乱导致用户感到困惑和不安，增加用户的认知负担，使用户难以理解和使用产品。

2.2.3、设计规范不完善

设计成本较高、开发沟通成本高、产品质量不稳定。各页面出现问题不同。设计规范的不完善导致产品的用户体验不一致。之前多个设计师经手导致产品的界面、交互和体验风格不统一。

2.2.4、视觉表现极差

整体的设计风格陈旧、拥挤杂乱。而且视觉呈现不统一。界面设计不清晰，图标、按钮等元素的识别度低，用户可能会难以理解和操作产品，导致使用效率低下。

2.3、优化目标

结合我们平台的优化改版目标、当然表单也基本是一致的。通过我们对问题的总结和分析、逐步我们对平台的改版方案有了明确的思路。

经过和产品、开发团队沟通后，计划改版分为三个阶段。模版页面设计改版、沉淀符合业务组件、统一平台视觉优化交互细节。

2.4、优化改版细节

在我们之前的文章中、已经写到了表格是一个系统。它分为内部和外部、下面我们就结合我们之分享的经验。来看看我们的表格改版细节。

我们首先对整个版面结构进行了重新划分。把页面的框架先确定下来。然后我们在对表格的内外进行优化。

2.4.1、外部

表格的外部、有什么如果你看过之前的文章。应该是有印象的吧。是的有、筛选区域、操作区域、标题；

筛选区域

在大部分B端表格页面里、筛选条件是必不可少的。他能够精确的帮助用户精准高效的查询和归类分析数据。在这部分我们在原有界面上凌乱的筛选布局做了规范。

组件大小和排版：原界面组件大小不一导致我们页面筛选区域排版凌乱。针对这个问题、我们规定组件尺寸。应用之写的栅格话那篇文章里的知识、规定每行排列6或者8个筛选条件的组件（当然这是简单的说了、其实还有挺多特殊情况。但大部分情况下我们这个规定是可以应用到业务里去的）。

自定义：因为我们系统充斥着该死的自由性。所以我们还做了筛选条件的自定义添加和减少来提升用户体验。这样做还有一个好处就是可以提高我们的屏效、更多的显示表格数据。

当然在自主添加筛选的功能外、我们也在部分页面做了展开收起筛选条件的功能来提升我们屏效。

标题和按钮操作区域

这部分我们改版的核心思想是整理、简化、归类。在保证用户高效操作的前提下、按场景提高按钮。

2.4.2、内部

看过之前的文章的应该都清楚我这里说的内部区域是哪些部分吧。是的那就是表头、表体、底栏、我们分别说一下我们是怎么对这几部分进行优化设计的。

表头

我们对表头进行了颜色调整、文字调整。在颜色上我们加深了表头的底色来和下方数据内容做对比。凸显表头细心更清晰。

表体

我们对表体、因为我们的数据字段非常的多。所以我们对表体在样式上从之前的线条、增加了斑马线底。在对数据做区分。

我们还对表体分割线颜色、方格里的留白空隙就行了优化。当然也优化了一些字段，该删除的删除。改合并的合并。总的来说做了很多详尽的优化。不止这一点点。就不详细的展开说了。核心是减负提效。

底栏

底栏是我们翻页器的存在。从原先的不合理的左对齐、改成现在刚有利与我们操作的右对齐。如果数据没有达到底部、不显示翻页器。

2.4.3、展示一下子

结合我以往的经验和表格的基础知识和优化方式。对我们业务表格的文字、方格、颜色、操作交互、字段优化等多方面结合我们的业务进行了优化设计。是的可能还有很大的优化空间。但这次的优化就到这里了。

来单独看一下

3、最后

表格的文章到这里就写完了、讲了基础的支持、也写了优化的方法、今天也分享了实例。我还想说的是、我们讲的所有方法理论和基础、在B端设计里脱离业务的设计都是瞎扯淡。我们设计也是从业务需求出发的。

终于又完成了一个部分的内容。

我是king、荆轲刺秦王吧；我想我们很快还会再见

Powered by Froala Editor