List 列表页
列表页可以查看和处理大量的条目,通过列表可以进入到数据详情。用户可在列表页对条目进行筛选、对比、新增、分析、跳转至详情页等操作。
设计目标
帮助用户更高效的查看、处理、查找数据。
设计原则
易扫读
使用一致的外观,突出有利于对象识别的关键信息。利用交互分层展示信息,以减少认知负荷。
可寻性
列表以易于浏览的逻辑排序,提供合适的搜索组件帮助用户快速查找信息。
不同类型
根据复杂程度将列表分为五种模式:基础列表、高级列表、卡片列表、平铺筛选列表、概览列表。
基础列表
按钮区域和搜索筛选区域在表格上方。
高级列表
相比基础列表,支持更多的高级自定义功能,用于列表中表格字段很多的情况。
常见的页面在:商品列表、采购订单、销售订单、招标等。
卡片列表
用户无需以特定顺序浏览条目,将每条数据以富有吸引力的方式呈现。
1 列
2 列
4 列
平铺筛选列表
将数据过滤模块放置在侧栏,当过滤条件过多,横向空间充裕时使用。
概览列表
提供每条条目的概览信息,点击列表可导航至条目详情。页面内常提供统计功能,供用户了解总体进展。可作为简易版的工作台使用。
适配规则
- 默认撑满整个屏幕,上下左右间距:
16px
。