B端表格设计小技巧

最近一段时间都在捣鼓B端的体验优化，其中接触最多的就是表格。看起来貌似很简单啊，“不过是一些数据排列展示，根本用不着设计啊？”但是真的要做好表格还是很有讲究的，否则最终开发完的效果肯定会一言难尽。

表格是一种高效、清晰的展示数据的形式，可以有效的向用户传递数据信息，是B端产品中出现最高频的模块之一。我们可以将一个常规的表格结构划分为3个区域：

查找区：快捷过滤数据，方便用户快速查询定位数据。

展示区：最重要的数据呈现区域。

操作区：帮助用户对数据进行操作，比如“新增”“删除”等常规操作。

只有将这3个区域合理清晰的展示，才能满足用户高效便捷的获取数据、查找数据以及操作数据。

今天就来跟大家聊聊做B端表格的一些小技巧。

一、筛选项过多怎么处理？

有些时候产品为了让用户能更准备的定位自己所需要查看的数据，会设置很多的筛选条件。这样其实不但会给用户增加操作负担，同时也会造成很大的空间浪费。并且很多筛选条件使用频率也不是很高。这个时候我们就可以通过折叠的方式将部分筛选条件隐藏起来，只展示几个高频率使用/数据覆盖广的。

二、列宽该如何设定？

列宽需要根据内容字段长短设定合理的默认值，否则前端会按照自己对页面的理解进行布局，到验收的时候发现有些间距过大，有些过挤（在之前的验收过程中就多次出现过这些问题）。

所以为了使表格字段有良好的展示效果，在前期的时候就跟产品确认好了一些字段的最大字数，如品牌名称最多多少字段，超出展示方式等细节问题。

具体设计的时候在内容长度不固定的时候，以能预判的最大宽定设定列宽，不能预判用常用宽度，超过内容考虑折行，或内容省略“…”，鼠标悬停后显示完整内容。

三、列数过多如何展示？

在设计表格的时候我们经常会遇到列数过多的情况。该如何展示，才能更高效的让用户获取数据呢？我整理了几个自己平时常用的处理方法。

1.列数过多的时候会先跟产品确认是否可以合并或隐藏相关多余项。

2.只展示数据的重要信息（隐藏信息可通过点击icon查看详情的方式）。

3.如果出现数据实在过多且不能合并隐藏展示的时候，选择在表格中引入横向滑动条（可始终固定操作列）的处理方法。

五、操作栏选项过多该怎么办？

表格的操作栏选项过多的时候，会让用户误操作，并且降低了左侧数据展示空间。所以建议大家遇到操作选项过多的时候，可以将操作频率较低的选项折叠收起。这样一来界面会更加简洁明快。减少了干扰

六、没有数据的时候列表要留空吗？

最好不要留空，空白的区域很容易让用户感到困惑和不解，用户甚至会怀疑是不是数据没有加载出来，所以当遇到数据库暂无该字段的时候，可以“-”，数字可以用“0”。

这次就写到这儿，之后如果再遇到其他问题再归纳总结。