发布时间：2020-9-27 分类： 行业资讯
表格的行高可以直接影响在一个屏幕上显示多少行信息，即信息密度有影响;此外，表的行高也会影响整个表的易读性。因此，本文将讨论如何从信息密度和易读性两个方面确定行高。
I.信息密度
1.一个屏幕向用户显示多少行？
如果你想从信息密度中研究线高，你必须首先找出一个问题：屏幕上显示多少行显示用户有任何影响？要回答这个问题，您必须知道用户实际使用表单的方式，即用户。不同使用场景中的行为是什么？
以腾讯云控制台的表格为例，该表可以主要提供三个功能，显示信息，操作管理和详细信息输入。根据这三个功能的不同组合，形成了控制台中的不同表格类型和场景。
（1）报名表
显示信息，操作管理和详细条目都包括在内，主要用于第一级页面以显示实例列表。
在这种情况下，超过20行的用户数量不小，并且他们都是大客户，因此不能忽略此方案。我问交互设计师负责不同的业务，并联系了腾讯云的几个真实用户进行访谈，以了解用户在这种情况下的行为。
在这种情况下，用户有两个主要目标：解决明显问题并主动查看使用情况。主要行为是：
顶部的问题项目是逐个处理的
扫描列表以查找标有红色
的显式条目或异常项目搜索您要查找的项目
（2）设置表格
包含显示信息和操作管理功能，主要用于辅助页面，用作设置列表。
用户经常设置许多规则，因此也存在具有许多行的场景。在这种情况下，用户的主要目标是：添加新设置，删除/修改过去的设置。主要行为是：
添加操作
扫描列表以查找要删除/修改的内容
搜索要删除/修改的内容
（3）纯记录表
仅显示信息的功能通常用于显示操作日志，任务管理，数据详细信息等。这种类型的表的查看频率较低。
（4）被动生成的表格
显示信息和细节条目的功能，用户无法添加或删除自己，这种类型的表中的数据被设置在别处，这里被动生成显示关系，这种类型的表很少。
用户在这四种不同类型的表中的主要目标和行为如下所示：
从上图中可以看出，用户经常需要扫描表单。因此，在一个屏幕上显示多少行会影响用户，并且会影响用户的一瞥效率。但它有多大影响，我们需要进一步研究。
2.一个屏幕上显示多少行显示对用户有多大影响？
虽然这个时代越来越受欢迎，但是有很多用户使用笔记本电脑。以腾讯云为例，使用腾讯云的用户的设备分辨率分布如下图所示：
可以看出，虽然大屏幕用户占比最多，但是1366次; 768小屏幕用户仍然拥有一定数量。在1920年代; 1020大小，以腾讯云中最常见的形式为例，第一个屏幕可以显示11行。大屏幕用户表示他们对一个屏幕上显示的线数不太了解。
但是，对于小屏幕用户，当页眉和页脚固定时，一次只能看到大约6行，这对一瞥的效率有影响。但是，如果不修复页眉和页脚，如果在滚动时没有定义区域但是全屏滚动，则可以在一个屏幕上看到10行的内容。
3.如何提高用户浏览效率
虽然线条的高度可以影响用户的视线效率，但它不是主要的影响，有很多有效的方法可以提高效率：
（1）尝试滚动整个屏幕以提供更多浏览空间
正如刚刚提到的例子，在固定页眉和页脚之后，在固定的小区域中滚动可能非常狭窄，并且区域滚动和全屏滚动的体验也非常糟糕。当然，在某些情况下，如果您确实需要修复标题以帮助用户识别信息，则在全屏滚动后修复标题并非不可能。
（2）寻呼组件的“每页显示n行”以提供更多选择
当用户操作时，滚动鼠标的成本低于点击按钮的成本，因此在分页组件中“每行显示n行”的选项应包含较大的值，例如50,100，以避免用户在多行内容中。需要频繁翻页才能查找内容。
（3）突出重要内容的视觉重量
因为用户首先读取最具视觉加权的内容，所以可以尽可能地突出显示用户判断的重要内容。例如，可以用高亮颜色等标记状态中的异常。表单还可以图形方式用于帮助用户快速搜索信息，例如使用进度条指示表单中的使用情况和其他信息。
（4）将关键信息放在最左边
根据用户的F型视角，用于识别整个项目的关键信息可以放置在最左侧，例如名称等唯一标识符信息。
（5）尝试提供排序过滤功能
及时排序和过滤还可以帮助用户在大量信息中按顺序查找他们想要的信息，或者快速过滤掉他们想要的信息。
（6）显示异常状态顶部
对于有异常的物品，最好显示红色顶部显示，以便用户在进入页面后能够快速注意到异常情况。
2.可读性
1.确保易读性的常用做法
该表的高度影响的另一个方面是每行信息的易读性。我真的没有找到关于表格易读性研究的任何信息，但是对于文本消息排版的易读性有一些共同的习惯。
在文本布局中，行高的选择通常是字体大小的1.2到1.8倍，并且段间距通常使用行高度距离。线高的定义如下图所示。在开发设计草案时，开发学生通常根据线高编写，而不是根据设计同学的文本大小来计算间距。
在考虑表格的行高时，我认为我们可以参考文本排版的常用做法，并将整个表格的行高分为文本的行高，文本与分界线之间的距离，也就是说，上下间距。可以设置文本行高。对于1.2到1.8倍的字体大小，文本和分隔线之间的距离可以设置为字体大小的1到1.5倍。分为这两部分也符合培养学生编写代码的习惯。
2.根据惯例，我在这里给出了几个推荐的行高值
表行高度为48px，字体大小为12px，文本行高度为字体大小的1.5倍，即18px，上下间距是字体大小的1.2倍，即15px，实际间距文本和分隔线之间的字体大小是18px的1.5倍。使用这条线高将使整个桌子更透气。在小屏幕下，整个屏幕可以显示9行，对扫描效率影响不大。
表行高度为42px，字体大小为12px，文本行高度为字体大小的1.5倍，即18px，上下间距为字体大小的1x，即12px，实际间距文本和分隔线之间是字体大小的1.2倍，即15px。使用此线高的表间距是适中的，整个屏幕可以在小屏幕中显示10行。
表行高度为32px，字体大小为12px，文本行高度是字体大小的1.3倍，即16px，上下间距是字体大小的0.6倍，即8px，实际文本和分界线之间的间距是10px。这种类型的桌子结构紧凑，可以在小空间使用，例如卡片中的小型。
3.关于线高的更多实践
除了将行高设置为字体大小的1.2到1.8倍以及上下间距设置为字体大小的1到1.5倍之外，还有更多方法可以设置表的行高以确保获得的效率和易读性每个分辨率和每个场景中的信息。
（1）不同分辨率的不同行高
为了给大分辨率和小分辨率用户提供更好的体验，您可以设计两组不同的线高，在大分辨率下显示更高的线高，并在数据之间提供更多的呼吸空间;在分辨率下显示较小的线高，以便在一个屏幕中可以看到更多的线高。 Gmail采用这种方式设计，如下所示：
（2）不同场景下的不同行高
为了确保在不同场景中的体验，您还可以在不同场景中使用不同的行高。例如，在具有多张卡的概览页面中，卡中有一张表。在这种情况下，卡的大小很小，空间有限。在这种情况下，可以使用较小的行高来确保此场景中的体验。例如，google analytics的信息中心中的表格如下所示：
（3）用户可以设置自己的行高
实际上没有办法判断哪种线高适合用户。您可以向用户提供选择，并让用户设置表格行高。虽然据说试图为用户提供较少的选择可以减少用户的思考，但在表中。不显眼的地方提供这种无害和小的选择，不会对用户造成任何干扰。相反，用户在发现时会发现一个小小的惊喜。他们会认为设计师已经考虑了很多细节，所以当开发资源得到满足时，您也可以尝试这种方法，如下图所示（来自Andrew Coyle的文章）：
通过这项高水平的研究，我发现设计是一个说服自己的过程。在研究过程中，我经常疯狂地问自己为什么要研究这样的问题！这个问题似乎不是问题。没有人写过如何确定桌面高度。这是一个小问题。这只是一个数字;这太难了。无论我如何设置这个数字，我都想问问自己，你为什么决定？
每当我想放弃并想要设定一个数字时，我觉得我真的无法说服自己。当我采访其他设计师，采访实际用户，并研究文本布局的设置时，我慢慢得到一点热情，慢慢意识到我设置的小数字来自哪里。虽然最终没有确定的答案，但在这个过程中，我一直在寻找证据来说服自己。
