[翻译]更好的设计数据型表格

【翻译】Design Better Data Tables

一、了解数字

不是所有数字都是均匀的或相等的。这里的数字指的不是π或者无穷,这里说的数字可能是表格式、复古风格的,或者是衬线字和等比例分布的数字。

下面是一个关于复古字和衬线字的简单对比:

复古风格的数字在句子里面看起来比较美观,因为他们在英文的句子里面更加匹配小写字母的大小和留白。衬线的数字就显得更加证实一点,并且可以有效地加强表格的格子布局。

下面是关于等比型数字和表格型数字的简单对比:

右边表格型的数字,每个数字所占的空间大小都是均匀的,所以在一列数字里面可以看起来比较整齐,不会参差不齐。然而上面这两种字体在一两行内,差异不会很大,在数据量比较大的表上上,用表格式的数字会使用户更容易浏览以及减少信息错位。

二、了解对齐

这里有几天对齐准则:

1)数字型的数据需要右对齐

2)文字性的数据需要左对齐

3)表头的字段跟它的数据对齐

4)不要使用居中对齐

数字型的数据阅读顺序是从右到左的,也就是说,我们对比一系列的数字,我们首先从个位数开始看起,然后是十位数,接着是百位,以此类推。这也是为什么大部分人学习数字,都是从个位数开始,从右到左。因此,在一个表格里面,数字需要保持右对齐。

文字型的数据人们一般是从左到右进行阅读,不管是英文还是中文,对比文字型的文字元素一般来说是通过拼音的顺序,如果两个文字型数据有相同的第一个首字母,那么第二个字母就会被用来作为识别,以此类推。所以如果文字型的数据不是左对齐的话,想要快速浏览文本数据会好气人。

表头,通常的,都需要跟它的数据的对齐方式一致。这样使得表格的竖直方向,保持一致性和上下有关联。

居中对齐,让看起来像被咬碎的步一样,这样会让数据更难被快速浏览。如果是这样的话,就要需要额外的分隔线或者可视化的元素来分隔这些数据。

一致的有效数字=更好的对齐

一个简单的保持规整的办法就是把相关的数字用同样的有效数字。有效数字是一个很大的话题啦,所以最简单的建议就是,越少的有效数字的个数越好。


三、更少的,更简洁的文字标签


文字标签对于一个数据型表格来说是很重要的。一系列关于数字的文字说明,会让更多人读懂表格,适用于更多场景。

1)标题

这听起来像是传统的智慧,因为给你的表格定义一个清晰的和重要的标题非常重要。有了一个好的标题,这个表格就可以变得很灵活了,可以在多种情境下使用或者被其他外部的内容引用。

2)单位

单位是一个很常见的元素,它使得一堆数字变得有意义。通常它会跟在每个数字的后面,重复又重复。所以对比起重复在表格内容中重复使用单位,可以在表格的每一列第一个数字后面带着单位就可以。

3)表头

保持表头越短越好,在数字型表格里面,数字本身才是最重要的。而且一个很长的表头会占用很多没用的空间。

四、尺标

如果你真的有规则地去对齐了表格里面的元素,那么一些用于标识或对齐的线就会显得很多余。这些表示对齐的线的最大的作用就是减少两个元素之间的留白,同时又能清晰地分辨出两个元素而已。但是,就算要用,也要确保那些为了使元素对齐而使用的线是轻量级的,尽量少地影响到用户快速扫描表格中的数据。

相反的,水平的分隔线 确实非常实用,因为这确实明显地可以减少长表格在竖直方向上空间(因为如果不用分割线的话,就会需要更大的留白来区分竖直方向上的信息),这样用户就能更快速地扫描和对比一大串相关的数据,从而看出变化趋势。

有一个未经证实的观点,作者个人觉得斑马色块分隔的方式真的很烂,真的,超级烂,把它拿走啊!

五、背景

背景的使用,在表明不同含义的数据上非常有用。比如表示数据的总合或者平均值。想要突出一些数据,来表明它们在一个时间段内的变化的话,可以不用背景色,用一些箭头或者其他有显著含义的符号去取代。

另外,表格最好是单色的(或者是黑白颜色的)。如果用一些不同的颜色去赋予整个有条理有组织的表格更多的含义的话,那么就需要考虑,这可能会带来一些误解或者认知错误,以及一些可用性的问题了。

六、总结

表格或许真的很枯燥。但是它是所有多数据的文件里面最重要的元素,所以设计师们投入的每一份力量,都是值得的。为了设计出更加高效、清晰、易用的表格,设计师们可以广泛地提升用户在理解和分析大量数据的过程中的痛苦的体验。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容