Zan Design 字体系统最佳实践

杭州/设计爱好者/6年前/4154浏览

版权

Zan Design 字体系统最佳实践

在2018年，所有的有赞产品的主字号都是12px，这是有赞产品设计在最初的时候定下的一个主字号。当然我们一定相信，在当时他一定是最合适的。不过，随着有赞商家数量和类型不断增加，市面屏幕分辨率的改变，商家主流使用分辨率机型的变化以及我们不断收到的回馈，其实都警示着我们需要正视主字号了。

当然，我们不仅仅需要调整主字号，在Zan Design 1.0 当中，我们需要从字体出发，去重新梳理我们的字体家族、主字体、字阶、行高、字重、间距等。通过学习和研究，分享一下Zan Design是如何完成阶段性的字体最佳实践的搭建和持续迭代的。

1.字体的基础信息

1.1 我们应该使用多大的主字号？

在主字号的探讨上，Zan Design 主要从三个方面进行了探索

一、巨人的肩膀

二、来源于数据

三、商家的调研

1.1.1 巨人的肩膀

Ant Design 3.0 的时候，对主字号进行了研究，通过了公式的运算，将主字号设定为14px。具体推演过程可查看Ant Desgin官网和知乎专栏。

1.1.2 来源于数据

随着科技发展，电脑分辨率不断提升已成为一个必然的趋势。同时，通过有赞技术后台反馈的数据，我们拉出了屏幕分辨率top10，可以看到超过7成的有赞商家使用的分辨率是1440px以上的。因此我们在主流的屏幕分辨率1920*1080、1366*768和1440*900中进行尝试，14px的阅读比12px是更舒适且浏览清晰的。同样我们尝试了16px和18px，在信息表达上是过大的，特别是在表格中，信息表现力变得很弱，信息承载变得非常少。

1.1.3 商家的调研

Zan Desgin 作为服务于企业级产品的设计语言，我们希望帮助每一位注重产品和服务的商家成功，因此每一位注重产品和服务的商家都是我们非常重要的用户。商家并不会直接告诉我们，“你们后台的字太小了，可以更换字号么？”，他们只会通过我们的反馈途径告诉我们，后台看起来太费劲了！这字儿也太小了看得我眼睛疼！看到密密麻麻的字我填商品信息填的我脑壳儿疼！

我们通过客满、客户经理和商家访谈，了解到了这些诉求，也随时警醒着自己，请快速的改变这个现状吧。

综上，我们决定将在后台使用了5年之久的12px主字号全面升级到14px，这一步对于其他人来说，是难以接受的，外界不断发来为什么要改？这也太大了？那表格里的那些溢出信息我们应该如何处理？这些质疑的声音一度让我也怀疑了自己，我们真的有必要“冒天下之大不韪”吗？但是，再后来，我们的实践应用告诉我们，14px真的是太完美了，随着应用，一切的质疑消失匿迹。这也告诉我们，请坚持自己坚信的，他会带来美好。

1.2 如何设定字阶？

我们确定了Zan Desgin 的主字号为14px，接下来我们需要去计算具有节奏感的的字阶用来区分界面上的信息层级。我们在原设计规范的（12、14、16、18、20、24、26）上出发，思考我们应该如何去升级他而不是推翻他，我们希望是一个简单的公式就可以满足我们大部分的使用场景。

得出公式AN=14+(n-1)n，我们将n规定为正整数，当n=1时，是我们的主字号14p。同时保留了12px作为辅助字阶。

此时，我们将正整数带入n中，会得出一串字阶，和我们之前的相比，字阶更加明确了。不会存在设计师疑惑到底是是使用22还是24？24还是26？在界面中的信息层级也会更加明确。

1.3 最容易被忽略的字高？

经验来说，字高是最容易被忽略的一个数值，在和技术配合开发的时候，设计师常常忽略字高导致整体设计稿还原度低。而且字高不一致，在同一款产品当中会导致每个界面的节奏是有不同的。在设计中一般舒服的字高会在1.2-2倍之间，1.2倍的字高常常用于西文字体。相比之下，中文笔画更多，更方正，视觉面积也占更多。我们将1.2-2倍的字高分别放置于黄金分割线的两个顶点，可以看到黄金点上的倍数上是1.62。

