界面设计中的字号选择

时间：2023-10-01 05:54:01 | 来源：网站运营

时间：2023-10-01 05:54:01 来源：网站运营

界面设计中的字号选择：

【摘要】

文字作为UI设计中比重较高的元素，其字号的大小，排布的好坏，直接会影响到设计的布局和内容的展示。不同的平台对字号的选择有所不同，而字号大小的选择，往往是为了内容更清晰，界面信息更有效的展示而服务的。这篇文章，我将以一个从业者设计师的角度，简单的谈谈自己在做界面设计中的一些字号的选择。

【作者】白金

移动端的两种字体单位

在iOS中，字体的官方单位为pt(point)，中文称为逻辑像素单位。在做非Retina屏幕的设计稿时，我们通常在Photoshop中将文档的PPI(分辨率)设置为72，这个时候，1pt(逻辑像素)=1px(物理像素)。如果设计师用的是Sketch，那么其在设计模版内的设计尺寸为375*667，在该尺寸下，1pt=1px依旧成立。需要注意的是，iOS中的pt单位和Photoshop中的pt单位虽然概念相同，但它们并不是同一个东西。Photoshop中的pt单位(点)主要用以映射印刷设备，印刷出来的1pt=1/72inch（inch为英寸，物理尺寸），而iOS中的pt(点)，则是用以映射屏幕。

在Android中，字体的官方单位是sp(scale-independent pixel)，中文称为可缩放像素。在以160PPI(每英寸160点)屏幕为标准的显示屏上显示时，1sp=1px。sp与px的换算公式为sp*PPI/160=px。

iOS和Android平台的默认字体

在iOS中，中文的默认字体为【苹方】，英文的默认字体为【SanFrancisco】

在Android中，中文的默认字体为【思源黑体】，英文的默认字体为【Roboto】

iOS设计规范中的字体大小选择

规范中举例的默认字体为英文San Francisco的情况。作为iOS系统的默认英文字体，官方在其规范组件中对于字体大小有着详细的规定。在官方推荐的默认大尺寸屏幕中，最大的字体大小为34pt，最小的字体大小为11pt。理论上，我们只需要保证在英文设计时，所选用的字体大小在该范围内即可。如下图所示:

首先需要注意的是，这里的字体大小Size(points)是基于@2x倍图，且屏幕的PPI设置为144的情况来输出的。所以如果你在Photoshop中使用时，需要留意自身PPI数值，如果使用的是默认的72，且画板创建为750px宽度时，这里的所有字体大小Size(points)都需要手动乘以2以后才能拿去使用。在Sketch中则可以直接使用。

按照官方提供的英文类型参考，我们大致可以将其分类为三个类别：

①标题类型：包含的字号为34pt、28pt、22pt、20pt

②正文类型：包含的字号为17pt、16pt、15pt

③注释类型：包含的字号为13pt、12pt、11pt


其中，不同的英文字体大小，也有着对应的行高值Leading（points），虽然行高在某些设计软件中不太好去界定（比如Photoshop），但开发中是需要去进行设置的，这也正是为什么我们绘制的设计稿和开发成品在样式上有差异的原因之一。




由于Apple在英文环境下提供了SF Pro多功能字体，因此需要在特定的预定下使用不同的大小，粗细或是样式。在官方的文档案例中，Apple将20pt及以上的字体大小，使用SF Pro Display字体样式，而20pt以下的字体大小，则使用SF Pro Text字体样式。

这一点需要我们在做英文设计的时候着重关注，但总体来说，目的只有一个，那就是当人们从不同的设备，屏幕尺寸和分辨率访问你的网站或者App时，需要保证在任何一块屏幕上，字体粗细适当，有着良好的易读性和可用性。Apple官方提供的7种San Francisco字体，结合设计规范的使用，可以同时满足手机端和iPad端的阅读体验。

中文字体大小的选择

Apple官方并没有为中文苹方字体在设计规范中单独列出推荐的字号大小，一般情况下我们可以直接套用英文San Francisco的大小规范。由于中文字体和英文字体在样式上有着巨大的差异，尤其是某些中文字符的笔画和结构过于复杂，在套用最小字体尺寸时，往往会出现模糊不清，无法辨认的问题。因此，我们也可以适当结合实际情况对最小字号和最大字号的选择做出调整即可。


按照官方提供的英文类型范围参考，结合现实中使用的实际情况，我们大致可以将其分类为三个类别：

①标题类型：包含的字号为28pt、24pt、20pt

②正文类型：包含的字号为18pt、16pt、14pt、13pt

③注释类型：包含的字号为12pt、11pt


