广东快3>WIKI库>学习UI设计>行间距及段间距规范

行间距及段间距规范



行宽的规范


行宽即完整一行的宽度,主要是由一行文字个数和字体尺寸决定的。一行文字过长,视线移动距离长,很难让人注意到段落起点和终点,阅读比较困难,如果一行文字过短,眼睛要不停来回扫视,破坏阅读节奏。


一般来说,14像素的字体网页文本控制在每行35-45个字符,最多不超过70个字符,不要低于25个字符。

 


什么是行间距


行间距是必须搞清楚的一个概念。字符间距指的是两个字之间的距离。行间距并不是指两行之间的空隙,photoshop中是通过字符面板中的选项设置。行间距指的是第一行最下面的线和第二行最下面的线的距离。实际上,行距等于两行之间的间隙加上字高。


rule1.png



如何设置段间距


一般来说,段间距要大于行间距。在photoshop中,一般通过调整段后添加空格。添加段后空格与段间距的关系,涉及到一些运算。


如下,有一篇文章,包含多段,要求把正文设置为16像素,行间距设置为28像素,段间距设置为36像素,那么应该如何设置才能符合要求呢?


rule2.png


x指的是字体的高度,y指的是行间距,28-16=12为行间隙。假如不设置段后添加空白格,则z=12,因此在此基础上要加24像素。假设字体大小为x,行间距为y,那需要段间距空白为z。则设置“段后添加空格”值m=z-(y-x)。


段间距大于行间距,行间距选择1-1.5之间,一般设置为1.5-1.7。段间距达到字高的1.5-2倍。行间距/段落之间的空白=0.75是非常常见的。


处理好段间距和行间距之间的关系,可带来优质的阅读体验。



小作业


掌握photoshop控制行间距与段间距的方法。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

分享到:

目录