列表页多用于一个功能的首屏，是一个功能的数据集中载体，它的主要功能就是集中处理、展示、查询、以及统计数据等。列表页一般包含5个组成部分：标题、查询、操作、统计以及表格。

一、标题

系统中只要是功能，就一定有标题，就像只要是个人，就一定有姓名一样，标题的展示根据系统的结构，可能在面包屑中，可能在标签栏中，也有可能在页面容器中。如果标题放在容器中，位置一般是固定的，不随着页面滚动而滚动，标题字体也要和内容字体做区分，一般是字号增大或者加粗等方式。

二、查询

查询条件的设计也是五花八门，根据查统页使用场景大致可以分成两种：一种是省空间的设计，一般只需要放一两个查询条件，那么它就可以和操作按钮放一起，多出现于数据字段比少且简单的情况；一种是经常需要混合高级查询，一般会独立有一块查询条件模块，多出现于数据统计类页面。

2.1、省空间查询条件

为了达到省空间的目的，查询条件和操作放一行，一般会只放一两个查询条件，输入或选择后即执行查询，不需要单独点击查询按钮，这种方式好处就是省空间，缺点是它默认展示的筛选项比较少，需要再点击“更多查询”才能看到更多。设计这种查询方式需要注意的是，输入查询一般是输入后即执行查询，容易导致执行过于频繁（输入一个字符即执行了），因此会做防抖设置，可以在输入0.5s后执行。再一个，这种展开收起的情况，用户容易看不到隐藏的筛选，因此需要一些标记，比如展示已选择的数量。

2.2、独立查询条件

独立查询条件的方式，就是将查询条件单独划出一个模块，可以一次性展示多个查询条件。这种方式的好处就是，查询更便捷，还可以做更多的拓展性方案，如用户可以自定义高级查询方案。缺点就是占空间，对于小分辨率电脑不是很友好。

三、操作

列表的操作是由产品的功能权限控制，由权限决定哪些人能够使用和查看数据，下面从操作的类型、组合、操作反馈以及状态的角度分析如何设计好操作功能。

3.1、类型

操作模块一般是由一组用于操作表格数据的按钮组，主要分为3种：一种是全局性操作，一种是选择数据进行操作，一种是混合型操作。全局性操作（如新增数据、导入、导出模板、刷新等）不需要勾选当前具体某行数据，就可以直接点击操作；选择数据进行操作（如删除、编辑、审批等），即操作前需要至少勾选一条数据，因为它是对当前已存在的数据进行操作；混合型操作（如导出、更新状态等），在勾选数据的时候会对当前数据进行操作，未勾选数据的时候默认会全部处理或者其他的操作，比如“导出操作”，勾选数据时会导出已选数据，未勾选时则默认导出空模板或者导出全部数据（根据具体产品要求）。

3.2、组合

操作组一般会由一个或多个按钮组成，通常只有一个主操作（primary）。主操作是带有引导性的功能，如“新增数据”，还有若干个普通按钮（default），不带有引导性。按钮组还可以根据操作类型形成组合，以分割线或收纳的形式展示，收纳按钮主要有两种展示形式：一种是带主操作的收纳按钮（如归纳同类型的操作），一种是直接收纳，不带主操作的（如按钮太多需要进行收起）。操作的顺序通常也会根据优先级和操作频次来决定。

3.3、操作反馈

操作后需要给个反馈，告知用户操作结果，告知结果分三种情况：1、直接给结果，如toast提示，操作成功/操作失败；2、给操作建议，如：toast提示，请先勾选至少一条数据；3、警告提示，如删除数据时候告知风险，二次确认防止误操作。

四、数据统计

数据统计一般是拾取表格数据某些维度的统计结果，用于快速知晓当前所有数据的情况，有些统计还带交互，比如点击选中后进行数据过滤。

五、表格

市面上封装好的表格组件可配置api很多，像antd，但是想要做的更强大，还有很多能够做的细节，我们先来分析下表格的组成。表格是由行和列组成的网格数据，表格可以分2种，明细表和交叉表，查统页中采用的就是明细表中的横表，即表头是横向的。

5.1、表格设计原则

