表格|好的表格信息展示都有这三个特征_

编辑导读：B端产品要想有效地向用户展示数据信息，表格的重要性就显得尤为重要。我们在业务场景中，要如何才能有效地运用表格，如何设计高效易读的表格，本文总结了三个原则，我们一起来看看。

文章插图
表格作为组织整理数据的手段，可以有效的向用户展示数据信息，是B端产品中出现最高频的模块之一。
下图为典型的B端表格示例：

文章插图
用户主要通过表格浏览获取信息、对数据进行筛选、排序以及相关业务处理等更多复杂操作、对比数据的差异与变化（关联和区别）。好的表格信息展示设计，应当是能够辅助用户高效便捷的实现以上场景中的诉求。今天我们就来讨论表格设计中一个重要的问题——【应该如何考虑表格信息展示】。
首先抛出结论，我们认为良好呈现信息的表格应当做到疏密适度、高效扫视、精简克制。
一、疏密适度常见的表格信息包含文本、标签、状态样式、数值统计图表、关键信息Icon等。
表格单元格是信息填充的基本单元，行高和列宽的定义决定了表格信息的疏密程度，进而决定了表格给用户的直观感受，因而下面分别从行高和列宽两个方向来探讨表格信息展示如何疏密适度。

文章插图
1. 定义合理的表格行高1）行高模数设定
在具体设定表格行高时，由于表格中以文字信息为主，我认为可以参考文字排版的常用做法，将整个表格的行高分成文字行高、文字与分割线间距离，即上下间距两部分来考虑。
文字行高可以设定为字号的1.2~1.8倍，文字与分割线间距离可以设定为字号的1~1.5倍。
分为这样的两部分也比较符合开发同学写代码时的习惯（多行行高同理去设定）。

文章插图
根据用户场景的不同，来选择模数倍数，需保证系统内使用统一的模数。
比如，针对用户快速浏览获取大量数据场景时，可以选择1.2倍作为模数，列表更为紧凑，同样扫视范围内，可获取更多信息。
2）为小屏幕考虑一屏显示的行数
表格行高决定屏幕内能呈现的行数，即用户在一屏内能获取信息的数量，主要影响用户纵向对比数据的效率。
对于1920*1020（包含该分辨率）以上的大屏用户，对于一屏显示行数的感知不强，但对于1366×768、1280*720等这类小屏，显示行数有限，用户进行纵向数据对比的效率就会有所降低。
在设计前，应当充分了解目标用户的行为诉求，了解目标用户设备屏幕分辨率的占比分布情况，有针对性的设置行高。
3）用户自定义行高的场景
B端产品的特点之一是通用化，覆盖用户角色多样。
然而用户个体对于表格信息呈现密度的诉求经常是有所差异的。
比如个人视力的原因，有些用户喜欢表格行高值大一些，看起来舒适透气，便于阅读。
而有些平台用户由于很熟悉线下excel表格模式，希望线上的表格也尽可能像excel那样紧凑，以便他们在一屏内看到更多的数据，进行对比，提升工作效率。
产品为了让不同用户都能获得较好的体验，可以考虑把表格疏密度的设置开放给用户。
建议不是完全开放给用户去调整尺寸，而是给出一定阶梯度的快速选项，例如舒适、标准、紧凑三种高度来满足用户需求。
例如，Gmail提供默认/标准/紧凑三种表格密度设置，如图：