整体文章为我们的B端表格从细节到交互上结合我的经验和大厂规范、给出一些B端表格设计和优化上的建议和注意事项

清明节攒了一个长的假期、去了一趟海边（青岛）。看了雨天的怒海狂涛、也看了晴天的一眼无际。文章的更新应该是停了一段时间了。大概率是因为我懈怠了，对自己太放松了。

这次回来还是要坚持做输出的。尽快把这个系列我想写的基础搞完、然后开始写一些其他的我觉得有意思和价值的输出。而且也要开始进行AIGC方面的学习、应用和研究了。

写在前面

上一篇文章中我们介绍了表格的优势同时也是自身的缺点、表格的拆解、表格的类型、表格的样式。如果没看过，那去看一下。

表格基础设计浅谈01

https://www.ui.cn/detail/663086.html?nopop=1

我们把文章分为两部分、第一部分说表格的实战设计。第二部分写表格内的一些交互。第三部分写大厂规范里、对表格设计的建议。

第一部分 | 表格设计

优秀的 B 端项目表格又不能只像 Excel 一样可以使用固定的模版，不同项目、页面、模块对表格的可视需求天差地别，需要根据具体情况具体分析。

一个表格的设计其包括的不止是表格内容的设计、是一个整体的内容区域设计。比如上一篇文章中说的功能区域、按钮、筛选等。

1、表格外部设计

表格外部设计主要是配合整体视觉的、外部区域是由标题、筛选、搜索、视图、新建等操作组成，而功能间的区分是外部功能栏设计的一个关键。

2、表格内部设计

表格内部主要包括了、表头、表体、底栏这三部分。总的来说最简单的表格，就是表头、表体、翻页器（底栏）组成的。

2.1、表头

也不是所有表都有表头、但大部分是有的。表头每个字段的属性、决定了下方显示的数据。通常我们把表头和下面内容做区分。表头文字有一定的标题属性。所以我们会在背景色、分割线、文字颜色和加粗文字来和列表内容做对比。

表头的内容区域也是可以对相应的内容有交互功能的。如筛选、培训等

2.2、表体（单元格）

承载用户的每一条数据，也是整个表格的核心，单元格的大小行高都会影响用户使用表格的体验，单元格的设计上也会有很多设计思路。

2.2.1、填充and边距

合适的填充和边距对于视觉设计至关重要。既包括保证数据单元格之间的留白，又包括单元格内部留白，以保证易读性，当创建表格设计规范并严格遵循后，就可以创建视觉一致的表。

2.2.2、对齐

对齐能够很好的形成视觉引导线，会让表格更加规范易理解，给用户视觉上的统一感，视线流动更顺畅，让用户快速的捕捉到所需内容。

人们倾向于把那些经历最小变化或阻断的直线或圆滑曲线知觉为一个整体，倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。

2.2.3、文字对齐

我们大部分的文字对齐是遵循左对齐。这样可以提高数据的浏览效率。但对于数据少于9个字段的列表我们也可以采用与表头居中对齐的方式。

2.2.4、数字对齐对齐

我们数字的选择上首先要选择等宽的字体。这样我们右对齐时、可以快算的对不同的数据做大小的对比。（这仅限于大额数字的对齐方式）

2.2.5、样式

样式现在来说已经是比较固定的了。只要选一种符合自己业务的使用就行。有/无分割线、斑马格等吧。

2.2.6、克制

在表的设计中所有的细节设计最终的目的都是信息能够高效的传递到我们用户的眼里。所有是觉得优化也都是为了这一目标而做的。比如列的强调、空白单元格的处理、数据过长所运用的气泡显示、关键属性标签等。但是我们在优化视觉的时候需要克制设计的欲望。有效的信息传递才是我们表的目的。

2.3、翻页器

底栏在表格最下方，主要展示正文中的数据量或单页数据的概览信息，也常提供统计功能，供用户了解总体进展。底栏一般放统计信息、分页控件、备注说明、操作按钮(加载更多)等内容。

