什么是表格？

表格页是公认为展示数据最为清晰和高效的形式，它的信息密度极高，就像是一个家庭衣柜，里面很多抽屉，我们需要把衣物整洁摆放收纳，提高空间利用率。

表格页由三个部分，如下图所示：

一、数据查看

数据查看可通过四个维度去自检设计是否合理，分别为信息降噪、呼吸适中、高效易读、详情查看。

1、信息降噪-内容

通过对表头内容删减，我们一眼就可以看到表格的重要信息，从而帮助用户能快速进行数据决策。因此，列数控制在7+-2，列表表头展示更为关注的数据，更多信息在详情中展示。

另外，如果不同用户想看到的信息侧重不同，我们还可以做自定义设置项，让用户自己去选择想要看到的表格内容。

用最少字数给表头做精简，精简到少一字不可。

另外，当遇到少一字都不可的长标题，我们可以定义专有名词，并且给一个解释专有名词的icon，便于第一次使用的用户易于理解。

2、 信息降噪-视觉

去掉不必要的分割线和斑马纹，用对齐和间距来区分列和行，可以鼠标滑上去给斑马纹，增强交互体验。

分割线的样式尽量轻盈，不要抢视觉，突出内容。

去掉不必要的装饰和颜色，为了防止视觉负担，少用面性图标，使用颜色保持克制，删除如果不是点击即可删除，可以不用预警色。

不要出现衬线字体，比如宋体，保持字体统一。

3、 呼吸适中-单元格

定义单元格高度。字号、行高、上下间距进行规范，这里有一个比较常见的规范，将字号设为N，那文字行高就是

1.5N，上下间距为1.2N，单元格高度=内容高度+上间距+下间距。

4、 呼吸适中-列宽

我们将首列和尾列定义为N1，列与列之间定义为N2，随着页面收缩和拉伸，N1保持不变，N2自适应变宽变窄，这样页面会看起来会更均衡，这样会显得有呼吸感。一般定义一个最小值，当表格宽度大于页面宽度时候，固定首尾列，左右滑动。

5、 高效易读-对齐方式

标题和内容一般采用左对齐，更高效的浏览顺序，有长短不一的数字时，右对齐方便比较。操作项一般放在尾列右对齐。

6、高效易读-不做无意义留白

当数据为零时就写上“零”，当没有数据时候就写上“-”。比如开发取不到的后台数据，我们就可以给“-”作为显示，如果得到的数据就是零，我们也要让它显示出来。

7、高效易读-选择合适的翻页器

选择合适的翻页器，利用分页可以缓解服务器的加载压力。无限浏览如果数据过多很容易使页面崩掉，使用功能较为强大的翻页器，每一页默认10行以上，减少翻页次数，增强用户体验，给出默认行数后，可以让用户自定义每页行数，相比跨屏翻页，向下滑动更便利。

8、高效易读-收起低频操作项

超过四项操作项收起来，可以用图标指引下一步操作。关于哪些可以操作项可以折叠起来，可以与产品经理沟通收起低频链接，或者埋点一个月时间查看点击量也可以做出决策。

9、高效易读-默认行数

当单元格内容长度不固定的时候，定义好内容的宽度和行数以及字数，超出显示的字数可以用省略号代替。

10、高效易读-行的排序

默认最近创建的在表格中第一行显示，使用户感知最新情况。也可以带排序的表头，让用户自定义排序。

11、详情查看-入口

入口可以在操作里加详情，也可以把发起人做成可以点击样式，跳转详情，并且可以避免视觉干扰，也就是降噪，当鼠标Hover上去时候，发起人才显示出跳转色，提示可点击状态。

12、详情查看-交互方式

第一种是用弹窗的形式。第二种是第一种的延伸，当内容过多时候可以考虑抽屉样式。这些交互的共同有点就是没有脱离原页面。当详情内容较多且需要编辑时候，我们就考虑跳新页面，使用新页面进行承载。(这里有个细节，新开tab页可以打开多个详情页，如果覆盖原页面则只能打开一个详情页，并且不能同时查看原页面和详情页。所以我们要根据具体场景、业务需求去设计)

