定义
列表页是一种可以查看和处理大量数据的载体，常有导航至详情的作用。用户可在列表页对条目进行筛选、对比、新增、分析、下钻至条目完整详情页等操作。
根据列表应用场景分为以下4类：
 |  |
|
|
设计目标
帮助用户更高效的查看、处理、查找条目。
设计原则
易读性：采用格式一致的外观，突出有利于对象识别的关键信息。利用富交互分层展示信息以减少认知负荷。
可寻性：列表以易于浏览的逻辑排序。提供合适的搜寻组件帮助用户快速查找信息。
布局结构
列表是基于动态页面的平面布局。除了导航区域外，动态页面还包含以下区域： 1.筛选区域（按需配置） 筛选区域包含搜索、过虑功能，用户可以使用过滤展开/折叠图标来展开和折叠过滤区域 2.工具栏操作区域 用于放置列表相关的操作按钮，详情规则见【工具栏】和列表视图切换按钮 3.列表内容区域 显示列表已选数据汇总和全选操作、分页器、数据列表，也可以显示现有表格的其他视图（可切换） |
|
分类及用法
1.基础列表
当用户需要操作较多数据量或需要进行数据对比时； 当数据只需显示单级层次结构时。 特点： 可放置的列数较多，能够容纳更多的数据维度； 列表功能操作常驻显示； 筛选功能可以展开或者收起，右侧为展开状态。 |
|
 |  |  |
2.左树右表
当列表数据需要以多层级结构的方式显示或编辑时；
当用户需要操作较多数据量或需要进行数据对比时；
特点： 可以完整展现数据的复杂层级关系； |
|
 |  |  |
3.卡片列表
当用户需要快速了解单据的概要信息时；
3.1 卡片列表-带多选操作 特点： 可以完美兼容图片内容或特殊表达方式，可以快速呈现多层数据； 可将每个条目以富有吸引力的方式呈现； 可以支持将卡片按照日期或者其他关系进行分组展示，卡片也支持多选操作 |
|
 |
3.2 卡片列表-带多选操作 可以完美兼容图片内容或特殊表达方式，可以快速呈现多层数据； |
|
 |
4.带Tab的列表
当有多个大块内容需要被组织到一个页面时；
每一块内容应足够多，如果内容过少且未来不会再扩展请使用折叠面板；
信息之间不应该存在对比或并行关系，否则用户会在便签之间不断切换。
4.1 二级页签-格子风格 将不同类型内容页组织到一起，页签数量较少时优先推荐使用 |
|
 |
4.2 二级页签-迷你风格 将不同类型内容页组织到一起，页签数量较多时使用 |
|
 |
4.3容器页签-迷你风格 在容器卡片内使用页签将不同类型内容页组织到一起 |
|
4.4 容器页签-格子风格 在容器卡片内使用页签将不同类型内容页组织到一起，格子风格的页签比较突出，容易引起用户注意 |
|
推荐阅读