bannn
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
在UI界面资源库的搭建中，首先要确定项目界面中使用的主要颜色和字体。本文主要介绍用sketch搭建字体系统，生成文本样式库、团队共享的实践过程。
文末附下载：3个sktech插件、示例sketch字体系统文件。
一、建立字体的层级
首先我们借助第三方工具找出现有项目的所有字体，根据实际运用情景优化并确定了字体层级。新项目建议从核心流程界面中确定字体层级。关于字体层级的确定，参考了material design 的 The Type System:
我们在此基础上，根据项目情况列出了如下的字体层级表格：
二、搭建sketch字体系统
1、整理列出项目所有的字体颜色，打开sketch并将颜色罗列出来。包括：
品牌色：主色、次级色；
强调色：活跃色(Active)、成功色、警告色、失败色；
中性色：正常色、禁用色。
示例如下：
2、把这些字体按字体层级排列好。图中在字体后面的2，表示字重为bold，方便识别。示例如下：
3、复制2组，将字体组样式调整为居左、居中、居右，并排列好。字体对齐方式根据各项目界面的不同而有所区别，比如有些项目的界面没有字体居右对齐。
示例如下：
Tip：复制时，为方便后续的规范命名，需要将图层复制时添加copy的属性取消。sketch的偏好设置——图层——复制。设置完成后，多选框为未勾选，如图：
4、重复上一步操作，整理出所有字体颜色的组合。示例如下：
5、给各文本图层命名，使用sketch插件Rename it ，进行批量命名。命名的规范结构有多种，根据项目不同自定义化。
示例项目的命名结构如下：
序号 - %*/正常或禁用/对齐方式/颜色
（%*在Rename it 中表示当前图层）
如果要生成图中的规范：00 - H1 2/Normal/Left/Primary。序号生成：先写个0，选中Num.Sequence DESC ，将Start Sequence from设置为0，即0%N。
6、利用Sketch Styles Generator插件生成文本样式库。先检查sketch文本样式库是否为空，若有其它文本样式请删除，以防止和新生成的文本样式混杂在一起。选中所需要生成的文本样式图层，然后点击插件生成。如图所示：
三、导出并共享sketch文本样式库
如何将文本样式库导出并共享到其它成员的sketch文件中呢？用插件Shared Text Sytles。
1、先将文本样式库导出成 .json 文件。
2、导入到所需的sketch文件中。注意：需要将json文件放在任意一个文件夹中才能导入，否则无法成功导入。
导入成功后，即可看到整齐规范的文本样式库。
参考《Text System Mastery with Shared Styles》
全部评论：0条
更多作品
发表评论