恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
APP中的行高,你做对了吗?
0.0°
2018-04-07 原创文章 经验/观点 举报 9038 49 64 1



我们在做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)

Image title


密集文字行高的设定

2.上面我们说的文字间距为1.3倍适合用于行数很少的文本,但是如果对于那种文字比较多或者图文编辑类或者写文章类型的产品,1.3倍的行高,就显得阅读性和视觉感就不是很舒服,这里呢,把我自己总结的一个规律告诉大家,我竞品了20个一些主流的图文编辑软件和文章类型的软件,我发现,大部分这种文章类型的APP基本上用到了1.6倍和1.7倍的行高,我们可以从下面的文章间距中看出来1.3倍的行高在这种文字排版的场景中已经不能满足我们阅读浏览了,1.8倍呢,就显得有些空旷一些,所以最佳视觉建议设置为1.6倍或者1.7倍的行高,(我个人而言,比较常用的是1.7倍的)

Image title


多行文字与其他元素的间距差

3.当我们设置了行高的时候,第一行文本起始文本和最后一行结束的文本本事自带了行高,那么如果我们要设置我们设置的文本行高对于y轴的元素,是有一定影响的。比如说(如下图)我们文本是42px那么我们的行高就是56,我们如果想设置距离上方图片间距为30px,但是我们的文本是带着间距的。

Image title

所以我们可以用下面的计算方法算下(如下图),用行高减去文字大小得出的是文本上下的间距,再除以2就可以得出上面间距,最后用总高度减去上面间距就得出了实际的高度,最后我们四舍五入得到了24px。

Image title


单行文字行高的设置

4.单行文本的行高设置,比如:标题文字、昵称文字等这种文本可能只显示一行,所以行高得和文本的高度一致,(如下图)图中的昵称文字行高设置的和昵称高度是一样的,这样的话会使我们在做图的时候才会更方便,要不然我们导处规范的时候,文字都是自带间距的,有可能才不会出现间距差。或者其他的问题。

Image title


文字与数字

5.我们都知道中国的汉字和阿拉伯数字是有大小区别的,正常情况下数字比汉子小2Px左右,那么我们在做设计稿时候就像关注数量或者金额等地方的数字显示,就要比规范上的字号大两号,这样看来的整体视觉才会保持统一性。


总结

问题源于对细节的发现,成败取决于对细节的把控。在手机方寸之间能够设计的精致简洁,还需要多探究最基础的细节问题。Image title

更新:2018-04-07

收藏

49人已收藏

设计爱打野

仰望星空,脚踏实地,在方寸之间留下自己的足迹

  • 4

    作品

  • 14

    粉丝

  • 95

    关注

  • 网页项目设计
  • 动效落地之LOTTIE动画
  • APP预览图,你可能没有注意的细节

    猜你喜欢

      2018-04-07 原创文章 经验/观点 举报 9038 49 64 1

      APP中的行高,你做对了吗?

      0.0°

      你确定要举报APP中的行高,你做对了吗?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年04月05日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      64
      49
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录