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

从事B端产品交互设计工作的半年时间里，笔者有幸接触了面向开发和运维人员的B端业务类列表交互设计工作。为了方便后续在B端产品设计过程中可以更加高效且高质量的进行列表的交互设计，笔者结合自己在实际工作中遇到的列表类型总结了web列表设计的常用基础列表模式，以供大家参考。本篇文章所介绍的列表设计主要集中在列表内的元素和操作按钮（行内操作）的展示上，暂不包括列表的查询、筛选以及列表外相关功能。（一）基础型列表场景：web列表中基础的表格样式，用于业务相关的各项数据的平铺展示，通常操作按钮置于表格最右侧。横向基础表格的纵列数据项不宜过多，过多时页面大量的数据项容易造成用户的视觉疲劳，并且会出现横向滚动条从而降低用户操作的易用性。（二）网格型列表场景：网格列表的信息承载内容更多，单一网格内可展示多行信息。数据项之间的边界清晰，方便对网格内的数据进行对比，适用于需要展示业务数据量的需求场景。操作按钮根据业务需求和用户需求可置于列表右侧或单个网格内。（三）主从型列表场景：B端产品业务场景具备多样化的特点，实际工作中我们常常会遇到列表中非单一item展示的需求，item之间除常见的并列关系，还存在从属关系、递进关系等。对于主从或递进关系的列表，笔者建议主从item总数≤3，且不适宜对每个主item进行默认展开的场景，因为B端产品的业务数据量通常较大，默认展开多个主item对服务器的性能损耗较大。建议每次展开一条主item，其他主item呈收起状态。当主item下的从属表的行数较多时，可采取分步加载的方式，例如默认展示10条数据，点击

转载请注明：http://www.jinyawz.com/zflzy/10506.html