2023年6月20日发(作者：)

element显⽰表格右侧滚动条_B端交互组件之表格篇引⾔B端项⽬或产品中，表格应该是被利⽤的最多的了，很多主体界⾯基本都会⽤到表格组件。我们常说⼀个基本的功能是包含增删改查的，为了完整的表达这⼀功能，常见的就是⽤表格组件。B端产品中数据是关键，⽽表格主要是⽤于展⽰和管理数据，如何⽤好表格，对产品整体的⽤户体验起到重要作⽤。⽬前有很多数据也可以⽤可视化图表来展⽰，但仅仅只是⽤于最终的数据输出，数据管理还是倾向于⽤表格组件。 下⾯我将表格拆分成多个细节，并详细讲解各部分如何来设计，另外还会谈谈复杂业务场景下如何利⽤表格。⼀、查询常见的就是查询区域在头部，下⾯紧接着⼀个表格组件，当数据量⼩的时候，打开该页⾯时，应该是可以看到全量数据的，并通过分页器来部分加载数据；如果数据量很⼤，例如亿级单位的数据量，系统估计会直接崩溃，所以需要对查询结果做条件限制。1. 没有必输条件这种模式就是常见的，打开页⾯可以看到所有数据，通过查询条件进⼀步缩⼩搜索范围。 值得注意的是查询条件都是⾮必填项，当你输⼊⼀个或多个条件查出结果后，点击重置按钮后再点查询，即可恢复为全量查询结果。 如下图所⽰：2. 有必输条件本次说的重点是这种有必填查询条件的情况，打开页⾯时看不到数据，查询条件含有必填项，⼀个或多个，不输⼊查询条件，直接点击查询按钮会提⽰必填字段必须输⼊，此⽅式主要⽤于缩⼩查询范围。 必填查询条件输⼊后，其他⾮必填查询条件也可以搭配输⼊，进⼀步缩⼩查询范围。 如下图所⽰：3. 反显查询条件有些系统，根据权限控制要求，⼀些查询条件需要反显，并根据业务要求控制是否可以修改，不可修改的可以置灰。 反显固定值，如下图所⽰：反显值可修改，如下图所⽰：很多时候是系统在⽤户输⼊没权限的条件时再做校验，好的⽤户体验就是容错，可以避免⽤户去犯错。 这⾥涉及到权限的条件可以固定反显某个值，或者反显可以修改的⼀些值，⽤户不管怎么选，都有权限来查，这样可以避免⽤户被提⽰⽆权限查询时的焦虑感。⼆、按钮⼆、按钮B端产品使⽤按钮的地⽅很多，本⽂主要谈谈表格的头部按钮和右侧按钮。1. 头部按钮头部按钮主要是⽤于不需要选择表格数据的操作按钮，最常⽤的就是新建功能。 另外就是⽀持批量操作的功能按钮，例如导出和删除，勾选⼀条或多条导出，不勾选时导出所有；勾选多条数据，批量删除。批量操作时，表格最左侧需要搭配复选框元件。 如下图所⽰：2. 右侧按钮右侧按钮主要是针对单条数据操作的按钮，例如查看、修改、删除等，如果放在头部，需要勾选⼀条数据来操作，勾选多条或者不勾选数据点击按钮时，系统都需要校验，其实也提⾼了⽤户的认知成本，所以我觉得这类操作按钮可以全部放到右侧来。 对于不同数据，功能按钮根据权限不同来设计，可以免去校验的认知成本，⽤户可以直接上⼿操作，也可避免犯错时的焦虑感。 例如有些数据不能修改和删除时，就可以直接在右侧不显⽰，避免点击后再去提⽰⽤户。 如下图所⽰：另外这⾥有个关键点，当表格中的字段很多或者数据内容很多时，会出现横向滚动条，⽤户很有可能看不到右侧的操作列，这种体验是很糟糕的。 这⾥需要将操作列固定在最右侧，另外左侧的复选框也可以配合固定在最左侧，因为当滚动条往右拖动时，也会看不到左侧复选框区域，不便于⽤户去操作导出或者其他功能操作。三、表头三、表头正常的表头都是单层，有时候也会有多层的表头，另外还可以对表头进⾏配置，有的是直接在表头处配置，有的是去系统管理单独配置。1. 普通表头这种情况是最常见的，表头字段都是单独排列，有的会把排序直接放在表头操作，例如下拉箭头，可以选择降序或者升序等。 如下图所⽰：如果需要对字段进⾏组合排序，也可以将排序功能单独做成⼀个功能按钮来操作。2. 复杂表头复杂表头主要是指有多层结构的表头，有时候表头是普通的，但是数据内容是多层的，就看具体业务情况了，我们的设计主要是为了提⾼业务操作效率。 如下图所⽰：3. 表头筛选具体展⽰哪些表头，也不是⼀成不变的，可能有些系统是固定的值，这也是在前期需求分析时，跟业务确定下来的，就是该业务场景下，这些字段不存在变化，当然就不需要对表头内容修改了。 但是也才存在⼀些需要对表头内容修改的场景，⽐如默认有⼀套表头字段，但是根据不同⽤户，可以选择不同的表头字段配置，这种是由⽤户选择不同模式，还有⼀种就是由⽤户⾃定义来配置。 根据⽤户不同配置不同的表头字段，主要是考虑到不同岗位的⽤户，查看数据的视⾓不⼀样，对应的关⼼的字段也会不⼀样，如果前期需求分析阶段，可以很清晰的确定这些，可以设计成让⽤户选择岗位来展⽰不同的表头字段。 如下图所⽰：如果不是很确定，也可以全部让⽤户⾃定义，或者两者结合起来⽤，⽐如可以根据岗位先选择⼀套表头字段，另外⽤户也可以⾃定义再调整。 如下图所⽰：另外还有种情况，就是把表头字段的设置放到系统管理中来配置，也可以理解为不让普通⽤户来配置，只让系统管理员来控制表头字段。如下图所⽰：可以批量选择表头字段，也可以批量删除掉。四、⾏四、⾏⾏主要是针对数据⽽⾔，⽐如⾏数据展⽰、选择⾏，⿏标滑过⾏等，同时需要配合左侧选择框来使⽤。1. ⾏数据展⽰当数据很多时，密密⿇⿇堆积在表格内，⽤户很容易看错位，把A⾏的数据看成B⾏的，为了有效解决这种问题，最常⽤的就是⽤间隔⾏背景⾊，就是间隔⾏设置⼀个不同的背景⾊。 如下图所⽰：2. 滑过⾏滑过⾏主要是⿏标滑过某⾏数据时，给⼀个滑过颜⾊，也是辅助⽅便⽤户查看数据的⼀种⼿段。 如下图所⽰：3. 选择⾏选择⾏主要是针对选中某⾏时的背景⾊变化，这⾥可以配合左侧选择框来使⽤。 如果只⽀持单⾏选择，左侧可以⽤单选框，选中某⾏时，除了背景⾊变化外，左侧单选框也是选中状态，选中其他⾏时，选中状态即可切换过来。 如下图所⽰：如果⽀持多⾏选择，左侧可以⽤复选框，选中某⾏时，除了背景⾊变化外，左侧复选框也是选中状态，继续选择其他⾏后，可以增加这种选中状态。 如下图所⽰：五、数据对齐五、数据对齐数据对齐也是⼀种⽅便⽤户查看数据的⼿段，包含三种对齐⽅式：左对齐、居中对齐、右对齐。另外表头⼀般是采⽤居中对齐⽅式。下⾯我将详细讲解下三种对齐⽅式主要⽤于哪种场景下。1. 左对齐左对齐⼀般针对字符串类型的数据，例如账号、⽂件名等，这种数据长度不固定的，为了有⼀个良好的展⽰效果，⼀般是左对齐，并且给⼀个左侧间距。 如下图所⽰：2. 居中对齐居中对齐⼀般针对固定长度类型的数据，⽐较常见的就是含下拉值的字段，并且下拉值不太多的情况，例如性别、状态等。 如下图所⽰：3. 右对齐右对齐⼀般针对⾦额类数值型数据，有的可能还固定含有两位⼩数点，可以根据具体业务情况来设计。 如下图所⽰：六、分页器六、分页器分页器⼀般在表格底部，只要是数据量不是太少的情况，⼀般都会有分页器的，主要是对数据进⾏分段刷新。 分页器样式有很多种，在此就不详细举例了。 如下图所⽰：七、复杂表格七、复杂表格以上说的都是正常单层表格的各种细节问题，在⼀些复杂的业务场景下，经常会出现多层表格，可以设计成多层结构或联动结构。1. 多层表格多层表格常出现于有⽗⼦级关系的场景，并且⽗⼦级都包含新建、修改、删除等功能，另外⼦级表格需要关联⽗级表格，如果⽗级表格⽬前数据为空，⼦级表格是不能新建的，如果⽗⼦级的字段都是独⽴的，这⾥可以在⼦级中加⼀个⽤于关联⽗级的字段，这样就将⽗⼦级串联起来了。 两层的⽐较好设计，就是两个表格上下摆或者左右摆即可。 如下图所⽰：多层可能不⽌两层，可能是三层或者四层，还有的系统为了扩展性，可以⽆限地增加层级。这样业务结构就看着很复杂了，作为设计师⽽⾔，我们就是要将复杂的业务给简单化，提⾼业务⼈员操作效率。 多层的正好之前有过经历，我将⽗级和⼦级拆分开了，⽗级和中间⼦级放⼀起，最终⼦级单独放，具体怎么拆，要看业务情况了。 我之前设计的是命题系统，从产品那⾥获取的⽤户操作习惯，⼀般是先把⼤题命好，就是总分多少，每个题型多少分，题型层级如何等，感觉就是先搭好框架，然后再把⼩题命好，根据这种业务规则，我就将⽗级与中间⼦级放⼀起了，作为⼤题，最终⼦级作为⼩题。 ⽐如语⽂试卷中，⾸先分为基础语⾔部分、阅读理解部分、写作部分，然后基础语⾔部分⼜分好⼏种题型，每个题型下⾯⼜有多个⼩题，这样看差不多就是三层结构了，实际情况可能⽐这复杂，⼦级题型可能⼜分为A部分和B部分，所以命题系统的层级关系是要⽀持⽆限拓展的。 如下图所⽰：⼩结：B端产品设计有时候并没有所谓的标准答案，到底如何设计，确实要根据实际的业务场景来定；我们的使命本来就是赋能业务，提⾼业务的操作效率，如果说业务线下的操作习惯，你不去遵循，违背了业务的⼼理模型，这样设计出来的产品才真叫不好⽤，并且也加⼤了业务培训成本。2. 联动表格多层表格如果不设置关联字段，也可以采⽤联动的⽅式。 ⽐如选中⽗级表格中某⾏数据，⼦级表格数据会跟着变动，这⾥⼦级表格的数据是根据⽗级表格选中的⾏来变化的，每次只展⽰某个⽗级⾏的⼦级数据。 如下图所⽰：这⾥要区别下多层表格，多层表格的⼦级表格是展⽰的全量⼦级数据，所以当数据量很⼤时，可以采⽤联动表格⽅式，具体还是看实际业务情况了。 回到前⾯说的命题系统，⼩题部分我就是设计成联动的模式，选中⼤题或者⼦级可以看到对应的⼩题。因为⼤题层级可以⽆限拓展，设计成多层表格，到⼩题这⾥看着就会很乱了，所以我采⽤联动表格，⼩题每次只展⽰对应⼤题的。 如下图所⽰：总结以上便是我将表格组件拆分后的详细情况，组件是死的，⼈是活的，遇到具体的业务场景，还是需要设计师活学活⽤，多考虑下业务的⼼理模型，不要让表现模型趋近于实现模型，或者说开发模型。 举个例⼦：很多时候开发会觉得某个设计太⿇烦了，实现起来耗时耗⼒，因为开发只是站在实现模型⾓度考虑问题，作为交互设计师，我们就要学会平衡模型的两边，尽量让表现模型趋近于业务⼼理模型，这样才能打造出让业务尖叫的产品。作者：ul，8年交互设计经验

