对于大多数B端产品而言，列表是让用户获得洞察力从而实现后续操作的重要组件，所以B端的列表设计也不仅仅只是简单地放置几条数据表。

目前市面上存在着各类To B产品，提供着各式各样的服务：电子邮件解决方案、订单管理、客户服务等，但这些服务之间的共通点是——需要向用户反馈数据，而想要传递大量数据的话没有比使用列表更好的方式了。

列表能够以有序的方式组织信息和数据，让用户能够轻松扫描、对比以及分析他们选择的信息。而这篇文章的目的正是为了给广大设计师在设计更好的列表时提供一些可以参考的关键设计模式。为此，本文总结了10条关于B端列表设计一定要考虑的细节点。

01固定标题

当用户在看一份超过30行的表单时，这一点尤为重要。列表过长时，用户必须向下滚动才能查看所有信息，如果标题没有固定，用户就很难理解并对应列表中的数据——毕竟它们大多数都是随机数。固定标题能让用户持续对应并理解整个数据表，即使出现某些不理解的字段也不需要往上滑。

固定标题后即使出现某些不理解的字段也不需要往上滑

02固定数据列

标题和项目名是列表中让所有信息有序分类的依据。标题用于理解所显示的数据。项目名则是让各项数据形成对应连接，比如活动名、产品名、库存名等。

当列数据过多时就需要水平滚动，通常来说固定用于项目名称的第一列就可以了。这样做的目的和固定标题是一样的。

设计小贴士：
在设计固定数据列时，最好在数据列的右侧添加阴影和垂直分隔符，用于提示用户表格是可以水平滚动的。

固定数据列的好处跟固定标题是一样的

03允许自定义列

自定义列能让用户依据自己的偏好个性定义数据列。当涉及到多个度量和数据集，或者因为不同目的而使用数据表时，这种方法都很适用。大多数自助广告平台上都可以看到这个功能：Facebook广告管理系统、Google广告、AdRoll等。每个平台都有不同的营销指标，以及不同优先级的用户。

自定义列能让用户依据自己的偏好个性定义数据列

04为表单分页

如果你身边有做开发的朋友的话，他们一定会告诉你“如果限制正在处理的信息量，那么加载速度就会越快”。为表单分页就是限制的方式，虽然还可以靠渐进式加载来解决问题——当用户滚动到末尾时再加载下一批数据组。不过分页更具灵活性，用户能随意跳动到想去的页数。

设计小贴士：
由于大多数表单每页都有超过30行数据，因此在顶部和底部都布局好分页组件非常重要，用户无需过多滚动就能轻松切换页面。

通过分页限制信息处理量，从而减少加载时间

05添加筛选功能

根据用户需求为用户减少显示的数据量正是筛选功能存在的意义。比如最基本的筛选功能就是按时间筛选，用户可以选择获取特定时间范围内的信息。

如果能在筛选的下拉列表中包含复选框以让用户选择多个变量就更好了，筛选机制越灵活，用户就越容易分析他们的信息。

筛选功能可以帮助用户减少显示的数据量

06提供数据排序

排序有点类似过滤，主要是根据用户的需要重新排列信息。在大多数情况下，会默认用左列进行排序，用户也可以点击标题进行相应的排序。

对于大多数标题来说都可以添加排序功能，用以按数字/字母顺序对相应数据进行排序。不过要注意的是这个功能也不能乱加，因为对于某些信息来说可能是多余的（比如名称、类别）。

设计小贴士：
尽量使用箭头图标而不是V形图标以提高视觉的可见度。针对hover态时展现可点击的视觉提示，让整个区域都可以点击。

根据用户的需要重新排列信息

07提供多项操作

复选框能让用户选择多个项目并对所选项目执行操作。这样能让用户节省时间和精力，而不是一台重复执行的机器。

设计小贴士：
为选中行添加其他背景颜色更能突显状态。

复选框能让用户选择多个项目并对所选项目执行操作

08纯字体样式

在设计中，排版是风格指南中的关键元素之一。在设计表单时，应该尽量保持简约，而不是在表中使用什么精细的字体样式。

设计小贴士：
虽然字体没有好坏，但应该尽量避免使用衬线字体，衬线字体更容易引起人们的注意，从而产生额外的视觉噪音。

看上去怪怪的衬线字体

09链接标识

对于某些表单来说，项目名称也可用作链接，这也是用户常见且习惯的的交互方式了。对于用户来说基于表单来猜测打开的会是什么链接并不难。

设计小贴士：
如果设计中包含文本链接时，最好使用其他颜色来突出，只用粗体或下划线是无法提供足够的视觉提示的。

突出链接的视觉能让用户更好地察觉到它

10Hover态

对于数据行的操作按钮目前都倾向于放置在最后一列中。只要没有太多数据列的存在导致需要水平滚动的话，这样做就可以了。

但如果考虑到有太多数据列存在的话，那么也可以考虑把这些功能放置在第一列或第二列中，这样用户在滚动时就不需要定位这一数据行了，从而避免因为认知过载导致的不必要错误。

Hover操作能让界面保持简约外观——只有当用户将鼠标悬停在相应行上时，才会显示操作图标和文本。

防止显示太多信息从而增加用户认知负荷

以上就是总结的10条关于B端列表设计一定要考虑的细节点，当然这只是一些基本性的建议，而非标准的设计解决方案。具体的设计方法，还需要根据自身产品的要求以及用户目标进行调整。

原作者:Jeremiah Lam
原文链接:uxdesign.cc/11-table-design-guidelines-adb27ac01c8e