这时候我们开始去实验，发现1.62倍字高的表现更适合杂志物料，因为WEB上3行以内的场景更多，因此我们会将这个平衡点左移调整为1.5倍。

基于向上和向下的考虑，如果无差别的使用1.5倍会导致特大字号难以使用，中段字号节奏感弱。我们采用了分段字高的做法，将字号为20和30和40作为分界点，分别采用1.5倍字高、1.4倍字高和1.3倍字高。并且手动调整为偶数。到这里，我们的主字号、字阶和字高都得出了。我们的行高会根据我们的栅格来得出，会在另外的篇章分享。

最新的字体家族为，font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', STHeiti,SimSun,sans-serif

到这里，可以看一下 Zan Design 3.0 的字体系列，套入了字阶和字高，行间距等间距的情况下，整体节奏感是非常优雅的。

1.4 优雅的字重是什么？

如果说字体是有性格的，那字重绝对是决定性格强烈的一个元素。我们在 Zan Design 中使用 Medium 作为标题，来突出层级关系。相比较与 Semibold，Medium 的兼容性会更强，在PC中的表现也可以显得很优雅。正文和辅助字号建议使用 Regular，当需要强调的时候，可以使用双视觉处理法来突出。除此之外，需要考虑到西文字体面积本身较小，建议使用 Semibold，使中西文混排的时候更加适合。

2.字体系统的搭建

2.1 我应该怎么管理我的字体？

众所周知的，字体的随机组合实在太多了，设计师没办法快速正确的记住所有的组合数字，但是我们又必须给到前端有正确参数的设计稿。也就是说我现在已经拥有了一个全新的优雅的字体信息，我们也提升了不同设计师在使用这些基础信息组合成页面时的一致性，并且由于每一个信息都准确以及明确，也提升了设计师的选择字体信息的效率。

那么，我们应该如何高效的管理我的字体，让不同的设计师高效的使用并且体验技术小组可以高效的迭代和同步呢？

在 Sketch 中，我们可以将所有组合制作 Font Pattern 文本样式，并且进行有效的分类。在 Zan Design 中，我们除了考虑界面场景之外，还会考虑商家的使用场景（PC、Pad、Moblie），因此我们需要去组合的所有参数有，1端口场景、2字号、3字高、4字重、5对齐方式、6颜色，六种参数进行排列组合。计算出，PC一共630个样式、Moblie一共990个样式、Pad一共1053个样式，合计2673个样式。

2.2 制作字体系统的第一步，名字排个序吧？

我们在最开始的时候计算出，我们需要排列2673个样式，并且还极有可能随着品牌的增多，加入更多的文本样式。那么我们应该如何通过命名来管理我们的字体系统查询、管理和拓展我们的分类呢？

我们通过场景法来探索，假如我现在是一个设计师（🤔好像我本来就是一个设计师），我拿到一个需求会去怎么思考我的字体呢。

第一步，我这个做的是哪个端的产品？PC？Pad？还是Moblie？

第二步，这个地方我应该用正文的字号吧，什么？字高？他不是应该自动出现吗？

第三步，我不需要加粗吧？

第四步，大部分情况下都是左对齐的？

第五步，这个地方是警示作用的，我用个警示色好吧？

所以，就有了我们的排序。

端口＞字号字高＞字重＞对齐方式＞颜色，因为需要有秩序的排序，所以需要在前面加上数字编码。

2.3 详细制作顺序

2.3.1 第一步，确认你所需要的颜色

这里你需要整理出所有的字体颜色，并且罗列出来。包括了产品主色、功能色和中性色。Zan Design 中，专门研究了一套优雅的色板，或许在后面的篇章中可以分享给大家，在这里，先贴出来给大家参考。

2.3.2 第二步，按照确认好的名字排序，罗列出所有单列样式

2.3.3 第三步，完整对齐方式（左、中、右）和字重（R、M、S）和全部样式

将同一个颜色里的所有样式完整，并且排列好。这里的排列方式我们根据自己的属性优化了 Ant Design 的方式，将同一个端的放在了一起。同一个颜色里的样式全部都罗列完整之后，然后再复制更换颜色。

