发帖
雷达卡
从事 B 端产品交互设计工作的半年时间里，笔者有幸接触了面向开发和运维人员的 B 端业
务类列表交互设计工作。为了方便后续在 B 端产品设计过程中可以更加高效且高质量的进
行列表的交互设计，笔者结合自己在实际工作中遇到的列表类型总结了 web 列表设计的
常用基础列表模式，以供大家参考。
本篇文章所介绍的列表设计主要集中在列表内的元素和操作按钮（行内操作）的展示上，
暂不包括列表的查询、筛选以及列表外相关功能。
（一）基础型列表
场景：web 列表中基础的表格样式，用于业务相关的各项数据的平铺展示，通常操作按钮
置于表格最右侧。横向基础表格的纵列数据项不宜过多，过多时页面大量的数据项容易造
成用户的视觉疲劳，并且会出现横向滚动条从而降低用户操作的易用性。
（二）网格型列表
场景：网格列表的信息承载内容更多，单一网格内可展示多行信息。数据项之间的边界清
晰，方便对网格内的数据进行对比，适用于需要展示业务数据量的需求场景。操作按钮根
据业务需求和用户需求可置于列表右侧或单个网格内。
（三）主从型列表
场景：B 端产品业务场景具备多样化的特点，实际工作中我们常常会遇到列表中非单 ...
京公网安备 11010802022788号
