这样设计表格，看着真难受！

互联网产品设计 2022-05-22

The following article is from 体验进阶 Author 设计师ZoeYZ

最近看到这样一个眼动记录视频，主要展示的是用户在查看图表时的行为。

表格内容是 PlayStation 5 和 Xbox Scarlett 的性能对比。

我剪成1分钟内的短视频，配上音乐还挺有节奏感的：

来源：https://www.nngroup.com/articles/lawn-mower-pattern/

看完视频，大家有没有发现什么问题。是不是感觉这个表格又大又空，读起来很费力？

尤其是在对比数据的时候，视线来回跨度非常大：

这是因为我们在阅读表格的时候，通常是按照割草机路线 Lawn Mower Pattern 扫视的：

根据用户的表格阅读方式，我总结了一些表格设计注意事项，可以更好的帮助用户快速阅读并对比数据：

避免太宽

尤其是在PC端，有些产品很喜欢把所有的表格都拉满屏幕，觉得这样布局才完满。

这样会让用户不停地从左右横扫，过程很累时间很长，而且很容易看着看着就忘记之前的数据了。

尽可能的不要让表格过宽，如果数据较多可以折行。这样就算直接放到手机端上看，也会很舒服。

固定表头

有些表格信息量很大，宽度和高度够不能够完全限制好。

如果是这样，最简单的方式就是把表头固定住。这样至少用户在查看表头时，不会遇到需要滚动的问题。

明确间隔

数据多了就容易拥挤，尤其是上下行间距不清。

这样用户在来回扫视时，可能一不小心就错行了，于是不得不回去重新看一遍。

如果行之间间隔较远，就不会出现这个问题。

但如果由于信息太多，不能拉开间距的话，可以通过背景或分割线等方式，让行与行之间间隔明确些。

表格设计很容易出问题，但是有时候又无法避免使用表格形式，所以要小心处理。

大家还有什么其它想法和建议，可以留言讨论。

推荐阅读

（点击标题可跳转阅读）

让数据更美-B端图表视觉设计思考

盘点Facebook 、YouTube等主流产品的10大创新设计

2021 年用户体验设计趋势分析

主页君个人微信

添加主页君个人微信领取：大厂设计规范及组件库，免商中文字体，样机、作品集等

关注『互联网产品设计』

看更多互联网产品设计文章

↓↓↓

你「在看」是最好的肯定与鼓励

抗洪靠嘴，堵漏靠沙？印度官员真是绝了！

这样的洞庭湖决堤，实在让人同情不起来

有的人走了，却永远活着

圈内疯传某谣言

不要放过这些人渣

这样设计表格，看着真难受！

您可能也对以下帖子感兴趣

抗洪靠嘴，堵漏靠沙？印度官员真是绝了！

这样的洞庭湖决堤，实在让人同情不起来

有的人走了，却永远活着

圈内疯传某谣言

不要放过这些人渣

生成图片，分享到微信朋友圈

这样设计表格，看着真难受！

您可能也对以下帖子感兴趣