列表作为结构化数据的载体，承载了对数据的保存、展示、对比分析、排序、筛选、新增、下钻至详情页等操作。

设计原则

易读

统一格式外观，信息排布规则有序，突出关键信息。

易用

合理的方式帮助用户对信息进行快速查找、快捷操作与批量编辑。

展示形式

列表

单维度的数据整理，能将数据在一行中井然有序的展示，保持数据的有序与整洁。页面内可提供统计功能供用户了解总体进展。

使用场景：多以查看为主，编辑需求为辅。
应用实例：工作台、待办项。

表格

多维度数据进行统一的结构化展示，让用户清晰的看到在同一主题下的多条数据的对比，使数据能够进行多维度的展示，保证数据的完整性。

使用场景：增删改查为主，查看为辅。
应用示例：订单审批等广泛对数据进行查阅和操作的界面。

列表

标注列表

提供每条数据的概览信息，点击列表的操作可进入其详情。
image.png

卡片列表

以卡片的形式展示信息，将信息以组的概念呈现，无需以特定顺序浏览信息，每条信息呈现方式更为丰富，视觉表现力更强。
image.png

表格

类型

1、基础表格

基础用法，由行与列的单元格组成。在使用层面上能满足用户多维度查看数据的需求。

2、树形表格

当数据为包含与被包含的关系时，可采取树形表格，通过逐级大纲的形式来展现数据间的层级关系，让整个信息结构变得一目了然。如项目管理、类目管理。
image.png

3、嵌套表格

当一条主数据下有多条数据结构不同的关联数据，可进行表格嵌套。它能够对主数据进行更加细致的解释，详细的了解主数据中数据的含义。
image.png

4、交叉表格

表格里面有多条数据在同一个维度进行展示时，为交叉表格，又叫表头分组，视觉上是表头有多个分组进行区分。
image.png

5、图表表格

表格里面有多种图表数据进行展示时，即为图表表格，是数据可视化是一种展示形式。
image.png

构成

列表页 - 图7

  • 数据查看
    • 标题：对表格信息内容的整体概括；
    • 表主体：由表头和单元格组成；
      • 表头：对所属行或列数据的描述，可以进行排序、搜索、筛选等操作；
      • 单元格：表格呈现数据信息的基本单位，可以是计数、百分比、均值、“-”等任何数据，支持对所在行的数据进行操作；
      • 表尾：一般是统计类数据，例如合计、平均数等，相比表头使用频率较少；
      • 行：由一个个横向单元格组成；
      • 列：由一个个纵向单元格与表头组成；
  • 数据过滤
    • 搜索：
      • 模糊搜索：用户查询内容与待检索内容进行模糊匹配；
      • 精准搜索：针对某一字段查找所需的数据；
    • 筛选：通过筛选器的选择来快速定位所需的数据；
      • 下拉筛选：筛选的内容放置于选择器当中，点击选择器下拉来选择需要筛选的内容；
      • 平铺筛选：将筛选项内容直接置于页面之上，通过点选的方式直接进行筛选；
      • 高级筛选：筛选项置于气泡或弹窗中，通过点击「高级筛选」按钮触发；
    • Tab选项卡：同范畴内容但属于不同类信息的信息切换
    • 分页：
  • 数据操作
    • 全局操作：作用于整个表格数据的操作，及设置表格属性的操作；
    • 行内操作：作用于行内数据的操作；
    • 批量操作：作用于批量选中数据的操作，配合复选框使用；

设计及交互

1、数据查看

1.1 标题

标题位于表主体左上方，是对表格信息内容的整体概括，便于用户对表格内容有整体的认知。

如果导航菜单层级清晰，能起到很好的标题作用，可视情况去掉标题。

标题名称
清晰简洁，遵循“少一个字不可”原则，当标题过长或者是专业名称时，有 2 种处理方案：
① 标题右侧添加提示图标，鼠标悬停时出现 Tooltip ，对标题进行解释说明；
image.png
② 不加图标，解释说明紧随标题之后，但不可超过一行；
image.png

数量统计
标题可带数字徽标，展示数据条数，用来帮助用户快速了解到相关的数据量。
image.png

标题切换
标题切换的场景，有 2 种处理方案：
① 数量 ≤5 时，空间允许情况下直接平铺展示，可带数字徽标；
image.png
② 数量 ≥5 时，采用下拉切换的形式，可带数字徽标；
image.png

1.2 表主体

由表头和单元格组成，其中行由一个个横向单元格组成，列由一个个纵向单元格与表头组成：
image.png

1.2.1 表头

表头名称
简单清晰，精简字段名称，遵循“少一个字不可”原则：
image.png

当字段名称过长又必须展示才能理解其意思，用专有名词代替，右侧添加提示图标，鼠标悬停时出现 Tooltip ，对其进行解释说明：
image.png

