恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
怎样更好地设计数据表格
0.0°
2017-04-05 自译外文 规范/资料 原作者: Matthew Ström 举报 2258 4 5 0

在网络发展初期表格是其中最基础的组成部分,但现在很多设计师用更新颖更紧跟潮流的排版取代了表格。尽管在网页上出现的频率变低,数字表格仍然收集和组织起日常生活中我们接触的大部分信息。


比如,有这样一份我认为极具代表性的表格:美国“入关物品一览表”,这份超过3550页的表格列举了每一种可以进口到美国的物品,包括“成年男性或男孩的外套,短大衣,披肩,斗篷,厚夹克(包括滑雪衫),风衣以及类似的物品(包括有衬垫的无袖夹克)”

Image title

毫无疑问,设计不合理的数字表格会引发焦躁和糟糕的体验。设计表格至关重要:如果做对了就能使复杂数据的浏览和比较变得容易;如果做的不好就会使信息完全不能被理解。

既然表格如此重要就让我们好好来设计它。


理解你要设计的数字

不是所有的数字都是被平等地创造出来的。我不是在说π和∞(虽然我也经常拿它们做例子),而是扁平旧式数字和等高等比例数字。

下面这是旧式和等高数字的区别。

Image title

旧式的数字在文章语句中看起来很和谐,因为他们与小写字母很搭;等高数字更统一,强调了表格的栅格结构。

等比例数字和扁平数字的差别没有这么明显。

Image title

等比例数字被设计用来适应字型的大小和空间。另一方面扁平数字则是完全一致的大小,因此数字能够均衡地排布。也许一行两行看不出太大的差别,但扁平数字使得浏览大型表格变得更容易并防止出错。


等高数字使用的关键

设计前你需要做些工作以确保你选择了正确的字体(扁平等高数字不是默认的选项)。Adobe系列产品有一项名为Opentype的字体技术能合理地排列数字,CSS也提供了 句法规则来保证这一特征。除了这些,利用搜索引擎也能帮你走向正轨。


但坏消息是,不是所有的字型都有相应的扁平等高数字。这样的兼容成本很高。但也有例外:worksans 就是一种有等高数字的免费的字型。


如果你找不到有等高数字的合适的字型,有效的备用之选是等宽字体——它看起来有据可循并且总能很好地在表格中展示数字。此外,新的苹果系统默认字体San Francisco也具备优秀的等高字体特征,在小字号时看起来尤其棒。


对齐法则

1.数字类数据右对齐

2.文字类数据左对齐

3.标题随内容

4.不要使用居中对齐

Image title

美国历史人口数

数据类阅读顺序时从右至左;因为我们比较数字时首先看个位,然后是十位,百位等等。大多数人是这么学算术的——从右至左进位。这也是为什么要保证数字右对齐。


文字类数据在英语阅读中是从左至右。比较这类信息通常是以字母表顺序:如果两者首字母相同那就看第二个字母,以此类推。如果不是左对齐快速浏览文字就会变得很困难。


标题一般来说要与其内容对齐,这样才能使垂直方向看起来整齐一致。


居中对齐使表格信息看起来参差不齐,增加了查看分类的难度,需要额外的分隔线和图形元素来解决这一问题。


前后一致的字体位数=更好的排布

保持表格合理排列的一个简单方法就是使每一列的数字位数保持一致——通常是指小数点后数字的位数。关于位数较多的数字排列是个很大的话题,所以我尽量提简明的建议:数字位数越少越好。


简洁明晰的标签

为数据定制标签很关键。这些附加的内容使表格在不同环境下的受众更广。

Image title

密西西比河洪峰预测


标题

听起来不新鲜了,但是简明扼要的标题与其他设计一样重要。有了好的标题,表格就是操作便捷的:可以容纳大量不同的内容,并且可以开源引用。

单位

最常见的标签就是数据计量单位;一般是每个独立的数据点的重复。每一列只有第一个数据带有单位而不是每一个数据都重复一次。

表头

使表头尽可能短;尽量关注数据本身,长表头可能会占用大量的虚拟内存。


尽可能少着笔墨

在决定表格的视觉元素时我们的目标永远是在忠于架构的前提下弱化表格的痕迹。方法之一是尽可能减少笔墨——不去过多地设计元素的样式。

Image title

2016年美国棒球联盟数据


规则

如果你已经合理地编排好了表格中的数据,规则就是多余的。规则提供的基本的好处是在能清晰分辨组件不同的前提下尽量减少二者的间距。

水平法则是最有用的,因为这能帮助使你的表格长度大大缩短,并能更快地比较大量的数值,随时查看变化趋势。

还有一条我自己总结但没有被证明的规则:斑马条纹很糟糕。糟糕到超出你的想象。


背景

背景在说明数据范畴的不同时作用很大,比如:单个数值的转换以及求和或求平均数。而仅仅是强调数值,提供附加内容或者展示前期数值的变化则不需要说明背景。


此外,表格需要保证是单色,表格内容用色太繁杂会增加歧义和错误,更严重的是会给视力障碍人士带来可用性上的问题。


结论

表格也许很无聊,但它在任何数据导向的文件中都是十分重要的一部分,值得我们将设计思维运用其中。当你能够不费力地设计出高效,简明,易用的表格时,你就能改善分析理解大批量数据时通常很不友好的体验。


延伸阅读

FiveThirtyEight——大部分的灵感来源,他们选择了 Decima Mono作为显示字体,这种字体专门设计来适应小空间。

Butterick’s Practical Typography——实用的指南,你可以保存多种副本。

最后,没有 Edward Tufte就是不完整的,他关于设计具有洞察力的著作是必不可少的。


更新:2017-04-05

收藏

4人已收藏

xiaoxinxdd

同理心 好奇心

  • 10

    作品

  • 12

    粉丝

  • 61

    关注

  • 2017-2019用户体验设计作品集
  • 2017UI/UE作品集
  • 1000层电梯——让众多设计师折戟的谷歌设计题
  • 神奇动物在哪里——手淘主题皮肤参赛设计

    猜你喜欢

      2017-04-05 自译外文 规范/资料 原作者: Matthew Ström 举报 2258 4 5 0

      怎样更好地设计数据表格

      0.0°

      你确定要举报怎样更好地设计数据表格

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年04月05日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录