B端产品常用web列表设计模式总结

发布时间：2018-10-09

从事B端产品交互设计工作的半年时间里，笔者有幸接触了面向开发和运维人员的B端业务类列表交互设计工作。为了方便后续在B端产品设计过程中可以更加高效且高质量的进行列表的交互设计，小编结合自己在实际工作中遇到的列表类型总结了web列表设计的常用基础列表模式，以供大家参考。
(一)基础型列表
场景：web列表中基础的表格样式，用于业务相关的各项数据的平铺展示，通常操作按钮置于表格右侧。横向基础表格的纵列数据项不宜过多，过多时页面大量的数据项容易造成用户的视觉疲劳，并且会出现横向滚动条从而降低用户操作的易用性。
(二)网格型列表
场景：网格列表的信息承载内容更多，单一网格内可展示多行信息。数据项之间的边界清晰，方便对网格内的数据进行对比，适用于需要展示业务数据量的需求场景。操作按钮根据业务需求和用户需求可置于列表右侧或单个网格内。
(三)主从型列表
场景：B端产品业务场景具备多样化的特点，实际工作中我们常常会遇到列表中非单一item展示的需求，item之间除常见的并列关系，还存在从属关系、递进关系等。对于主从或递进关系的列表，笔者建议主从item总数≤3，且不适宜对每个主item进行默认展开的场景，因为B端产品的业务数据量通常较大，默认展开多个主item对服务器的性能损耗较大。建议每次展开一条主item，其他主item呈收起状态。
当主item下的从属表的行数较多时，可采取分步加载的方式，例如默认展示10条数据，点击查看更多时可以继续请求后端数据进行展示。综上，对于主从列表的展示形式，设计师可根据实际的用户需求和开发实现的便捷性和性能损耗的低性方面出发进行从优考虑。
(四)综合型列表
场景：综合型列表适用于业务数据展示复杂的场景。列表数据之间既包含并列关系，又包含从属关系等。
综合型列表上常常伴随用户复杂的操作，如上图所示，既包含对不同环境下key的查看、下载、修改以及更多的操作，又包含对整条key的移动、删除操作。基于综合型表格可方便地对业务数据进行组合、分解和重新布局排列。
列表设计思路总结：

通过对工作过程中遇到的列表设计的总结，小编发现列表设计均可以依据纵横相间的网格列表为基础进行扩展。以网格列表为基础，对不同的单元格进行重组和拆解可衍生出多种不同类型的列表，如下图所示。然后，以衍生列表为基础，设计师可进一步采取微交互的设计方式来表现不同数据之间的矩阵、从属、递进、并列等关系。

以上内容由