网页排版设计的技巧

　　好的排版提高了用户的阅读积极性性，反之，差的排版会降低用户的阅读积极性。下面是小编收集整理的网页排版设计的技巧，希望对大家有帮助！

　　网页排版设计的技巧

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

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

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

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

　　确保字体系基于字符宽度互相补充

　　2. 使用标准字体

　　字体的嵌入服务(如Google Web Fonts或Typekit))可以为你的设计提供新鲜的和意想不到的许多有趣的字体。它们也非常容易使用。以Google为例：

　　选择任何字体，如Open Sans

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

　　完成!

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

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

　　3. 限制行的长度

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

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

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

　　对于移动设备，应该每行30-40个字符。以下是在移动设备上查看的两个网站的示例。第一个是使用每行50-75个字符(打印和桌面的每行最佳字符数)，而第二个使是用最佳的30-40个字符。

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

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

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

　　Google的Roboto字体

　　确保你说选择的字体在较小的屏幕上清晰可辨!尝试避免使用草书的字体，例如Vivaldi(在下面的示例中)：虽然它们很漂亮，但它们很难阅读。

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

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

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

　　6. 避免所有的大写

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

　　7. 行间距的重要性

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

　　好的间距有助于可读性。

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

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

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

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

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

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

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

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

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

　　9. 避免文本为红色或绿色

　　色盲是一种常见的情况，特别是在男性中(8%的男性是色盲)，建议使用除这些颜色以外的其他颜色来区分重要信息。也避免单独使用红色和绿色来传达信息，因为红色和绿色色盲是最常见的色盲形式。

　　10. 避免使用闪烁的文字

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

　　避免闪烁文字!

　　结论

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

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

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

　　拓展资料：响应式网页设计的7类排版规则

　　1. 突出显示标题

　　网页排版的一个特点就是标题在版式中占据突出位置。别致的标题能吸引用户在你的网站停留更久。为了实现这一点，你可以利用字形(glyphs)和连字(ligatures)技巧创造外观更独特的标题。

　　连字指的是看起来似乎是连接在一起的字母。例如，单词“fish”中的f和i在某种字体里可能联成一体(fi)。通过浏览器的字体设置功能或借助“文本渲染——优化清晰度”(Text Rendering- OptimiseLegibility)特性，你可以轻松地实现连字效果。火狐浏览器已经设置了默认的连字符。在某些字体中使用特定的连字组合效果能为你的网页版式增加美感和风格。在网页排版软件的Text, Type 或Open Type目录中，一般都可以开启或关闭连字效果。当合适的字母相邻出现时，这些软件会自动为它们设置连字效果。

　　案例分析

　　请注意这个网站中优雅的连字。这些优美的字体如果用于网页标题中的话，无疑会为访客带来更为卓越的用户体验。

　　2.合理搭配不同大小和颜色的字体

　　正如上面的图片所传递的信息一样，我们在网页设计中必须选择能在桌面端和移动设备屏幕上都清晰显示的字体。一款字体在印刷品中与在数码设备中显示的效果是不同的。因此我们必须理解font family属性，风格和效果。根据W3C对于CSS字体的规定，Serif, Sans-Serif, Monospace, Fantasy 和Cursive等字体都具有font family属性。

　　第二，应根据网站的主题或分类来选择字体。这样才能确保你的网页能引起目标受众的共鸣，达到想要的效果。衬线字体同样能用于提升文本的阅读效果，强化要传达的信息。这里的问题是，衬线字体的特性决定了它只能在高解析度的屏幕上正常显示，在低解析度的屏幕上可能会导致糟糕的结果。因此建议你在短标题中使用艺术字体，在正文中采用更简洁的字体。

　　3.精心挑选字体将为你赢得灵活而高效的排版

　　自从客户端字体(Font Face)被引入网页设计中之后，网页设计师们便拥有了将不同字体用于自己设计中的自由。此前，他们只能使用特定的，与网页安全兼容的字体。

　　但面对这些可以自由使用的字体，设计师们还需要知道如何正确地使用它们。响应式网页设计已经成为多数网站的标准设计模式，不过由于要顾及不同尺寸的设备屏幕，它对网页排版也提出了一些限制。所以网页设计师在一个响应式网页系统中使用多种字体时，必须十分审慎。在同一个网站中不要使用太多种字体，最好不要超过三种。同时也不要使用极为流行的字体，这并不能让你的网页看起来比别的网页更有优势。

　　案例分析

　　这个站点使用了两种无衬线字体。所有的标题使用的都是Balto 字体，正文采用的是Alright Sans 字体。介于这两者之间的是Harriet 字体。整个页面外观显得十分简洁优雅。

