2020-12

17

您不能忽视的响应式网站建设排版规则
  • 类型:专业观点
  • 编辑:Angle
  • 来源:www.szniegoweb.com
  • 您不能忽视的响应式网站建设排版规则。有超过一半的网站流量(51.89%)2018年第二季度,智能手机的网页设计已经成为必要。响应式网站建设的三个最关键的要素是流畅的网格、灵活的图像和媒体以及可调整的文本。然而,网页设计师往往忽略“可调节文本”元素,这也被称为“响应网页排版”。

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

    这里有四个响应式网站建设的网页排版规则,本期深圳网站制作公司Angle就和大家讲讲。



    响应式网站建设


    1、选择最合适的字体大小
    通常,大多数网页设计师都会告诉你,对于移动网站来说,字体大小需要16像素。但是,您必须考虑的不仅仅是像素。为了不影响可读性,您需要对不同的屏幕大小使用合适的比例。可读性,反过来,不仅取决于屏幕大小,也取决于屏幕与阅读器之间的距离。随着屏幕尺寸的减小,距离也会减小。例如,桌面显示器通常位于离阅读器更远的地方,而人们在阅读时把智能手机拿得更近。当然,较小的字母将更容易阅读在一个更近的距离,反之亦然。这就是为什么你可以从手机16 px字体开始,但你需要20到22 px字体的全尺寸显示器和笔记本电脑。考虑到目标受众,您应该为所有可能的屏幕大小创建一组字体。这个计划将帮助你简化你的排版过程,避免浪费时间和精力。一旦你完成了适当的字体,将基本字体大小设置为100%。您可以相应地放大其余的字体。

    2、考虑文本的宽度
    当涉及到响应式网站建设网页排版时,文字间距和字体大小一样重要。一条线的长度不应该太短或太长,因为它会对可读性产生不利影响。通常,对于智能手机屏幕,文本的宽度(也称为“度量衡”)被认为是每一行50到75个字符。保持较短的时间将迫使你的读者更频繁地向下滚动,而保持它的挥之不去将影响可读性。不管是哪种情况,都会让你付出高昂的代价。根据WCAG指南,不应超过80个字符或字形(40个用于中文、日文和韩文)。自然,移动屏幕将需要一个较短的测量。不过,您可以在台式机或膝上型计算机上使用相对较长的文本行。尽管如此,您还是应该对大屏幕上一行字符的数量设置一个上限,就像小屏幕上的字符数一样。随着宽度的增加,您还需要平衡字体大小。它将避免影响可读性。例如,KlientBoost使用简单的文本,随着屏幕大小的变化,它可以向上缩放并调整线宽。字符的数量一点也不过分。因此,用户体验在设备之间保持一致。

    3、使用适当的行距
    行间距(也称为前导)是另一个重要的,但经常被忽略的部分,响应网络排版。在笔记本电脑屏幕上,手机上的核心信息至少需要3-4个卷轴才能到达。换句话说,小型设备上两行间距越大,用户就越需要更长的时间才能到达站点上的好东西。前40-50秒是保持读者参与的关键。然而,太多的领先通常占用了这宝贵的时间滚动。当用户到达你的内容的症结时,他们已经厌倦或分心,无法再继续下去了。因此,你会无意中增加你的网站在小屏幕设备上的反弹率。您应该避免文本(以及段落)之间的这些不愉快的空白,同时创建响应性的web排版。允许用户尽快滚动整个页面。这个行距段落内至少要有半个空格,段落间距至少要比行距大1.5倍。例如,在移动和桌面上浏览BarkBox站点的整个主页需要大约5-6个卷轴。在不影响可读性的情况下,它们避免了在两个屏幕大小上出现任何令人不快的文本空白。当然,这些都是指引。如果你的网页设计和内容结构需要的话,你可以转移他们的注意力。但是,请记住,您所做的更改不应影响站点的可读性和内容可发现性。

    4、在实际设备上测试你的设计
    在真实的设备上测试你的网页版式设计的重要性怎么强调也不为过。有几十个在线测试工具,免费和付费。如果没有实际的设备,这些工具可能是最好的选择。然而,当你在笔记本电脑或台式机上观看移动屏幕时,你不可能体验到同样的感觉。当然,在市场上的所有移动设备上进行实际测试是不可能的。不过,您的团队成员和同事将拥有不同的移动设备和平板电脑。因此,您可以做的是在尽可能多的实际设备和屏幕大小上测试设计,并使用在线响应。测试工具剩下的。

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