提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
我们在做APP的时候一定会涉及到文字的排版问题。一个app的细节是否足够,在文字排版上显得尤为重要,今天我们就来说说文字的行高我们平时忽视的细节问题。
1.行高所对应字号倍数
2.密集文字行高的设定
3.多行文字与其他元素的间距差。
4.单行文字行高的设置
5.文字与数字
行间距与字号的对应
1.首先我们说说行间距与文字字号的对应我们可以对比一下。三个图(如下图)。第一个文字的行高是文字字号的1.2倍,第二个图是文字的行高是字号的1.3倍。第三个行高是文字的1.4倍。从图上,我们可以看出1.2倍的中文字间距显得有些拥挤,1.3倍看着视觉上比较正常,1.4倍间距比1.3倍有些偏大一点,但是视觉上看着也是没有问题的,也比较舒服,所以对我们来说,1.3倍和1.4倍的行高都是很舒服的视觉范围内。那么这种间距一般用到哪里呢?例如,动态、评论、或者消息等页面,这种文字间距行数一般都不是很多,这里需要注意一个点,如果文字的字号乘以相应的倍数计算出现小数点,那我们行高就要四舍五入取整数。(例:32号字,行高用的是1.3倍,32x1.3=41.6这里我们行高可以用42px)
密集文字行高的设定
2.上面我们说的文字间距为1.3倍适合用于行数很少的文本,但是如果对于那种文字比较多或者图文编辑类或者写文章类型的产品,1.3倍的行高,就显得阅读性和视觉感就不是很舒服,这里呢,把我自己总结的一个规律告诉大家,我竞品了20个一些主流的图文编辑软件和文章类型的软件,我发现,大部分这种文章类型的APP基本上用到了1.6倍和1.7倍的行高,我们可以从下面的文章间距中看出来1.3倍的行高在这种文字排版的场景中已经不能满足我们阅读浏览了,1.8倍呢,就显得有些空旷一些,所以最佳视觉建议设置为1.6倍或者1.7倍的行高,(我个人而言,比较常用的是1.7倍的)
多行文字与其他元素的间距差
3.当我们设置了行高的时候,第一行文本起始文本和最后一行结束的文本本事自带了行高,那么如果我们要设置我们设置的文本行高对于y轴的元素,是有一定影响的。比如说(如下图)我们文本是42px那么我们的行高就是56,我们如果想设置距离上方图片间距为30px,但是我们的文本是带着间距的。
所以我们可以用下面的计算方法算下(如下图),用行高减去文字大小得出的是文本上下的间距,再除以2就可以得出上面间距,最后用总高度减去上面间距就得出了实际的高度,最后我们四舍五入得到了24px。
单行文字行高的设置
4.单行文本的行高设置,比如:标题文字、昵称文字等这种文本可能只显示一行,所以行高得和文本的高度一致,(如下图)图中的昵称文字行高设置的和昵称高度是一样的,这样的话会使我们在做图的时候才会更方便,要不然我们导处规范的时候,文字都是自带间距的,有可能才不会出现间距差。或者其他的问题。
文字与数字
5.我们都知道中国的汉字和阿拉伯数字是有大小区别的,正常情况下数字比汉子小2Px左右,那么我们在做设计稿时候就像关注数量或者金额等地方的数字显示,就要比规范上的字号大两号,这样看来的整体视觉才会保持统一性。
总结
问题源于对细节的发现,成败取决于对细节的把控。在手机方寸之间能够设计的精致简洁,还需要多探究最基础的细节问题。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册