《UI设计基础》字体应该这样用（上）

在这一章中，Deen先跟大家聊聊字体的基础应用技巧，即如何在APP设计中恰到好处地应用字体，而更高级的字体造...



在这一章中，Deen先跟大家聊聊字体的基础应用技巧，即如何在APP设计中恰到好处地应用字体，而更高级的字体造型技巧我们会在以后再跟大家分享。

我们平时做设计时都会用到字体。应用字体之前，需要了解字体。

自PC时代开始，中文软件界面设计就仅仅使用单一的字体，这里我们称其为基础字体；后来随着系统规范的发展，每个平台都有了自己字体，但在设计中文界面时，仍然坚持仅使用一种字体。

为什么现在设计APP还是仅使用单一字体呢？这里不得不说一下中文字体的短板。

由于中文字体文件都很大，大约是几MB的大小，在实际应用中，不可能把字体打包进软件，否则APP文件就会变得很大，给用户下载造成困扰，因此这对于每个APP开发团队都是不小的挑战。所以，中文字体在APP设计中相当不利。

这也就解释了为什么你能看到英文APP、软件或者网页有很多很漂亮的英文字体,而中文界面则较为平淡。

各系统基础字体解析

要用好字体，首先要了解这些系统字体的背景。

PC——微软雅黑

雅黑与宋体有着历史的渊源，如果大家一直以来都是PC用户，那么就会对Win XP这个“万年系统”很有感情。虽然后来Windows发展了好几代，如Vista、Win7、Win8甚至现在的Win10，但大家会发现，身边的一些朋友依然在用Win XP。

就是因为Win XP系统的成功，新字体微软雅黑一直难以推广。在早期的软件界面设计中，设计师常常纠结于雅黑和宋体，直到Photoshop CC的出现，这个状况才有所改变。之前的PS版本也是不支持微软雅黑的，所以在2013年之前，设计师们都在痛苦地用着宋体。

但是设计团队的老大们偏偏很重视实际效果，所以设计师为了呈现微软雅黑，不得不牺牲设计效率，先在Word文档中使用雅黑，然后将Word截图再放到设计稿中，这样才能在PS中呈现雅黑字体。

默默地回首过去，现在做设计真的很幸福啊。



iOS——从黑体简到苹方

由于种种原因，Deen接触Mac比较晚，这让我后悔不已。我在此建议设计师尽可能使用Mac做设计。

记得我做的第一个项目是MacQQ，当年已经有retina显示器了，但是还没有普及，做设计的时候Deen就很纠结了。由于Mac字体渲染的原因，黑体简在非retina显示器中的效果很毛躁，但是又不得不用，不然设计稿无法接近真实效果。

所以当时做MacQQ时，字体的选择无非就是冬青黑体简和简黑。设计师为了讲求效果，最后还是选择了冬青黑体简，因为字体清晰的设计稿更容易通过。随着retina显示器的普及，苹果也更新了自己的字体，现在也不用纠结了，直接上苹方字体（PingFang SC）



安卓——思源黑体

安卓系统一直很随意，在2009年Deen刚刚给安卓系统做APP设计时，真的没有要求到系统字体这么细的环节，后面通常用雅黑代替。当时整个行业的APP设计都很不专业，直到Material Design的出现，安卓也意识到系统字体的重要性，所以推出了思源黑体，即Noto Sans S Chinese。那时候Deen也用了一段时间这款字体，觉得挺不错。

在苹方字体还没发布之前，思源黑体是一个很好的选择，因为“简黑”实在太粗了，果断与简黑撇清关系。但是苹果没多久就发布了苹方字体，许多以iOS为导向的设计团队，也马上用起苹方字体，所以思源黑体慢慢也被人们淡忘了。


了解不同平台的字体应用非常重要，这关系到效果图与实际输出是否一致，否则设计稿效果就会打折。

没有按真实效果进行设计的效果图，对于产品的价值就变得很低了，这样的设计也是不规范、不专业的。

业界很奇葩，安卓永远都是老二，大部分设计师包括我自己在做安卓界面时依然选择苹方字体，因为我们都很懒。

字体应用规范

首先要说明一下：字体应用规范是经过团队多次测试总结出来的，每个规范都有团队定义的原因，所以说规范没有对错之分，只要合适就行。

我们团队的APP字体设计规范为36、32、28、24等，以4为一档。标题为36号，内容为32，或二级标题为28辅助文字，辅助文字为24。以上供大家作为一个参考。

APP的字体一直表现良好，这全得益于出色的高精度手机屏幕。


PC软件/Web规范为18、16、14等，以2为一档。PC软件在字体方面表现比较差，这是由微软的cleartype字体渲染引擎决定的。此外，由于PC屏幕分辨率较低，限制字体超过或低于以下尺寸，字体就马上出“问题”，有可能是字体无法阅读，也有可能字体很毛躁，大家可以自己测试一下。所以，PC在字体方面一直没有优秀的表现，直到现在也是如此。


建立字库

之前的文章中讲过，无论什么样设计等级需求，都需要用到字体，特别是A级运营需求，在设计中对字体的需求就更多了，包括对字体的变形和应用。

为此，我们需要建立自己的字库，定期收集一些适用于运营需求的字体。除此之外，还需要对这些字体进行整理。

这里需要提示大家的是，不是收藏的字体越多越好。当我还是新人的时候，曾经一股脑地导入了团队的全部字库，但这不见得能提高工作效率，因为在众多字体里进行筛选也会浪费大量时间。后来，我仅仅把必要的字体收入字库，这样才提高了效率。



这里是Deen的字库，大家可以参考并着手组建自己的字库。

这篇文章可花了Deen不少时间，原因是Deen在写这篇文章时去了一趟成都，品味各种成都小吃和水果，看完这一课，大家饿了么？

一张图完结本周的分享哈哈

    关注 UI功夫