　　与之形成对比的是angelfire 网站，这个站点使用了多种不同的字体，看起来混乱，不专业。

　　4. 在响应式排版中，调节行宽十分重要

　　必须对网页中的行宽(line length )进行调节，因为字体的行宽与排版的响应程度息息相关。响应式设计也包括在不同尺寸的屏幕上字体所发生的自适应式改变。所以调整字体的行宽是必须的。

　　理想的行宽为每行文本中字符数量在45-47之间，包含空格和标点。最长的限度我45-85个字符。这是对人们的阅读习惯和眼动规律做出研究后得出的结论。根据这一结论，有专家建议网页内容采用左对齐的排版方式，因为人的视线在阅读时一般会按照从左至右的方式在水平方向上运动。

　　案例分析

　　网站suite 将没行文本的字符数限定为75个。正如你能看到的，页面中的文本看起来十分优美，能让用户怀着兴趣一直读下去。

　　5.当用户与屏幕的距离不同时，使用不同大小的字体能改善可读性。在响应式排版设计中，必须考虑这一点。

　　字体的大小要能保证字体在设备上可见，可读。而要做到这一点，可能会与前面所说的.保持“理想行宽”发生冲突。因为“理想行宽”意味着要调小或调大字体尺寸，而这两者都可能导致文本不可读。这里的底线是要保证浏览者能舒服地阅读网页内容。响应式设计非常关键的一点就在于，根据用户与设备屏幕距离的不同，应用于设备屏幕的字体大小也应该不同。对于字体大小与阅读距离的关系，已经有计算的方法。

　　案例分析

　　请查看 moonbase 网站。这是一个帮助其他公司设计网站的网站。网页中央的文本十分显眼，它传达了这个站点的功能。我们只需看一眼就能明白。突出的字体能紧紧地抓住用户的注意力，并促使他们继续阅读网站的其余部分。

　　6. 响应式排版要求浏览器支持不同大小的字体

　　如果你设计的网页中需要用到某些自定义字体，你必须确保浏览器支持加载和显示这些字体。即便你的字体本身清晰，没有错误，但浏览器兼容问题可能会使你前功尽弃。你还必须检查你保存的字体文件格式与你想应用于网页中的字体是否兼容。不兼容的字体无法正常加载，最终会影响网页的显示。

　　案例分析：从上面的示例中我们可以发现，我们需要使用标准字体或“字体库”。第一步是通过“字体测试”来确定一款字体是否适用于网页中。浏览器对于每个系列的字体都有“第一选项”，“第二选项”，“第三选项”……的区分。如果浏览器在这个系列中赵爱不到任何合适的字体，它会自动选择默认的无衬线字体，衬线字体或Monospace字体。

　　举例来说，很多浏览器都自带 Century Gothic字体。你可以创建一个字体库，将Century Gothic字体视为你的第一选项，之后是Arial, Helvetica，最后是一款无衬线类的字体。注意，在CSS中，标题中含有多个单词的字体需要加上引号。例如： font-family:“Century Gothic”, Arial, Helvetica, Sans-Serif.

　　这样一来，浏览器会首先采用Century Gothic字体。由于很多浏览器都自带这款字体，多数用户在浏览网页时看到的也会是Century Gothic字体。对于没有配置 Century Gothic的浏览器，浏览器会按照Arial, Helvetica,事前设置的无衬线字体的顺序寻找替代。

　　7.与字体的物理属性相关的因素会影响字体在设计中的灵活度

　　响应式排版可能会受制于影响字形的因素。这些因素包括字重，字宽，笔画对比，字体高度，光学尺寸等等。这些因素的些微变化都会影响站点的观感。当然，现在已经有了不少的工具可以让设计师部分地修正这些限制。

　　Superpolator 和FlowType.js就是此类工具中有代表性的两款。当屏幕尺寸减小时，不同比例的网页间的差异就会更为凸显。因此就需要在网页尺寸与缩放比例间找到平衡点。例如，用于标题的字体比用于正文的字体大/小多少倍，这就涉及比例问题。这也就是我们为何需要响应式排版的理由。我们需要在断点中能自行缩小的字体，因为设计师们无法为网页内的所有字体元素一一调整基线风格。

　　案例分析

　　请查看flowtype网站。借助 Superpolator 和FlowType.js之类的工具，只需拖动滑块，你便能清楚地看到响应式排版的作用。

　　给大家列举了这7个网站案例，响应式排版的操作还需要在实践中不断完善，在应用中针对不同屏幕尺寸的设备进行测试，你将会逐步掌握响应式排版的要点。

【网页排版设计的技巧】相关文章：