大家好，我是小鹿lp，本次将会大家带来B端典型页面表格系列，文章将从概念和结构拆分为以下四个部分为大家进行全方位的解读复盘。
01 表格的概念
02 数据查看-显
03 数据筛选-查
04 数据操作-增删改
表格是展现数据最为清晰、高效的形式之一，它也是B端产品和设计师每天接触最多的组件，常和排序、搜索、筛选、分页等其他界面元素一起协同。在企业级中后台中，常应用于：
通常表格的组成元素以及相关元素会有多个部分，根据不同粒度的用户目标将其解构为三部分：
数据查看：表格的核心-显，用户用来阅览、对比和分析数据。
数据过滤：辅助作用，承载表格的查功能，将数据过滤，方便用户快速查询定位数据，一般位于表格上方。
数据操作：辅助作用，承载表格的增删改的功能，比如常见的“新增”、“删除”、“编辑”按钮。
从用户目标来看，表格页的终极目标是查看，所以我们按照数据查看、数据过滤、数据操作的顺序来对表格页进行讲解。
数据查看区主要由表头、行、列、单元格五个部分组成。
表头：说明数据的内容，可以包含筛选、排序等功能起到数据解释作用，行和列：对本行/本列数据的描述，可以理解为是表格的骨架，是用户快速扫描并接收表格布局的关键要素单元格：表格的主体内容，承载用户的每一条数据，也是整个表格的核心
分页器（不一定有）：分隔长列表的组件，每次只加载一个页面
对表格元素拆解后，小编将通过八个点：表格构成（表头、行、列、单元格、分页器）、视觉风格、基础交互和详情查看，三原则：信息降噪、呼吸适中、高效易读对表格设计一一拆解
表格中所承载的数据信息才是主体，在进行表格设计时，尤其要注意去除所有非必要的视觉元素，让用户将注意力集中在数据信息上，而不是无关的边框、底色等。
去掉竖向分割线：水平分割线能显著减轻长表格在垂直方向的视觉重量，加快大量数值的对比工作。
而竖向分割线的作用是即使缩减元素之间的距离也能区分不同元素，但如果使用了合适的对齐方式分，竖直分隔线就会很多余的。即使要用，也要非常淡，不能妨碍快速浏览。
不使用斑马线：数据量不大且易分辨的情况下，斑马线在很多时候也是没有必要的，因为它们是同一类数据，而且水平分割线就已经能够明显区隔。
分割线的样式尽量轻盈，无关的边框不要抢视觉，数据才是主体，突出内容。
去掉不必要的装饰和颜色，如icon、标签等，虽然能够帮助组织数据、更直观的传达信息，但物极必反，少即是多，要注意克制这些元素的使用。标签能用线性就不用面性，做到轻盈，否则表格中最重的就是标签。
在产品的品牌设计中，字体是规范中的重要一环。然而在设计表格时，简约至上才是关键，尽量避免任何装饰性字体。虽然文本不能够建议你具体使用哪种字体，但数字建议使用Helvetica Neue、Helvetica等其他等宽字体，文本最好不要出现以下情况
不要出现衬线字体：因为个性会产生阅读噪音，不利于用户对数据的理解和思考。
不要出现全大写字体：因为它很难读，需要转化思维。
不要出现使用斜体：易引起视线疲劳，影响阅读。
不要出现多种字体：保持风格统一。
根据表头的复杂程度，可以分为以下三类类型：
而在表头设计过程中，有以下3点需要注意：
表头，概括每列的主要信息，在用户使用表格中，起到数据解释作用，让数据能与之进行匹配，使用户能够看懂。表头在能够概括的情况下，尽量简炼、准确，一般可根据上下文关系来进行减短简化，以达到节省表格头部空间和减轻视觉压力的作用。
一个简单的检验表头是否精简的方法是：少一个字不可，通俗易懂的说法就是字数再精简用户就不明白意思了。可以让其他同事体验产品，看有没有一些名词定义让用户产生误解。
对于比较复杂的表头，可以定义一个专有名词，鼠标hover上去对专业术语或用户不常见的名词给予该字段的详细解释，同时满足新手、普通、专家用户的需求。
如果表格数据可以自我解释，表头就不是必须的。如电子邮件的表格，就不需要表头，因为发件人和邮主题的区分度比较高。
在开发同学的眼中，单元格高度=内容高度+上间距+下间距，在实现设计稿时，通常也是按照这个方式来写的，而不是像设计同学一样按照文字的尺寸来计算间距。其中，文字行高建议设为字号的1.5倍，上下间距设为字号的1.2倍。
当然，在很多很多通用化产品中，存在多个设备屏幕分辨率的差异，为了让每一个分辨率下的产品都能够有较好的展示效果，可设置舒适、标准、紧凑三种高度来满足需求，提供切换按钮让用户自己控制显示密度。
工作中常常会遇到单元格数据过多的情况，常见的方法有两种：
数据过多时，单元格长度如何定义？超过哪个范围“...”显示呢？
定义长度的依据：根据业务字段，防重复。保证用户在扫视的时候，对重要字段能快速区分、对比。
当表格单元格中没有相应数据时，要避免直接留出空白单元格。空白格容易造成用户的困惑甚至误解，用户会搞不清楚到底是没有数据，还是根本没有值？
正确做法是，数据不存在（数据库中没有该字段）用“-”，没有数量（数据库中有该字段）用“0”，且小数点后位数、单位，都要与上下单元格保持一致。
我在接手我们后台产品之初，在对业务人员进行角色调研时就收到反馈到有些页面非常难用，有些就很好用。为什么会出现这样的情况呢？如下图所示，被投诉的表格单操作项就有6个，一方面容易误操作，另一方面左侧的数据展示内容有限，易读性很差。
对于单条数据操作频繁的场景，我的方法是，当超过三个操作项时，将操作低频折叠收起。这样做的优点是界面简洁明快，信息密度低，可以帮助页面突出更加重要的信息，减轻空间压力，减少干扰。
多行情况下，居中和顶部对齐都是可以的。不过小编建议采用顶部对齐，考虑到一行类不同的单元格会有行数不一致的情况，比如有个3行数据，有的只有一行，这个情况下居中对齐信息的阅读效率不如顶部对齐效率高
新增一条数据后，这条数据应该被放在表格的哪里呢？这是个和表格默认排序有关的问题。
表格数据应该默认按添加的时间排序，还是应该按某个字段的名称排序？
如果我们默认按某个字段排序，比方说岗位列表里增加一条“广深常温B2C 叉车员”的字段，而首字母G的数据在表格中极大概率不靠前。这时就会出现一个问题，用户要在茫茫数据中找到刚增加的那一条数据，或者用户根本不知道自己增加的数据已经被插入在了表格里了，这会让他们觉得自己的操作失败了。
解决这个问题的一个方法就是按照数据添加时间排序，默认最新创建的在最上面，体验上创建完反馈，马上就出现了变化，且针对最新数据的操作频率较高，方便用户发现与查找。同时也可以用带排序的表头，让用户自定义排序。
合适的填充和边距对于视觉设计至关重要，以保证易读性。定义列的间距时，我通常的做法是N1保持不变，将N2定义一个最小值，N2再根据表格的宽度自适应变化。表格主要适配到这个最小宽度，这一步骤通常的设计系统的初期就要完成，一方面可根据自己项目目前情况，按照导航宽度等固定尺寸确定最小的表格宽度，这样在处理最小尺寸时，可以有一个明确的边界，同时能与开发同学进行理解沟通。当表格宽度大于页面宽度，固定首尾列，左右滑动。
基于对实际业务需求、目标用户诉求及其行为的理解，列数尽量控制在7±2，列举用户更为关注的数据，用户需要的非重点、辅助性信息可以在详情中展示。
如果不同用户想看到的信息侧重不同，可以让用户自定义列的展示。在默认情况下仅展示最常用、最重要的几个指标（如下图）。这样做的好处是，首先，用户能在表格上方看到所有的指标名称，避免了原来需要横向拖拽才能浏览到所有指标的情况；其次，用户可以根据自己的需要，自由的选择显示所需指标，隐藏不必要指标，减少干扰。但需注意系统应记住用户上一次的自定义列设置，减少用户重复操作。
合适的对齐方式能够提升数据的浏览效率。表格内信息的纵向列对齐（符合格式塔心理学中相近原则）能够很好的形成视觉引导线。通过对齐，会让表格更加规范易理解，给用户视觉上的统一感，视线流动更顺畅，让用户快速的捕捉到所需内容。
在Web端，数据量动辄上万条，容易出现浏览器响应太慢或者浏览器内存溢出的情况。使用分页器有哪些优点呢？
表格设计大原则是整张表不要超过一屏，每一页的默认行数：10行以上，减少翻页的次数。但考虑到每个用户的使用习惯，在给出默认行的数量后，可以让用户自定义每页的显示的数量，相比于跨屏翻页而言，向下滚屏会更便利。
2个小tips：
1、当表格数据无数据时，翻页控制按钮不可见。
2、当表格数据条数小于10条时，翻页控制按钮不可见
详情查看可以分为点击详情、跳转（显性和隐性）三种方式。
详情：在操作列中增加“详情”功能，点击查看详情。
显性跳转：把 ID、名称等唯一性标志的字段加上超链接
隐性跳转：默认不显示链接色，鼠标hover上去才显示链接色，点击可以查看或直接点击除操作外的单元格查看（如飞书管理后台）
关于表格详情查看的展现形式，按可承载的信息量由少到多依次分为折叠展开、弹窗、抽屉、及新增页面四种类型。
a. 折叠展开
直接在表格里展开（可以是详情，也可以是二级表格），无需打开新页面即可查看附加信息，防止用户迷失。
适用场景：信息量较少的情况
b. 弹窗
弹窗是一种中断用户当前操作并对其进行补充、或者对当前操作进行强制反馈的交互形式，需要用户进行强交互，它可以保留用户当前进程的情况下，指引用户完成一个特定的操作。主要分为模态弹窗与非模态弹窗两种形式：
非模态弹窗
通常这类弹窗只会在屏幕上短暂停留，几秒就会消失，也因此用户感受不到他的存在。它的缺点也非常明显，展示时间较短，不适合展示重要信息、不能承载大量文案。在详情查看页面中并不适用，此处就不再进行拆解。
模态弹窗
位于浏览器的主页面核心区域，需要用户对它做出相应交互，弹窗才会消失。
优势：通过全局的半透明黑色能够让用户更加聚焦，集中精力去处理好当前事情，能够通过透明度展示背景，让用户了解到自己并没有离开当前页面
劣势：打扰用户，感到强烈的中断的感受
适用场景：数据详情体量不大，页面内容较轻时。同时，不需要参照上级页面内容，有快速回退的诉求。
c. 抽屉
侧滑抽屉相比弹窗减少了页面层级和隔离感，有较强的连贯性，适合与原页面具有连贯结构的内容的展示。单击行链接将表格转换为左侧的列表项目和右侧的其他详细信息，这让用户能够解析大型数据集，而且在涉及到多个项目时不会丢失位置。可自定义上下左右四个方向，一般右侧滑出最为常见。
适用场景：详情页的内容较多时，且有快速切换主体的诉求。
d. 新增页面
新增页面几乎是万能的，无论页面内容量是多少、页面间是否连贯、以及使用频率怎样，都可以使用。新增页面又分为：覆盖当前窗口以及新窗口跳转两种形式，在场景上可以根据两者差异进行选择。
在详情查看中，二级页面使用频率是非常高的，需要用户在A与B页面之间进行来回切换，这时候考虑页面反复出现是否流畅，是否有切换成本的产生，本着产品效率至上的原则，新增的页面建议新开一个窗口跳转而非覆盖，如下图：
适用场景：当详情页承载内容过多且里面的操作相对复杂时，如详情页内有表格的嵌套和特别多的操作
表格滚动方式有表头固定和列固定两种，比较复杂的表格可同时采取表头和列都固定的情况
表头固定 ：适合列表滚动加载时，适合浏览场景
列固定 ：适合列表项较多时 ，需要左右滑动时。比较常见的是首尾固定，当时也可以按照业务要求首列或者尾列固定，或者说表格前两列业务都需要看到，则可以固定前2列
表格中的复选框、折叠图标，操作按钮等遵循组件本身的加载规则。
加载机制根据实际业务中的数据量来决定是全量加载还是分页加载。
加载样式循序对应规则：
数据检索区可以看作表格的导航，按预定目标过滤出某种具有特定性质的数据，将操作者所关注的数据展示到前面，便于快速查看查看、对比、分析信息的操作过程。从用户角度出发，按不同粒度的数据检索方式分为3种方式，分别对应不同程度的用户。
搜索：当用户有相对明确的选择目标时，需定点查看，数据多且杂乱无规律；
筛选：用户目标相对比较模糊，游离于一个大概的范围时，通常用于一些有清晰分类的数据；
标签：查看无交集的数据内容，通常伴随时间、状态的流转。
搜索可以帮助用户在巨大的信息池中缩小目标范围，快速而准确的定位到目标数据，并速获取需要的信息。由于考虑到用户需要手动输入，很难保证精准搜索，原则上所有搜索均为模糊搜索，必要精准搜索的地方使用筛选功能，给用户提供筛选选项。通常上端搜索栏不被限定搜索范围，可以全部搜索。
优点：减少精准搜索带来的记忆负担
缺点：容易把不相关的信息带出来，如搜索手机号131，把ID含131数字的信息也带出来了
优点：搜索匹配精准度高
缺点：不方便，每次只能对单一条件进行搜索
筛选可以帮助用户缩小数据范围，逐步找到想要的内容；或者当用户的目标就是查看某一范围的数据时，筛选将是一种十分快捷的方式。在企业级中后台产品中，筛选的使用场景通常是后一种。
优点：空间利用率高，起到了很好的收纳作用
缺点：无法直观看到所有筛选项
优点：操作效率高，筛选项一目了然，支持输入更多筛选条件
缺点：空间利用率低，不适合选项太多的情况
优点：筛选当前列，更直观，一般情况下表单左侧数据筛选频次越高
缺点：筛选的内容仅限于特定、单次列的筛选，对于首次使用者来说陌生，交互形式需要学习
使用场景：标签切换一般用于和时间、状态的流转有关，且没有交集的数据内容（可以是同性质，也可以是不同性质）。主要样式有基础、卡片、胶囊等。
优点：根据标签，可以很清楚知道划分，切换tab就可以筛选内容。
缺点：分类需覆盖选项，并且保证每一项没有交集，分类不能过多，超过7±2个选项可选择下拉筛选。
提升用户体验的一个小细节：默认用户最关注的选项，而非全部，这样可以缩短查询路径，同时给出条目，让用户清晰明了每个选项的数量，便于操作。
在企业级中后台中，用户查看的数据往往属性较多且不唯一，通过简单的检索方式很难精确定位到目标数据，所以，在实际使用时，常会将大量非交叉关系的属性进行罗列，搜索、筛选、标签切换组合出现，形成多属性组合检索。这种检索更适合于专家用户，他们对于目标数据有明确的定位，知道可以通过哪些属性精确定位到自己想要的数据。
a. 展示方式
平铺显示
选用对用户决策有意义、操作频次高的属性作为直接展示的组合检索条件，建议数量最好不超过5个（7±2法则）。
优点：大而全能最大限度避免检索条件疏漏的可用性问题
缺点：易用性不高。大而全可能为用户带来繁杂的第一印象，都是重点等于没有重点，增加用户的决策时间。
折叠展示
如果多属性组合检索中的一部分检索条件不是高频率使用的，但又是必须存在的；则可通过折叠的方式将这部分检索条件隐藏起来，将高频率使用的、数据覆盖面广的1-3个属性直接展示出来。
b. 总结思考
在设置组合检索项时，应考虑每一项检索甚至是多属性组合检索是否有必要。需从实际场景出发，根据用户对各个检索项的使用频率及组合检索项的数量，来决定组合检索项是直接展示还是折叠展示；以及哪些属性直接展示，哪些属性折叠展示，为各检索项安排合理的展示方式。
案例讲解前先开动大家聪明的小脑瓜思考两个小问题：
问题1:
报表管理里面有一个吞吐量统计、舰次（舰是船的意思）和箱量的统计，一个是放在左图中筛选的最上方用我们带小横线的这个标签页默认样式，一个是用胶囊的样式放在筛选最下方表格的上方。这两个哪个的用用法是正确呢？
、
5、4、3、2、1...
先来说下结论吧：
左图是正确的
原因：首先分析下吞吐量、舰次、箱量三者的关系，很明显，他们和状态、时间的流转是没有关系的，它是不同类型的数据，三个tab的切换有可能就会影响到下面筛选项和表格的字段。所以他的层级是最高的
问题2：
如果还有在场箱、已出闸、已在船三个类别，那这三个tab标签是放在左图还是右图合适？
答案是：
右图是正确的
原因：这三个tab是状态和过程的流转有关系，他们是同类型的的数据集，和上面日期、港区的选择是同一个层级的，不会互相影响，之所以把它拿出来呢，是因为它这个筛选比较常用，本质上也是把这个选项给平铺出来了，方便用户查找。
我们再来总结一下案例中tab的用法。不同性质的数据集分类放在表格的顶部，下面的筛选和表格都是它的子维度。同性质，不同状态流程的筛选条件如果比较高频，可以从细分纬度的筛选条件中拿出来，紧挨在表格上方
比如说这我们以一个会员的这个筛选为例，我们的产品经理，她在做需求的时候，特别喜欢按照业务逻辑来做一个去梳理。
那会员的筛选同态，他的注册没有成为会员，开始要标签注册，对初始的注册时间，然后会员的来源性别营销顾问***成为一个老顾客之后，她标签是什么，谁有什么卡，然后再往后面耗费次数怎么样呢？积分怎么样？做这样的一个逻辑。
那可以思考下这样的逻辑是对的吗？这样的排序逻辑是对的吗？
答案当然是不对的，首先应该明确一点，用户目标高于业务逻辑
但这个时候还需要考虑2个关键问题：用户场景、目标有哪些？查询路径是什么？哪些检索频次高？依据从何而来呢？通常有两种方式：
Step 1：信息排序
会员全生命周期的业务逻辑应该按照的是你的这个用户的实际的这个操作频次性来去排序是更合理的，访谈中我们已经得到了用户对各个检索项的使用频率，那信息排序的原则是：按使用频率，用户目标高于业务逻辑。
Step 2：组织及隐藏
同时我们为了保险起见，调研后只调整了信息的排序，同时我们针对后台数据做了一个点击埋点，一个月后的搜索点击次数如下图所示（注：数据已脱敏，大家了解思路即可）
一个月后，我们发现搜索点击这里是 69,873 次，点击会员等级的是 19,876 次。对不对？而客户性别只有是 23 次，这种数据你们要怎么去做呢？默认折叠低频选项