2023年6月20日发(作者：)

element显⽰表格右侧滚动条_B端交互组件之表格篇引⾔B端项⽬或产品中，表格应该是被利⽤的最多的了，很多主体界⾯基本都会⽤到表格组件。我们常说⼀个基本的功能是包含增删改查的，为了完整的表达这⼀功能，常见的就是⽤表格组件。B端产品中数据是关键，⽽表格主要是⽤于展⽰和管理数据，如何⽤好表格，对产品整体的⽤户体验起到重要作⽤。⽬前有很多数据也可以⽤可视化图表来展⽰，但仅仅只是⽤于最终的数据输出，数据管理还是倾向于⽤表格组件。 下⾯我将表格拆分成多个细节，并详细讲解各部分如何来设计，另外还会谈谈复杂业务场景下如何利⽤表格。⼀、查询常见的就是查询区域在头部，下⾯紧接着⼀个表格组件，当数据量⼩的时候，打开该页⾯时，应该是可以看到全量数据的，并通过分页器来部分加载数据；如果数据量很⼤，例如亿级单位的数据量，系统估计会直接崩溃，所以需要对查询结果做条件限制。1. 没有必输条件这种模式就是常见的，打开页⾯可以看到所有数据，通过查询条件进⼀步缩⼩搜索范围。 值得注意的是查询条件都是⾮必填项，当你输⼊⼀个或多个条件查出结果后，点击重置按钮后再点查询，即可恢复为全量查询结果。 如下图所⽰：2. 有必输条件本次说的重点是这种有必填查询条件的情况，打开页⾯时看不到数据，查询条件含有必填项，⼀个或多个，不输⼊查询条件，直接点击查询按钮会提⽰必填字段必须输⼊，此⽅式主要⽤于缩⼩查询范围。 必填查询条件输⼊后，其他⾮必填查询条件也可以搭配输⼊，进⼀步缩⼩查询范围。 如下图所⽰：3. 反显查询条件有些系统，根据权限控制要求，⼀些查询条件需要反显，并根据业务要求控制是否可以修改，不可修改的可以置灰。 反显固定值，如下图所⽰：反显值可修改，如下图所⽰：很多时候是系统在⽤户输⼊没权限的条件时再做校验，好的⽤户体验就是容错，可以避免⽤户去犯错。 这⾥涉及到权限的条件可以固定反显某个值，或者反显可以修改的⼀些值，⽤户不管怎么选，都有权限来查，这样可以避免⽤户被提⽰⽆权限查询时的焦虑感。⼆、按钮⼆、按钮B端产品使⽤按钮的地⽅很多，本⽂主要谈谈表格的头部按钮和右侧按钮。1. 头部按钮头部按钮主要是⽤于不需要选择表格数据的操作按钮，最常⽤的就是新建功能。 另外就是⽀持批量操作的功能按钮，例如导出和删除，勾选⼀条或多条导出，不勾选时导出所有；勾选多条数据，批量删除。批量操作时，表格最左侧需要搭配复选框元件。 如下图所⽰：2. 右侧按钮右侧按钮主要是针对单条数据操作的按钮，例如查看、修改、删除等，如果放在头部，需要勾选⼀条数据来操作，勾选多条或者不勾选数据点击按钮时，系统都需要校验，其实也提⾼了⽤户的认知成本，所以我觉得这类操作按钮可以全部放到右侧来。 对于不同数据，功能按钮根据权限不同来设计，可以免去校验的认知成本，⽤户可以直接上⼿操作，也可避免犯错时的焦虑感。 例如有些数据不能修改和删除时，就可以直接在右侧不显⽰，避免点击后再去提⽰⽤户。 如下图所⽰：另外这⾥有个关键点，当表格中的字段很多或者数据内容很多时，会出现横向滚动条，⽤户很有可能看不到右侧的操作列，这种体验是很糟糕的。 这⾥需要将操作列固定在最右侧，另外左侧的复选框也可以配合固定在最左侧，因为当滚动条往右拖动时，也会看不到左侧复选框区域，不便于⽤户去操作导出或者其他功能操作。三、表头三、表头正常的表头都是单层，有时候也会有多层的表头，另外还可以对表头进⾏配置，有的是直接在表头处配置，有的是去系统管理单独配置。1. 普通表头这种情况是最常见的，表头字段都是单独排列，有的会把排序直接放在表头操作，例如下拉箭头，可以选择降序或者升序等。 如下图所⽰：如果需要对字段进⾏组合排序，也可以将排序功能单独做成⼀个功能按钮来操作。2. 复杂表头复杂表头主要是指有多层结构的表头，有时候表头是普通的，但是数据内容是多层的，就看具体业务情况了，我们的设计主要是为了提⾼业务操作效率。 如下图所⽰：3. 表头筛选具体展⽰哪些表头，也不是⼀成不变的，可能有些系统是固定的值，这也是在前期需求分析时，跟业务确定下来的，就是该业务场景下，这些字段不存在变化，当然就不需要对表头内容修改了。 但是也才存在⼀些需要对表头内容修改的场景，⽐如默认有⼀套表头字段，但是根据不同⽤户，可以选择不同的表头字段配置，这种是由⽤户选择不同模式，还有⼀种就是由⽤户⾃定义来配置。 根据⽤户不同配置不同的表头字段，主要是考虑到不同岗位的⽤户，查看数据的视⾓不⼀样，对应的关⼼的字段也会不⼀样，如果前期需求分析阶段，可以很清晰的确定这些，可以设计成让⽤户选择岗位来展⽰不同的表头字段。 如下图所⽰：如果不是很确定，也可以全部让⽤户⾃定义，或者两者结合起来⽤，⽐如可以根据岗位先选择⼀套表头字段，另外⽤户也可以⾃定义再调整。 如下图所⽰：另外还有种情况，就是把表头字段的设置放到系统管理中来配置，也可以理解为不让普通⽤户来配置，只让系统管理员来控制表头字段。如下图所⽰：可以批量选择表头字段，也可以批量删除掉。四、⾏四、⾏⾏主要是针对数据⽽⾔，⽐如⾏数据展⽰、选择⾏，⿏标滑过⾏等，同时需要配合左侧选择框来使⽤。1. ⾏数据展⽰当数据很多时，密密⿇⿇堆积在表格内，⽤户很容易看错位，把A⾏的数据看成B⾏的，为了有效解决这种问题，最常⽤的就是⽤间隔⾏背景⾊，就是间隔⾏设置⼀个不同的背景⾊。 如下图所⽰：2. 滑过⾏滑过⾏主要是⿏标滑过某⾏数据时，给⼀个滑过颜⾊，也是辅助⽅便⽤户查看数据的⼀种⼿段。 如下图所⽰：3. 选择⾏选择⾏主要是针对选中某⾏时的背景⾊变化，这⾥可以配合左侧选择框来使⽤。 如果只⽀持单⾏选择，左侧可以⽤单选框，选中某⾏时，除了背景⾊变化外，左侧单选框也是选中状态，选中其他⾏时，选中状态即可切换过来。 如下图所⽰：如果⽀持多⾏选择，左侧可以⽤复选框，选中某⾏时，除了背景⾊变化外，左侧复选框也是选中状态，继续选择其他⾏后，可以增加这种选中状态。 如下图所⽰：五、数据对齐五、数据对齐数据对齐也是⼀种⽅便⽤户查看数据的⼿段，包含三种对齐⽅式：左对齐、居中对齐、右对齐。另外表头⼀般是采⽤居中对齐⽅式。下⾯我将详细讲解下三种对齐⽅式主要⽤于哪种场景下。1. 左对齐左对齐⼀般针对字符串类型的数据，例如账号、⽂件名等，这种数据长度不固定的，为了有⼀个良好的展⽰效果，⼀般是左对齐，并且给⼀个左侧间距。 如下图所⽰：2. 居中对齐居中对齐⼀般针对固定长度类型的数据，⽐较常见的就是含下拉值的字段，并且下拉值不太多的情况，例如性别、状态等。 如下图所⽰：3. 右对齐右对齐⼀般针对⾦额类数值型数据，有的可能还固定含有两位⼩数点，可以根据具体业务情况来设计。 如下图所⽰：六、分页器六、分页器分页器⼀般在表格底部，只要是数据量不是太少的情况，⼀般都会有分页器的，主要是对数据进⾏分段刷新。 分页器样式有很多种，在此就不详细举例了。 如下图所⽰：七、复杂表格七、复杂表格以上说的都是正常单层表格的各种细节问题，在⼀些复杂的业务场景下，经常会出现多层表格，可以设计成多层结构或联动结构。1. 多层表格多层表格常出现于有⽗⼦级关系的场景，并且⽗⼦级都包含新建、修改、删除等功能，另外⼦级表格需要关联⽗级表格，如果⽗级表格⽬前数据为空，⼦级表格是不能新建的，如果⽗⼦级的字段都是独⽴的，这⾥可以在⼦级中加⼀个⽤于关联⽗级的字段，这样就将⽗⼦级串联起来了。 两层的⽐较好设计，就是两个表格上下摆或者左右摆即可。 如下图所⽰：多层可能不⽌两层，可能是三层或者四层，还有的系统为了扩展性，可以⽆限地增加层级。这样业务结构就看着很复杂了，作为设计师⽽⾔，我们就是要将复杂的业务给简单化，提⾼业务⼈员操作效率。 多层的正好之前有过经历，我将⽗级和⼦级拆分开了，⽗级和中间⼦级放⼀起，最终⼦级单独放，具体怎么拆，要看业务情况了。 我之前设计的是命题系统，从产品那⾥获取的⽤户操作习惯，⼀般是先把⼤题命好，就是总分多少，每个题型多少分，题型层级如何等，感觉就是先搭好框架，然后再把⼩题命好，根据这种业务规则，我就将⽗级与中间⼦级放⼀起了，作为⼤题，最终⼦级作为⼩题。 ⽐如语⽂试卷中，⾸先分为基础语⾔部分、阅读理解部分、写作部分，然后基础语⾔部分⼜分好⼏种题型，每个题型下⾯⼜有多个⼩题，这样看差不多就是三层结构了，实际情况可能⽐这复杂，⼦级题型可能⼜分为A部分和B部分，所以命题系统的层级关系是要⽀持⽆限拓展的。 如下图所⽰：⼩结：B端产品设计有时候并没有所谓的标准答案，到底如何设计，确实要根据实际的业务场景来定；我们的使命本来就是赋能业务，提⾼业务的操作效率，如果说业务线下的操作习惯，你不去遵循，违背了业务的⼼理模型，这样设计出来的产品才真叫不好⽤，并且也加⼤了业务培训成本。2. 联动表格多层表格如果不设置关联字段，也可以采⽤联动的⽅式。 ⽐如选中⽗级表格中某⾏数据，⼦级表格数据会跟着变动，这⾥⼦级表格的数据是根据⽗级表格选中的⾏来变化的，每次只展⽰某个⽗级⾏的⼦级数据。 如下图所⽰：这⾥要区别下多层表格，多层表格的⼦级表格是展⽰的全量⼦级数据，所以当数据量很⼤时，可以采⽤联动表格⽅式，具体还是看实际业务情况了。 回到前⾯说的命题系统，⼩题部分我就是设计成联动的模式，选中⼤题或者⼦级可以看到对应的⼩题。因为⼤题层级可以⽆限拓展，设计成多层表格，到⼩题这⾥看着就会很乱了，所以我采⽤联动表格，⼩题每次只展⽰对应⼤题的。 如下图所⽰：总结以上便是我将表格组件拆分后的详细情况，组件是死的，⼈是活的，遇到具体的业务场景，还是需要设计师活学活⽤，多考虑下业务的⼼理模型，不要让表现模型趋近于实现模型，或者说开发模型。 举个例⼦：很多时候开发会觉得某个设计太⿇烦了，实现起来耗时耗⼒，因为开发只是站在实现模型⾓度考虑问题，作为交互设计师，我们就要学会平衡模型的两边，尽量让表现模型趋近于业务⼼理模型，这样才能打造出让业务尖叫的产品。作者：ul，8年交互设计经验