表头排序
排序分升序和降序，如果没有特殊需求，一般默认排序的方式为按最近创建排序，由新到旧。并非所有的行都需要排序，需根据业务做出选择，同时，支持排序的列用需要用图标做出标识，反馈当前排序状态：
image.png

表头筛选
通过点击表头旁的筛选图标按钮激活筛选条件，对某一列数据进行筛选。并非所有的行都需要表头筛选，需根据业务做出选择，支持筛选的列需要用图标做出标识：
image.png

表头拖拽
表头允许用户拖拽调整列宽，以显示因字段过长而被隐藏的内容。分割线默认不展示，鼠标悬停表头时出现：
image.png

1.2.2 单元格

单元格是表格呈现数据信息的基本单位。

高度
采用前端盒子模型的思想，单元格行高是个变量，受其内容高度的影响，单元格高度 = 内容高度 + 上边距 + 下边距：
image.png
为了展示更多内容，将文字大小设置为12px，行高设置为20px，上下左右边距设置为12px。

数据类型
单元格数据可以是文字、百分比等任何数据，一般常见的单元格数据类型有：
① 文本：最基本、最常用的数据类型
image.png

② 树：常见于树形表格
image.png

③ 进度：常用于流程进度可视化、容量可视化等
image.png

④ 开关
image.png

⑤ 标签
image.png

⑥ 属性标识，如状态
image.png

⑦ 操作
image.png

⑧ 特殊的数据类型：

  • 没有数据的单元格，即空数据的情况，用“-”表示；
  • 数据为零的单元格，填上0，且小数点后位数、单位要与列的数据格式保持一致；
  • 单元格数据为度量单位时，单位在表头标识，如：金额(万元)

image.png

单元格状态
三大状态：Normal默认状态（奇数行、偶数行）、Hover鼠标悬停、Select已选择
image.png
**

1.2.3 行

行高 = 单元格高度。为了让不同设备分辨率下能有较好的显示效果，在全局操作的表格属性设置中增加「宽松」「标准」「紧凑」三种显示密度，让用户进行选择：

  • 宽松：上下左右边距为16px
  • 标准：上下左右边距为12px
  • 紧凑：上下左右边距为8px

image.png

1.2.4 列

展示列设置
不同用户想看的数据侧重点不同，除了提供默认的列展示信息外，还要支持用户自定义列展示：
image.png
用户可通过「拖拽」「移到列首」「移到列尾」等操作手动调整列的展示顺序，点击「重置」还原为初始状态。展示列不能全部取消勾选，至少保留一列，即用户取消勾选最后剩下的列，此时 CheckBox 状态为不可点击。


列宽
列宽的处理方法有三种：固定列宽、自适应列宽、手动拖动。

在实际设计方案中，一般综合采用这三种方法，列宽度允许用户自由拖动调整列宽，当列字段是「状态」「时间」等固定格式时，采用固定列宽的方法，其余列按百分比等分自适应。当字段数量过多超过列宽时，以“…”显示，鼠标悬停时出现气泡显示完整内容。
image.png

1.2.5 行、列冻结

当行、列的数量过多时，一屏不能完全展示所有信息，而表格中的关键信息与操作需要在任何时候都展示出来，此时需要冻结行、列。

表头冻结
垂直滚动时，冻结表头能让用户明白当前单元格数据信息的属性和含义，体现界面友好性，而且当进行批量操作时，表头有操作，冻结表头也能减少上下滚动时寻找操作按钮的次数，从而提高操作效率。
uisdc-bc-20201126-1.gif

首尾列冻结
呈现大量数据时，表格列数会超过页面能支持的最大表格宽度，此时最简单粗暴的方法就是冻结首尾位列，即第一列或前几列（最重要的前几列）以及操作列冻结，中间列水平滚动。
uisdc-bc-20201126-2.gif

不过考虑到很多用户对于表格横向的滚动，会选择使用鼠标对横向滚动条拖拽，体验并不友好，因此对于大量数据的表格，最好寻找替代方案（如能否减少字数、换行、字段图形化、内容转换为浮层抽屉形式展示等），宁可纵向滚动（如换行）也要尽量避免横向滚动。

1.2.6 分割线

水平分割线：减轻表格在垂直方向的视觉重量，提升横向数据对比的速度；
垂直分割线：强调数据上下间的对比，便于纵向对比，默认省略垂直分割线；

使用垂直分割线的场景：

  • 数据量级较大，如带表头分组的表格；
  • 需要纵向对比数据；

image.png

1.2.7 斑马线

采用横向斑马线的设计（奇数行无斑马线、偶数行有斑马线），让行间界限更为明显，加强视觉流的横向引导：
image.png

1.2.8 对齐方式

基于人的惯性阅读顺序，阅读信息从左往右读，所以文本包括混合型文本（数字、文字、字母组成的混合数据）采用左对齐；

