11个超实用的数据表单设计技巧，全是关键知识点！

家好，这里 TCC 翻译报局，我李泽慧。数据表单一种常见的平台设样式，看似乏呆板的设中，沉淀许多优质的设体验方法。尤其信息组织、信息传达、信息承载阅读性方面，数据表单蕴含了许多设规则设模式，使用户能够轻松获取、处理信息。该篇文章介绍了固表、固侧栏、自义栏、分页器、过滤器、数据排序、多选项同时操作、简单且简约、普通的字体样式、项目链接、鼠标悬停这 11 设指南，家提供关数据表单设计的实性建议。

当然，实际的数据表单设中，还需根据产品求用户目标行相应的调整。对数据表单设什么验体会？过哪些很棒的设案例？欢迎交流分享～

△ 插画自 icon8

于大多数 SaaS 平台，数据表单是必不可少组件，可让用户获相关数据和洞察，从而采取正确决策。

作为一个前企业家，使用过各种 SaaS ，例如 Mailchimp，Shopify，Klaviyo，Zendesk 等。它提供不同的服 —— 邮件、订管理、户服等解决方案，其共同点是，都需要将数据反馈给用户。而数据表则是传输大量数据最好的方法。

数据表单之所以有效，是因为它们能够有序地组织信息和数据，使用户能够轻松地扫描、比和分析自己选择的信息。篇文章介绍我在设计数据表时遵循的关键设计模式。

固定表头

一点对超 30 行的表单尤其重要。当用户必须向下滚动才能查看所有用信息时，果没有固定表头，用户将很难理和区分行数据 —— 其中大部分能是随机数。一个固定的表头以帮助他们轻松地使用数据表，避免向上滚动查看字段含义 。

设计提示

我倾向使用 8px 网系统进行设计，将表头尺寸持在 16px（最小值）—— 防止你的设计看来沉重和拥挤。

△ 当用户不理解某个数据字段，固定的表头使得用户无需重复向上滚动查表头内容

固定侧栏

对于数据表，需要个组件对所有息进行排序。一是表头，用于理解显示的数据。二是固定侧栏 ，每一行数据相 ，常用于项目名称，例如活动名称、产品名称、股票名称等。

当数据表单需要水平滚动展示隐藏列时，通固定一列项目名称，以获得与固定表头相同的组件优势，提升信息传达效率。

设计提示

设计固定栏时，请在该列的右添加阴影和垂直分隔，提示用户该表支持水平滚动。

△ 当数据表有太列时，通固定一列项目名称，使表单更易理

自定义栏

自定义栏允许用户根据自己的偏选择表单显示内容。当涉及个指标和数据集时，该功能以满不同的用户目标 。常用自助告平台，例 Facebook Ad Manager、Google Ads、AdRoll 等，在平台上有种营销指标，每个用户的优先级不同。

△ 自定义栏允许用户根据自己的喜对数据表进行个化设置

分页器

我从开朋里学对表单进行分页，通正在处理的信息量，减少加载时间。另一种方法是使用渐进式加载，当鼠标滚动到最一行时，表单自动加载一组新的数据。对比者，分页器允许用户一次跳几个组数据，满用户非连续浏览的需求。

设计提示

大数表单每页显示行数能超 30 行，因此，将分页器固定在表单顶部或底部更加，方便用户在页面之间切换，无需度地快速滚动。

△ 使用分页以减少加载时间，因为它正在处理的信息量

过滤器

滤器组件对筛选目标信息、屏蔽无关数据量至关重要。期筛选是最基的滤器，能够根据用户指定期来显示信息。当每列具有固定的展示字段，意味着信息不是随机的，而是固定的选择，您还以设置单项信息的滤器。

最好在过滤器拉列表中供复功，允许户择多个变量 —— 过滤系统越灵，户就越容易操纵他们的信息。

△ 过滤器组件对于减根据户要求显示的数据量至重要

数据排序

序类似于过滤，可根据户的需要重列信息，调整信息展示顺序。在大多数情况，左列会对表单进行默认序，户可单击标题对表单进行相应的序设置。

您可以将排序添加到表中，例如按数字或字母顺序对各数据行排序。但请不滥用此功能，它对于状态或类别特指标，可能多余的 —— 过滤器处理这些数据会合理。

设提示

尽避免使用线型图标，选用面型图标增加可见性。悬停状态能够传达整区域可单击的视觉提示 。

△ 排序类似于过滤，根据用户的需重新排列信息

多选项同时操作

复选框允许用户选择多项目，并对所选项目执行某种操作 。帮用户节省时间精力，不必重复相同的骤。象一下，所的行都相同的选框，这些选框会重复出 —— 这会使的表单看起杂乱无章。

设提示

我通常将复选框的小保持 24px（小尺寸），居中布局，提高可用性。此外，高亮显示被选的行，增强对比性 。

△ 复选框允许用户选择多项目并对所选项目执行操作

简单且简约

“极简主义” 这词已被广泛使用，空白似乎的趋势，但这种况下，少就多。设数据表单时，重点应该数据本身不用户界面。用户已与的数字信息交互，复杂的界面只会增加用户的认知负荷。

设提示

必添加额外的视觉扰，例如不必的图标、斑马行、随机颜色。

△ 当让的 UI 设师疯狂的时候会发什么？

普通的字体样式

设中，排版样式指南中的一关键元素，对于品牌推广至关重。但设表格时，您应该遵循面的指示（简单简约），不表格中使用任何复杂的字体样式。

设提示

推荐的字体，但建议尽避免使用衬线字体，因它们往往会吸引人的注意力，导致额外的视觉负担。此外，避免出写单词，它会使的设看起沉重。

△ 衬线字体表格看起很奇怪 —— 不知道们否看到过使用衬线字体的数据表单

项目链接

对于特的表单，项目称还可以充当链接，这一种符合用户习惯的交互形式，用户很易理解链接会将其到何处。

设提示

设文本链接时，请使用不同的颜色向用户展示此链接 —— 仅文本加粗或设置下划线并不能提供足够的视觉提示。

设文本链接时，请使用不同的颜色向用户展示此链接

鼠标悬停

表单的操作通常后一列。当太多的信息列，需水平滚动信息时，这种模式就很合。也可以将操作第一列或第二列，这样用户就不需滚动时踪这一行，但操作较多时，可能会产认知过载，导致不必的错误。

鼠标悬可以保持简约观 —— 有用户将鼠标悬在相应上时， 操作图标和文本才会出现。

最后

以内只原则性明，主提供一般性的建议，实际的数据表单设中，还需根据具体的产品求用户目标行相应的调整。

欢迎关注作者微信公众号：「TCC翻译情报局」