王天资天资设计 logo
王天资天资设计 logo

天资设计

王天资天资设计 logo

天资设计

王天资天资设计 logo

天资设计

如何更好的数据表格

2025年7月25日

好的数据表允许用户扫描,分析,比较,过滤,排序和操作信息,来驱使我们做出更好的判断。本文提供了一系列设计结构,交互模式和技术,可帮助您设计更好的数据表。

固定表头

固定表头即使在滚动数据表的时候也能快速获数据所在列


水平滚动


呈现大型数据时,水平滚动是不可避免的。最好将标识作用的数据放到第一列中,另外我们可以将首列单独锁定,以便数据之间的比较

可伸缩列

调整列的大小允许用户完查看缩写数据的完整信息。


行样式

行样式有助于用户快速扫描数据。通过删除行线或马条纹可以减少视觉噪音,适用于小型数据集。解析较大的数据集时,用户可能会失去位置。行样式可以有助用户在浏览数据的时候不会丢失定位。

显示密度

较小的行高可以提高表格的数据密度,但是影响扫描性,从而导致解析错误。这就是为什么许多优秀的表格都提供了控制表格密度的功能。


视觉图表摘要

可视化数据摘要提供了附表,可以在分析数据之前给用户一个直观的印象。

分页

分页是在视图中显示一定数量的行,并且可以导航到另一个集合。上图示例中提供了自定义每个视图行数的功能,这种方式在网页设计中通常会被无限滚动轴取代。无限滚动会在用户滚动的时候逐步加载结果(适用于发现类的网页,对需要定位数据的情景不太适合)

悬浮控件

当用户徘徊时呈现额外的动作减少了视觉混乱。但是,它可能会导致可发现性问题。


行内编辑

行内编辑允许用户在不导航到详细页面的情况下直接更改数据。

可展开的行

可展开的行允许用户查看更多信息而不会丢失其上下文。


快速预览

和可展开的行非常相似,快速查看使用用户能够在保持上下文的同时查看更多信息。


模态

Multi-Modal

行到详情页面

单击行链接会将表转换为左侧列表项和右侧其他详细信息的视图。它使用户能够解析大型数据集,以及引用许多项而不会丢失它们的位置。

可排序列

列排序允许用户按字母顺序和数字顺序组织行。

基本过滤

基本过滤允许用户操纵表中显示的数据。

过滤列

此设计模式允许用户将过滤参数分配给特定列。

可搜索的列

此设计模式允许用户搜索每列中的特定值。

添加列

此模式允许用户从数据集添加列。允许用户根据需求例添加其他列。

自定义列

可自定义的列功能使用户可以选择他们想要查看的列并进行相应的排序。该功能可能包括保存预设以供以后使用的功能。


为什么表格很重要

数据正在成为全球经济的原材料。追求数据推动了陈旧行业的重塑。能源,媒体,制造,物流,医疗保健,零售,金融甚至政府正在经历数字化转型。

但是,如果没有对其进行可视化和操作的能力,数据就毫无意义。未来十年幸存下来的公司不仅拥有卓越的数据;他们将拥有卓越的用户体验。

良好的用户界面设计基于人类的目标和行为。用户界面反过来影响行为,从而推动进一步的设计决策。用户体验以微妙和无意识的方式改变人类的决策方式。所看到的,呈现的位置以及如何提供交互,会影响行动。重要的是我们做出能够创造更美好世界的设计决策,一次一个数据表设计。

Thank you

如何更好的数据表格

2025/7/25

好的数据表允许用户扫描,分析,比较,过滤,排序和操作信息,来驱使我们做出更好的判断。本文提供了一系列设计结构,交互模式和技术,可帮助您设计更好的数据表。

固定表头

固定表头即使在滚动数据表的时候也能快速获数据所在列


水平滚动


呈现大型数据时,水平滚动是不可避免的。最好将标识作用的数据放到第一列中,另外我们可以将首列单独锁定,以便数据之间的比较

可伸缩列

调整列的大小允许用户完查看缩写数据的完整信息。


行样式

行样式有助于用户快速扫描数据。通过删除行线或马条纹可以减少视觉噪音,适用于小型数据集。解析较大的数据集时,用户可能会失去位置。行样式可以有助用户在浏览数据的时候不会丢失定位。

显示密度

较小的行高可以提高表格的数据密度,但是影响扫描性,从而导致解析错误。这就是为什么许多优秀的表格都提供了控制表格密度的功能。