表格的设计原则遵循以下几点：数据可读性、展示效率、操作便捷性、以及灵活性等。

5.1.1、数据可读性

表格作为信息密度最大的组件，在设计的时候要考虑数据的可读性，可以从以下几点入手。

• 对齐方式。比较常用的是左对齐，数字金额百分比一般是右对齐，方便百分号小数点和千分位的对齐。如果表格不带竖向分割线，则表头也要和表体内容对齐。
• 斑马线。尤其是屏幕比较宽的时候，两个字段隔得比较远，在眼睛移动过程中容易看错行，斑马线就是解决这个问题，当然，如果不嫌麻烦，鼠标悬停上去，该行的背景色一般也会变化。
• 行高。文字行高一般是字号大小的1.2-1.8倍。单行文字表格行高一般在32px-56px之间，如果支持换行则换行文字自动挤开表格行高。
• 表头样式。表头要和表体在样式上做区分，如文字加粗，背景色等。
• 滚动。当表体产生滚动的时候需要出现滚动条或者在固定列旁边出现阴影。

5.1.2、展示效率

B端产品尤其是ERP这种数据密集程度很高的产品，对空间的利用要求是很高的，因此在设计的时候要充分考虑展示的效率，可以从行高、列宽等角度去设计表的细节。我设计表的时候习惯先跟产品讨论清楚每个字段大概的长度，在设计的时候就会预留匹配的默认字段宽度，比如14号字体的表格，在展示“创建时间”字段的时候，字段宽度不会超过170px，我会留180px的默认宽度，既有呼吸感，又不浪费空间。最后预留一个字段宽度作为auto自适应，给到个min最小值，这样在不同分辨率上能展示相同的效果。

5.1.3、操作便捷性

表格在展示数据的时候往往会遇到一些问题，比如字段显示不完整，这时候就需要手动支持调节列宽，或者悬停tips展示全部内容。再比如想要复制某段内容，而文字展示不全，又不支持调整列宽，这时候要么在比较常用于复制的字段后面跟个“复制”图标，或者悬停出现tips的时候鼠标移上去不会马上消失，这样用户就能框选文字复制了。

5.1.4、灵活性

表格设计的时候不一定能覆盖所有用户和场景，因此需要预留一些灵活调整的空间，下面介绍几个常用点。

• 调整字段顺序。有些产品为了能让用户根据习惯更灵活地查看内容，会让用户直接拖拽表头进行重新排序。
• 调整字段宽度。表格内容有些长度是未知的，在使用的时候发现信息看不全，因此通过拖动可以快速调整字段宽度。

5.2、表格元素

表格元素包含了背景、数据（文字、图片、图标、标签、附件等）、序号、边框、选择框、操作项、斑马线等。这些在设计表格的时候都是设计师需要去定义展示形式

5.3、操作列

为什么要单独把操作列拿出来讲，因为操作列的设计蕴含了太多内容需要考虑，设计师在设计的时候很容易忽略。

5.3.1、形式

目前操作列按钮主要两种形式，“图标按钮”和“文字按钮”，图标按钮主要用于比较简单易懂的一些常规操作，优势是长度可控，容易对齐，劣势是，有时候需要悬停上去才知道含义，不够直接；文字按钮用的范围比较广，简单明白，缺点是长度不可控，不好对齐。

5.3.2、数量控制

操作列和复选框一样，一般作为固定列，不随着字段横向滚动。数量也不可控，根据业务情况，有多有少，因此在做的时候要解决数量问题，如果全部展示，则势必影响内容的展示面积，因此设计师根据真实的操作数量设定固定列宽度规则，操作项超过一定数量或一定长度做“更多”按钮收纳。还有一种展示方式，默认不展示，鼠标悬停展示该条数据需要展示的操作，这样既可以解决信息展示面积问题，又不需要考虑和其他行数据的操作对齐，还不需要定操作列列宽规则，缺点是，不够直接，如果不悬停就不知道还有操作项。有的产品干脆直接把操作项去掉，全部采用上面的全局操作，勾选数据后执行，总之各有各的优缺点。

5.3.3、操作状态

