表格数据整理

表格是数据的载体，但是放哪些数据，是一个非常重要且严肃的问题。设计表格前，我们要花一点时间来整理表格中包含的数据。
首先，表格是一个包含若干个属性和对应值的数据图表，我们要确定的，就是包含了哪些属性，以及对应的数据类型。
举个例子，比如创建一个班级学生的表格来快速查看学生的信息。那么首先要列哪些属性就要优先做个统计，比如：
学号、证件照、生活照、姓名、性别、年龄、出生日期、年级、班级、入学时间、班主任、入学时间、住址、电话、监护人、监护人电话、近期大考排名、政治面貌、民族…
每个属性代表一个表头，通过整理出现的属性数量，就可以对表头的宽度有一个大致的预判。
对于远超一屏宽的情况，可以从一开始就确定表格左右滚动的形式，或者和产品确定是否使用表头自定义的功能，先隐藏次要的信息，如果用户想看更多的表头属性可以自己操作。

不管隐藏还是没隐藏，我们还要确定表头的默认顺序，哪些排前面，哪些排后面。之后，再开始总结每个属性下包含的值。
属性值先不管具体显示什么参数，优先要关注数据的类型。这里的数据类型主要指的是视觉和逻辑上的，而不等同于编程中的数据类型术语，如字符串、数组等。
比如，学号、姓名、班主任、监护人等，都可以用 “文本” 类型，年龄、电话、排名等可以用 “数字” 类型。照片、生活照则是 “图片” 类型。出生、入学时间用 “日期” 类型……
确定类型，就要整理具体的输出数据样例了，可以通过语雀、石墨、飞书等表格工具建立一个样例表格，下面是参考案例。

有了这个表格，我们后续进行设计的时候，对单元格内应该填充什么信息就能做到一目了然。
而有一点我提前做好的，就是数据类型并不是产品原型上怎么写，我们就照搬，而是可以根据视觉、体验、识别的需要，调整它的显示类型的。

一个优秀的 B 端表格一定不会是数据内容看起来平坦、单调、同质化的，不仅要通过颜色做出对比，同时要对特殊数据类型更换更合理的表现形式。
再者，表格的设计不只是当前页面的事情，它是整个项目所有表格中的一部分。有大量的数据类型在其它表格是会被应用的，而我们在创建这些表格的时候是要考虑一致性的。
比如上方，我们性别用了图标标签，那么在教师列表中的性别，也就会用相同的方法呈现，而不是反而换成了文本。
同时，一些特殊数据形式也要在这个阶段确定具体格式，比如日期：

• 2010-10-10
• 2010.10.10
• 2010/10/10
• 2010年10月10号
• 10.10.2010

最后就是有些属性是包含固定数量的值，比如性别、年级作为标签，那么包含的值数量就是固定的。
当这些值以不同方式样式区分的话，就必然要将它们全部设计出来，而不是只在页面中做一个结果让开发去猜其它值的样式是什么。

养成每次做表格前花几分钟整理数据内容，就可以极大的节省设计时间和提升设计质量。

表格的排版和设计

4.1 表格列表设计

前面的准备工作都做完了，现在就要开始具体的设计实操了。
设计表格首先要做的就是确定除了单元格外的其它元素设计，比如搜索栏、表头样式、表体样式、操作栏、翻页器等，重点关注表头和标题的样式应用。
表头部分，因为表头内通常只显示文本和小图标，所以不需要太高。
并且因为表头和下方的数据列表是不同的元素，设计上的区分要能体现得出来，高度避免和下方一致，而且可以通过背景色、分割线做出显眼的对比。

然后就是数据列表的定义了，首先关注行的高度。虽然有一些应用行高非常大的情况出现，但是标准的列表行高可以从 36、48、64、80 …… 等常规数值中入手。
如果数据属性数量不多，数据展示偏文本为主，用 36、48 的高度即可。如果是中间包含缩略图、多行文本，那么可以使用 64 、80 或更大的高度。