底栏最常见的元素就是分页，分页可以放在头部或底部，常见的还是放到底部，分页固定能省去用户需要翻到顶部或底部进行操作的麻烦。分页可分为整体页码平铺式、全功能版、简易版等，需要根据不同的场景选择最优的设计方案，比如有的时候并不需要定点跳转。

第二部分 | 表格交互

优秀的表格交互给予用户操控感，通过表格，可以整齐、有序地展示大量数据。用户可以快速定位到所需信息，减少了在信息海洋中搜索的时间。这种高效的展示方式有助于用户更快地理解数据，从而做出决策。

良好的表格交互设计可以简化用户的操作过程。通过表格交互，用户可以在一个界面上完成多项操作，减少了在不同界面之间切换的次数。这有助于降低操作错误的可能性，提高数据的准确性和可靠性。

1、表格的响应式

在没有写这篇文章之前我其实是并不太了解表格的自适应的。我大概理解是有个页面有个最小尺寸。缩到相应的宽度就会出现滑块。大部分的工作是留给前端大哥去解决这个问题的。

这次我结合网上的文章和我们前端大佬的请教来说一下表格的响应式。大佬说、我们都是直接找的框架改的。直接跳过了地基的搭建。

网上的文章讲的很细、我看了一遍。前端的技术的文章我看不太懂哦（哈哈、优秀的我居然看不懂）。有一篇酸梅干超人的《掌握表格设计，就掌握B端设计的半壁江山》中写的还是相对能看懂的。想了解这部分知识的建议去看看。

表格的响应式规则比较细碎，他根据下面的顺序展开解释：

表格的总宽响应

表格的最小宽度

单元格的响应逻辑

内容的响应逻辑

可以了解一下。丰富一下自己的知识。有机会可以和面试官、HR、领导吹牛逼用。

2、筛选和搜索

表格中，筛选和搜索功能具有极其重要的意义。它们能够显著提高数据处理效率，帮助企业用户快速、准确地获取所需信息，进而优化业务流程、提升决策质量。

我们可以从三个方面去了解。提升数据处理效率；优化业务流程；提升用户体验；

2.1、提升数据处理效率

当我们的表格数据量庞大时、为我们的表格添加筛选与搜索。可让用户从默认的表格数据轻松获取要查找的内容，在数据量较大的表中特别有用，一般位于表上方的操作区域或表头区域。

2.1.1、快速定位数据

通过筛选和搜索功能，企业用户可以在海量的数据中迅速定位到所需信息，避免了手动逐行查找的繁琐过程，大大提高了数据处理效率。

2.1.2、精确提取数据

筛选功能允许用户根据特定的条件对数据进行筛选，从而精确提取出符合需求的数据子集。这有助于企业用户快速了解数据分布情况，为后续的数据分析提供有力支持。

2.2、优化业务流程

快算的对数据的提取和分析、将帮助企业对市场趋势做准确的把握。从而优化自己业务流程来为用户提供刚好的体验和更高效的处理企业用户的需求。

2.2.1、自动和筛选

通过预设筛选条件，企业可以实现自动化筛选数据，减少人工干预，降低出错率。这有助于优化业务流程，提高工作效率。

2.2.2、辅助企业决策

筛选和搜索功能可以帮助企业用户快速获取关键数据，为决策提供有力支持。通过对数据的深入分析，企业可以更加准确地把握市场趋势、客户需求等信息，从而做出更明智的决策。

2.3、提升用户体验

高效的数据查找能力、在庞大的数据量面前做精准提取数据。这些通过筛选和搜索便利的交互手段。可以轻松的提升我们的用户体验。

2.3.1、简化操作

筛选和搜索功能使得表格数据的操作更加简便，用户无需具备专业的数据处理技能也能轻松上手。这有助于提升用户的使用体验，增强用户黏性。

2.3.2、个性话定制

企业用户可以根据自己的需求定制筛选和搜索条件，实现个性化的数据展示。这有助于满足不同用户的需求，提高整体满意度。

3、滚动和固定

在B端表格中，滚动和固定功能各自扮演着重要的角色，它们共同提升了用户体验和数据处理的便捷性。

3.1、滚动