视觉图表摘要

可视化数据摘要提供了附表,可以在分析数据之前给用户一个直观的印象。

分页

分页是在视图中显示一定数量的行,并且可以导航到另一个集合。上图示例中提供了自定义每个视图行数的功能,这种方式在网页设计中通常会被无限滚动轴取代。无限滚动会在用户滚动的时候逐步加载结果(适用于发现类的网页,对需要定位数据的情景不太适合)

悬浮控件

当用户徘徊时呈现额外的动作减少了视觉混乱。但是,它可能会导致可发现性问题。


行内编辑

行内编辑允许用户在不导航到详细页面的情况下直接更改数据。

可展开的行

可展开的行允许用户查看更多信息而不会丢失其上下文。


快速预览

和可展开的行非常相似,快速查看使用用户能够在保持上下文的同时查看更多信息。


模态

Multi-Modal

行到详情页面

单击行链接会将表转换为左侧列表项和右侧其他详细信息的视图。它使用户能够解析大型数据集,以及引用许多项而不会丢失它们的位置。

可排序列

列排序允许用户按字母顺序和数字顺序组织行。

基本过滤

基本过滤允许用户操纵表中显示的数据。

过滤列

此设计模式允许用户将过滤参数分配给特定列。

可搜索的列

此设计模式允许用户搜索每列中的特定值。

添加列

此模式允许用户从数据集添加列。允许用户根据需求例添加其他列。

自定义列

可自定义的列功能使用户可以选择他们想要查看的列并进行相应的排序。该功能可能包括保存预设以供以后使用的功能。


为什么表格很重要

数据正在成为全球经济的原材料。追求数据推动了陈旧行业的重塑。能源,媒体,制造,物流,医疗保健,零售,金融甚至政府正在经历数字化转型。

但是,如果没有对其进行可视化和操作的能力,数据就毫无意义。未来十年幸存下来的公司不仅拥有卓越的数据;他们将拥有卓越的用户体验。

良好的用户界面设计基于人类的目标和行为。用户界面反过来影响行为,从而推动进一步的设计决策。用户体验以微妙和无意识的方式改变人类的决策方式。所看到的,呈现的位置以及如何提供交互,会影响行动。重要的是我们做出能够创造更美好世界的设计决策,一次一个数据表设计。

Thank you

如何更好的数据表格

2025/7/25

好的数据表允许用户扫描,分析,比较,过滤,排序和操作信息,来驱使我们做出更好的判断。本文提供了一系列设计结构,交互模式和技术,可帮助您设计更好的数据表。

固定表头

固定表头即使在滚动数据表的时候也能快速获数据所在列


水平滚动


呈现大型数据时,水平滚动是不可避免的。最好将标识作用的数据放到第一列中,另外我们可以将首列单独锁定,以便数据之间的比较

可伸缩列

调整列的大小允许用户完查看缩写数据的完整信息。


行样式

行样式有助于用户快速扫描数据。通过删除行线或马条纹可以减少视觉噪音,适用于小型数据集。解析较大的数据集时,用户可能会失去位置。行样式可以有助用户在浏览数据的时候不会丢失定位。

显示密度

较小的行高可以提高表格的数据密度,但是影响扫描性,从而导致解析错误。这就是为什么许多优秀的表格都提供了控制表格密度的功能。


视觉图表摘要

可视化数据摘要提供了附表,可以在分析数据之前给用户一个直观的印象。

分页

分页是在视图中显示一定数量的行,并且可以导航到另一个集合。上图示例中提供了自定义每个视图行数的功能,这种方式在网页设计中通常会被无限滚动轴取代。无限滚动会在用户滚动的时候逐步加载结果(适用于发现类的网页,对需要定位数据的情景不太适合)

悬浮控件

当用户徘徊时呈现额外的动作减少了视觉混乱。但是,它可能会导致可发现性问题。


行内编辑

行内编辑允许用户在不导航到详细页面的情况下直接更改数据。

可展开的行

可展开的行允许用户查看更多信息而不会丢失其上下文。


快速预览

和可展开的行非常相似,快速查看使用用户能够在保持上下文的同时查看更多信息。


模态

Multi-Modal

行到详情页面

单击行链接会将表转换为左侧列表项和右侧其他详细信息的视图。它使用户能够解析大型数据集,以及引用许多项而不会丢失它们的位置。

可排序列

列排序允许用户按字母顺序和数字顺序组织行。

基本过滤

