本文介绍进步文本内容可读性的10个小技巧
交流在规划中起着至关重要的效果。这是树立用户和网站之间的明确联络,并协助你的用户完成目标的要害。当我们议论网页规划环境中的交流时,这一般是指文本。排版在这个过程中起着至关重要的效果:
网络中超越95%的信息是以文字的方法呈现。
好的排版进步了用户的阅览积极性性,反之,差的排版会下降用户的阅览积极性。 正如Oliver Reichenstein在他的文章“Web Design is 95% Typography”中所说:
优化排版就是优化可读性,可拜访性,可用性!让全体的图形平衡。
换句话说:优化你的排版就是优化你的用户界面。在这篇文章中,我将供给一些规矩,协助你进步文本内容的可读性。
1. 削减不同类型字体的运用运用超越3种不同的字体让网站看起来没有结构且不专业。记住,太多的尺度类型和风格也可能损坏任何布局。
为了防止这种状况,测验将字体数量约束在最小限度
一般来说,将字体数量约束在最小限度(两个很充足,一般一个就满足了),并张贴相同的字体到整个网站。如果运用多个字体,请保证字体系依据字符宽度相互弥补。以下面的字体组合为例。Georgia和Verdana(左)的组合具有类似的价值,配对的很调和。比较与Baskerville和Impact(右)的配对,其中大大加重的Impact使与其对应的衬线字体没有光荣。
保证字体系依据字符宽度相互弥补
2. 运用规范字体字体的嵌入效劳(如Google Web Fonts或Typekit))可认为你的规划供给新鲜的和意想不到的许多有趣的字体。它们也十分简单运用。以Google为例:
1. 挑选任何字体,如Open Sans2. 在HTML文档的中生成代码并张贴。3. 完成!
实际上,这种办法有一个很严重的问题:由于用户更了解规范字体,因而能够更快地读取它们。
除非你的网站关于自定义字体(如对品牌宣扬或创建沉溺式体会)十分有招引力,不然一般最好运用体系字体。最安全的办法是用一个别系的字体: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主张对身体文字和图画文字的对比度如下:
1. 与其布景比较,小写文字的对比度应至少为4.5:1。2. 大文字(14pt/ 惯例18pt及以上)的布景对比度应至少为3:1。
这些文本行不契合色彩对比度的主张,难以依据布景色彩进行阅览。
这些文本行契合色彩对比度主张,易于阅览布景色彩。
一旦你挑选了色彩,有必要要在大多数设备上与实在用户进行测验。如果测验显示阅览副本有问题,那就能够确定你的用户具有完全相同的问题。
9. 防止赤色或绿色的文本色盲是一种常见的状况,特别是在男性中(8%的男性是色盲),主张运用除这些色彩以外的其他色彩来区别重要信息。也防止独自运用赤色和绿色来传达信息,由于赤色和绿色色盲是最常见的色盲方法。
10. 防止运用闪耀的文字闪耀的内容可能会引发灵敏个别的癫痫发生。它不仅能够引起癫痫发生,而且关于一般用户来说,这是令人讨厌且使人分神。
防止闪耀文字!
定论排版是一件重要的工作。做出正确的排版挑选能够让你的网站看上去更优雅。另一方面,糟糕的排版挑选会让人分神,往往会引起对排版的留意。让排版具有可读性,可理解性和明晰度是至关重要。
内容排版的存在是为了荣誉
排版应以不会添加用户认知负荷的方法来尊重内容。
微信:boxiangchina