当前位置:网站首页>(翻译)采用字母间距提高全大写文本可读性的方式

(翻译)采用字母间距提高全大写文本可读性的方式

2022-06-25 07:53:00 gc_2299

  全大写文本就像香料,不能过度使用。页面内容和菜单标题中使用少量全大写文本,有助于与正文形成对比。但要是标题中全大写文本太多的话,用户需要花功夫才能看明白。全大写文本易于发现,但难以阅读。

全大写文本的字母间距

  要想让全大写标题易于阅读,应增加字母间距。没有字母间距的全大写文体,字母都挤在一起,难以区分单词。
在这里插入图片描述
  所有单词的轮廓都类似直角矩形,这意味着每个字母的高度相同,没有笔画升部和降部。笔画升部和降部能提高单词的辨识性,缺了它们会让用户的注意力更加集中才能识别单词,降低阅读速度。
  增加字母间距,将单词轮廓从直线变为齿形,让每个单词都呈现独特的轮廓,提高单词识别率。用户不需集中太多注意力,扫一眼就能快速浏览内容。

在这里插入图片描述

避免过大的字母间距

  全大写文本没有字母间距会难以阅读,而间距过大也会影响可读性。字母分得太开,用户可能无法将字母与单词联系起来。
  一般来讲,全大写文本的字母间距在5-12%范围内。使用CSS时,可以将letterspacing属性设置为0.05-0.12em范围内,根据设计人员的设计经验选择最适合的值。

字母间距示例

  苹果音乐app中内容和菜单标题的字母间距设计很合适,间距不大但却够用,让用户一眼就能看懂全大写文本。
  苹果音乐app的标题采用全大写文本,与正文形成对比。其实也可以用字体粗细和大小区分标题和正文,没必要非得使用全大写文本,对厂商而言,哪种风格能增加品牌吸引力就选哪种。

在这里插入图片描述

全大写文本易于阅读的时机

  有些情况下,没有字母间距也能轻易阅读全大写文本,例如尺寸较大的全大写文本一般易于阅读,因为通常任何尺寸较大的文本都很容易阅读。
  还有一种情况是全大写文本仅包含1~2个单词。单词没几个的话,让用户易于阅读得不到多少好处,使用全大写文本主要是为了吸引用户注意力,这也是其用武之地。
  字母间距适用于包含很多单词的全大写标题,这对那些需要阅读标题的用户而言特别重要。全大写文本确实在用户界面中占有一席之地,但需要设计人员正确使用,避免影响可读性。

原文地址:https://uxmovement.com/content/how-letterspacing-can-make-all-caps-easier-to-read/

原网站

版权声明
本文为[gc_2299]所创,转载请带上原文链接,感谢
https://blog.csdn.net/gc_2299/article/details/125382205