二、数据过滤

数据过滤由搜索，筛选和标签页构成。

1、搜索

搜索可分为模糊搜索和带标签的搜索。工作中常用的搜索为模糊搜索，优点是只要有相关的内容都会搜索出来，减少了精准搜索带来的记忆负担。缺点是容易把不相关的信息也带出来，例如搜索手机号，把相关编码也匹配了出来。带标签的搜索优点是搜索匹配精准度高。缺点是每次只能对单一条件进行搜索，当用户要搜索的时候都要去切换选择信息，多了一个步骤。另外，在实际工作中，可以通过埋点或者调研，如果搜索框搜索手机号频率较大，我们可以把手机号设置为默认选项。

2、筛选

筛选框可以分为下拉筛选和平铺筛选。下拉筛选的优点是空间利用率高，起到了很好的收纳作用。缺点是无法直观看到所有筛选项。平铺筛选优点是操作效率高，筛选项一目了然，支持输入更多筛选条件，可以自定义输入。缺点是空间利用率低，不适合选项太多的情况。如果用户点击其中一个选项概率最多，我们就可以将点击率高的一项作为默认项，然后选择第一种下拉筛选框。如果用户点击每个选项概率相等，在空间允许情况下我们可以平铺出来。

当筛选项过多时，信息排序应是用户目标优于业务逻辑，即排序应该考虑用户的使用习惯。例如当用户查找订单时候，第一反应都是搜索框输入，而一般通过价格过滤较少的应该放在末尾。

当然，我们还有更多优化空间，当筛选项过多时，我们可以默认折叠低频筛选项。折叠哪些筛选项还是得基于用户习惯，可以通过数据埋点或者用户调研得到用户使用场景。

当通过数据埋点或者用户调研发现绝大多数用户只需要用到搜索项，那么我们就可以只保留搜索框，其他选项全部折叠到高级搜索里面，当点击高级搜索时候出现一个弹窗，既可以保留更多筛选内容，又可以使页面不会看起来很拥挤。

(当弹窗内容选择完毕时候，高级搜索按钮会呈现高亮颜色，未选择更多筛选内容时候则呈现默认态。）

3、标签页

标签页是比较常用的数据过滤方式，切换样式包括基本样式、卡片样式以及胶囊样式。一般和时间、状态的流转有关。

同样我们可以通过数据埋点或者调研，将用户最关注的选项设置为默认选项，减少用户的选择，提高用户体验。例如下图，用户更关注的是销售中的商品，即将到店的客户，以及即将发货的商品，所以我们将这些选项作为默认项。

三、数据操作

数据操作从控制范围可以分为单行操作、批量操作和全局操作。从操作属性可以分为新增数据、编辑数据和删除数据。

当从产品那里拿来一个原型图堆叠很多操作项，我们就可以根据控制范围来区分判断，从而明确摆放位置。单行操作可以放到表格里，批量操作根据亲密性原则放在左上方，这样可以离打勾矩形近一些，如果有利于用户操作，也可以放在左下方。全局操作则可以放单独一行，使得层级更加清晰。

调整后，我们发觉虽然解决了多个操作放一块的行为，但是层级还是不够清晰，我们可以通过割裂板块或者板块颜色不同来调整，使得识别性更强。

后记

B端设计强调的是在好用的基础上让页面变好看，所以更考虑用户体验。所有设计方式不局限与一种，只要操作上是顺手，业务上是合理的，都是优秀的设计。如果一个页面占据半屏都是筛选项，那么我们就得好好反思，因为所有筛选项不可能都是高频操作，接下来就需要去做数据埋点并进行页面优化了。另外，一张只有筛选项和表格的页面，表格数据查看区域建议占整个页面的百分之六十到百分之七十，这个时候浏览起来是比较舒适的。

文章来源：UI中国    推荐：最多三分糖

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务