表格排版

后台中常常排版表格,那我们也说说,有意思的表格排版吧!

表格排版总原则

13:16:21.jpg

在数字右对齐时,一眼便能看出哪个数值更大。确实是一种很好的体验

数字是从右向左读的;这是因为,我们对比数字时,首先看个位,然后十位、百位。多数人也是这么学会算数的——从右边开始,向左移动,在移动中传递数字。因此,表格的数字应当右对齐。

文字信息是从左向右读(至少在英文中如此)。比较文本元素通常是靠字母表顺序排列:如果两个条目首字母相同,就对比第二个字母,以此类推。如果不采用左对齐,尝试快速浏览文字会使人抓狂。

通常,表头应当符合数据的对齐方式。这能保持表格竖直方向整洁,营造一致性和上下文环境。

等高数字-等宽字体

设计时,你需要花点精力,确保用对了数字的类别(等高表格数字并不是默认的)。Adobe产品有一个“opentype”面板,可以对数字进行适当设置,CSS也提供了一种slightly-cryptic语法用来开启这个功能。除此之外,稍微搜索一下你就能找到方向。

但也有个坏消息:并非所有字体都包含可用的等高表格数字。那些漂亮的非常贵。有少数例外:优秀的Work Sans字体是一款带有等高表格数字的免费字体。

如果找不到合适的带有等高表格数字的字体,可以退而求其次使用等宽字体——它们看起来更像“代码”,总是很适合在表格中展示数字。而且,新的Apple系统默认字体——旧金山字体,就包含优秀的等高表格数字,并且在小字号情况下表现良好。

Mac/Linux下推荐Monaco和Source Code Pro
Windows下Consolas是绝对的首选

单位

表格中最常用的标签,是数据的度量单位;通常,每条数据都会重复加上单位。其实不该如此,应该只在每列的第一条数据加上单位。

13:20:04.jpg

尽可能少着墨

考虑如何装饰表格中的图形元素时,目标应当始终为削弱表格的痕迹,同时精确保持表格的结构。尽可能少“着墨”,就能做到这一点——也就是说,尽可能不给元素加装饰。

分隔线

如果在表格中使用适合的对齐方式,分隔线就是多余的。它们最大的贡献,就是让你缩减元素之间的距离,但仍能区分不同元素。即使要用,分隔线也要非常淡,不能妨碍快速浏览。

水平分隔线最有用,因为它们能显著减轻长表格在垂直方向的视觉重量,加快大量数值的对比工作,或者从时间中发现趋势。

关于分隔线,我有一条未经证实的观念,间隔条纹很不好。真的非常糟糕,信不信由你。

原谅链接 https://medium.com/mission-log/design-better-data-tables-430a30a00d8c#.9hag7vx1g
翻译链接 http://colachan.com/post/3516

Yoyo 「二是一种不三不四的态度」

男 1990.12.22 429660248@qq.com