欢迎来到SaaS中心导航网站!

欢迎投稿最近更新文章排行

SaaS中心导航网站

当前位置: 首页 > SaaS产品设计

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

时间:2020-07-09人气: 作者: 小编来源: 网络

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

SaaS产品中,表格设计有哪些要点(图1)

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

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

  一、长表格冻结表头

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

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

  二、宽表格冻结首列

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

  每种数据类型,即首行/表头(例如状态、结果、预算等);

  每项数据的标题,即首列(名称、ID等)。

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

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

  三、分步展示

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

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

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

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

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

  四、自定义列展示

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

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

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

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

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

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

  六、排序

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

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

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

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

  七、批量操作

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

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

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

  八、简约至上

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

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

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

  九、无衬线字体

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

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

  十、文字链接

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

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

  十一、悬停操作

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

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

  十二、总结

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


本文来源于网络,如有侵权请联系删除。

标签: SaaS  

本类推荐