首页分享 UI设计中关于字体规范

UI设计中关于字体规范

来源：花匠小妙招时间：2024-11-13 13:47

字体的基本规范

APP 中图形、色彩、字体是信息传达的三要素，所以 APP 中字体也是非常重要的一项，可以很直观地调节设计风格。

1 衬线体和无衬线体

Image title

字体分为两大族，，即衬线体和无衬线体。衬线指的是字母结构笔画之外的装饰性笔画。有衬线的字体叫衬线体；没有衬线的字体，则叫做无衬线字体。比如黑体就是无衬线体，宋体是有衬线体。早期互联网阶段显示屏效果较差，分辨率低，屏幕颜色较少，而汉字笔画较多，黑体小字体的清晰度较差，所以有衬线体在互联网中一直处于霸主地位。直到后面屏幕显示效果改善，黑体才慢慢流行起来，比如几大互联网巨头微软雅黑及苹果在此之后分别花重金打造了微软雅黑及苹方，由此见得，在将来界面设计中，字体样式还是会以无衬线体为主，甚至可能会更进一步简化字体的形状。

衬线体在笔画始末的地方有额外的装饰，且笔画的粗细会因直横的不同有所区别，可以强调出字母笔画的走势及前后联系，使得前后文有更好的连续性，所以更适合做大面积阅读性的文字，即为正文字体。而无衬线字体笔画粗细基本一致，强调的是单个字母或者文字，容易造成字母辨识的困扰，常会有来回重读及上下行错乱的情形，所以无衬线体适合用于标题之类需要醒目且不被长时间阅读的地方。

2 Android & iOS 内置字体

如果 APP 最终显示的字体默认调用系统内置字体，那么设计稿中使用其他字体是毫无意义的，所以我们需要了解系统内置字体都有哪些。

为了更好的追求视觉效果，提高用户体验，Google 联合了Adobe设计发布了思源黑体(Noto)来作为中文字体。该字体字形较为平稳，利于阅读，且有个7个不同的字重，充分满足了不同场景下的设计需求，7个字重分别为：Thin、 Light、DemiLight、Regular、Medium、Bold 和 Black。而英文，则使用Robot来作为基础字体，只有6个字重：分别为Thin、Light、Regular、Medium、Bold 和 Black，视觉语言与思源黑体Noto保持一致。

Image title

iOS 系统中中文采用的是“苹方”，字形纤细中宫饱满，利于阅读。英文方面，则使用了San Francisco 的字体，除了在iOS和Mac OS上，还单独为Watch OS单独对字体进行了调整，命名为 San Francisco Compact。

Image title

通过对比发现，其实Android与iOS字体字形方面差异化明显不大，不用特意下载所有字体进行单独配置。日常工作中，我们只需要按照一套标准的iOS设计稿输出即可，在Android方面进行自动延展，最后走查确认一下效果即可。如果涉及到使用除Regular标准体之外的字体，那么除了颜色，还应当标注相应的字重字高等信息，(如Font：Pingfang SC-Semibold，line:52px) 而不应当只标注一个加粗或者加细。当然如果人力允许的情况下，我们也可以单独为Android做一套界面及字体适配，提高Android端的视觉显示效果。

3 字体字号

导航主标题字号：34/36px。

苹果默认标题字号为34px，而有些软件也会用到36px，更加强页面位置关系。比如微信导航标题字号36px，导航字体醒目易于对应页面位置。

正文字号32px-34px

副文是28px-24px

最小字号不低于20px

字在正文字号使用中，阅读类的APP更注重文本的阅读便捷性

正文字号34px，会选择性的选用苹方粗体

最后，互联网在进步，设计趋势也有不同的形式，字体作为 UI 设计的基础，是设计师需要掌握的必备技能。另外在工作中也需要不断积累总结，对关键信息进行沉淀，可以帮助自己更快地成长。