免费获取策划方案多一份参考,总有益处

它山之石

Tashan stone of

案例578

它山之石

响应式网页排版的4条规则,你不能忽视

来源:派臣科技|时间:2019-06-22|浏览:

在2018年第二季度,超过一半的网络流量(51.89%)来自智能手机,因此有一个响应性的网页设计已经成为必要。响应式web设计的三个最关键的元素是流畅的网格、灵活的图像和媒体以及可调整的文本。然而,web设计师往往忽略了“可调文本”元素,这也被称为“响应式web排版”。

手机流量

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

这里有四个响应式web排版规则,作为设计师,您不能忽视。

1)选择最合适的字体大小

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

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

您应该为考虑到您的目标受众而考虑到的所有潜在屏幕大小创建一组字体。这个计划将帮助您简化排版过程,避免浪费时间和精力。一旦您确定了最合适的字体集,请将基本字体大小设置为100%。您可以相应地放大其余字体。

2)考虑文本的宽度

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

保持较短会迫使读者更频繁地向下滚动,而保持较长时间的滚动会影响可读性。不管怎样,你都要付出高昂的代价。根据WCAG的指导方针,它不应该超过80个字符或符号(中文、日文和韩文40个)。

当然,移动屏幕需要更短的尺寸。不过,你可以在台式机或笔记本电脑上有相对较长的文本行。不过,您应该像设置小屏幕一样,为大屏幕上一行中的字符设置一个上限。随着字体宽度的增加,还需要平衡字体大小。

KlientBoost

它将避免影响可读性。例如,Klient Boost使用简单的文本,随着屏幕大小的变化,文本可以伸缩并调整行宽。字符的数量并没有压倒一切。因此,跨设备的用户体验保持一致。

3)使用适当的行距(引线)

行间距(也称为前导)是响应式web排版的另一个重要部分,但常常被忽略。在笔记本电脑屏幕折叠上方的手机上,至少需要三四卷纸才能看到核心信息。换句话说,在一个小设备上,两行之间的间距越大,用户访问站点所需的时间就越长。

开始的40-50秒对于保持读者的注意力至关重要。然而,过多的引导通常会占用大部分宝贵的滚动时间。当用户接触到你的核心内容时,他们已经厌倦或分心,无法再继续了。因此,您将无意中增加网站在小屏幕设备上的弹跳率。

在创建响应式web排版时,应该避免文本(以及段落)之间的这些令人不快的空白。允许用户尽可能快地滚动整个页面。行距在段落内至少为1.5倍,段落间距至少为行距的1.5倍。

BarkBox

例如,无论在手机还是台式机上,浏览BarkBox网站的整个主页都需要大约5 - 6个滚动条。它们在不影响可读性的情况下,避免了两种屏幕大小的文本中出现任何令人不快的空白。当然,这些都是指导方针。如果你的网页设计和内容结构需要的话,你可以把注意力从他们身上转移开。但是,请记住,您所做的更改不应该影响站点的可读性和内容发现性。

4)在实际设备上测试设计(如果可能的话)

在真实设备上测试响应性web排版设计的重要性再怎么强调也不为过。网上有很多免费和付费的在线测试工具。如果没有实际的设备,这些工具可能是最好的选择。然而,当你在笔记本电脑或台式机上查看移动屏幕时,你无法体验到同样的感觉。

当然,在市场上的所有移动设备上进行实际测试是不可能的。尽管如此,您的团队成员和同事将拥有不同的移动设备和平板电脑。因此,您所能做的就是在尽可能多的实际设备和屏幕大小上测试设计,并对其余部分使用在线响应性测试工具。

临别赠言

排版是响应性web设计的一个基本元素。响应式网页排版确保您的前景可以享受您的网站内容,在所有屏幕上同样容易。如果你像在布局和图片上一样投入精力和创造力,你的内容将比以往任何时候都更吸引人。希望这四个指针能够帮助您为所有屏幕创建可调的、可理解的和可读的文本。无论您的项目是什么性质的,一定要首先检查这些指针。好运!

留言

返回顶部

君
重庆网站建设它山之石响应式网页排版的4条规则,你不能忽视