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