列表是B端产品最为常见的页面形式之一,用于分条展示同类数据,主要有表格列表、卡片列表两种形式。

表格列表

表格列表的优点在于展示直观、信息量丰富,在有限的页面空间,能够让用户一眼看到最多的信息。
Excel可以直接放在电脑桌面,打开更方便,更直观,一眼能看到更多的信息,工具栏功能更强大,处理信息更高效,但系统也有很多独特的优势,如自动预警等。
表格列表虽然看似简单,但要做到用户满意,不能只是简单地罗列信息,还要尽量保留Excel原有的优势,但也不能因此做一个在线文档,而是要根据用户的使用习惯,在还原Excel和开发量间做好平衡。

表格列表中常用的辅助功能

表头设置:即表格列的设置,可以根据需要设置表格显示的列,以及对列进行排序。
image.png
列排序:根据查看要求按不同字段自定义排列顺序。
列锁定:类似Excel中的冻结窗格功能,当列表字段过多时,用户需要横向拖动,这时可以将前面的列冻结,方便查看。
image.png
布局切换:表格列表除了单纯的表格,还有看板布局、列表+详情布局。
看板布局可视化效果更好,多用于以状态(即看板的列)为主要区分维度的场景;列表+详情布局则是将列表与详情整合到一个页面上,多用于需频繁切换不同数据查看详情的场景。
image.png
image.png
备注:这些都是锦上添花的功能,不需要在每个表格列表中都做,而是根据列表复杂度、业务需求、使用频率等,有选择地做。
【PS:关于web表格列表的设计分析文章非常多】

卡片列表

相比于表格列表,卡片列表样式比较活泼,主要应用于字段少、字段内容固定、视觉样式要求高的场景中。
卡片列表最大的优势在于可以通过图片或视频让页面更美观、丰富,即使没有图片,通过文字样式的变化,也能让页面显得不那么死板和单调,但这种形式的拓展性不强,当卡片上显示的字段需要调整时,整个页面的样式都有可能随之调整,从而增加工作量。