设计师经常会困惑，什么时候操作禁用，什么时候隐藏。按钮隐藏一般根据数据权限控制，“隐藏”通常是角色无该操作权限的时候采用，“禁用”通常是由于数据本身的问题导致暂时性失效。举例个例子，组织架构的页面，管理员对所有组织架构和成员有编辑和删除权限，而普通员工只能查看数据，这时候操作按钮就需要隐藏。再比如订单功能，有的订单已经进入审批环节不可删除，那么它的删除按钮就会变成禁用，而有的订单还未进入审批环节，这时候是允许删除的，这时候删除按钮就会亮起。

5.4、分页器

数据量比较大的时候会用上分页器，设计师在设计的时候也要定好默认一页几条，不然开发就会根据自己的臆想来做。分页器位置的设计也分两种，在表格上方和表格下方，市面上看到的大部分都是在下方。放在下方就有个问题了，是要固定页面位置还是随着表格自动计算位置？我对比了几个比较成熟的产品，大部分都是固定在底部，不随着页面滚动，整个页面滚动的区域只有表身，有小部分是跟在表格尾部，每页条数超过屏幕高度可展示量，分页器就会被挤到下面看不见，这种好处就是省了一点展示空间，不好的地方就是，要想再使用分页器得往下找。还有极小部分产品兼容了这两个方案，当条数少的时候跟在表格尾部，当条数多的时候，会顶在底部，类似固定钉功能。总之不管采用哪种方案，都要兼顾便捷性和易用性。

5.5、表头

5.5.1、表头筛选

表头筛选平时用的比较少，因为外面已经有独立的筛选功能，有些也放出来，补充一些不常用的筛选。

5.5.2、表头排序

排序规则主要由产品提供，设计需要知道一下。一般默认是以产品的创建时间为排序，排序不带具体业务含义的一般采用时间倒序，最新数据在表格最上面，这样每次新增数据就可以快读看到，不用划到最后面甚至翻页后才能看到。有的采用时间正序，最新的数据在最后面，这种一般是数据本身带有排序属性，如果贸然在最上面插入数据会打乱已设定好的顺序，这种带排序属性的表格，往往还有调整顺序的操作。触发排序一般只需要点击表头即执行，通常点一次会进行正序/反序，再点一次会反过来，再点一次取消排序。如果点另一个字段的排序则默认会采用最新的排序字段。

5.5.3、表头提示

有些比较难懂的字段需要在表头增加一个提示信息，来辅助用户理解字段含义

5.6、表格配置解决方案

前面讲了表格的各种属性，为了使用的灵活性，有些成熟的产品会设计一个设置表格属性的功能，可以让用户自定义表格属性，如字段展示（筛选）、字段顺序、字段对齐方式、字段固定列、是否展示序号、斑马线等。事情有利必有弊，灵活也意味着学习成本高和投入开发成本大，是否需要做有各自的真实情况决定，不过作为设计师得知道，这些就是你能雕琢的地方。

六、额外功能

还有一些额外的设计过程中你不一定会注意到但挺好用功能推荐。

6.1、只看已选

在选择数据的时候，为了便于一眼看到选中的数据，会做这个么个操作。

6.2、已选数量

表格的选择，默认一般是不支持跨页选择的，所以产品或者设计需要要求开发支持跨页选择，而一旦支持跨页选择，就容易忘了到底选了多少条，因此会展示选中条数，以及一键清空选中，这个功能还可以和“只看已选”功能混合着用。

6.3、只看表头

对于有些带明细数据的表单，通常在表单中会分表头和明细（表身），举个例子，商品订单中会包含一些像订单编号、客户名称、发货时间、发货地址等等这种，叫做表头。像具体的明细数据，如订单中包含100个a商品，200个b商品等等，叫做明细（表身），因此在列表功能展示的时候有时候需要一眼看出明细数据，就会以表身明细数据为主数据展示，但是数据量会蹭蹭往上，因此用户可能会选择是按“表头”数据展示还是按“表头+明细”数据展示。

七、总结

列表页承载了一个b端系统半壁江山，设计师在设计过程中需要不断打磨，设计出符合自己产品特性的列表。