（翻译）用户友好的表格的9种设计技巧

最新推荐文章于 2022-05-09 08:00:00 发布

gc_2299

最新推荐文章于 2022-05-09 08:00:00 发布

阅读量283

点赞数

分类专栏： UX Movement网站文章翻译文章标签：表格设计用户友好

原文链接：https://uxmovement.com/content/9-design-techniques-for-user-friendly-tables/

版权

UX Movement网站文章翻译专栏收录该内容

176 篇文章 7 订阅

订阅专栏

表格适用于比较不同的信息，但使其具备用户友好性却是巨大的挑战。挑战之一是表格限制了在单元格中显示的数据量。另一个挑战是当用户浏览表格时，他们的视线在行和列之间来回移动，如果表格难以浏览，他们会失去参考点，搞不清楚阅读位置。以下是用户友好的表格的9种设计技巧。

1.数据缩写

表格包含多个列，不应使列太宽，否则用户浏览表单时需要水平滚屏。列宽限制了单元格中的信息显示数量，这就属于数据缩写的用武之地。
没必要显示一个数的每个数字。可以缩写数值较大的数，例如将$104,000缩写为$104k。还可以四舍五入数值较大的数，例如将45.139%四舍五入为45%。词组也可以缩写，例如将磅缩写为lbs、小时缩写为hrs、英寸缩写为ft等。数据缩写可以节省单元格空间，使表格列变窄，让表格更易于浏览。

在这里插入图片描述

2.用工具提示功能显示精确值

数据缩写有助于凝练信息，但有时用户需要了解一个数的精确值，或查看缩略语的完整词组，这时可以使用工具提示功能。当用户鼠标悬停在单元格上时，工具提示功能可以显示单元格内容对应的四舍五入之前的精确值，显示的内容不占据单元格空间，也可以显示缩略语的完整内容。
在这里插入图片描述

3.表格行增加内容展开功能

让表格列变窄很重要，使表格行变短也很重要。在表格行中添加太多信息会让表格行内容冗长且难以阅读。使用内容展开功能，缩短行高，减少内容显示数量。用户首先看到每行的顶层信息，然后按需点击每行的展开功能图标以浏览更多信息[2]。

在这里插入图片描述

4.冻结的列标题

内容太长的表格，其缺点是向下滚动表格时，列标题也会随之消失。看不到列标题，用户很难知道正在看的是什么信息。冻结列标题可以解决上述问题。用户向下滚动表格时，列标题一直保持可见，便于用户查看，不用他们回滚到表格顶部去看列标题。
在这里插入图片描述

5.黑白相间的背景色

用户浏览表格中的一行内容时，他们的视线很容易模糊，并意外落到临近行的内容上。通过可视化的引导帮助用户在浏览时视线始终保持在同一行。黑白相间的行背景色有助于用户浏览每行内容。表格中相邻的行的背景色不同，这样用户浏览内容时就不会搞错行。
在这里插入图片描述

6.给每行添加行号

给每行添加行号，便于阅读表格内容。行号有利于用户引用行内容，也有助于用户保存浏览进度。用户通过行号看出表格中的总行数，以便对表格的信息密度有所了解。
在这里插入图片描述

7.分门别类组织表格行

表格中的信息越多，行就越多。可以分门别类组织表格行，以便于用户浏览表格内容，甚至可以给分类添加内容展开功能，用户可以显示或隐藏分类下的行以节省空间。
在这里插入图片描述

8.给列增加反序功能

用户使用内容展开功能控制表格中显示的信息数量，而反序功能控制表格中的信息排列方式。在列标题中添加反序功能图标，支持用户以升序或降序方式排列每列内容。反序功能让用户能从大到小地浏览数值数据，或按字母顺序查看文本内容。使用反序功能，用户鼠标点击列标题时应能对列内容重新排序。
在这里插入图片描述

9.屏幕阅读器可达性

对残障用户而言，如果不具备屏幕阅读器可达性，大部分表格都难以阅读。如果表格易于使用，残障用户可以通过屏幕阅读器以适当的、可理解的顺序读取表格数据。
表格代码开头使用summary属性和caption标签，用户通过这些元素概览表格内容。summary属性对表格进行宽泛的描述，而caption标签用于设置表格标题。
使用相关元素标签设置行/列标题和数据单元格，然后需要使用scope属性将单元格与正确的标题关联起来。scope属性告诉屏幕阅读器，列标题下的所有内容都与顶部的标题有关，行标题右侧的所有内容都与该标题有关[3]。
下面的链接对表格可达性有更详细的描述：

结束语

用户友好的表格易于浏览，能让用户快速获得高质量信息。将视线在表格的行与列之间来回移动的工作量很大。应用上述设计技巧进行表格设计，帮助用户更便捷地找到信息。

原文地址：https://uxmovement.com/content/9-design-techniques-for-user-friendly-tables/

[1]disclosure arrows,翻译为展开按钮，译名参考地址http://www.woshipm.com/ucd/639614.html
[2]原文：It’s important to make your columns thin, but it also important to make your rows short. Cramming too much information in your table rows can make your table long and overwhelming to read. Use disclosure arrows to shorten the height of your rows and the amount of information displayed. Users will first see the top level information in a row. More information will display when the user asks for it by clicking the disclosure arrow for that row.
[3]原文：The<scope> attribute tells the screen reader that everything under a column relates to the header at the top, and everything to the right of a row header relates to that header.