完美在线阅读体验的6个步骤

IT资讯 2018-08-03 67 次浏览 0 条评论

如何创建有效且有意义的Web排版。

在线创建良好的阅读体验不仅仅取决于找到合适的网络字体(当然,这很重要)。还有许多其他因素需要考虑,从文本在不同设备上的显示方式到页面上的位置。按照此分步指南进行操作,以确保正确完成。

如果您正在深入了解某些内容,请查看我们的响应式网页排版规则指南。

01.阅读内容

有意义的排版从一件事开始:内容。真正的印刷师知道这一点;在开始排版之前,他们总是会读这本书。不幸的是,似乎许多网页设计师低估了网页设计过程中内容的重要性。

他们经常会找到网站尚不存在的借口,所以没有内容可以使用。在这种情况下,使用相似的内容。例如,如果您正在设计一个关于金融和经济的网站,请找一篇关于它的文章并阅读它。

02.根据内容选择字体

现在您已阅读内容,您已准备好选择主要字体。如果一个网站是关于技术,但预计有中长文章,使用看起来有点现代但易于阅读的字体。如果它是一个艺术画廊组合,你可以摆脱一些前卫的东西。

不要使用Lorem Ipsum作为占位符文本 - 这是拉丁语的一种奇怪形式,与您的网站无关。使用步骤01中的内容,使用将要使用的语言,然后围绕它进行设计。

03.从移动优先开始

重要的一步是为最难设计的屏幕设计最佳的阅读体验:移动。移动优先是一种根本不同的网页设计方法,其中渐进增强有利于优雅降级。

不要为桌面屏幕设计最佳的阅读体验,然后适应移动设备 - 或者更糟糕的是,完全忘记移动设备。选择最适合较小屏幕的字体大小和行高的组合。您的起点应该是商定的浏览器默认值16像素。

04.适应大屏幕

不要让移动设备首先变成仅限移动设备。为不同屏幕塑造最佳阅读体验的工具已经到位,应该使用它们。较大的屏幕通常远离读者的眼睛,因此基本字体大小需要更大。 18像素被广泛认为是一个很好的起点。

不要忘记限制段落的宽度 - 建议每行60个字符以获得最佳阅读体验。需要再次查看行高 - 通常最好是字体大小的1.4或1.5倍。

05.使用比例

现在是时候根据比例定义一系列可重复使用的字体大小了。最常见的方法是使用模块化秤。转到Modular Scale,输入基本字体大小并选择比例。它将为您提供一系列字体大小供您选择。定义一个比例并试图坚持它会增加字体大小选择的含义,并防止通常由于随机分配它们而产生的混乱。

06.设置基线网格

下一步是开始考虑你现在应该设计的正文文本周围的其他文本元素(标题,列表,标题,旁注释等)。为了增加在网站上放置这些元素的意义,最好使用基线网格(如果不理解网格理论,现在也是时候开始)。

此网格源自您的正文文本行高。如果您的行高为22像素,则需要基于此的垂直网格。当它就位时,您已准备好设置其他文本元素的大小和边距,以便它们适合此网格。

0
小包子

【 飞龙网.com:小包子】为你推荐!我的文章如同我的名字,香甜可口,咸淡适宜,油而不腻,阅后令你回味无穷尽哦~

发表评论