列表

列表页可以查看和处理大量的信息，常有导航至详情的作用。用户可在列表页对信息进行筛选、对比、新增、分析、下钻至信息完整详情页等操作。

设计目标

帮助用户更高效地查看、处理、查找信息。

设计原则

• 易扫：关键信息具备识别性，利用多种交互模式分主次展示信息以减少认知负荷，用户能快速找到想要的数据。
• 易寻：列表按易于浏览的逻辑排序，提供合适的搜寻组件帮助用户快速查找信息。

列表类型

定义常用基础列表、行折叠列表、批量选择列表的交互行为。

基础列表

需要对比每一个字段，若字段过多，采用横向滚动，固定关键字段列和操作列。

行折叠列表

将不重要的字段折叠或简要的详情收纳在折叠区内。适用：

1. 不需要对比查看每一个字段
2. 需要在列表中快捷查看详情

批量选择列表

需要批量操作的时候使用。交互行为建议按如下定义：

1. 勾选数量

   a. 统计数量：统计已勾选的数量，包含其他分页。

   b. 列表全选：范围仅为当页。

2. 操作反馈

   a. 勾选单项：直接进行操作。

   b. 勾选多项：内容包含已选数量和选项名称。

3. 勾选限制

   a. 执行操作前，可判断是否可用：若不可用，该项置灰不可勾选。如系统预置的角色不可执行删除操作。

   

   b. 执行操作前，无法判断是否可用：都支持勾选，勾选后执行操作后判断是否可用，在弹窗中说明不可操作项及其原因。如Simba的任务，无法判断多选后是执行哪项操作，需要在确定执行动作后提示判断。

   

列表内容

固定表头

内容高度超出一屏时，表头位置固定在顶部，不随页面滚动条滚动，以保障用户能对应着表头查看列表数据。

固定列

横向内容过多时，固定关键字段列和操作列。

列表排序

1. 新建对象排序：默认按创建时间由近到远排列。
2. 手动排序：若需要快速查找和对比数据，建议在表头增加排序功能。

列表详情

详情入口

1. 关键列文本。用于查看对象的集合信息。

2. 详情列。
   a. 无关键列；
   b. 关键列的点击已用于其他操作

详情载体

设计模式	场景
弹窗	详情内容较少、或当前页面层级较深，不适合再增加页面层级
页面	详情内容很多，且当前页面层级较浅
抽屉	详情内容较多，且需要便捷切换列表中的行进行查看对比

详情操作

建议按需在详情页放置操作入口，如「编辑」、「删除」等，便于查看详情后对该对象直接操作。

列表可用性设计评审准则

序号	细则	说明
1	列表为空时，提示如何创建数据或有说明	如，第一次使用，应给出如何新建或在列表中给出示例数据。
2	选中行，有清楚标明所选行	如，多选或单选行，需突出背景。
3	列表页能跳转到详情页	列表是简单信息的浏览，用户需要到详情页了解更多。
4	详情页能返回到列表页	用户需要明确知道怎么返回列表。
5	列表很长，有分页	列表数据太多需要分页，出现分页也必须有过滤功能。
6	列表项显示顺序，符合期望	如，历史活动列表按创建时间倒序排列。
7	提供必要的过滤条件	企业级系统通常需要强大灵活的过滤选项，支持统计。
8	列表默认显示的内容，符合用户期望	如，用户通常关注“我的”数据，而非所有数据。