东莞做网站：在响应式网页设计中平衡线长和字体大小

随着我们改进响应式网页设计的方法，我们越来越关注度量（“行长度”的另一个词）及其与人们阅读方式的关系。东莞做网站

“理想度量”的普及带来了诸如“增加大屏幕字体大小和减小小屏幕字体大小”这样的建议。虽然一个好的方法确实改善了阅读体验，但它只是一个良好排版的规则。另一个规则是保持舒适的字体大小。

人们如何阅读

人们阅读在线文本以满足他们自己的需求：找到他们寻求的信息，发现新的想法并确认他们对生活的看法。

人们以三种方式阅读

2006年，尼尔森诺曼集团发布了眼动追踪研究的热图图像。人们在阅读时看得最多的区域是红色，视图较少的区域是黄色，而观看次数最少的区域是蓝色。如下所示，红色和黄色区域形成F形图案的三种变体。这些变化并不令人惊讶，因为人们以三种不同的方式阅读。

人们随便阅读，浏览文本，阅读文字和句子，以了解内容。下面的热图显示了某人随意阅读产品的眼球运动。读者花时间查看产品图像，阅读前几句话，然后浏览项目符号列表。

人们也有目的地扫描，从一个部分跳到另一个部分，寻找特定的信息。他们可能只会在扫描屏幕时读取单词或单词的前几个字符。下面的热图显示了有意扫描Google搜索结果的人的眼球运动。这个人读前两个结果的速度比较慢。然后，他们的眼睛从一个部分跳到另一个部分，寻找搜索词。因此，我们没有看到沿着文本左边缘的强烈垂直笔划。

最后，人们以参与的方式阅读。当他们找到他们感兴趣的文章或博客文章时，他们会放慢速度并阅读整篇文章，甚至可能会进入恍惚状态。下面的热图显示了以订婚方式阅读的人的眼球运动。语调更持续。有更多的红色（意味着更多的时间花在阅读上），而且更少的跳跃在页面上。当阅读强度因为失去兴趣而减少时（企业“关于我们”页面可能与他们的兴趣不一致），他们的眼睛沿着文本的左边继续。


阅读是一个复杂的过程

我们知道人们以三种不同的方式阅读，但让我们更仔细地看看人们如何阅读 - 如何形成F形图案。

我们知道那些人。别。读。每。个人。字。相反，他们使用他们的中央凹（或中心）视觉来专注于一个单词，同时利用他们的周边视觉找到下一个要关注的地方。

我们也知道人们不会注意每一个字，但往往会跳过单词（他们的眼睛稍微跳跃，称为“眼跳”）并填写其余部分。对于那些随便阅读或有目的地扫描的人来说尤其如此。

最后，我们知道读者在沿着一条线水平移动眼睛的同时预期下一条线; 所以，他们的眼睛被画在文本的左边缘。水平和垂直运动之间的这种持续斗争有助于F形阅读模式。

线长（测量）和阅读

近一个世纪以来，排版人员一直在写关于水平和垂直眼球运动之间的关系。1928年，Jan Tschichold驳回了中心文本并主张左对齐文本。他认为，这将有助于读者在完成每条（水平）线后为眼睛提供一致的左（垂直）边缘。

理想尺寸：45到75个字符

我们有多个“规则”来促进水平阅读动作，其中之一是以合理的方式设置文本。正如詹姆斯克雷格在他的着作“ 设计与类型”（最初出版于1971年，现在是第五版）中所写：

阅读长行类型会导致疲劳：读者必须在每行的末尾移动头部并搜索下一行的开头。...太短的行会分解通常作为一个单元读取的单词或短语。

如果一个随意的读者厌倦了阅读长水平线，那么他们更有可能略读文本的左边缘。如果一个参与的读者厌倦了阅读一条很长的水平线，那么他们更有可能意外地两次读同一行文本（这种现象称为“加倍”）。

65个字符（罗马字母的2.5倍）通常被称为完美度量。从这个数字得出的是所有设计师应该努力的理想范围：每行45到75个字符（包括空格和标点符号）用于打印。许多网页设计师（包括我）将该规则直接应用于网络。但是，我发现，对于网页，我们可以可靠地将范围扩展到45到85个字符（包括空格和标点符号）。

度量和WEB类型

网页设计师已经开始采用合理的文本措施。资源比比皆是。早期的着作包括马克·博尔顿（Mark Boulton）更加富有诗意的排版方法，他称之为“知道你的标点符号”（“ 五个简单的步骤，以更好的排版 ”）。后来的着作包括Harry Roberts对排版的更多技术方法（“ 技术Web排版：指南和技术 ”）。

最近（并且，我敢说，令人兴奋的）发展的衡量标准？它在响应式网页设计中的作用。更多设计师使用线长来帮助确定响应结构中的断点！Chris Coyer最近开发了他的书签以测试行长度，以帮助响应式网页设计师密切关注他们的测量（“ Bookmarklet将文本着色为45到75个字符 ”）。

