跳到主要内容

List 列表页

列表页可以查看和处理大量的条目,通过列表可以进入到数据详情。用户可在列表页对条目进行筛选、对比、新增、分析、跳转至详情页等操作。


设计目标

帮助用户更高效的查看、处理、查找数据。

设计原则

易扫读

使用一致的外观,突出有利于对象识别的关键信息。利用交互分层展示信息,以减少认知负荷。

可寻性

列表以易于浏览的逻辑排序,提供合适的搜索组件帮助用户快速查找信息。

不同类型

根据复杂程度将列表分为五种模式:基础列表、高级列表、卡片列表、平铺筛选列表、概览列表。

基础列表

按钮区域和搜索筛选区域在表格上方。

高级列表

相比基础列表,支持更多的高级自定义功能,用于列表中表格字段很多的情况。

常见的页面在:商品列表、采购订单、销售订单、招标等。

卡片列表

用户无需以特定顺序浏览条目,将每条数据以富有吸引力的方式呈现。

1 列

2 列

4 列

平铺筛选列表

将数据过滤模块放置在侧栏,当过滤条件过多,横向空间充裕时使用。

概览列表

提供每条条目的概览信息,点击列表可导航至条目详情。页面内常提供统计功能,供用户了解总体进展。可作为简易版的工作台使用。

适配规则

  • 默认撑满整个屏幕,上下左右间距:16px