起点学院课程

Saas产品中,表格设计有哪些要点

1 评论 6293 浏览 36 收藏 11 分钟
15天0基础极速入门数据分析,掌握一套数据分析流程和方法,学完就能写一份数据报告!了解一下>>

编辑导语:无论是在学校还是公司,我们每个人应该都接触过表格。表格不仅可以迅速的收集信息,还是一种高效的信息展示方式。本文作者基于过去的创业经验,为我们分析总结了数据表格设计的一些关键点,希望看后能够对你有所启发。

过去的创业经历中,我接触了不少 SaaS(Software as a Service,软件服务化)平台,如 Mailchimp 、 Shopify 、 Klaviyo 、 Zendesk 等。

它们虽功能各异,但是ToB 管理后台中有一个共同点——大量使用表格,这可能是效率最高的信息展示方式了。表格可以高效组织信息和数据,让用户方便阅览、对比和分析。

这篇文章将会根据我的经验,总结一下数据表格设计的关键要点。

表格设计要点

一、长表格冻结表头

超过30行时,用户就必须向下滚动查看信息了。此时如果没有固定的表头就会很难阅读。固定的表头可以让用户阅读起来更加轻松,不至于翻着翻着就忘记自己在看什么了。

设计技巧:我喜欢用8点网格系统,因此通常将表头的内边距设置为16px,这样整体看起来不会太拥挤。

表格设计要点

二、宽表格冻结首列

当我们查阅表格时,有2类信息是统领全局的:

  1. 每种数据类型,即首行/表头(例如状态、结果、预算等);
  2. 每项数据的标题,即首列(名称、ID等)。

数据项太多可以冻结首行,那么数据类型太多可以冻结首列。

设计技巧:对于冻结首列的表格,建议可以加一个阴影效果,给一个“可以滑动”的视觉隐喻。

表格设计要点

三、分步展示

我从一位程序员朋友说,只要缩减单次加载的数据量,就可以缩短等待加载的时间,从而达到少量多次的高效体验。这就是为什么哪怕是移动时代了,很多表格还是使用分页组件。

少量多次的加载还有一种——滚动加载,用户滑到页底时,自动加载下一批数据,更加符合移动时代的轻量交互趋势。

然而我个人还是更加喜欢第一种分页组件,因为我可以用它跳跃查看数据,灵活性更高、步骤更短。

第二种滚动加载,也许更加适合 ToC 的快速阅读场景。

设计技巧:如果每页数据高度可能超过用户屏幕,而分页有没有吸顶/底,可以将表格的首尾都放上分页组件,这样用户就不需要为了翻页而上下滚来滚去。

表格设计要点

四、自定义列展示

当数据类型过多时,简单粗暴地冻结首列并不能够长久地解决用户体验问题,毕竟无论是PC还是手机,我们都不习惯横滑。

此时自定义列展示就成了一种不错的解决方式,让用户根据自己的喜好来定制表格的信息。

这个功能的运用挺广的(尤其是广告投放系统),例如 Facebook Ad Manager 、 Google Ads 、 AdRoll 等,在太多数据类型的情况下,允许用户自行选择需要的部分。

表格设计要点

五、筛选(自定义行展示)

既然可以自定义列展示,那肯定也可以自定义行展示,或者说就是筛选功能。最基本是如果是数字类型的数据,就可以根据数据范围来筛选(例如价格范围:100~200元)。

复杂一点,可以根据将单列中重复出现的字段整成几个选项(例如订单状态:审核中/进行中/已完成)。如果选项过多,可以考虑用复选框实现多选。

表格设计要点

六、排序

和筛选类似,排序也是根据用户需求展示信息。通常我们要预判用户的可能需求,提供一个默认排序方式。

如果用户不满意,可以通过点击表头来选择不同的排序方式。

你可以默认给大部分表头加一个排序功能,不过也没有必要每个都加。例如:根据首字字母排列类型、状态之类的文本信息实在不太有必要。

设计技巧:建议不要用单线箭头,而是使用实心的,这样更容易辨识。最好把整个表头作为点击和鼠标悬浮反馈区域,而不仅仅是图标那一小块。

表格设计要点

七、批量操作

复选框可用于允许用户选择多个条目并对所有条目执行操作,这使用户可以节省时间和精力,而不必一次又一次地重复相同的步骤。

如果把相同的按钮放在每一行的尾部,如果少量还好,多了一不小心就会显得复杂冗余。

设计技巧:我一般使用至少边长24px的复选框,以确保点击的可用性。选中时,整列会用不同的背景色来高亮展示。

表格设计要点

八、简约至上

虽然“极简主义”一词已被大量使用,并且留白似乎已成设计趋势,但在表格设计中,肯定少即是多。

设计数据表单时,重点应该是数据本身而不是界面。试想一下,用户已经全身心投入大量的数字和信息中时,界面太过复杂只会增加没有必要的认知负担。

设计技巧:去除没必要的视觉干扰,例如不必要的图标、背景斑马线,无规律的色彩等。

表格设计要点

九、无衬线字体

在产品的品牌设计中,字体是规范中的重要一环。然而在设计表格时,简约至上才是关键,尽量避免任何装饰性字体。

设计技巧:虽然不能够建议你具体使用哪种字体,但最好不要使用任何衬线字体(serif fonts),因为很容易把人的注意力吸引到不重要的地方,造成视觉干扰。然后英文的话,也要避免过多的大写字母。

表格设计要点

十、文字链接

有些表格会把项目名称做成链接,这也是符合用户习惯的的场景交互方式,用户不用猜就可以知道链接的跳转目标。

设计技巧:请使用不同的颜色来标明文字链接——加粗和下划线是不太够的。

表格设计要点

十一、悬停操作

通常来说,我们会把操作按钮放在最右侧。但如果表格需要左右滑动才能完整显示,这种布局就不方便理解和使用了。

如果表格过宽,可以将操作按钮放在首列或第二列展示。为了保持表格在大部分情况下的整洁性,可以默认隐藏操作按钮,鼠标悬停时才出现。

表格设计要点

十二、总结

本文给表格设计提供了一个基本的指南,在具体项目中,你可能需要根据产品特性和用户需求进行调整。

如果你还有什么好的想法和建议,可以在评论里留言讨论。

本文提供的是表格样式设计的建议,对于如何整理表格信息,之前写过一篇文章获得了不错的反馈,提供给大家《手机端表格设计:我整理了一套循序渐进的处理方法

 

原文作者:Jeremiah Lam

原文地址:https://uxdesign.cc/11-table-design-guidelines-adb27ac01c8e

译者:圆子,公众号:体验进阶。

本文由 @Z Yuhan 翻译发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
起点学院课程
评论
评论请登录
  1. 总结很全

    回复