但一个好的衡量标准只是设置可读文本的一条规则。

字体大小和阅读

设置可读文本也需要良好，舒适的字体大小。这条规则是旧闻。但鉴于响应网站的数量使得文本太小或太大而无法实现理想的衡量标准，该规则值得重复。

静态网页和字体大小

响应式Web结构的一个好处是可读文本 - 手持设备上的人不必捏和缩放读取的文本。如果结构是静态的（如下面所示的双列页面），那么理想的测量方法就不会有效。该文本只是太小而无法在诸如手机之类的小型设备上阅读。

小型设备和字体大小

在设计响应式网站时，请从舒适的字体大小开始，这是帮助确定断点的理想方法。但是，当时机成熟时（正如它一直如此），让理想的衡量标准走了。

手持设备上的文字看起来比较大的设备要小。这很好，因为人们在阅读时往往会将小型设备放得更近。目前流行的智慧是通过进一步减少持有设备的字体大小来保持该措施。在实践中，尽可能保持舒适的字体大小可以更好地保留可读性。结果将是一个不太理想的措施，但更舒适的阅读体验。

如果手持设备上的小文字鼓励读者捏和缩放，响应式结构将无济于事！


大型设备和字体大小

在设计响应式网站时，请记住，度量和字体大小不仅会影响使用手持设备的人。大多数人仍然使用更大的设备，如笔记本电脑和台式电脑。

一些简单的响应式结构将文本保存在单个列中，该列随设备的大小扩展和收缩。这可以是一个优雅，适当的解决方案 - 除非使用字体大小（而不是列的宽度）来保持理想的度量。

我们已经学会了不要将文本设置得太小，但是文字太大也会造成问题。当类型变得太大时，读者的眼睛会尝试遵循他们通常的模式。但是太大的字体占用了更多的水平空间，并且它干扰了读者使用他们的中央凹视觉和他们跳过单词的模式建立的水平流动。

我们习惯于将在线文本设置为大于打印文本。这很好，因为人们在阅读时往往会将大型设备放在膝盖或桌面上。但过大的文字会迫使读者放慢速度并调整他们在阅读时向前跳的距离。水平读取变得很麻烦，读者将开始垂直向下跳过文本的左边缘。

目前流行的建议是通过增加大型设备的字体大小来保留该措施。例如，下面的单列结构具有理想的度量。但要在大型设备上实现这一理想测量，我们必须将文本设置为19像素的Verdana，22像素的格鲁吉亚文章，以及高达26像素的格鲁吉亚引入！

在实践中，尽可能保持舒适的字体大小并简单地缩小列的宽度更好。看看A List Apart在手持设备和笔记本电脑上观看时会发生什么。

奖金部分：线高和阅读

到目前为止，我们的重点是字体大小和响应式Web结构中的度量之间的关系。但线高也会影响人们阅读的方式。

线高会影响水平运动

因为读者水平和垂直扫描内容，文本行应该感觉像水平线，而不是像织物。

线条高度过紧可能会破坏水平眼球运动，并鼓励向左扫描。它还可能迫使人们重读文本行。另一方面，太高的线高可能使文本行在视觉上彼此“浮动”。线条将不再像一个有凝聚力的单位，垂直扫描变得更加困难。

虽然没有完美的线条高度，但一个好的经验法则是将其设置为字体大小的大约150％。

线高和字体大小

设置行高是变量的复杂平衡（字体系列，度量，字体大小，语言）。创建响应式Web结构时最重要的变量是 - 惊喜！- 字体大小。

较小的类型往往需要更多的线高度，而不是更少。宽大的线条高度有助于眼睛更容易识别小字形状，并且当眼睛厌倦阅读小文本时，它可以促进水平运动。

仔细观察，打破规则

当我们设计响应式结构时，在大型设备上进行测试很容易; 我们可以快速更改桌面浏览器的大小。但是在台式机或笔记本电脑浏览器上进行设计意味着我们将大部分时间花在文本上，而且我们不会花很多时间来查看文本在小型设备上呈现的方式。

如果您使用度量来查找响应式网站中的断点，那么您可能会关心类型和阅读。继续使用措施！这是一个很好的起点。但要想知道你的类型是否真的有效，可以花一些时间在一个较小的设备上仔细观察它。根据需要平衡测量，线高和字体大小。

请记住，所有规则都应该被打破。哎呀，Jan Tschichold在他职业生涯的大部分时间里打破了他自己的统治并使用了中心文本。到时候，牺牲措施以获得舒适的字体大小。良好的字体大小（不是太小）是可读的。良好的字体大小（不太大）可以促进水平眼动。具有正确行高的良好字体大小将帮助您的读者找到他们正在寻找的内容。

东莞做网站