当前位置: 首页 >文章 > 关于界面的字号设置秘诀
收藏
分享

关于界面的字号设置秘诀

举报酸梅干超人酸梅干超人发布于 2018-08-282845阅读12点赞1评论
多做针对性练习,以提升对控件和文字的掌握熟练度是很有必要的。建议多做一些简单界面的临摹,并套用前面提到的元素尺寸,这样很快就能适应这种高效规范的方式了。...

本章就要开始介绍前面没有说的文字了,文字的尺寸至关重要,但先理解了控件再

思考文字,会更容易一些,它们之间也有一些有趣的联系。

而在对控件和文字都掌握熟练以后,才能进入后面的组件设计认识。

首先我们知道,安卓和 iOS 应用的中英文字体各不相同,苹果是用苹方和 San Fra

ncisco,安卓使用思源黑体和 Robot。

如果没有同学可以在我公众号回复“字体”下载对应的字体源文件。

在后面我们主要以 iOS 作为说明的对象,安卓可以直接参照它的字体尺寸设置。


英文的字号

在苹果的官方建议中,有罗列比较完整的文字字号建议,但大家一定要谨记,那些就是

建议,并不需要在非官方的组件中应用那些字号。下图是苹果默认字体尺寸,详见我们

翻译的 iOS 规范第 124 页。

iOS 12 设计规范——iOS 中文规范更新啦!

首先我们要先划分出一个文字字号的范围,之后所有字体的字号设置就在那里面挑选。

在 UI 中,最小字号的依据一般有两个,一个是人眼的可见度,另一个是屏幕的显示极

限,最小的字号应该在 9pt 。而最大的字号,以 iOS11 的标题字号 34pt 为准即可。

从 9-34,理论上其中每一个整数都可以使用,但我还是建议要应用一定的习惯。下面,

就是我在英文应用设计中会使用的字体字号列表,为了便于记忆,我就只拆分成三种类

型,初学者在使用时直接照搬就可以。

  • 标题:34、28、24、22、20

  • 阅读:18、16、14、12

  • 注释:11、10、9


在英文应用中,我们应用的字号大小随项目复杂度决定,通常,尺寸会在五种以上,两

种标题、两种阅读、一种注释类字号,当然,我们还会通过字重和色彩进一步划分,不

过那不在这里的讨论范围中。例如下面我使用五种字号尺寸设计出来的原型案例:

在 iOS 中,尺寸小于 20pt 使用 SF Pro Text,大于等于 20pt 时则使用 SF Pro Display

 字体,这点大家需要牢记。

数字字体可以等同于英文,但如果有需要展示数据的需求,那么最大尺寸就要靠自己的

判断了。


中文字体


中文字体和英文字体的最大差异在于笔画数,很多中文的笔画和结构都异常复杂,如

 “嚷”、“饕”、“餐”等,所以,最小的尺寸不可能和英文相等。建议最小中文字号使用 11

pt。

至于最大的中文,因为苹方并没有 SF pro 字体那么丰富的字重,字号过大会有正负形

失衡的违和感,所以,最大字号的尺寸也应比英文小。

下面是我在中文应用中建议使用的字号:

  • 标题:28、24、22、20

  • 正文:18、16、14

  • 注释:12、11


前面做过的原型,应用的就是这些字号。

中文的字号选择范围是比英文小的,并且,英文字重数远少于英文,我们在做中文的

应用排版远远比英文应用容易。很多新手天真的以为英文更容易设计,那都是源自对

英文的陌生,只是将字符纯粹的当成有节奏变化的几何形状而不是用来阅读的文本。


文字的边距

前面讲完了字号的选择范围,这里我们就要再来讨论一个问题,就是如何选择。

首先,合理的字号应用是要和环境息息相关的,而这种联系最多体现在文本区域的边

距上。能被合理阅读的文本段落,是需要留白的,过于拥挤的文字排列只会造成阅读

的不适。

因为前面我们已经说过控件的尺寸如何设置,所以当我们在设置文字时,很多时候是

根据控件定义的高度结合边距来选择文字的字号,下面通过一些控件来举例。

例如我们定义了一个 40pt 高的按钮,在设置文字时,尝试将多种文字字号置入,过多

的间距和过小的间距都会让按钮看起来不精致。合适的字体大小应该是 16pt。

而如果设置了一个 24pt 按钮,那么得到的结论应该是 12pt。

输入框的文字应用和按钮相同,也以上下间距作为主要参考。

字号的选择,除了本身定位(如标题或正文)以外,是可以通过比较的方式得出最优

结果的。只要稍微花一点点时间,像上方案例演示的一样将设计元素复制排列出来,

就可以很快选出正确的数值。

最后,前面说到的关于文字字号的设定,结合控件的规范,就能在下一节中决定组件

的设计尺寸,缺一不可。

多做针对性练习,以提升对控件和文字的掌握熟练度是很有必要的。建议多做一些简

单界面的临摹,并套用前面提到的元素尺寸,这样很快就能适应这种高效规范的方式

了。


————      END      ————


1条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,637人)

电商海报设计训练营
距离开班仅剩9天66人已报名
【5月】零基础手绘插画训练营
距离开班仅剩9天54人已报名
【5月】零基础动态表情包创作训练营
距离开班仅剩26天15人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了27,078
并提交了210份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证