结合实际工作经验，讲讲如何建立自己产品的sketchLibraries，让设计更加规范与高效。
一、前期准备：
正所谓巧妇难为无米之炊，Libraries的建立是在已经有一批确定的设计稿的时候。我这里所谓的“确定”，指的是设计稿已经上线或已经在测试阶段的情况。因为在小公司的缘故，前端、产品经常会变更原型（做完之后因为原型变动返工的事情我已经经历了很多次了，很悲伤）或者在落地设计稿的时候出现一些变动（嗯...），当然这个因人和因公司而异。
二、建立Libraries：
我个人的习惯是把图层样式、元素和组件、文字样式（当然如果有的页面形式经常被复用，不妨多建立一个模块库）等拆开分别保存，防止搞混，因此一个app的Libraries文件（sketch文件啦）一共有四个，分别是图层样式、文字样式、元素和组件以及模块库（这个我没有做）。
首先要整理的是图层样式和文字样式。
有筒子可能会问，我之前做界面的时候，已经设定好文字样式了，而且之后建立Libraries的时候又会做组件库，所以单独做文字和图层样式有什么意义呢？
在设计app的时候，我经常头疼于不同信息层级的文字颜色色值、字号、行间距记不住，各种背景色、品牌色、阴影色值弄混等问题，后来我开始使用文字样式和图层样式以及万能的option+command+C/V去解决问题。但是当我新建一个文件，又想用之前做的app的样式而非组件的时候，不建立字体和颜色的Libraries的话就会非常麻烦，而且组件库的建立也是由文字样式、图层样式、还有一些元素（element）构成，就和房子要打地基一样，这些基础都要打好，也便于自己的房子日后从“小平房”变成别墅准备~
那么闲话少叙，我们现在开始。
（需要整理在图层样式库中的内容举例）
整理颜色样式我一般是根据上述说的内容，依次从设计稿中进行样式的复制（option+command+C/V）到作为Libraries的文件中来。为了避免最后变成杂乱无章的一堆，所以我对图层样式的摆放进行了简单的整理。
（正在整理中的图层样式）
整理完毕后就开始建立图层样式吧。我图层样式的命名规范是采用英文命名的方式，方便和同事进行交接，命名格式为：base/colors/bg（或者card、content、mask、btn、icon/颜色色值或作用）。
敲小黑板，插一句简单讲一下“/”的意思。在sketch里，“/”的作用是进行分组，或者你可以把base理解为一个文件夹，colors是base文件夹下的一个子文件夹，而bg则是在colors文件夹下的一个子文件夹，一层套一层的关系。
通常我对于黑白红品牌色等易区分且或相似颜色的图层样式的命名基本直接用色值或颜色，如base/colors/bg/#FFFFFF或base/colors/bg/white，对于代表两种状态（如按钮可点击或不可点击状态）的颜色使用颜色+状态的命名方式，如：base/colors/btn/blue/nor及base/colors/btn/blue/sel
最终建立完毕图层样式看到的是这个样子：
（图层样式整理完毕）
然后将图层样式库保存，储存在一个特定文件夹内（最好不要在建立Libraries后移动位置，也不要和设计源文件混在一起），然后设置为Libraries。
（添加到library中）
然后我们可以打开一个新文件来验证一下Libraries是否可用。
（新建一个文件实验是否可用）
（我这里尽管按钮颜色和icon中都使用了品牌蓝色，但是为了区分以及万一后期需要单独修改icon颜色，因此对icon中使用的品牌色单独建立了一个图层样式，灰色同理）
ok，没有问题，在command+N的新文件中图层样式组件库时可用的，那么就准备开始下一步吧！
然后来建立文字的Libraries。关于文字样式的设置，其实在进行设计的过程中我们就会为了便于样式的复用用而建立一些字体样式，但是可能从命名规范、样式的完整程度上并不是那么尽如人意，因此我们在这里也需要对现有的字体样式进行整理，且添加一些新的样式。
步骤还是和图层样式库的建立一致，先进行收集和整理，然后进行命名和设定文字样式。需要特别注意的是，尽管单行文字和多行文字可能字号、字重、对齐方式、颜色等一致，但是行高不同，因此在设置时我会使用两种文字样式来分别代表单行样式和多行样式。对于单行文字，根据开发的习惯，我会将line值调整为和文字大小一致。多行文字则line值一般为文字大小乘以1.2-1.5，因此这两个在建立的时候也要进行区别。
（单行文字和多行文字要在line值上有所区别）
我这边一般设计使用的字体为pingfangSC，在字体使用上不会出现区分，因此在命名的时候就不考虑字体的区分问题了，我个人命名的规则是：字体/字号/字重/对齐方式/颜色/单行（or段落），这个规则也是可以因人而异进行更改的。
拿刚才的单行和多行文字为例：
单行文字：PF/12pt/regular/left/darkgrey#999999/line12
多行文字：PF/12pt/regular/left/darkgrey#999999/line16
如果没有单行和多行的区分，则不用考虑此项（命名方式看个人习惯，我说的也只是参考，大家结合自己具体工作中遇到了什么来定就可以）。
最终，整理之后的文字样式是这个样子的
（整理完毕后的文本样式）
可以看出因为这个设计稿在我接手之前有很多设计师去做，但是没有一个标准的规范，所以每一个设计师都按照自己的习惯和感觉去进行设计，最终交到我手里时候，设计稿里各种大小颜色的字基本都有，整理的我要吐血了。诚然，现在进行统一和规范是可以的，但是不建议，因为现阶段我负责的产品已经上线，所以如果贸然进行调整容易之后再和前端交付的时候出现问题，忘记了哪里调整了，哪里没有调整，因此先按照目前的设计稿进行Libraries的建立，之后还要结合线上版本逐步进行调整和规范，总之是一个非常麻烦的工作量，难受。
然后依旧按照建立图层样式的方式，将文本样式放在固定位置并设置为Libraries，这样一个Libraries的基石就打好了，现在我们要准备继续搬砖啦~
接下来是制作元素（element）库和组件（component）库，等这两个库做出来之后，距离我们通常意义上的一个软件的所有Libraries库建立就基本完成了。
那么可能有好奇宝宝又要问了，我现在储存了常用的颜色和图层样式、也对自己用的字体进行了规范，为什么不直接一步到位来制作组件（component）库，而是还要再做一个元素库？
对此我的理解是：通常一说起组件库，我们往往想到如何同语雀插件一样，由一个模块一个模块的组件们构成。诚然，组件化能够让设计更加方便和快捷，但是相应的，我们在工作中遇到的原型、功能可能并不能完全照搬现有的组件，因此除了成型的组件外，我们还需要比组件更细致的“零件”们来构成界面与创造丰富的新的界面。因此在制作组件库（component）之前，我们还需要建立一个元素（element）库。
为什么这两个要一起说呢？因为一开始我也经常搞不清楚元素和组件以及模块的区别以及制作他们的意义。不过经过工作中的整理和不断尝试，我发现如果将组件区分的越仔细，那么组件库的拓展性越强。
好了好了，如果你觉得上面一段话宛如天书，内心中充满什么是元素库、什么是组件库、什么是模块库的黑人问号，那就先看下文，再回头来琢磨上文。
我先来说说我是如何判定什么是元素（element）、什么是组件（component）、什么是模块（module），希望能对大家的工作有所帮助，当然如果有更好的区分方法也非常欢迎斧正。
我们来用比较常见的商品卡片为例来进行说明：
这三者的关系非常像化学里的分子、原子关系，一环包含一环。所以在做这一部分的整理时，我通常是三者同时进行。
如何进行整理呢，我们依旧用商品卡片为例。
（以商品卡片为例进行说明）
我们可以看到商品卡片的样式会有有特价或热销标签的样式（显示原价）、没有特价热销标签的样式（不显示原价），商品名称为单行的样式、商品名称为两行的样式，这些要怎么进行整理呢？每一种卡片建立一个symbol？那样组件库整理出来会非常庞大，所以我的做法是这样的。
首先，通过观察我们发现，上方的两个卡片其实是下方的两张卡片的高配版本（增加了价签和划掉的原价），因此只要整理上面两张卡片的样式即可包括下面卡片的样式了。
于是我们先将这两张卡片粘贴至在元素库或者组件库文件中（目前这两个现在一个sketch文件中制作）中，然后使用之前整理的文本样式库和图层样式库对卡片中的文字和bg进行添加样式（如果在设计的时候已经使用Libraries进行规范，这一步请跳过）
（让页面由图层样式和文本样式组成）
然后我们将页面中的元素进行整理和建立元素库。在这里先说一下什么是元素（element）,我认为可以放到元素库中的内容包含但不限于Icon、Btn、头像、线条、输入框、弹窗、标签、制作成symbol的文字以及其他难以单独分类的杂项（misc）等，这些在工作中遇到的时候大家根据自己的app实际情况去分析就好。继续用商品卡片去说，首先我们将元素规范命名、建立成为symbol，命名原则比较像之前的图层样式及文字样式命名原则，以卡片上方的“热”和“特”标签命名为例，我是这么进行命名的：element/tag/cardtag/hot以及element/tag/cardtag/discount
（这里注意之所以在cardtag前增加一个tag的分组是因为我的app中tag样式并不止这一种，所以为了进行快速选择和区分，多增加了一个层级）
然后就可以在选中这个tag标签的时候惊喜的发现，能够快速的进行这两个tag样式间的切换了!
（两个tag样式之间可以进行切换）
同理，我们也对页面中的占位图和商品图片，以及划去的原价文字进行建立symbol操作（为什么只有这里的文字为什么要建立symbol请往后看）。然后，我们对除了tag之外的商品卡片基础款（两种样式，商品名称一行时和商品名称两行时）分别进行symbol建立，当然卡片因为是由各种元素组成的，是一个组件，所以在命名上格式为component/card/2line（1line），在做完这一步之后，然后我们就发现当点击中卡片后，单行样式卡片和双行样式卡片可以进行切换了。
（卡片样式单双行进行切换）
同时，我们发现当选中被划掉的原价那一项时，除了更改里面数字的数值外，还能选择“none”不显示，然后该项就消失啦。
（选择none则此项不显示）
这样的商品卡片内容不正是前文中说的没有标签的“基本款样式”嘛。然后我们将商品卡片的symbol（这是一个component）和标签的symbol（这是一个element）组合为一个带标签的symbol，不过他本质还是一个商品卡片，所以在命名的时候依旧使用component来进行命名。这个时候我们的商品卡片完全可以用一个symbol来囊括所有卡片样式了。这样一个卡片的元素和组件库就算建立完成了。app中其他的部分同理用这个方式进行整理即可。最终得到的文件是一个元素和组件库混合而成的源文件。当我们打开symbol页面的时候可能会发现，所有的element和component都混在了一起，非常的混乱，怎么办呢？
（未经过整理的symbols页面）
打开symbols页面有可能是这个样子，当然如果内容特别多的话也有可能更乱这个时候给大家安利一个插件：SymbolOrganizer，使用它进行整理后，他可以自动根据你命名时候的“/”对相同层级归类的内容进行整理，最终得到的是这样的一个页面。
（使用插件整理完毕后）
（归拢好的组件库结构图）
再次感谢您的阅读~
22人已收藏
永远保持好奇心和不满足
你确定要举报【教程】利用SketchLibraries建立产品组件库？