简介

列表页用于展示结构相似的大量数据，常有导航至详情的作用。用户可以在列表页对数据条目进行筛选、对比、新增、分析、下钻至详情等操作。

模式索引

常用模式

查询表格（筛选+列表）

适用场景：
条目的字段较多，而用户往往有较为准确的查询范围。
表格的全局操作通常与表格相邻，工具类操作可集中置于最右侧（如表格的行高、展示列的设置、数据的刷新等）。
关于表格的工具栏（筛选、搜索）、表头和正文的设计规则细节，请前往“进阶阅读”章节查看。

标准列表（统计+列表）

适用场景：
条目的字段不多，有概览可供显示，点击列表可导航至其详情。
上方常伴有统计功能，可作为简易的工作台使用。

卡片列表（样式更自由）

适用场景：
用户无需以特定顺序浏览条目，条目可以以比较丰富的形式展现。

搜索列表（搜索+列表）

适用场景：
以搜索为目的的列表，用户可能没有明确的搜索目标，先通过关键词检索得到初步结果，再通过筛选来逐步定位到模糊目标。

成员管理（部分列可直接操作）

适用场景：
用于展示和管理成员基本信息和权限。
常用操作有筛选、删除、添加、成员的角色与权限赋予等。
由于角色和权限的编辑可以方便地通过单选、多选组件实现，推荐直接在列表中触发组件完成设置，无需使用编辑弹窗。

常见问题

怎么展示某条记录的详情？

双栏布局允许你直接在当前页面查看详情，通常左侧为列表，右侧为对应详情，默认选中第一条。
适合「获得总览」和「逐个浏览」的使用场景，不需要反复加载页面或在不同页面间切换。

当前窗口的页面下钻则是将详情页替换掉当前的列表页。当空间不足以使用双栏布局时，则采用在当前窗口下钻一层的方式，例如移动设备或很小的面板。这种方式不适合浏览多个条目。
列表内展开的方式，让每个记录的详情都包含在列表当中。当用户点击某一条记录时，会在下方展现其详情。这种方式也支持「获得总览」或「逐个浏览」的用例，但如果同时打开很多条记录的详情时就不便于浏览了。

怎样让列表显得好看不单调？

让行高更高一些，每条记录可以展示几行文本，辅以小的视觉元素，如缩略图。
缩略图卡片，以图片作为记录的主体来展示。
走马灯是一个节约空间的选择，每次只展示一条记录，用户需要手动切换来查看其他的记录。由于单条记录有更多的空间来展示，能带来更强的冲击力。
对于表格，可以将枚举类型、百分比类型的字段进行可视化，例如彩色标签、icon、进度条等。

列表数据的筛选区该怎么放？

根据筛选条件的复杂程度和空间限制来选择筛选组件的位置和形式。
上下布局最为常见，如“查询表格”。
如果筛选条件数量众多、结构复杂，可考虑左右布局，在左侧罗列筛选条件、右侧展示结果。
如果筛选的使用频次不高、结构不复杂，可考虑更轻量的形式，在列表的右上方展示。
关于筛选的更多讨论，可前往查阅《筛选》（link）。

怎么展示数据量非常大的列表？

分页。最常用的方式，它不会让页面变得过长。你可以让用户来决定一页显示多少条记录。
无限列表。在当前列表的底部放一个“加载”按钮，用户点击后显示更多的一批记录。常用于移动端，不常用于web端，除非用户不需要知道列表有多少数据量，或者这个列表真的可以说是无穷无尽（分页也失去了意义）。
无限列表的另一个形式是当用户向下滑动时页面会加载一批数据。
搜索查询区域能够很好地帮助用户找到特定记录。

怎么展示有层级结构的列表？

如果列表可以被分为多个类别，可以试试简单地分组，每组有一个醒目的分组标题。
如果只有很少量的分组，可以试试手风琴，每次只显示用户当前关注的分组列表，收起其他的分组信息。
如果有两层或更多的层级，通常的解决方案是树结构。
级联列表，将树结构横向地展示，每一列展示同一层级的所有数据项。用户可以很方便地浏览层级结构，代价是较大的空间。
如果数据项是高度结构化的，同时数据项之间有层级结构，那就试试树形表格。

进阶阅读

设计目标

让用户高效地查找、查看、处理数据条目。

设计原则

• 易扫读
  • 采用格式一致的外观，突出有利于识别对象的关键信息
  • 减少认知负荷，分层或收纳展示丰富的信息
• 易查找
  • 列表以易于理解的逻辑排序，提供合适的查询组件

列表的不同使用场景（用例）

在设计之前，不妨先考虑用户的使用目的，可能包含以下哪些场景：

