沟通在设计中扮演着核心角色。通过网站与用户之间建立清晰联系,帮助用户实现他们的目标至关重要。当我们谈论网页设计中的沟通时,主要指的是文字。超过95%的网络信息是以书面形式呈现的,因此排版在这个过程中起着至关重要的作用。
好的排版能够让阅读变得更加轻松,而差的排版则会让用户感到厌烦。正如Oliver Reichenstein在他的文章中所说,优化排版可以优化可读性、可访问性、可用性以及整体图形平衡。因此,排版在网页设计中起着至关重要的作用。
换句话说,优化排版也能够改善用户界面。在接下来的文章中,我将分享一组规则来帮助你提高文本内容的可读性和易读性。
1.尽量减少使用的字体数量
使用超过3种不同的字体会让网站看起来没有条理且缺乏专业性。要记住,同时使用过多的字体大小和样式也会破坏布局。为了避免这种情况,请尽量将字体系列的数量控制在最低。
一般来说,最好将字体系列数量限制在最低(两个就足够了,一个通常就足够了),并在整个网站上坚持使用相同的字体系列。如果你确实使用了多种字体,请确保这些字体系列的字符宽度相互补充。
2.尝试使用标准字体
使用字体嵌入服务(例如Google Web Fonts或Typekit)虽然可以为您的设计带来许多有趣和新颖的字体,但这种方法存在一个严重的问题。有趣的字体可能会分散用户的注意力,使他们在阅读文本时花费更多的时间去思考设计师使用的字体。
因此,除非您的网站需要使用自定义字体来实现品牌推广目的或创建沉浸式体验,否则最好坚持使用系统默认字体。请记住,好的排版应该将读者的注意力集中在内容上,而不是字体本身。
3.限制线长
文本的可读性与其每行的字符数量有很大关系。决定文本宽度的应该是易读性而不是设计。Baymard Institute提出过一项关于可读性和行长的建议:“如果你想获得良好的阅读体验,每行应该有大约60个字符。每行有适当数量的字符是文本可读性的关键。”
如果一行文本太短,读者的眼睛需要经常来回移动,打断了阅读节奏。而如果一行文本太长,读者的眼睛很难集中精力在文本上。
对于移动设备来说,应该选择每行30到40个字符的文本。以下是在移动设备上查看的两个网站的示例。第一个网站使用每行50到75个字符(这是打印和桌面设备的最佳每行字符数),而第二个网站使用最佳的30到40个字符。
在网页设计中,可以通过使用em或像素来限制文本块的宽度,从而确保每行的最佳字符数。
4.选择适合各种尺寸的字体
用户将通过具有不同屏幕尺寸和分辨率的设备访问您的网站。大多数用户界面需要各种大小的文本元素(按钮、字段标签、部分标题等)。选择适合多种尺寸和粗细的字体非常重要,以保持每种尺寸的可读性和可用性。因此,您应当选择在较小的屏幕上也能清晰易读的字体,并尽量避免使用草书字体,以确保文本的可读性。
5.使用可区分字母的字体
很多字体容易混淆相似的字母形状,比如“i”和“L”。因此,在选择字体时,务必在不同的背景下检查字体,以确保它不会给用户带来困扰。
6.避免全部大写
虽然所有大写字母看起来很美观,但在需要阅读的情况下,使用全大写字母会降低阅读速度。Miles Tinker在他的著作《Legibility of Print》中提到,与小写字母相比,全大写字母的阅读速度要慢得多。因此,在需要快速阅读和理解文本的情况下,最好不要使用全大写字母。
7.不要最小化行间距
在排版中,两行文本之间的间距被称为前导或行高。通过增加行距,可以增加文本行之间的垂直空白,通常会提高可读性,但会占用更多屏幕空间。一般来说,前导的高度应该是字符高度的30%左右,以获得良好的可读性。
正如Dmitry Fadeyev所指出的,正确使用段落之间的空白可以显着提高理解力。使用空白的技巧在于提供适量的内容量,然后剥离无关的细节,从而让用户更容易理解和吸收信息。
8.确保你有足够的色彩对比
不要使用与背景相同或相似的颜色来呈现文本。选择对比度更高的文本颜色有助于用户更快地扫描和阅读。根据W3C的建议,小文本与其背景的对比度应至少为4.5:1,而大文本(14 pt粗体/18 pt常规及以上)与其背景的对比度至少应为3:1。
一旦您选择了文本颜色,最好在大多数设备上与真实用户一起进行测试。如果测试显示阅读您的文本时存在问题,那么可以确定您的用户也会遇到相同的问题。
9.避免用红色或绿色着色文本
色盲是一种常见的问题,特别是在男性中(8%的男性受其影响)。建议使用除了颜色之外的其他方式来区分重要信息。此外,应避免仅使用红色和绿色来传递信息,因为这是最常见的色盲类型。
10.避免使用闪烁文本
闪烁或频繁闪烁的内容可能会导致易受影响的个体发生癫痫病发作,不仅会引发健康问题,而且通常会干扰用户,使他们感到烦恼或分心。因此,应该避免使用闪烁的文字。
排版是一项重要的工作。不恰当的排版选择可能会分散用户的注意力,影响他们的阅读体验。因此,确保排版的可读性、可理解性和易读性至关重要。排版的目的是为了突出内容,并以一种易于理解和使用的方式呈现出来,而不应该增加用户的认知负担。