在对比数字时首先看个位，然后再看十位、百位，当个位数对齐时，可快速对比多个数的大小，因此金额、数量等数字（序号除外），采用右对齐；
image.png

对于表格分组的表格，父分组列采用居中对齐，子分组采用左对齐：
image.png

2、数据过滤

帮助用户梳理表格信息，精准定位的数据项。

2.1 搜索

模糊搜索：用户查询内容与待检索内容进行模糊匹配。

  • 优点：减少记忆负担；
  • 缺点：相关内容被检索出来，可能包括了一些用户不想要的信息；

image.png

精准搜索：针对某一字段查找所需的数据。

  • 优点：匹配精准度高；
  • 缺点：每次只能对单一条件进行搜索

image.png

如何选择：

  • 搜索意图不明确的场景——模糊搜索
  • 需要精准查找的场景——精准搜索

2.2 筛选

针对内容较少的字段进行查找的一种方式，通过筛选器的选择可以快速定位所需的数据，取消用户输入的过程，提升查找效率。

下拉筛选：筛选的内容放置于选择器当中，点击选择器下拉来选择需要筛选的内容。

  • 优点：空间利用率高，有很好的收纳作用，通用性强，数据请求压力小；
  • 缺点：无法直观看到所有筛选项的内容；

image.png

平铺筛选：将筛选项内容直接置于页面之上，通过点选的方式直接进行筛选，点选后 立刻刷新 表格数据。

  • 优点：操作效率高，筛选项内容一目了然，支持输入更多筛选条件；
  • 缺点：空间利用率低，不适合选项太多的情况，数据请求压力较大；

image.png

高级筛选：将筛选项置于气泡或弹窗中，通过点击「高级筛选」按钮触发

  • 优点：比下拉筛选更能节约空间，有更好的收纳作用；
  • 缺点：无法直观看到筛选项，不适于高频操作；

image.png

如何选择：
image.png

  • 信息排序：以目标导向为依据，将高频的筛选项排列到前面，低频的筛选项置于后面；
  • 下拉筛选：筛选数量较多，可考虑使用下拉筛选，兼顾批量查询与空间利用率；
  • 平铺筛选：筛选数量不多，且对操作效率有较高要求时，可考虑使用；
  • 高级筛选：筛选项为低频操作时，可考虑使用；

2.3 Tab选项卡

同范畴内容但属于不同类信息的信息切换，作为标题的二级切换。
image.png

2.4 分页

严格意义上讲，分页属于导航类组件，不属于表格，但是当数据超过用户所设定的阈值时，需要使用分页拆解数据，故常将分页和表格联系在一起。
image.png

3、数据操作

对表格的数据进行操作，根据其控制范围可分全局、行内和批量操作三种。

3.1 全局操作

分两部分：

  • 作用于整个表格数据的操作，如「新增」「导入」「导出」等；
  • 作用于设置表格属性的操作，如「刷新」「展示列」「密度」「全屏」；

image.png

3.2 行内操作

作用于行内数据的操作，如「查看」「详情」「编辑」「下架」「删除」等
image.png

详情查看
当表格需要展示的内容过多时，表格往往只展示部分重要信息，其余信息则放到详情页展示。详情页的入口采用将首列的名称做成文字可点击的方式，点击打开详情页。
image.png
详情页的展开形式根据信息量的多少有四种：行展开、弹窗、抽屉、进入子页面
image.png

3.3 批量操作

作用于批量选中数据的操作，需配合复选框使用，如「复制」「批量删除」「批准」「批量下架」等
image.png
勾选后，批量操作出现在表头区域，覆盖原来列标题，CheckBox右侧文案提示已选择多少项，及相关快捷选择项，而右侧则是操作项。

3.4 如何布局

  • 全局操作：置于表主体右上方；
  • 行内操作：置于每列数据的列尾；
  • 批量操作：选中复选框后，表头处激活批量操作；

布局

基于筛选位置与表主体的位置关系做布局划分。

1、基础布局

满足多数简单的场景，通过表头的筛选操作或者高级筛选对数据进行过滤。可分为单行与双行两种状态。

  • 优点：能对小屏（ ≤1366 ）设备较为友好，能节省纵向空间，首屏显示更多数据；
  • 缺点：批量查找效率不高；

单行状态
image.png

双行状态
Tab选项过多或者因为其他情况导致当行模式容纳不下所有元素时，可采用双行的模式。
image.png

2、分离式布局

将筛选与表主体分离，从上往下堆叠，通常筛选条件较多（ ≥5 ）或者表头筛选不能满足需求时使用，采用该布局时表头仅保留支持排序功能。

  • 优点：批量查找效率高；
  • 缺点：占用纵向空间，小屏设备首屏可显示的数据较少；

image.png

模板

参考：

1.如何设计B端表格？这篇近5000字的干货帮你完全掌握！https://www.uisdc.com/b-end-form-design-3 2.