网页排版设计的10个小技巧
编辑：[db:作者] 时间：2024-08-25 03:12:03
沟通在设计中起着至关主要的浸染。
好的排版提高了用户的阅读积极性性，反之，差的排版会降落用户的阅读积极性。 正如Oliver Reichenstein在他的文章《Web Design is 95% Typography》中所说：
优化排版便是优化可读性，可访问性，可用性！
让整体的图形平衡。
换句话说：优化你的排版便是优化你的用户界面。在这篇文章中，我将供应一组规则，帮助你提高文本内容的可读性。
1. 减少不同类型字体的利用
利用超过3种不同的字体让网站看起来没有构造且不专业。记住，太多的尺寸类型和风格也可能毁坏任何布局。
为了防止这种情形，考试测验将字体数量限定在最小限度
一样平常来说，将字体数量限定在最小限度（两个很充足，常日一个就足够了），并粘贴相同的字体到全体网站。如果利用多个字体，请确保字体系基于字符宽度相互补充。以下面的字体组合为例。Georgia和Verdana（左）的组合具有相似的代价，配对的很和谐。比较与Baskerville和Impact（右）的配对，个中大大加重的Impact使与其对应的衬线字体没有光彩。
确保字体系基于字符宽度相互补充
2. 利用标准字体
字体的嵌入做事（如Google Web Fonts或Typekit)）可以为你的设计供应新鲜的和意想不到的许多有趣的字体。它们也非常随意马虎利用。以Google为例：
选择任何字体，如Open Sans在HTML文档的<Head>中天生代码并粘贴。完成！实际上，这种方法有一个很严重的问题：由于用户更熟习标准字体，因此可以更快地读取它们。
除非你的网站对付自定义字体（如对品牌宣扬或创建沉浸式体验）非常有吸引力，否则常日最好利用系统字体。最安全的方法是用一个别系的字体：Arial，Calibri，Trebuchet等。记住，好的排版可以吸引读者到内容中去，而不是排版本身。
3. 限定行的长度
每行拥有适当的字符数量是让文本具有可读性的关键。它不是你的设计，决定你的文本的宽度，它该当是一个可读性的问题。考虑Baymard Institute关于可读性和行的长度的建议：
“如果你想有一个好的阅读体验，该当每行约60个字符。每行拥有适当的字符数量是让你的文本具有可读性的关键。”
图片来源：Material Design
如果行太短，视线必须常常返回，这就会冲破读者的节奏。如果一行笔墨太长，用户的视线将很难专注于文本。
对付移动设备，该当每行30-40个字符。以下是在移动设备上查看的两个网站的示例。第一个是利用每行50-75个字符，而第二个使是用最佳的30-40个字符。
图片来源：Usertesting
在网页设计中，可以通过利用em或像素限定文本的宽度来实现每行最佳数量的字符。
4. 选择一个能在各种尺寸中事情的字体
用户会从具有不同屏幕尺寸和分辨率的设备访问你的网站。大多数用户界面须要各种大小的文本元素（按钮复制，字段标签，章节标题等）。选择一个能够在多种尺寸和重量上运行良好的字体以保持每个尺寸的可读性和可用性是非常主要。
Google的Roboto字体
确保你说选择的字体在较小的屏幕上清晰可辨！
考试测验避免利用草书的字体，例如Vivaldi（不才面的示例中）：虽然它们很俊秀，但它们很难阅读。
Vivaldi字体很难以在小屏幕上阅读
5. 利用可区分字母的字体
许多字体让相似的字形很随意马虎稠浊，特殊是与“i”和“L”（如下图所示）以及在字母间距较小的空间中，例如当“r”和“n”看起来像“M”。因此，在选择你的排版时，请务必在不同的文本环境中检讨你的排版，以确保不会为用户造成问题。
6. 避免所有的大写
所有大写字母：意思是文本中的所有大写字母，在不涉及阅读的高下文中很好（如首字母缩略词或标识），但是当你的信息涉及阅读时，不要逼迫用户阅读所有大写笔墨。正如Miles Tinker所说，在他的具有里程碑意义的作品中，可读性的印刷，全部大写印刷与小写排版比较，大大地延缓了用户的阅读速率。
7. 行间距的主要性
在排版中，我们有一个分外术语，用于两行文本之间的间距（或行高）。通过增加行高，可以增加文本行之间的垂直空缺空间，常日提高可读性以换取屏幕空间。作为一个规则，行高该当是字符高度的30％，以提高可读性。
好的间距有助于可读性。图片来源：Microsoft
正如Dmitry Fadeyev所指出的那样，精确地利用段落之间的空缺已被证明可以将理解提高20％。利用空缺的技能在于为用户供应可消化量的内容，然后剥离无关紧要的细节。
左：险些重叠的笔墨。右：良好的间距有助于可读性。图片来源： Apple
8. 确保你有足够的颜色比拟度
不要在文本和背景中利用相同或相似的颜色。文本越明显，用户就能更快地扫描和阅读它。 W3C建议对身体笔墨和图像笔墨的比拟度如下：
与其背景比较，小写笔墨的比拟度应至少为4.5：1。大笔墨（14pt/ 常规18pt及以上）的背景比拟度应至少为3：1。这些文本行不符合颜色比拟度的建议，难以根据背景颜色进行阅读。
这些文本行符合颜色比拟度建议，易于阅读背景颜色。
一旦你选择了颜色，必须要在大多数设备上与真实用户进行测试。如果测试显示阅读副本有问题，那就可以确定你的用户具有完备相同的问题。
9. 避免文本为赤色或绿色
色盲是一种常见的情形，特殊是在男性中（8％的男性是色盲），建议利用除这些颜色以外的其他颜色来区分主要信息。也避免单独利用赤色和绿色来传达信息，由于赤色和绿色色盲是最常见的色盲形式。
10. 避免利用闪烁的笔墨
闪烁的内容可能会引发敏感个体的癫痫产生发火。它不仅可以引起癫痫产生发火，而且对付一样平常用户来说，这是令人讨厌且使人分心。
避免闪烁笔墨！
结论
排版是一件主要的事情。做出精确的排版选择可以让你的网站看上去更优雅。另一方面，糟糕的排版选择会让人分心，每每会引起对排版的把稳。让排版具有可读性，可理解性和清晰度是至关主要。
内容排版的存在是为了名誉。
排版应以不会增加用户认知负荷的办法来尊重内容。
译者：SKYUI
原文作者：Nick Babich
本文由 @SKYUI 翻译发布于大家都是产品经理。未经容许，禁止转载。
本站所发布的文字与图片素材为非商业目的改编或整理，版权归原作者所有，如侵权或涉及违法，请联系我们删除，如需转载请保留原文地址：http://www.baanla.com/rsq/94147.html
下一篇：返回列表