沈阳网站设计网页文本布局设计技巧分享

说到排版，这是一个大学问题。 网站上的每个元素都会影响浏览。排版的质量绝对可以测试设计师的基本知识。一篇简短的文章不能清楚地介绍排版。本文主要分享网站主题部分的排版。之后，我们还将介绍基于不同系列文章中关键点的印刷技术。

文本布局需要考虑文本识别和页面易读性。本文分享了如何从理想的易读性规范和CRAP设计原则的角度在网页中制作精彩的文本布局。

首先考虑一下，您如何看待良好的文本布局？

我们认为，良好的排版必须具备良好的阅读能力。文本内容在视觉上是平衡和连贯的，并且具有整体空间感。

布局，内容放置和列设计都会影响文本的可读性。从易读性的角度来看，设计师需要考虑字体，字体大小，行间距，间距，背景颜色和文本颜色对比。

我们在上一篇文章中突出显示了字体和字体大小。以下理想的易读性规范引入了行间距和间距，共享适当的线宽和线高，并帮助观众保持阅读节奏，以便读者获得更好的阅读体验。

首先，理想的可读性规范

1.线宽

我们可以想象：如果文字行太长，视线的距离很长，很难注意到段落的开头和结尾，阅读起来比较困难;如果文字行太短，眼睛应该来回扫描，破坏阅读的节奏。

因此，我们可以使内容区域的每一行都带有适当数量的单词以提高易读性。

传统书籍排版的每一行中理想的字符数是55-75，实际上在75-85字符行中更受欢迎。第14种字体推荐使用中文35-45个字符。

2.间距

行间距是影响易读性的一个非常重要的因素。行间距太宽会导致文本失去连续性并影响阅读。如果行间距太窄，则容易跳跃。它很容易跳跃。

在网页设计中，文本间距通常选择为行间距的1到1.5倍，以及段间距的1.5到2倍。

例如，第12个字体，行间距为12px-18px，段落间距为18px-24px。

另外，线高/段之间的间隙是=0.754。行间距恰好是段落间距的75％是很常见的。

例如，简单的书号为16号字体，行间距为27px /段间距为36px=75％。字体大小本身相对较大，因此行间距不需要严格按1 - 1.5倍的比例设置，但行间距和截面间距比为75％，看起来非常好。这种视觉效果在阅读时保持一致。节奏感，这是规范在实际情况下的灵活应用。

3.行对齐

排版中最重要的规范之一是对齐应放置的位置，例如每个段落的行的对齐方式。无论视觉效果如何，美丽，正式，有趣或严肃，都可以应用清晰的对齐来实现目标。通常，建议只与页面上的文本对齐，并尽量避免理由。

4.文字留白

格式化文本时，需要在布局中留出可用空间。白色空间应从小到大的顺序是：字间距，行间距和段间距。另外，在布局内容区域之前，需要根据页面的实际情况在页面周围留下空白区域。

二、CRAP设计四原则在文字排版中的应用

CARP是四个基本设计原则，包括对比度，重复，对齐和接近，这些原则已被设计师广泛使用。这四个基本原则也非常适用于网页设计中的文本布局。

1.对比

我们将比较分为三类，主要是标题和正文的字体和字体大小比较，文本颜色的对比度，文本颜色和背景颜色之间的对比。

＆gt;标题与文字

在AnyForWeb网站案例页面中，标题在18日使用Microsoft Yahei，在12日使用歌曲。两种字体大小之间的对比使得文本内容丰富且易于吸引读者的注意力。

＆gt;文字颜色比较

在Garan的官方网站上，一些文本使用了与正文不同的另一种颜色。这种对比是增加视觉效果的有效方法之一，突出了段落的重点。

＆gt;文字颜色与背景颜色

这是一种非常常见的排版设计。文本和背景之间的适当对比可以提高文本的清晰度并产生强烈的视觉效果。

例如，在埃森哲的官方网站上，白色背景，红色标题，黑色文字以及红色背景和白色文本之间的对比清晰地显示了文本内容，其具有完整的层次感和强烈的视觉冲击力。

设计师在使用这个原则时需要注意。有必要确保文本易于查看。如果文字太小或太细，颜色对比度不够，则会适得其反。例如：

对颜色对比不熟悉的设计师可以通过颜色对比度检测工具（例如检查我的颜色，颜色对比度检查）来检测颜色和亮度差异，以确保网页设计的易读性。

2.重复

设计中的元素可以在整个网页设计中重复。对于文本，字体，字体大小和样式的重复可以是相同类型的图案装饰，文本和图像布局。重复为用户提供了有组织，一致的体验，从而创造了连贯性并且看起来更多。

例如，HeyJuice网站在产品指南部分使用统一的“图片+标题+正文”表单。内容不同，布局统一，图片风格一致。当用户查看过去时，他们可以知道这是同一部分的内容。这种重复很容易具有连贯和平衡的美感。

例如，图巴兔装饰网络的过程，标题文字在图片的相同位置，使用相同的形式，不仅与图片的背景颜色形成对比，而且还与文本样式的重复形成对比。

重复原则广泛用于网页设计。单次重复可能是单调的。设计人员可以根据不同的网站要求灵活使用它。例如，改变重复可以增加创新并增加网页设计的活力。

3.对齐

在网页设计中，元素不能随意放置在页面上，并且每个项目都应该与页面内容有一些连接。对齐可对齐性是网页设计的重要组成部分。它可以帮助设计师制作有吸引力的设计，并且是良好网页设计的潜在要求。

有很多对齐的情况，我们只列出两个。

曼秀雷敦的左对齐网站：

DarryRing网站的中心对齐：

左右对齐使文本看起来更清晰，更清晰;中心对齐更庄严，更正式，更稳定。

4.亲密性

位置的接近意味着存在关联。亲密关系是指将相关项目组织在一起，使它们从整体上看起来和谐统一。

亲密关系可以从两点开始：适当的白色空间，侧重于视觉强调。

例如，在以下情况下，图形和文本匹配，这是多个元素组合在一起。

首先将人眼吸引到横幅和文本内部，然后向下移动到文本描述和链接文本。这些元素的亲密关系和对比形成了平衡。

以上是此次分享的内容。如上所述，排版测试的质量是设计师的基本技能，平时的努力是必不可少的，我们期待大家的精彩布局！