1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 设计管理 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

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

时间:2020-07-01   分类:设计管理    作者:网络   来源:网络整理   点击:193

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

内容采集来自9fen.net

copyright 9fen.net

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

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

copyright 9fen.net

先来简单看看设计说明:

本文来自九分网络

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

内容采集来自9fen.net

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

九分网络

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

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

如下图所示: 本文来自九分网络

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

九分网络

本文来自九分网络

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

样式命名

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

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

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

九分网络

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

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

九分网络

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

本文来自九分网络

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

copyright 9fen.net

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

九分网络

本文来自九分网络

样式使用

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

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

本文来自九分网络

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

九分网络

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

内容采集来自9fen.net

输入每个层级的首字母(大小写均可),将快速筛选出对应的样式。按下回车即可应用样式。 内容采集来自9fen.net

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

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

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

内容采集来自9fen.net

copyright 9fen.net

样式修改

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

内容采集来自9fen.net

标签: 经验分享 优设 优设网 优秀网页设 字体 字体系统 设计系统

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----