在2018年第二季度,超过一半的Web流量(51.89%)来自智能手机,因此必须具有自适应的Web设计。响应式网页设计的三个最关键要素是流畅的网格,灵活的图像和媒体以及可调整的文本。但是,网页设计师通常倾向于忽略“可调文字”元素,也称为“响应式网页排版”。

由于任何给定网站中的大多数都由书面文本组成,因此响应式网络排版实质上是实现用户友好的浏览体验的基础。但是,创建响应文本是一项挑战。你必须考虑各种因素,包括字体大小,行距,行宽和可读性等。在开始设计之前,你必须仔细耐心地构思和计划每个细节。幸运的是,如果你遵守一些基本规则,则可以有效地创建可读,可调整且经过深思熟虑的文本。

要创建一个可读性良好的响应式网站,以下四个规则必不可少。

一、选择最合适的字体大小

通常,大多数网页设计师会告诉你,移动网站的字体大小必须为16像素。但是,你需要考虑的不仅仅是像素。你需要针对不同的屏幕尺寸使用正确的比例,以免影响可读性。可读性不仅取决于屏幕尺寸,还取决于屏幕与阅读器之间的距离。

随着屏幕尺寸的减小,距离也会减小。例如,台式机显示器通常位于距阅读器较远的位置,而人们在阅读时将智能手机距离更近。自然,较小的字母在较近的距离更容易阅读,反之亦然。这就是为什么你可以从手机的16px字体开始,但是在全尺寸显示器和笔记本电脑上需要20至22px字体的原因。

你应该考虑目标受众,为所有可能的屏幕尺寸创建一组字体。此计划将帮助你简化排版过程,避免浪费时间和精力。完成最合适的字体设置后,将基本字体大小设置为100%。你可以相应地缩放其余字体。

二、考虑文字的宽度

当涉及到响应式网络排版时,文本间距与字体大小一样重要。行的长度不应太短或太长,否则会影响可读性。通常,对于智能手机屏幕,文本的宽度(也称为“度量”)被认为是每行50到75个字符。

使其更短会迫使你的读者更频繁地向下滚动,而使它挥之不去会影响可读性。根据WCAG的指南,该字符或字形不得超过80个字符(中文,日文和韩文为40个字符或字形)。

当然,移动屏幕将需要更短的度量。不过,你在台式机或笔记本电脑上可以有较长的文本行。不过,你应该为大屏幕上的行和小屏幕上的行设置字符数的上限。随着宽度的增加,你还需要平衡字体大小。

三、使用适当的行距(行距)

行距(也称为行高)是响应式Web排版的另一个关键但通常被忽略的部分。至少需要滚动三到四页,才能在笔记本电脑屏幕的折叠上方显示移动设备上的核心消息。换句话说,小型设备上两行之间的间隔越大,用户到达你网站上的好东西所花费的时间就越长。

创建响应式Web排版时,应避免文本(以及段落)之间出现这些不愉快的间隙。允许你的用户尽快滚动整个页面。所述线间距应至少空间和半段内,并且段落间距应该比行间距大至少1.5倍。

例如,移动和台式机浏览BarkBox网站的整个主页大约需要五到六次滚动。他们避免了两个屏幕尺寸上的文字出现任何不愉快的间隙,而不会影响可读性。当然,这些都是准则。如果你的网页设计和内容结构需要,你可以从他们那里转移。但是,请记住,所做的更改不应影响网站的可读性和内容发现性。

四、在实际设备上测试你的项目

在实际设备上测试响应式Web字体设计的重要性不能被强调得足够多。有许多免费和付费的在线测试工具。如果没有可用的实际设备,这些工具可能是最好的选择。但是,在笔记本电脑或台式机上查看移动屏幕时,你不会体验到相同的感觉。

当然,不可能在市场上的所有移动设备上进行实际测试。不过,你的团队成员和同事将拥有不同的移动设备和平板电脑。因此,你可以做的是在尽可能多的实际设备和屏幕尺寸上测试设计,然后使用在线响应能力测试工具进行其余工作。

排版是响应式网页设计的重要元素。响应式网页排版确保你的潜在客户可以在所有屏幕上同样轻松地欣赏网站内容。如果你像在布局和图像上一样投入大量精力和创造力,你的内容将比以往任何时候都更具吸引力。希望这四个指针将帮助你为所有屏幕创建可调整,可理解和可读的文本。