网页排版设计的小技巧

相关推荐

网页排版设计的小技巧

　　网页的排版是很重要的一项内容，下面小编为大家带来了10个网页排版设计的小技巧，欢迎大家阅读!

　　网页排版设计的小技巧

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

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

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

　　2. 使用标准字体

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

　　1. 选择任何字体，如Open Sans

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

　　3. 完成!

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

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

　　3. 限制行的长度

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

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

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

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

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

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

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

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

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

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

　　6. 避免所有文本的大写

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

　　7. 行间距的重要性

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

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

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

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

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

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

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

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

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

　　10. 避免使用闪烁的文字

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

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

网页设计技巧06-02