目录

数据表格最佳实践:对齐

数据表格最佳实践:对齐

[TOC]

缘起

LP 美图晋升答辩,偶尔提起这问题,被领导问到,没清楚如何回答。 后领导提及数据右对齐源于算盘。

而据我所知应是会计学的计算需求,主要考虑计算方便和对位问题,深度根源并不十分清楚。只有处理数据对齐的方法论罢了。

好奇宝宝是不会稀里糊涂的,所以有此文章,大家都不喜欢啰嗦,就简说结论,过程等尽量少说不说,参考里有不少,有兴趣可以看看。

溯源

综合资料,个人认为是从西方的算术 ->计算器 -> 计算机逐步发展而来都是西方舶来品,从真实世界的习惯(方法、效率形成)到技术发展后的迎合用户的习惯,到计算机时代的用户体验考量的真实世界映射。

列算式时(右对齐/分位对齐):

列算式

物理世界的计算器(右对齐):

jsq

Excel 被主要应用于数据、报表处理,它的默认对齐:

excel 对齐方式

综上考虑,个人认为数据表格的对齐及设计规则应为:

数据表格为阅览、分析数据分析(数据可读性/易读性)而设计,
应符合常用习惯,及真实世界映射。

数据表内容对齐

  1. 首先表头要与数据对齐,有直观的关联。
  2. 一定使用等宽字体(最好是无衬线),要么怎么对的齐数字?1(虽然很苗条)或9(比1胖多了)但每字符占用的空间是相同,从而能上下对齐(通常字体名带 mono 的,东亚语言通常是等宽的)度娘百科:等宽字体

表格内容上的对齐,经过计算机技术的引入和应用,体验优化,现今可你要用的对齐方式如下(根据使用场景灵活应用):

1. 左对齐

  • 文本(视为、用做文本的内容)
  • ID 等编号类

2. 右对齐 & 符号对齐

在会计电子表格中,数字(尤其是货币金额)几乎总是右对齐,因为能使数字的“小数点”对齐,并确保数字的每一列都具有相同的数量级,从而变得非常容易快速浏览,心算。从而高效阅读/获取数据。

2.1 右对齐
  • 数值、货币、时间等右对齐(分位对齐,个,十,百分位,千分位符……)

CKaLU

  • 为了帮助读数据表,可以优化对齐方式,如符号对齐,小数点对齐

2021-04-14_13-50-38

2.2 特殊符号对齐(延展) :

这里是 x k :

yRCcu

css 也提供了字符对齐的支持,MDN Web Docs:text-aligin 中提到:

1
2
3
/* Character-based alignment in a table column */
text-align: ".";
text-align: "." center;

3. 居中对齐

  • 居中对齐:如表格内的数据是相同的位数(如都是4个字),或是图示内容。特殊格式也可以根据性质和表格目标灵活调整。

4. 特殊对齐

为了特殊场景做的阅读优化,比如单位换算的列表: 用十分位对齐

在此示例中,数字不与小数点对齐。这是因为该表的目的是让读者轻松识别和提取乘数。在这种情况下,没有比较明显的用例来比较因子的相对大小,而十进制对齐会很有用。

十分位对齐

References

  1. Why are calculator screen digits right-aligned?
  2. What is the best practice for data table cell content alignment
  3. Design better data tables
  4. Web Typography: Designing Tables to be Read, Not Looked At
  5. Guidelines for Aligning Data in Tables for Great Table Usability
  6. MDN Web Docs:text-aligin