列表页是 B 端产品的核心页面类型之一，承担着数据展示、信息检索、操作入口等关键功能，直接影响用户的数据处理效率与决策体验。优质的列表页设计需基于业务场景与用户需求，匹配合适的布局与模板，让复杂数据变得清晰易懂、操作高效。本文从基础布局、核心模板、设计技巧三个维度，拆解 B 端列表页的设计逻辑，为设计师提供可落地的实践方案。
基础布局决定了列表页的整体信息架构，需根据数据过滤条件的数量、页面空间大小等因素选择，核心分为单列布局与双栏布局两类，均遵循 “用户先筛选后浏览” 的核心逻辑。
单列布局将数据过滤、数据统计、数据列表按纵向顺序堆叠，用户遵循自上而下的线性浏览路径，无需切换视线，操作成本极低，是应用最广泛的基础布局。
- 过滤条件较少（≤5 个），无需复杂筛选逻辑（如仅需关键词搜索、状态筛选）；
- 页面空间有限（如弹窗列表、移动端列表），需聚焦核心数据展示；
- 用户使用场景以快速浏览、简单操作为主（如查看待办列表、已完成订单）。
- 数据过滤模块置于页面顶部，采用横向排列，核心筛选条件（如关键词搜索）优先展示，次要条件可折叠在 “高级筛选” 中；
- 数据统计模块紧跟过滤模块，用数字卡片直观展示关键指标（如 “全部应用 57 个”“发布成功 12 个”），帮助用户快速掌握数据全貌；
- 数据列表区域占页面主要视觉空间，列数控制在 3-5 列，避免信息过载；
- 批量操作按钮（如 “批量删除”“批量导出”）固定在列表顶部，与筛选模块区分开，方便用户筛选后快速操作。
员工考勤列表页采用单列布局，顶部设置 “关键词搜索”“考勤日期筛选” 两个核心过滤条件，下方展示 “本月考勤统计”（正常出勤 22 天、请假 3 天），再往下是考勤详情列表，用户可快速浏览每位员工的考勤状态，操作逻辑清晰。
双栏布局将数据过滤模块单独置于左侧侧栏，右侧展示数据统计与数据列表，适合过滤条件较多的场景，既能保留完整的筛选功能，又不影响数据展示区域的完整性。
- 过滤条件丰富（≥6 个），需多维度组合筛选（如类目、负责人、状态、时间范围等）；
- 横向页面空间充裕（如 PC 端工作台、数据管理后台）；
- 用户需频繁切换筛选条件，且希望筛选状态持续可见（如运营人员筛选不同类目的产品数据）。
- 左侧侧栏宽度固定（建议 200-250px），支持折叠 / 展开，折叠后不影响右侧数据展示；
- 侧栏内按筛选维度分组（如 “基础筛选”“高级筛选”），每组设置清晰标题，选项按逻辑排序；
- 右侧数据统计与列表区域保持与单列布局一致的设计逻辑，确保视觉统一性；
- 筛选条件变更后，右侧列表实时刷新，无需用户额外点击 “查询”，提升操作效率。
电商产品管理后台的商品列表页采用双栏布局，左侧侧栏包含 “商品类目”“上架状态”“价格区间”“所属店铺” 等 10 余个筛选条件，右侧展示 “商品总数”“在售商品数” 等统计数据及商品列表，运营人员可快速组合筛选条件，定位目标商品。
根据数据展示形式与用户使用目的，B 端列表页可分为四大核心模板，每个模板都有明确的适用场景与设计侧重点，设计师可根据业务特性灵活选择。
查询表格模板以表格形式展示数据，每个条目包含多个字段（如名称、状态、数量、操作等），用户可快速对比不同条目的详细信息，适合需要精准查询与数据比对的场景。
- 数据条目需展示的字段较多（≥5 个），且用户需快速查看关键参数（如应用管理中的 “应用名称、状态、类型、调用量、操作”）；
- 用户有明确的查询目标，需通过多字段筛选定位条目（如财务人员查询特定时间段的报销单）；
- 需支持数据排序、导出、批量操作等功能（如导出表格数据、批量审核条目）。
- 表格列头清晰标注字段名称，支持点击排序（升序 / 降序），排序状态用箭头明确标识；
- 字段内容过长时，采用 “截断显示 + hover 展开” 的方式（如备注文字保留 15 字，hover 显示完整内容），避免表格列宽过宽；
- 操作列放置在表格最右侧，按钮数量控制在 3 个以内，多余操作收纳在 “更多” 下拉菜单中，保持表格整洁；
- 支持表格列自定义（如用户可隐藏不需要的字段），适配不同用户的使用习惯；
- 奇偶行采用不同背景色区分，提升表格可读性，减少视觉疲劳。
应用管理列表页采用查询表格模板，展示 “应用名称、应用状态、应用类型、容器数量、调用量、操作” 等 6 个字段，用户可通过状态筛选 “已发布”“未发布” 的应用，点击列头排序调用量，操作列提供 “链路报警”“监控” 等功能，满足精准管理需求。
标准列表模板以条目卡片形式展示数据概览，每个条目包含核心信息（如名称、关键指标、状态），点击条目可跳转至详情页，适合需要快速浏览总体情况并深入查看细节的场景。
- 数据条目需突出核心信息，无需展示全部字段（如实验管理中的 “实验名称、模型数、指标数、状态”）；
- 页面需兼具数据统计与条目展示功能（如显示 “全部应用 57 个”“我创建的 32 个”）；
- 可作为简易工作台，用户需快速定位条目并进入详情页操作（如运营人员查看活动列表并进入编辑页）。
- 每个条目卡片包含 “标题 + 核心指标 + 操作按钮”，标题突出显示，核心指标用数字卡片或标签展示（如 “发布成功” 状态标签）；
- 页面顶部设置统计模块，用数字直观展示不同分类的条目数量（如 “开发阶段 0 个、预发阶段 2 个、发布成功 1 个”）；
- 操作按钮（如编辑、复制、删除）放置在条目右侧，hover 时显示，避免占用过多视觉空间；
- 支持下拉加载更多条目，避免一次性加载大量数据导致页面卡顿，加载状态用 “加载中” 提示明确告知。
实验管理列表页采用标准列表模板，每个条目展示实验名称、模型数（2903）、指标数（3720）、发布成功状态，用户可快速浏览所有实验的核心情况，点击条目进入详情页查看完整数据，或直接点击 “编辑”“删除” 按钮进行操作。
卡片列表模板将每个条目设计为独立卡片，通过图文结合的方式展示信息，视觉表现力强，适合无需按特定顺序浏览、需突出条目独立性的场景。
- 条目需展示个性化信息（如产品介绍、活动详情），且希望视觉呈现更具吸引力；
- 用户无需对比数据，仅需浏览选择目标条目（如开发者选择工具应用、运营人员选择活动模板）；
- 页面空间充足，需丰富视觉层次（如平台首页的应用推荐、工具列表）。
- 每个卡片包含明确的标题、简要描述、核心功能按钮（如 “开始使用”“查看文档”），信息层级清晰；
- 卡片尺寸统一，间距均匀，可采用网格布局（如 2 列、3 列），适配不同屏幕尺寸；
- 描述文字控制在两行以内，避免卡片过高影响浏览效率；
- 支持卡片 hover 效果（如轻微上浮、阴影加深），提升交互体验；
- 可根据业务需求添加标签、图标等元素（如应用类型标签、热门推荐图标），帮助用户快速识别条目属性。
开发者工具列表页采用卡片列表模板，每个卡片展示工具名称（如语雀、云凤蝶）、简要描述（如 “专业的云端知识库”“流畅的可视化搭建工具”）、功能按钮（“开始使用”“查看文档”），用户可随意浏览，点击感兴趣的工具卡片进入详情页，视觉体验舒适且操作直观。
搜索列表模板以搜索为核心，用户通过关键词输入或多维度筛选，快速查找目标条目，适合数据量庞大、条目类型多样的场景，满足用户的模糊查询需求。
- 数据条目类型丰富（如文章、项目、应用、文档），用户需跨类型搜索；
- 用户无明确查询目标，需通过关键词模糊查找（如设计师搜索 “Ant Design” 相关的设计资源）；
- 需支持多维度高级筛选（如类目、负责人、好评度、活跃用户等），精准缩小查询范围。
- 页面顶部设置突出的搜索框，占位提示明确（如 “搜索小程序开发入驻 ISV 权限”），支持回车快速搜索；
- 搜索框下方设置分类标签（如 “文章、项目、应用”），用户可切换搜索范围，筛选结果实时更新；
- 高级筛选模块可折叠，包含多维度筛选条件（如类目、负责人、状态），满足精准查询需求；
- 搜索结果条目展示核心信息（如标题、发布者、发布时间、简介），简介部分截取关键内容，帮助用户快速判断是否为目标条目；
- 支持结果排序（如按发布时间、热度排序），并显示条目相关数据（如点赞数、评论数），辅助用户决策。
设计资源平台的搜索列表页，用户输入 “Ant Design” 关键词后，可切换 “文章、项目、应用” 分类标签，通过高级筛选选择所属类目、负责人，搜索结果展示资源标题、发布者、发布时间、简介及点赞数，用户可快速找到所需的设计资源。
- 核心筛选条件（如关键词、状态）直接展示，次要条件收纳在 “高级筛选” 中，避免筛选区域过于冗长；
- 筛选条件变更后，列表实时刷新，无需用户额外点击 “查询”，提升操作效率；
- 保留用户最近的筛选记录，下次进入页面时自动加载，减少重复操作。
- 高频操作按钮突出显示（如 “新建”“导出”），低频操作收纳在下拉菜单中，简化视觉层级；
- 批量操作需先勾选条目，再点击操作按钮，勾选状态清晰可见，支持 “全选 / 取消全选”；
- 操作后给予明确反馈（如 “删除成功”“导出完成”），让用户感知操作结果。
- PC 端支持多列布局（如卡片列表 3 列、查询表格 5 列），移动端自动适配为单列布局，确保在不同终端都能正常浏览；
- 移动端列表支持下拉刷新、上拉加载，操作按钮适配触摸交互（如增大点击区域）。
B 端列表页设计的核心是 “场景匹配”—— 根据数据复杂度选择布局，根据业务需求选择模板，最终实现 “数据清晰、操作高效、体验流畅” 的目标。在实际设计过程中，需结合用户调研与业务逻辑，灵活调整布局与模板的细节，让列表页真正成为用户处理数据、决策分析的高效工具。随着 B 端产品的迭代，列表页设计也需持续优化，融入智能化功能（如智能筛选、数据预警），进一步提升用户体验。
