无论是设计网页还是 app, 在展示大量格式化数据时,表格、列表和卡片都是最常用的三种形式。但是在工作和学习过程中,常常看到这三种形式用的很奇怪的情况。所以来聊聊这个吧。

表格

在各种 web “管理系统”中,如果没有设计师,表格一般是大家的最爱。表格确实比较简单的映射了数据库的结构,而且别人都用,我们也用吧,可能还有从 Excel 转来的用户,简直零成本上手。于是造成了表格的泛滥。而且在 HTML 中,似乎表格也天然对应着这类格式化的数据,毕竟像 ul 和 li 的默认样式都是下面这样带着点的,给人一种这货不适合展示大量格式化数据的感觉。

浏览器默认的列表样式:

  • 示例列表项1
  • 示例列表项2

但是表格的缺点也很明显,其一是,某一项的长度太长导致高度增加时,就会使同行的其他项目浪费大量的空间,从而导致整个页面的利用率下降。比如我在很多后台系统见过下面这样的情况:

示例表格:

第一列 第二列 第三列 第四列
字少的项目 字超多的项目,可能是一个网址,比如说是一个带了很多参数的查询地址 http://www.abcdefz.com/applicationname/partname/datamodel/query?filter1=1&filter2=2&filter3=3&filter4=4 字少的项目 字少的项目

另一个缺点也很明显,就是列数太多,又不想折行,于是造成页面的横向滚动。

所以表格适合展示字段数不是特别多,且内容相对均匀的数据。避免出现一个某一字段普遍长于其他字段,还因为列数原因没有足够空间展示,从而造成高度拉长的情况。

对于列多较多的情形,如果一定想用表格展示,可以通过适当合并一些列来解决。比如原本有收货人姓名、电话、地址(省、市、区、详细)六个字段,其实可以合并为“联系人”一列来展示,因为姓名、电话、地址都有明显的内容特征,很容易分辨,且都是用于发货使用,联系紧密。当然,合并的过程中还是要考虑避免某一列项目过高的情况。

那实在解决不了某一列项目过高的问题,就建议使用下面两种了:列表或者卡片。

列表和卡片

其实列表和卡片在信息呈现上具有一定的相似性。所以放在一起说。它们的优点就是,对于一项内容,在一个列表项里面,或者一个卡片里面,信息排版的灵活度是相当高的,可以充分利用空间。更重要的是对于突出信息间的关系,也有更多的表现手法。比之表格,除了字体相关、颜色,多了位置和分组的表现方法。而其实如果是表格的话,不同列的颜色一会儿深一会儿浅其实是比较容易显得怪异的,但是列表项和卡片里面,这个问题就比较好解决一些。可以很容易的表现类似标题、副标题、描述、内容、标记等等概念。

列表和卡片的区别在哪里呢?先说列表。在手机上,由于屏幕限制,列表的操作相对较少。一般来说,点击列表本身是操作,可能还有一个点击的副操作,比如收藏之类的,可能还有滑动出来的操作,这个就是操作频次相对低的了。而在电脑上,屏幕限制的问题比较小,可能相对的操作多几个,但是列表的一个项,还是给人一种整体感。给人一种呈现“内容”的感觉,而不是突出操作的感觉。

而卡片对于交互的灵活性要高很多,便于安排很多按钮之类的控件。但是它也有一个缺点,就是传统上,尤其是 Material Design 默认,需要阴影去表达卡片的概念。所以常常会浪费很多屏幕空间。同时大量的卡片排列造成的阴影,也很容易带来视觉上的疲劳。但是卡片总体上还是给人一种不仅在展示内容,还在突出“操作”的感觉。

为了弥补卡片阴影的缺点,其实也有很多 App 在视觉上做出了很多调整,比如 Facebook Timeline 的卡片,就是没有阴影的,只有上下的空白,左右也是占满了的,一方面有效利用屏幕空间,一方面也降低了视觉疲劳的可能。Instagram 的设计还要和稀泥(褒义)一些,很难说他那个是列表还是卡片了。

而从对卡片和列表的设计,也可以看出不同产品的设计思路。比如微信朋友圈,就是典型的列表模式,最明显的点赞和评论还都收在了一个按钮里,突出了“内容感”。微信朋友圈更想让大家注意朋友们的内容。而 Facebook的 卡片设计,很明显的点赞、评论和分享,则可以看出 Facebook 更希望引导朋友间的互动。

所以其实也没有必要纠结到底是卡片还是列表,抓住他们两个的优点,满足我们的设计需求就好了。