同样需要注意的是，这里的字体大小Size(points)同样是基于@2x倍图，且屏幕的PPI设置为144的情况来输出的。因此在Photoshop中使用时，默认为72PPI的情况下，也需要先乘2后才可使用。

这里简单用上图举一个例子，并不需要一板一眼完全按照规范规定的字号大小来使用，只需要在保证整体显示舒适的前提下适当挑选合适的字体范围即可。

Android设计规范中的字体大小选择

Google在Material Design 2设计规范中展示了明确的字符比例指南，这份示例指南基于Roboto字体，且在不同类型的标题和正文下，通过设置字体的字重，大小，间距等，有效展示界面的层次结构。

如表格所示，由左至右侧类型分别为：

①样式：包含了从H1至overline的所有类型，其中HX代表标题，Subtitle代表副标题，Body代表正文，BUTTON代表按钮，Caption代表说明类文字，OVERLINE代表眉题（英文环境下出现）

②字体类型：此处举例字体为Roboto

③字重类型：字体的粗细程度

④字号大小：单位为SP

⑤使用类型：作为句子使用或是全大写使用（英文环境下出现）

⑥字距


由于Android系统的开放性，很多厂商在定制UI时，通常会换掉系统的默认字体。考虑到设计的泛用性，我们仅需要使用Android系统的标准字体来进行设计即可。中文字体使用思源黑体，英文字体使用Roboto。

这里需要注意的是，Android环境下，谷歌按照屏幕类型的不同，指定了多套不同的资源标签，如下图。

密度类型	代表的分辨率（px）	屏幕密度（dpi）	换算（px/dp）
低密度（Idpi）	240X320	120	1dp=0.75px
中密度（mdpi）	320X480	160	1dp=1px
高密度（hdpi）	480X800	240	1dp=1.5px
超高密度（xhdpi）	720X1280	320	1dp=2px
超超高密度（xxhdpi）	1080X1920	480	1dp=3px
超超超高密度（xxxhdpi）	2160X3840	640	1dp=4px

而Photoshop中由于没有sp这个单位来为Android的设计规范服务，因此我们需要根据屏幕密度类型的不同，结合换算关系，得出每个屏幕下对应的字体px大小。

之前的文章已经提到过，在屏幕状态下，dpi可以等同与ppi来理解，那么换算的公式如下：

①找到当前所使用的屏幕大小对应的dpi，例如xxhdpi屏幕，其对应的dpi值为480

②带入计算公式 sp*PPI/160=px 得到结论1px=3sp，再参考官方设计规范表格，例如Body2字号大小为14sp，那换算成为Photoshop中可使用的px单位，及为42px。

为你的设计选择合适的字号大小

规范有了，我们应该如何结合规范建议的字号尺寸，选择合适的字号大小呢？关于这一点，我们需要考虑整个页面中，每一部分文字所代表的含义。

图为小宇宙APP的主界面截图，可以看到，这里不同大小的文字代表了不同的含义。

①最顶部的【发现】表示该页面的主题，因此以最大的字体大小来展示。

②【你的专属推荐】和【编辑精选】属于页面中的主题模块，它们是整个页面的子内容主题，且两者之间处于同一层级

③深黑色部分【Vol.40...】是每一档节目的标题，作为整个界面最终要的元素，因此用深色来展示。但其比重又是在某一个子内容模块之下，所以字体大小相对较小。

包括电台节目标题上的副标题，底部的精选评论等，这里就不做展开说明了。可以看到的是，页面中不同的文字有着不同的字重和大小，这种设计搭配丰富和整个页面的视觉效果，也帮助用户去理解各个内容的层级和重要程度。因此，在设计中，我们需要为不同的位置的字体选择合适的字号大小，以不同的样式来体现我们想要表达的内容。重要元素和关键元素，要么字号偏大，要么颜色偏深。相对而言注释部分就可以用稍小的字号与稍浅的颜色来区分。

以上便是笔者对字号选择的一些理解，规范不是束缚我们的条条框框，而是辅助我们做出更好设计的工具。完全不参考规范或者一味拿规范来约束自己都是不合适的，文中所提内容或许会因为规范的更新而变得过时，届时再做更新，希望可以帮助到各位读者。

---

欢迎关注技术团队的本站账号我们凭团队实例运作以下专栏， 必须干货！

互联网创业专栏 (我们小伙伴的创业历程)

与您一起聊技术 (APP、微信公众号、小程序、H5 技术总结)

互联网产品研发管理 (我们公司对产品结构的管理思路)

产品君的案例库（产品小伙伴深刻总结）