超全面总结!「完美」的字体系统搭建与维护指南 - 优设网 - UISDC

超全面总结!「完美」的字体系统搭建与维护指南

2018/02/24 7947评论区

在设计系统中字体的重要性不用再多说,这篇文章主要和大家聊聊设计系统中「完美」的字体系统是如何搭建与维护的。本字体系统的定义大量参考了 Ant Design 的定义过程与设计成果,在此由衷表示感谢。

Ant Design 链接:Ant Design – An UI Design Language

先来简单看看设计说明:

基本上是使用 Ant Design 的字号、字阶和字重,然后重新选择了字体颜色。

众所周知,在 Sketch 中如果想要做到字体样式的复用,那么必须采用字体共享样式。而为了保持字体系统的可用性,维护组件与设计的可用性,必须确保字体样式能够覆盖所有的使用场景,这样才能够使得每次使用的字体都与共享样式关联上。

将所有字体可能使用的四个参数(字号、字重、对齐方式、颜色)进行排列组合,将获得 7 * 3 * 3 * ( 2 * 4 +2 * 3 + 2 ) = 1008 种样式。

如下图所示:

那 1008 种样式如何有效组织,如何合理地管理?接下来将会为你揭晓答案。

样式命名

如果上千个字体样式不进行组织规范,在落地使用时会是一个灾难。因此需要对字体样式的命名进行合理规范,保证现有 1008 个样式能够被轻松使用,并使其具有良好的修改能力与扩展能力。

经过一番探索后,我从字阶、字重、对齐方式、字体颜色、字体类型五个参数组织字体样式的命名。命名的次序如下:

字阶、字重与对齐方式是任何字体系统中通用的参数,从可用性角度考虑,将字阶作为第一位参数,字重作为第二位参数,对齐方式作为第三位参数。

因为不同的字体系统将会具有不同的颜色,从可扩展性角度考虑,将颜色作为最后一位。

字体类型实际上是通过不同颜色来区分正文、标题或者提示,因此将其作为颜色的子级,作为可选项。

同时为了保证字阶、颜色、字体类型的次序与我们预期设定的顺序保持一致,分别为每个参数添加前置序号。

样式使用

虽然通过 5 个层级的规划有效保证了字体系统的组织,但是 5 个层级的深度将会使得样式的选择非常不便。

针对这个问题,目前有两个方面的解决方案。在选择样式方面,利用 Sketch Runner 的 Apply 功能可以快速选择样式。

快捷键 ⌘ + ‘ 打开 Sketch Runner, apply 部分可以直接对选中图层赋予样式。

输入每个层级的首字母(大小写均可),将快速筛选出对应的样式。按下回车即可应用样式。

温馨提示:在 Sketch Runner 中将 Always open with 的选项改为 Last ,每次开启 Runner 将会维持上一次使用的标签。这样便于多次的样式修改。

另一方面,在 Sketch 中任意一个层级的样式都是可以直接选择,Sketch 将默认采用后续层级中的第一个样式。因此通过重命名把默认最常用的「左对齐」、「黑色」与「Primary 类型」的样式置于顶端。后续使用时可直接点击第一层级的字体样式。

样式修改

一个设计系统的难能可贵之处在于它的扩展性、修改能力。如果整个系统没有办法很好的响应使用者的需求,根据使用者的需求进行自定义,那么随着时间的流逝和需求的增多,这个设计系统就会逐渐失去使用价值。

因此在一个字体系统中,如何高效的修改字体样式,将会是一个非常重要的部分。这里的使用指南,它将赋能设计师更高效更轻松地支撑更多的业务场景。

字体与颜色

在本字体系统中颜色与字体是最容易修改的部分。需要修改所有的基准字体,只需要全选「字体接口」画板中的所有内容,修改字体点击同步样式即可,字重会保持不变。

颜色修改也是类似,全选对应颜色的字体单元,修改颜色,点击样式的同步按钮即可。

注:字体单元指代一组包含完整字阶与对齐样式的字体布局,为下图蓝色矩形框所示。

字体类型

理论上文字类型的修改和颜色的修改应该一致,但是文字类型是不透明度的不同,如果直接修改 HEX 或 RGB,往往会把不透明度覆盖掉。一种做法是「查找/替换颜色」。( sketch 48 的特性)利用该功能可以轻松替换颜色,且不影响不透明度。但是这个功能会全局替换,可能会影响不需要替换的颜色,所以并不推荐。目前仍然采用一组一组手动替换的方式。

字阶、字重

通过「图层筛选」功能筛选字阶或字重。选中后修改对应的字阶或者字重,点击同步。要修改几处,就重复该操作几次。或者使用 Automate 插件的 Replace Font 功能。

样式名称修改

或许有时候字体系统样式的名称需要根据业务场景进行修改,那么这个时候可以利用 Sketch Master 插件进行批量修改。利用正则表达式的强大功能,甚至可完全重新设计命名层次结构。

例如需要将对齐方式与字重组合到一个单独的级别。将 01 – Body /01 – Regular /01 – Left /01 – Black /xxx 替换成 01 – Body /01 – Regular / Left – Black /xxx。如果手动替换,这肯定会是一个让人掉头发的事情。

而利用正则表达式,只需查找 ^(.*?)/(.*?)/(.*?)/\d+\s-\s(.*?)(/.*?)? 替换 $1/$2/$3 – $4$5 即可一键实现。

温馨提示:正则表达式的学习可以参阅 《正则表达式入门》 这套教程。

文本内容修改

或许有时候字体系统接口的内容需要被批量替换。那么可以使用 Find and Replace 插件、Content Generator 的 Replace text 功能。

添加样式

如果需要添加新的样式,例如新的品牌色,请选中一个字体单元,按住 Alt 拖拽到其他位置进行复制。

温馨提示:请先组合再进行复制。如不组合,复制后 Sketch 默认会给图层名称添加「 Copy」的后缀,需要手动删除。为了避免「 Copy」后缀,请先组合,再复制,最后取消组合。

选中字体单元后,修改其字体颜色为想要的颜色。接下来使用 Rename It 插件为图层重命名,使用 「Find & Replace Layers」功能,查找末尾名称,替换为想要修改的名称。

温馨提示:图层的名称将在下一步直接变成样式的名称。为了保持字体系统的名称一致性,建议使用 「数字 – 属性」的方式命名。同时便于 Sketch Runner 查找,建议使用英文,例如「07 – Decoration」。

如果希望利用正则表达式来替换图层名称,请使用 LayerRenamer 插件。

最后,选中修改完毕的字体单元,利用 Style Generator 插件快速生成字体的样式。

温馨提示:Sketch Style Generator 插件将基于图层名称自动生成共享样式。

而字阶与字重因布局限制,暂时没有更加高效的方法来批量添加字体,需要手动修改字体单元,从而进行添加。

样式的共享

通过 Shared Text Style 插件可以将字体样式一键导出为 json 文件。

通过导入 Json 文件即可实现样式的导入。

以上便是整个字体系统的搭建与维护指南,附上我制作的 sketch 文档:https://pan.baidu.com/s/1smfeuPR 密码:3ygg

最后来一张全家福吧。

欢迎关注作者的微信公众号:arvindesign

「值得收藏的字体神器」

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/font-system-build-maintain

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 界面设计 版式设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里