之所以这么推荐，而不是使用类似 Autolay out 根据内容自适应高，原因也是尽量确保全局所有列表使用统一的几种高度，保证相同的体验和浏览节奏，而不是一个列表一种高。
行与行之间，也要具备清晰的分隔，增加识别性。建议使用分割线或者是斑马纹的做法，否则受到亲密性的影响，上下两个单元格的信息过近也会干扰我们的视线。

分割线和斑马纹的应用色彩都不应该太深，因为它们仅仅是辅助列表的分隔，我们只要将明度 B 值控制到 90 左右，并尽量减少色相的饱和度即可。

如果你项目中对表格有比较多的选中需求，那么就不太建议使用斑马纹的格式，因为选中背景需要被高亮，那么一个列表就会出现 3 种颜色，是要尽力避免发生的。

最后，就是竖向分割线的应用了，它的应用也有一定的场景区分。如果表头数量较多，内容左右间隔小，就可以通过竖向分割线增加信息识别性，反之则可以不使用。

4.2 表头内容的设计

完成了外轮廓的制定，就要聚焦进更细节的单元格内容设计了。
单元格分为表头单元格和信息单元格，表头信息元素通常只有文本，当允许通过表头排序、筛选的时候，还会增加交互提示图标。除此之外，就很少会添加其它元素了。

表头的文本带有一定的表头特征，所以可以使用设计规范中的标题字体。
除了文本的样式外，表头信息设计最重要的步骤就是确定该新信息列的对齐模式了。
表格对齐模式要考虑用户浏览习惯和信息特征，最基础的对齐模式，就是常规内容左对齐，价格类信息右对齐，最右列为操作选项时右对齐。

原因是首先用户浏览习惯是以 F 型为主的，基本元素左对齐时用户以列进行查看符合视觉线路。
但是，价格是比较特殊的东西，涉及到财务的金额时，价格包含的位数可能会比较多，同时需要增加小数点后两位，再加上标准的价格显示需要每三位用逗号分割，价格的币种标识……
所以，当价格字符数多，右对齐将小数点右两位对齐，更有助于我们识别价格的位数。当然，其它包含相同位数小数点的数据类型也可以采用右对齐形式。

而最右侧如果放操作选项使用右对齐，是因为如果我们在交互过程已经有预期要到最右侧找操作功能，那么我们的浏览顺序就是 ”反F“ 型的，和一般信息的逻辑是相反的。
很多刚入行不久的 B 端设计师都有一个错误的认知就是表格中不能使用居中模式，这在一些特殊的场景下是可以使用的。
我总结下来可以使用居中的场景是 —— 下方属性值内容长度一致。比如多选项、定宽标签、缩略图、进度条等。

4.3 信息内容的设计

最后，就差信息单元格内容的设计了。
这一步要密切结合前面所说的数据类型整理，一个信息数量越多的表格，越需要我们优化信息的样式。
首先就是文本类型的设计，当信息量较大的时候，我们是需要去区分重要和次要信息点的。
比如，在上面数据案例中，学生的学号在浏览过程中，属于视觉意义特别弱的信息，必然不如姓名重要，年龄也没有具体的出生日期重要。
如果性别、操作按钮使用文本形式，那么它们本质上也不是单纯的展示文本，可以用色彩做出区分。

除此之外，我们在前面的数据类型中说过，表格的信息呈现类型不要被文字局限住，可以根据信息类型进行视觉转化，比如：

• 性别：使用男女图标标签
• 百分比进度：使用进度条
• 固定信息数：标签样式
• 操作选项：图标按钮
• 等级/评级：多个五角星
• ……

下面看看最普通的做法和经过修饰后的样式对比：

样式改良不是仅仅为了让表格看起来更好看，而是为了充分满足信息检索、查找的需要，再兼顾样式。
要将视觉效果控制在不会影响用户体验和操作的程度上，避免过度设计。

原文链接：https://mp.weixin.qq.com/s/LFEK1YRYzvSO92QzQUHjxA
转载时间：2022.5.18