• 获得总览：列表的整体印象如何？用户可能需要浏览整个列表，理解它是干什么的。通常来说，此时仅用文字是不足以表达的，需要一些视觉上的组织来传达印象。
• 逐个浏览：用户会随机地还是按顺序地来查看列表中的数据项？是否会点击一些来查看详情？此时需要提供便捷的返回方式，或者直接切换到下一个数据项。
• 查找特定项：用户是否会特地搜索一条数据项？此时需要最短的路径，尽可能少的点击、上下滑动和来回跳转。
• 排序和筛选：如果用户需要获取有着某些特征的一组数据项（例如位于某某时间范围内的数据），或者是了解一组数据的整体情况，排序和筛选的功能会很有用。

• 对数据项进行调整，如增加、删除、分类等：用户是否会重新组织这些数据项？用户是否拥有这个列表以及列表中数据项的主导权？如果是个人的收藏列表，系统会允许对列表进行直接的操控，例如拖拽调整项目顺序、重新分组等。应当允许批量地移动、编辑或删除（考虑媒介特性，例如PC端的Shift多选，移动端的长按进入编辑模式网页中的多选checkbox）。

  列表的信息结构分析

  剥离视觉效果，可以从以下角度去思考列表，以塑造设计方案的具体形态：

• 长度 Length

  • 列表有多长，当前空间是否足够？
  • 列表是不是“无穷无尽”的？
• 顺序 Order
  • 列表是否自带顺序？例如时间顺序。
  • 用户是否可能主动改变排序方式，会根据什么来排序？
  • 如果列表自带顺序，那么是不是加入“分类”会更有效？例如博客文章默认是时间顺序排列，可以提供按月分类的选择。
• 分组 Grouping
  • 数据项是不是有分类，用户能否立刻领会这个分类？如果不是，你要如何用语言或视觉元素去阐释？
  • 这些分类是否又包含于更大的分类？是不是一个多层级的结构？例如文件系统里的文件夹。
  • 有没有不同视角的分类？不同用例或用户角色可能需要不同的分类方式。用户能否创建符合自身需求的分类方式？
• 数据项类型 Item types
  • 数据项本身简单还是复杂，它是不是一个更复杂实体的缩略展示？例如文章的标题、视频的缩略图。
  • 数据项之间的差异性大吗？例如，有的很简单、有的很复杂；或者结构完全相同。
  • 每个数据项是否关联着一张图片？
  • 每个数据项是不是有着严格规定的字段结构，用户是否需要知道这个结构，以及根据这些字段来排序？例如，邮件信息有着明确的可排序的字段结构：时间戳、来源、标题等。字段名称会在信息中直接展示出来。
• 交互 Interaction
  • 是在列表中展示数据项的全貌，还是只展示代表性的关键信息（例如只展示名字或开头的几行）？
  • 用户会对数据项做什么操作？用户会仔细阅读列表内容吗？用户会对其中的一些数据项进行对比检查吗？会对数据项开展什么任务？是否有链接或按钮以供点击？
  • 一次性选择多个数据项，对用户来说有意义吗？
• 动态行为 Dynamic behavior
  • 加载整个列表需要花费多长时间？能否更迅速？还是说一个可感知的延迟是不可避免的？
  • 列表数据是否会实时更新？是不是在发生更新时立即展示出来？是不是自动在列表顶部插入新的数据项？

工具栏的设计

「列表工具栏」常与表格搭配出现，它位于表格条目的最上方，用于放置标题、操作、搜索、简易筛选等功能。

a. 筛选、搜索

筛选是将一类数据展示出来，而将其他类型的数据隐藏。当表格数据的类型多于两种时，则考虑采用筛选条件。

1. 建议优先以搜索框、选择框&模糊搜索框的形式进行筛选/搜索，仅在页面空间较小&筛选功能简单时置于表头；
2. 选择框的下拉选项多于二十五个时，建议为下拉选择添加模糊匹配设置，并配备实时刷新
3. 对于3个及以上个搜索条件交叉搜索的场景，建议采用工具栏搜索条件打包收起，并统一配置重置按钮，便于一键清空所有搜索条件；

   b. 组件布局

   1.标题在左，操作在右
   标题作为最重要的识别元素，默认展示在卡片的左上角。
   根据按钮规范，header 中操作按钮默认放置在右侧。表格工具是操作的一种，同时又因没有边框不适合与带框元素混排，因此展示在最右侧。
   
   2.搜索有较强操作性
   相对按钮切换和轻量筛选，搜索需要用户点击并输入内容，相对具有较强的操作性。因此它会更贴边展示，在展示上更贴近操作。
   3.按钮切换重要度高于轻量筛选
   这两者本质上都是筛选，只是按钮切换把选项外露出来。既然选项已经外露，说明按钮切换在重要程度上高于轻量筛选，因此默认把按钮切换展示在筛选的左边。
   
   4.单行、双行的区别：双行有层级区分