小技巧：在制作不同对齐方式、字重和颜色的时候。因为都是更换某一个参数的样式。这里可以使 Sketch 插件——Find and Replace，选中需要更换的所有样式，在 Find 里输入“查找的元素”，在 Replace with 里输入“替换的元素”。比如我要把居左对齐改成居中对齐，那么在Fine里输入“01_Left”，在Replace with 里输入“03_Right”即可。别忘记在“TEXT”选项里，更新真正的参数哦。更换其他元素同理。

复制的时候，为了规范命名，可以在设置-图层-复制中，勾选掉“偏移复制的图层”选项，就可以避免复制图层的时候出现“xxxxcopy”的属性。

罗列完一个样式之后，你将得到【图1】的进度了；新增完颜色样式之后，你将得到【图2】的进度；全部都罗列完之后，你将得到【图3】的进度。

2.3.4 第四步，按照规则给文本图层正确命名

因为刚才图层都是复制的，“文本图层命名”和“样式展示命名”是会存在不一样，这两个字段的参数必须保持一致，才可以保证在生成文本样式的时候可以按照我们设计好的规则有序的展示。

给文本图层正确命名主要有两种方法，方法一是使用 Sketch 插件 Reanme it，选择之后利用表达式去重命名，但是这种办法比较麻烦。因为我们在做“样式展示命名”的时候打下的基础很好，所以在调整“文本图层命名”的时候，我们会非常方便，可以用 Sketch 插件 Update Text Layer Names 来更新，插件没有界面，选中所有文本图层，点击插件即使用，非常方便。

2.3.5 第五步，生成文本样式库

到这里，万事俱备，所有的准备工作都完成了。只需要生成文本样式库就好，在 Sketch 当中只支持手动单个添加文本样式，“Create new Text Style”，我们一共2673个样式，是不可能一一添加的。因此，我们可以使用 Sketch 插件 Styles Generator ，选中所有文本样式图层，点击插件运行，此插件同样没有任何界面，运行后会出现成功添加的提示表示成功。

成功后，可以在本地检查是否可正常使用，测试成功后可以共享给团队的伙伴，共享的方式呢有企业自己的空间、网盘共享、语雀、蓝湖等等方式。

小技巧，因为所有参数中，字号是最频繁使用的，Sketch 中有一个属性会自动调取第一个属性展开作为默认项去更换。

2.3.6 第六步，使用文本样式库

和团队的小伙伴共享了文本样式库后，该如何使用呢？有几个小技巧分享给大家。第一种，可以直接在文本样式中选择层级使用。第二种，因为 Sketch 中选中第一个层级之后，接下去的层级都会默认选择最顶端的参数。因此我们都把最常用的参数放在了最顶端依次是字重Regular-对齐方式Left-颜色N8

每次选择的时候可以很方便的选择一次即可。第三种，可以使用 Sketch 插件 Run ，调整到 apply 标签，在输入框内输入每一层级的首字母即可快速复用选中的文本样式。插件 Run 还可以记忆最后一次的选择，如果是重复的使用某一个样式，可以直接选择 Run last action。

3.字体系统的修改

我们参考了原子理论来搭建字体系统很重要的一个原因就是因为他可以拥有很强的持续拓展性，不是一个一次性静态的系统，而是一个可以被不断的迭代的系统。恰恰是因为这些属性，我们才可以更好的在业务场景中使用 Zan Design 字体系统。

因此，所有涉及到的参数都应该可以被增删改查。这一块首先是修改，颜色、字体、字号、字阶、字重、文本样式图层命名、样式展示命名都应该可以被高效的修改。

3.1 如何修改文本样式库的颜色？

修改文本样式库的颜色是比较简单的，概括来讲就是。先选中最小单元组，最小单元组包含同一个颜色下完整的样式。然后在取色器上修改颜色，修改完之后记得要同步样式。这样就更新成功了。可以到文本样式库中检查一下，是否更新了样式。

3.2 如何修改文本样式库的字体？

通常情况下，修改文本样式是一个非常低频的动作，因为不太建议去频繁修改字体。在修改字体的方法上和颜色一样，不做赘述。

3.3 如何修改文本样式库的字阶和字重？

这里的情况下呢，指的是在不改变文本样式图层命名和样式展示命名的情况下，我们只是去修改文本样式的字阶和字重的参数。这里分享两种方法，