基本过滤允许用户操纵表中显示的数据。

过滤列

此设计模式允许用户将过滤参数分配给特定列。

可搜索的列

此设计模式允许用户搜索每列中的特定值。

添加列

此模式允许用户从数据集添加列。允许用户根据需求例添加其他列。

自定义列

可自定义的列功能使用户可以选择他们想要查看的列并进行相应的排序。该功能可能包括保存预设以供以后使用的功能。


为什么表格很重要

数据正在成为全球经济的原材料。追求数据推动了陈旧行业的重塑。能源,媒体,制造,物流,医疗保健,零售,金融甚至政府正在经历数字化转型。

但是,如果没有对其进行可视化和操作的能力,数据就毫无意义。未来十年幸存下来的公司不仅拥有卓越的数据;他们将拥有卓越的用户体验。

良好的用户界面设计基于人类的目标和行为。用户界面反过来影响行为,从而推动进一步的设计决策。用户体验以微妙和无意识的方式改变人类的决策方式。所看到的,呈现的位置以及如何提供交互,会影响行动。重要的是我们做出能够创造更美好世界的设计决策,一次一个数据表设计。

Thank you

如何更好的数据表格

2025/7/25

好的数据表允许用户扫描,分析,比较,过滤,排序和操作信息,来驱使我们做出更好的判断。本文提供了一系列设计结构,交互模式和技术,可帮助您设计更好的数据表。

固定表头

固定表头即使在滚动数据表的时候也能快速获数据所在列


水平滚动


呈现大型数据时,水平滚动是不可避免的。最好将标识作用的数据放到第一列中,另外我们可以将首列单独锁定,以便数据之间的比较

可伸缩列

调整列的大小允许用户完查看缩写数据的完整信息。


行样式

行样式有助于用户快速扫描数据。通过删除行线或马条纹可以减少视觉噪音,适用于小型数据集。解析较大的数据集时,用户可能会失去位置。行样式可以有助用户在浏览数据的时候不会丢失定位。

显示密度

较小的行高可以提高表格的数据密度,但是影响扫描性,从而导致解析错误。这就是为什么许多优秀的表格都提供了控制表格密度的功能。


视觉图表摘要

可视化数据摘要提供了附表,可以在分析数据之前给用户一个直观的印象。

分页

分页是在视图中显示一定数量的行,并且可以导航到另一个集合。上图示例中提供了自定义每个视图行数的功能,这种方式在网页设计中通常会被无限滚动轴取代。无限滚动会在用户滚动的时候逐步加载结果(适用于发现类的网页,对需要定位数据的情景不太适合)

悬浮控件

当用户徘徊时呈现额外的动作减少了视觉混乱。但是,它可能会导致可发现性问题。


行内编辑

行内编辑允许用户在不导航到详细页面的情况下直接更改数据。

可展开的行

可展开的行允许用户查看更多信息而不会丢失其上下文。


快速预览

和可展开的行非常相似,快速查看使用用户能够在保持上下文的同时查看更多信息。


模态

Multi-Modal

行到详情页面

单击行链接会将表转换为左侧列表项和右侧其他详细信息的视图。它使用户能够解析大型数据集,以及引用许多项而不会丢失它们的位置。

可排序列

列排序允许用户按字母顺序和数字顺序组织行。

基本过滤

基本过滤允许用户操纵表中显示的数据。

过滤列

此设计模式允许用户将过滤参数分配给特定列。

可搜索的列

此设计模式允许用户搜索每列中的特定值。

添加列

此模式允许用户从数据集添加列。允许用户根据需求例添加其他列。

自定义列

可自定义的列功能使用户可以选择他们想要查看的列并进行相应的排序。该功能可能包括保存预设以供以后使用的功能。


为什么表格很重要

数据正在成为全球经济的原材料。追求数据推动了陈旧行业的重塑。能源,媒体,制造,物流,医疗保健,零售,金融甚至政府正在经历数字化转型。

但是,如果没有对其进行可视化和操作的能力,数据就毫无意义。未来十年幸存下来的公司不仅拥有卓越的数据;他们将拥有卓越的用户体验。

良好的用户界面设计基于人类的目标和行为。用户界面反过来影响行为,从而推动进一步的设计决策。用户体验以微妙和无意识的方式改变人类的决策方式。所看到的,呈现的位置以及如何提供交互,会影响行动。重要的是我们做出能够创造更美好世界的设计决策,一次一个数据表设计。

Thank you