b端表格设计实战指南，b端表格设计指南上篇( 三 )_表格

文章插图
5. 精准搜索精准搜索，是指用户输入相关的数据字段进行搜索，查询要所需要的数据。根据场景的不同，查找相关的字段，编号，姓名等，也可以用标签的来精准筛选来查找。
优点：查找内容精准高效，提升用户的效率。
优点：对于查找的内容有目的，有目标，只能单次查找。

文章插图
6. 筛选数据大部分的表格都会有筛选项，针对内容较少的字段进行查找，可以快速的定位到想要查找到的数据。下拉筛选和平铺筛选取消了用户进行输入的过程，提升了用户的查找效率。
7. 下拉筛选【b端表格设计实战指南，b端表格设计指南上篇】下拉筛选是大家见的最多的，不管是美观度，还是页面占比的都是比较推荐的，通过点击选择器下拉，来选择需要筛选的内容。
优点：空间利用率高，整体页面更加的美观。
缺点：不能查看所有的筛选内容，有相应的使用成本。

文章插图
8. 平铺筛选平铺筛选就是将所有的筛选项直接展示在页面中，直接点击选择相关的筛选项即可，平铺筛选适用于内容不多，占用极少的页面空间，能够快速的操作。
优点：操作效率高，所有筛选内容直观，便利快捷。
缺点：空间利用率低，不适用筛选项过多的内容。

文章插图
9. 单元格设计做设计的伙伴都知道，开发使用的是盒子模型，单元格高度=内容高度+上间距+下间距，所以饿哦们在设计的时候也要遵循这个规则，而不是按照文字的尺寸来计算间距，其中文字的行高建议设为字号的1.5倍，上下间距设为字号的1.3倍。那么我们了解了单元格的结构，和实现单元格的基本逻辑后，那么就会更好的把控我们进行设计。
单元格内的尺寸包含：单元格高度，文字字号，文字/段落行高，文字上下间距。
我们在保证视觉呼吸感，空间感，赋予各个元素合适的尺寸，那么一套好的参考方案给你参考。

文章插图
10. 定列宽什么意思呢就是定单元格的固定宽度，例如，我们单元格整个的宽度为1900px，第一列我们把宽度设置为300px ，第二列我们设置为300px，第三列我们设置为200px，第四列我们设置为200px，五六七八列分别设为150px，那么我们这个列表就的宽度就等于300*2 + 200*2 + 150*4 = 1900px，在任何分辨率尺寸下你的这个列表都会保持这个宽度不变。

文章插图
11. 列间距在列表中合适的间距和填充，在视觉中至关重要，为了保证更好的易读性，提高用户的阅读体验，我们就需要对间距进行规范。
举例：边距为a1 ，中间内容为a2（定义为最小值，根据宽度进行自适应）。
我们在设计的初期，就要做好设计规范，表格的边距要统一制定。中间内容间距也要确定最小距离，在根据内容的展示进行自适应，如果内容表格宽度大于页面宽度，首尾列固定，边距固定，中间内容有固定最小值，根据内容进行自适应。

文章插图
12. 列数控制列间距我们确定之后，如果列数过多，那么就展示不全，就会出现横向滚动条，操作的浏览体验就很差，屏效低。信息过多堆积就会造成视觉负担。首先我们要先展示重要数据，次要的进行隐藏，，有两种方式进行设计。
第一：可提供详情按钮，进行查看全部的内容。
第二：用户自定义列，选择相对应的展示内容。
如果根据业务的需求需要全部展示的情况下，那就需要滚动条，，根据业务需求来展示相关数列。