第一种，点击 Sketch 左下角的筛选输入框，输入想要替换的字节阶/字重，我想要把 H52 变成 H54 ，那么我输入 H52 然后回车，这时候含有 H52 的所有样式都会被选中。紧接着我在右边 TEXT 栏上修改想要的参数，在点击更新到字体样式库就成功了。

第二种，选择 Sketch 插件 Automate 里的文本-Relace Fonts，选中你想要替换的字重，然后在第二个输入框输入对应想要更换字重的名字即可。一样的是，更改完之后记得要更新到字体样式库。

但是这两种办法，仅针对于我不改变文本样式图层命名和样式展示命名的前提下。

3.4 如何统一文本样式库的文本样式图层命名和样式展示命名？以及同步展示到文本样式库中。

刚才有提到，如果只是修改参数其实非常简单，改完更新就可以了。但是如果涉及到我修改命名呢？在文本样式库中，如果想要达到所见即所得，需要去同时更新文本样式图层命名和样式展示命名两个命名，这样才可以达到可以使用的程度。

从两个方面来说吧。第一是修改样式展示命名，其实只要把看到的文本修改成你想要的就可以了，或者利用插件 Find and Replace 去修改想要修改的参数，紧接着利用 Update Text Layer Name 去更行命名，修改完即可，非常简单。第二呢，是修改文本样式图层命名，这个命名呢是代表着该文本样式在样式库里的名字，如果想要批量更正，可以使用 Sketch 插件 Style Master 中的 Rename Text Styles 利用正则表达式去批量修改与更正内容。

我们举个例子，我想要将“01_YZPC”修改成“01_YouzanPC”，我应该如何去操作呢？

首先我们打开插件，先看下界面上都有什么。

首先，前几步都非常熟悉了，我们快速过一次。

第一，先选中所有样式，用 Find and Relace 插件，将“01_YZPC”修改成“01_YouzanPC”；

第二，用 Update Text Layer 插件，更新图层命名；

第三，选中所有样式，用 Style Mater 正则表达式替换修改的元素命名。

然后第三步，我们展开来说，

可以在输入框中分别输入以下表达式，需要修改的字段输入修改前和修改后，如果不用修改的查找项用（.*？）表示，并用“/”隔开；如果不用修改的替换项用$1隔开，需要注意的是不同项要有不同的序列0~n。

查找：01_YZPC/(.*?)/(.*?)/(.*?)/(.*?)

替换：01_YouzanPC/$1/$2/$3/$4

在查找字段当中，可以根据自己对大小写的要求，勾选选项。输入时，右边的框中会自动校验显示匹配样式。通过勾选“正则表达式”，可以查找范围内指定的有效的JavaScript正则表达式，而且在替换的时候会在 Before 和 After 区域显示前后的状态。通过正则表达式的替换，可以大幅度提升效率。如果正则表达式无效，会直接显示红色。

4.字体系统的新增

4.1 直接复制一个最小文本样式单元新增

对于字体系统来说，新增可能是阶段性会出现的一个动作。比如随着业务的变化，业务场景的新增，业务品牌的新增。这时候就会去做这个新增的动作。

如果你复制的是一个

第一步，如果我想新增一个颜色，复制一个完整的最小单元组；

第二步，使用插件 Find and Replace 更新新的颜色字段，并修改颜色属性；

第四步，使用插件 Update Text Layer 更新图层命名；

第五步，使用 Style Master 正则表达式修改文本样式图层命名；

当然，这个方法好像看上去有些复杂，还要去计算表达式。

4.2 新建一个非文本样式单元新增

这个方法相对比较简单。

第一步，复制一个完整的最小单元组，并且从文本样式中接触；

第二步，更换颜色，使用插件 Find and Replace 更新新的颜色字段；

第三步，使用插件 Update Text Layer 更新图层命名；

第四步，使用 Style Generator 生成样式；

第五步，更新成功🎉。

5.字体系统的删除

到目前为止，并没有发现一个很好的方法去统一删除文本样式库里的某一个或者某一些样式，目前还是使用 Sketch 自带的删除。我们可以点开文本样式里的 Organize Text Styles ，在文本样式的tab下，通过滚动的方式找到自己想要删除的最小单元，多个一起选中，点击左下角的“-”按钮，最后点击“完成”。就完成了一次文本样式的删除了。