网页排版设计的技巧

本文格式为Word版，下载可任意编辑——网页排版设计的技巧网页排版设计的技巧

导语：好的排版提高了用户的阅读积极性性，反之，差的排版会降低用户的阅读积极性。下面是网页排版设计的10个小技巧，一起来学习下吧：

1.裁减不同类型字体的使用

使用超过3种不同的字体让网站看起来没有布局且不专业。记住，太多的尺寸类型和风格也可能破坏任何布局。

为了防止这种处境，尝试将字体数量限制在最小限度

一般来说，将字体数量限制在最小限度两个很充沛，通常一个就足够了，并粘贴一致的字体到整个网站。假设使用多个字体，请确保字体系基于字符宽度彼此补充。以下面的字体组合为例。Georgia和Verdana左的组合具有好像的价值，配对的很和谐。对比与Baskerville和Impact右的配对，其中大大加重的Impact使与其对应的衬线字体没有光辉。

确保字体系基于字符宽度彼此补充

2.使用标准字体

字体的嵌入服务如GoogleWebFonts或Typekit可以为你的设计供给崭新的和意想不到的大量好玩的字体。它们也分外轻易使用。以Google为例：

选择任何字体，如OpenSans

在HTML文档的中生成代码并粘贴。

完成!

实际上，这种方法有一个很严重的问题：由于用户更熟谙标准字体，因此可以更快地读取它们。

除非你的网站对于自定义字体如对品牌宣传或创造沉浸式体验分外有吸引力，否那么通常最好使用系统字体。最安好的方法是用一个系统的字体：Arial，Calibri，Trebuchet等。记住，好的排版可以吸引读者到内容中去，而不是排版本身。

3.限制行的长度

每行拥有适当的字符数量是让文本具有可读性的关键。它不是你的设计，抉择你的文本的宽度，它理应是一个可读性的问题。考虑BaymardInstitute关于可读性和行的长度的建议：

“假设你想有一个好的阅读体验，理应每行约60个字符。每行拥有适当的字符数量是让你的文本具有可读性的关键。”

图片来源：MaterialDesign

假设行太短，视线务必经常返回，这就会打破读者的节奏。假设一行文字太长，用户的视线将很难专注于文本。

对于移动设备，理应每行30-40个字符。以下是在移动设备上查看的两个网站的例如。第一个是使用每行50-75个字符打印和桌面的每行最正确字符数，而其次个使是用最正确的30-40个字符。

图片来源：Usertesting

在网页设计中，可以通过使用em或像素限制文本的宽度来实现每行最正确数量的字符。

4.选择一个能在各种尺寸中工作的字体

用户会从具有不同屏幕尺寸和辨识率的设备访问你的网站。大多数用户界面需要各种大小的文本元素按钮复制，字段标签，章节标题等。选择一个能够在多种尺寸和重量上运行良好的字体以保持每个尺寸的可读性和可用性是分外重要。

Google的Roboto字体

确保你说选择的字体在较小的屏幕上明显可辨!尝试制止使用草书的字体，例如Vivaldi在下面的例如中：虽然它们很美丽，但它们很难阅读。

Vivaldi字体很难以在小屏幕上阅读

5.使用可区分字母的字体

大量字体让好像的字形很轻易混淆，更加是与“i”和“L”如下图所示以及在字母间距较小的空间中，例如当“r”和“n”看起来像“M”。因此，在选择你的排版时，请务必在不同的文本环境中检查你的排版，以确保不会为用户造成问题。

6.制止全体的大写

全体大写字母：意思是文本中的全体大写字母，在不涉及阅读的上下文中很好如首字母缩略词或标识，但是当你的信息涉及阅读时，不要强制用户阅读全体大写文字。正如MilesTinker所说，在他的具有里程碑意义的作品中，可读性的印刷，全部大写印刷与小写排版相比，大大地延缓了用户的阅读速度。

7.行间距的重要性

在排版中，我们有一个特殊术语，用于两行文本之间的`间距或行高。通过增加行高，可以增加文本行之间的垂直空白空间，通常提高可读性以换取屏幕空间。作为一个规矩，行高理应是字符高度的30%，以提高可读性。

好的间距有助于可读性。图片来源：Microsoft

正如DmitryFadeyev所指出的那样，正确地使用段落之间的空白已被证明可以将理解提高20%。使用空白的技能在于为用户供给可消化量的内容，然后剥离无关紧要的细节。

左：几乎重叠的文字。右：良好的间距有助于可读性。图片来源：Apple

8.确保你有足够的颜色比较度

不要在文本和背景中使用一致或好像的颜色。文本越明显，用户就能更快地扫描和阅读它。W3C建议对身体文字和图像文字的比较度如下：

与其背景相比，小写文字的比较度应至少为4.5：1。

大文字14pt/常规18pt及以上的背景比较度应至少为3：1。

这些文本行不符合颜色比较度的建议，难以根据背景颜色举行阅读。

这些文本行符合颜色比较度建议，易于阅读背景颜色。

一旦你选择了颜色，务必要在大多数设备上与真实用户举行测试。假设测试显示阅读副本有问题，那就可以确定你的用户具有完全一致的问题。

9.制止文本为红色或绿色

色盲是一种常见的处境，更加是在男性中8%的男性是色盲，建议使用除这些颜色以外的其他颜色来区分重要信息。也制止单独使用红色和绿色来传达信息，由于红色和绿色色盲是最常见的色盲形式。

10.制止使用闪烁的文字

闪烁的内容可能会引发敏感个体的癫痫发作。它不仅可以引起癫痫发作，而且对于一般用户来说，这是令人厌恶且使人分心。

制止闪烁文字!

结论

排版是一件重要的事情。做出正确的排版选择可以让你的网站看上去更优雅。另一方面，糟糕的排版选择会让人分心，往往会引起对排版的留神。让排版具有可读性，可理解性和明显度是至关重要。

内容排版的存在是为了荣誉。

排版应以不会增加用户认知负荷的方式来崇敬内容。