表格的滚动，当表格中数据量非常大时或电脑屏幕尺寸过小时表格都会出现滚动。滚动功能允许用户垂直或水平的浏览表格，查看更多数据行或列。这有助于用户在不改变表格结构或缩放页面的情况下，轻松访问到表格中的所有信息。

3.2、固定

在滚动过程中，固定功能可以确保表格的某些部分（如头部、底部或特定列）始终保持在视窗中可见。这对于用户来说非常重要，因为他们可以始终参考这些关键信息，而无需频繁地滚动回顶部或特定位置。

3.3、保持数据关联

滚动过程中，表格的头部或关键列通常保持固定，而数据部分则随着滚动条移动。这种设计有助于用户在浏览数据时保持对列名的可见性，确保他们始终清楚当前查看的数据属于哪个字段。

固定的列或行可以帮助用户更好地理解和对比数据。例如，固定列可以确保用户始终看到数据的分类或标识信息，从而更容易地识别和分析数据。

滚动和固定功能在B端表格中扮演着不可或缺的角色。它们共同为用户提供了更加便捷、高效的数据浏览和处理体验，有助于提升工作效率和准确性。

4、排序

排序简单的就是说数据的排列顺序、我们通常表格会有一个初始的默认顺序。但有时候用户希望按照自己的想法去排序或者换一种排序方式。

4.1、拖拽排序

拖拽适合数据较少的场景下，是一种非常方便的改变排序的方式。所见即所得、方便用户操作提升工作效率。

4.2、穿梭表格

就是多表格拖拽的情况。比如左侧的表格内容可拖拽至右侧列表框，同时支持表内上下拖拽更换位置顺序，也可直接选中对象在两栏中按钮移动，完成拖拽行为

4.3、表头排序

最常见的表格数据排序方式。主要是数据的升序和降序排列。比如，事件相关的表格，默认时间降序排列；风险相关的表格，默认安全降序排序。

表头排序可以辅助用户快速挖掘出需要关注的信息，发现数据信息之间的关系，一般可按数字大小、文字拼音顺序、字母顺序等其它数据特征进行排序。

第三部分 | 大厂规范建议

我们这部分、就了解一下。在大厂的规范中、对我们在表格设计中的一些建议。这些是我们在优化自己表格设计或我们在设计表格时很好的借鉴。这里我们就以ant 的规范为主讲一下。

在ant design中他是这样定义表格（Table）强调浏览性。矩阵布局，趋向于展示复杂数据，数据按照矩阵布局对齐，方便横纵浏览数据，研究数据之间的关系。特别当用户受益于更多的数据外露，而无需进入该对象详情时，使用表格。

1、搜寻数据

我们做之前的表格的交互模块里就讲到了对数据精准的提取和定位、这样我们就需要选择合适的搜寻数据的组件。

在选择组件适用的组件是需要考虑。明确用户主要的搜寻模式；搜寻数据的频次越高对效率的要求越高；

与开发做好沟通，了解系统性能；

1.1、查询和筛选

查询

按照预设的条件，选择多个查询条件后一次性提交获取查询。

筛选

用户调整筛选项，结果即随之调整。

2、搜索

更智能的查找，输入关键词一次性在多种数据属性中查询后，展示结果。

3、分页

默认使用分页加载，用于减少用户等待。应缓存用户在原列表中的浏览位置，并标记列表中已浏览项，当用户返回上级页面是回到原浏览位置。

默认推荐使用。使用时，当页面内容不足一页时，不展示分页器。

4、批量操作

当用户勾选条目后，触发批量操作模式，列表工具栏呼出批量操作工具条。

我自己觉得这个建议还是挺好的。还有其他一些建议、自己可以去官网自己看。

最后

慢慢来吧、给自己一个沉淀和整理自己的机会。其实很不错。做有意义的事情、分享自己分享价值。最后以徐志摩的《偶然》结束这篇文章吧。

我是天空里的一片云，
偶尔投影在你的波心──
你不必讶异，
更无须欢喜──
在转瞬间消灭了踪影。

你我相逢在黑夜的海上，
你有你的，我有我的，方向；
你记得也好，
最好你忘掉，
在这交会时互放的光亮！

我是king下篇文章见。

Powered by Froala Editor