• 在双行模式下，第一行的层级会高于第二行。因此为了确保搜索的全局性，需要把搜索放在第一行，不受其他筛选项的影响。
• 在单行模式下，元素没有明显的层级关系。

5.内置动态布局规则，线性逻辑向下兼容。
通过上面的步骤，我们知道了组件可以包含哪些元素，也知道了根据元素数量的多少可以选择两个不同模式。但是，当某些元素（比如标题）缺失的时候，应该怎么布局？

我们从最复杂的场景出发，以线性的简单规则向下兼容，制定出一套动态的布局规则。
单行模式：

双行模式：

正文的设计

a. 分割线

1. 默认显示横向分割线，强调一条数据的完整性，用户能够快速地理解单条数据的内容。
2. 悬浮时高亮底色展示一行，避免错行阅读。
3. 当表格的列数较多，且用户通常使用宽屏时，可考虑引入斑马线，通过填充灰色的底色，强化水平分割线，让用户在横向浏览时不至于看错行。
4. 同时展现横向和纵向分割线也是一个选择，常用于存在单元格合并的情况。
5. 也存在强化纵向分割线的情形。若对同一列数据的对比有较强的诉求，可加强纵线、弱化横线。

b. 对齐方式

对齐有两方面的目的：一是便于数据对比；二是便于用户阅读文本。

1. 数据右对齐，便于数据的对比。
2. 文字左对齐，便于用户阅读。
3. 数据的单位及小数点后位数，保持一致。
4. 不需要比较大小的数字（如序号），可以按文字左对齐处理。

c. 操作项

操作项是用户对数据的操作处理。针对数据项的操作项一般位于数据项的最后，或在表格上方工具栏的位置；分别对应单条操作与批量操作的场景。

1. 默认使用文字按钮，直观地表达操作含义。
2. 如果用户很可能大量修改数据项，可将操作放在表格工具栏，与首列前的复选框配合使用。
3. 操作项数量较多时，可折叠为“更多”的下拉菜单（dropdown）。在操作时，点击下拉出现具体操作项。此时可以保留1～2个常用操作，其余收入”更多“的下拉菜单。

你可能感兴趣的相关模式

新项目行 New-Item Row

如果项目列表是纵向的，用户需要添加新的项目，但是界面上并没有放置一个“新增”按钮的合适位置，或者你希望让用户明确地感知到新增的是什么样的项目时，可以使用“新项目行”的模式。
用户在列表的末尾或开头点击“新增”行，输入信息，便可以就地让新建的项目立即生效。
新增的项目可以是一组数据，此时点击新增行时，这一行的每一个单元格都是可以编辑的。这些单元格里可以是文本域、下拉选择框等可以快速、精确设置其值的方式。与任何表单形式的数据录入组件一样，预置一些默认值可以帮助用户节省工作量，这样用户无须编辑每一个单元格。
新增时，允许用户丢弃这一行新项目、重新创建一行有效的新项目。

条目跳转 Jump to Item

当用户在列表中键入项目名称（从输入第一个字母开始）时，直接定位至该项目。
如果列表很长，无论这个列表的形式是基础列表、表格、下拉选择框还是树结构，只要这些列表项是按照字母表或数字顺序排序的，那么用户很可能更愿意通过键盘来快速地选择某一项目。
这一模式经常用在文件查找器、很长的姓名列表，以及国家地区及省份的下拉选择框中。
这种模式的应用下，用户的手不必离开键盘，就能快速地定位到目标对象。通过键入与目标对象名称相关的少量字符就能选中对象 —— 系统会自动选中对象，而用户可以继续下一项动作。无须滚动或单击列表，用户的手不需要离开键盘去使用鼠标。
当用户键入目标对象名称的第一个字母或数字时，跳转到第一个开头字符匹配该字母或数字的列表项上：自动滚动列表以让匹配对象显示出来并选中。
在用户快速键入更多后续的字符时，将选中焦点移动到第一项准确匹配整串键入字符串的列表项上。如果没有匹配项，将焦点停留在最接近匹配的列表位置上，而不是滚动回列表的开始位置。

表格 Table

待补充

筛选 Filter

待补充

搜索 Search

待补充

附录

《Designing Interfaces (3rd Edition)》Chapter 7. List of Things
B端表格设计实战指南 http://www.woshipm.com/pd/4123257.html
智能组件探索：这个工具栏会自动布局 https://zhuanlan.zhihu.com/p/188693322
Web页面中的表格设计，远没那么简单 https://zhuanlan.zhihu.com/p/26559601