送你一份B端常用列表设计总结，快来看看吧！

列表在B端设计中，算是一个非常基础的设计元素，无论是什么产品设计，绝大多数的内容都要通过列表进行展示，才能最大程度的体现出清晰与美观，帮助使用者快速定位内容。常用来预览、查询、筛选、项目增减等等。所以为了方便B端企业在产品设计过程中，更加高效且高质量的进行列表的交互设计，在此特为大家呈上一份列表设计总结。

（一）基础型列表

1、纵向列表

常用于一个范围内相关的各项数据或选项项目的纵向平铺展示，通常左对齐、操作按钮位于右侧，用户只需上下滑动即可预览所有。

纵向列表一般条目详细，方便用户快速预览。

 

2、横向列表

常见于网站首页的横向轮播滚动面板，用户也是只需左右滑动面板，就会实现图片的一个切换。

较纵向列表，横向列表能更加充分的利用空间，但是页面一般较少，过多容易造成用户的视觉疲劳，并且不易操作。

 

 （二）网格型列表

除了纵向列表和横向列表外，还有一种兼顾了两种维度的列表形式，那就是网格列表，这也是一种非常常见的列表形式。

网格列表的信息承载内容更多，单一网格内可展示多行信息。数据项之间的边界清晰，方便对网格内的数据进行对比。操作按钮根据业务需求和用户需求可置于列表右侧或单个网格内。

   

（三）主从型列表

主从列表即项目之间存在着从属递进的关系。常见为一个主项目下拉会出现从属项目。列表具有较强的层级关系、从属关系、递进关系时可选用。

主从列表也能够充分利用空间，不需要的项目可以选择隐藏，需要的项目详细展开。

 

（四）综合型列表

综合型列表即列表数据之间既包含并列关系，又包含从属关系等。综合型列表适用于展示复杂的项目场景。综合型列表可以对不同项目进行预览、下载、编辑、删除等操作。

基于综合型表格可方便地对业务数据进行组合、分解和重新布局排列。

 

在JNPF快速开发平台上就是一个综合型的列表，从并列上看有创建人、创建时间、修改人、操作等，在操作栏下还可以再次编辑、删除等等。从属上看主项目有日常工作、人事管理、费用相关等，从项目又细分为库房管理、市场活动、入职申请等等。

 

最重要的是，在JNPF快速开发平台上用户可以自行新建一个列表设计，详细视频教程也已同步上线在公众号、视频号上，简单便捷，帮助您快速建立一个清晰美观的列表，赶快查看试一试吧！