一.为什么要做组件库

相信很多执行层的小伙伴对symbol不会太陌生，symbol(组件）是sketch中自带的一项功能，这个功能非常强大，可以对某设计模块建立一个组件，建成后可替换里面的元素，同时模块布局保持不变，只变内容，设计师通过高效复用组件可快速完成设计。

library是指由多个symbol组成的库，是一个sketch源文件，这个源文件里面包括了这个产品的所有常用组件，比如WeChat.library，Ios.library等

symbol是仅适用于文档内部提升效率。如果设计团队只有你一个人，只需要用symbol即可提升工作效率，而library则是适用于不同文档，不同设计师间的协作，如果团队人数超过2人（包括2人）负责同一个产品，还是建议通过library进行协作，因为如果产品需要更新某些组件的参数，可以在library中完成更新，即可完成全局更新。比如某品牌的主色是绿色，但是基本上每年或每两年，这个绿色的色值都会有点微调，这种情况直接在library中把绿色的色值调整好，打开本地设计稿时，会在右上角收到一条更新通知，点开消息，会有窗口告知你library做了哪些更新，有新旧的对比图，让你确认是否更新，只要点了更新，这个设计稿里所有原有绿色都会得到更新。

对于个人来说，学会用组件思维做设计，你的设计稿会非常整洁，不会再出来如下图（1）这样的文件命名，因为创建组件需要你对每个元素进行正确命名。

我曾经对接过一个设计专家，他的文件习惯非常差，文件里从来没有用过组件，也从来不对编组命名，可能有的命名也只是临时为了作区分而命名，而且每次的过程稿都在同一个文件里，过程稿是隐藏的，每次发给我的源文件都非常的大，一开始我不太明白为什么每次打开他的文件都这么卡，后来才发现他所有过程稿都在，而且嵌套在非常深的图层编组里，光是整理他的文件已经占用我非常多的时间，试想一下，如果有两个合作伙伴，一个设计稿非常整洁，一个设计稿非常乱，你更愿意与谁合作？

查找方便：因为创建组件是通过原子理论进行的，所以组件库里图层只要是可替换的，都会被做成组件，而sketch现在已经有组件管理功能，只要选择左上角的控件画布即可看到所有的控件，当然前提是命名规范的情况下，控件会进行自动分类。 

全局修改：这样就可以通过筛选找到想找的控件进行修改。当然这里如果是用library进行协作，还需要点开本地文件确认同步全局修改。

复用方便：当有新的需求进来时，会优先考虑现有的组件是否适用，如果适用可直接通过复制粘贴symbol进行复用，如果是团队用了library协作，可直接通过”置入——某library“添加组件模块。

开发完成一套组件库的代码后，往后如果有迭代需求，设计稿里只要复用到组件的，开发人员可以复用相关代码，而无需再重新编写，从而减少开发时间，提升效率。

组件库会分两部分完成

第一部分是App做第一批设计界面时，若设计师本身经验较丰富，可边做设计边封装，若设计的过程中，经常调整，我会建议你等第一批设计稿确认后（这里说的确认是指能进入开发的设计稿，而且不是设计内部确认）再开始整理和封装，因为进入开发后设计不再做大修改。如若这时发生大修改，整个开发时间会被拉长，影响整体工作流程。

此时的组件库只是基于现有的设计稿，所以还不完善。而第二部分是做完App所有界面时，即可进行完善，形成完整的产品组件库，为后续需求做协作准备。

以上说的两部分是比较重要的两部分，当然每个公司的工作流程都会有些差异，所以在完成第一步封装后，可以根据产品进度，逐步做补充和完善，直到1.0的完成。

组件库的内容通常会根据产品的复杂程度会有一定的区别，以下是我整理出的一般产品都会含有的基础部分

常规：文字，颜色，icon，按纽

导航：标签页，导航栏，侧边导航，标签栏，气泡弹出框，宫格等

数据录入：表单，输入框，选择框，上拉菜单，下拉菜单，时间选择器，日历选择器，步进器等

数据展示：单元格，弹窗，开关，列表，标签，轮播，进度条，倒计时，空状态等

反馈：对话框dialog，轻提示toast，通知栏，遮罩层，加载，下拉刷新等

以上是一个app常会用到的组件内容，可以根据自己产品的复杂程度进行加减。通常只要是能复用两次以上的，都建议创建组件。

组件库是基于原子思维去创建的，那我们就要找到组件里的所有最小的原子分别是什么？最小的原子是文字，颜色，icon，按纽，图片等，基本上界面中的模块都是由这几种原子组成，比如列表是由文字+icon,或者图片+文字+icon组成等等，这里就不一一举例了，大家可以去看一下自己的产品的模块对照一下便知。

在创建组件库之前，我们先需要了解组件的命名规则，因为sketch里会根据 “/” 斜杠自动分类文件层级，所以在命名的时，我们可以充分利用这个特性把组件做分类。

以下是我本人常用的命名方式，大家可以根据自己的产品特性做参考，命名本身没有固定标准，主要目的是为了区分及查找方便，便于管理下面是有赞的规范文档中的命名，我截了几张给大家参考下

在创建模块组件时，我们应该先了解文本样式，颜色变量，图层样式，还有“正在调整尺寸resizing”这些功能点用法，方便后续进行模块封装。

案例一：如何创建文本样式？如下图

• 1. 新建一行文本
• 2. 点击右侧面板中的字符样式“新建”
• 3. 输入命名，以“/”分类
• 4. 在当前文档中即可看到所有文件样式按“/”分类，查看非常方便 
• 
  
• 上图是文本样式创建的流程，下面解释一下“更新，解绑，更多”这三个功能用法。
• 
  更新功能：字符样式是包括了这个文本的字符/样式/字符选项，也就是下图红框里的所有信息，所以只要更改了下图中的任何一个参数，这个字符样式命名处就会带星号，如下图，“更新”按纽变亮，这时如果点“更新”就会把原有的字符样式覆盖掉，参数也会以更改后的为准，如果点新建，会新增一个字符样式，无论是新建还是更新，都别忘了命名也需同步修改，通常我会用这个方法一直新增新的字符样式，这样就命名时就不需要打很多字。

• 解绑功能：当你选择了使用了字符样式的文本，如果不想使用字符样式，可以点解绑，重新编辑即可。

  更多功能：点开“更多”，有“重设样式”和“为样式重命名”两个功能，为“样式重命名”的字面意思都懂了。“重设样式”是指当你使用了一种字符样式，同时然后改了很多参数后，可能不记得了改了哪些，因为是命名处只加了个星号，不会反应你改了哪些，然后这时你想回到字符样式再重新调参数，可以点重设样式就回到原来的字符样式。所以重设样式相当于重置，只是回到的起点的是原本的”字符样式“。

首先我们先了解一下图层样式包含哪些内容，如下图，主要包含填充/边框/阴影/内阴影/模糊五个模块的内容，大家可以试着点一下样式右边的收起button,就知道样式里包括的内容了，在界面上操作一遍会更清晰点。

案例二：下面我来看试着创新一个卡片的阴影图层样式，如下图

• 1. 新建一个距形，调整好卡片阴影数值，这里的颜色都可以使用颜色变量
• 2. 点击“新建”，并对图层样式用“/”进行命名，这里可根据自己情况命名
• 3. 多创建几个后，在当前文档即可看到所有的分类卡片会按“/”分类展示

更新/解绑/更多三个功能和字符样式是差不多的，大家可以自己多操作一下，比看这个教程更容易理解。

颜色变量是sketch 69之后加的功能，所以如果sketch的版本比较低的需要升级才可以用这个功能哦。

案例三：下图是在画布中如何创建颜色的流程

• 1. 首先，新建一个有颜色的形状，选好颜色
• 2. 点击创建颜色变量
• 3. 对颜色命名，用“/”做分层管理，点创建即可完成
• 4. 点颜色色块处，可以看到新建的颜色分类，不过这里没有按“/”做分类，只是以最后一个“/”做了简单分类
• 5. 点颜色变量图——当前文档，即可看到所有的“/”

目前颜色变量可以应用在填充/边框/阴影/内阴影上，另外还有文本颜色都可以用颜色变量（如下图）所以在创建组件库上，只要涉及到颜色的，都可以直接调用颜色变量，真的极方便。

但目前变色变量只能针对纯色值，渐变色还不能创建，希望后来的版本开发者可以把这个功能考虑进去。

以上是对“文本样式，颜色变量，图层样式”三个功能点做了详细的教程讲解，这三个功能还可以统一在组件界面里进行统一管理。如下图

 点击左上角的组件图标，进行组件视图管理界面，这里可以含概了“控件/文本样式/图层样式/颜色变量四个模块的内容，可点击不同可以查看和管理。

在这里可以对内容进行”置入/复制/编组/重命名/删除/编辑参数”等操作，而且这里编组可以直接进行框选，然后拖到右边的层级列表中，这样的整理方式很符合我们平时整理文件时的操作。这里的操作就不一一讲解了，大家可以多操作就明白了

2.2.4 正在调整尺寸（Resizing）

接下来我们看下“正在调整尺寸（resizing）”的功能，这个功能可以让组件在不同界面里进行适配，只要轻拉文件夹或者画板即可。

“靠边固定”是指图层基于文件夹/画板的位置

“固定尺寸”是指在适配拉伸过程中，图层尺寸是否跟着拉伸变化

“预览”是根据你设置的参数，可以看到适配的效果

案例四：设置一个图文列表适配不同的屏幕尺寸，如何做呢？

• 1. 首先设计好图文列表的样式
• 2. 打成组，这里要注意，“正在调整尺寸（resizing）”这个功能只有在组里或者画板中才可以生效，所以一定要Carl+G
• 3. 编组再设置参数，
• 4. 设置参数，参数设置如下图所示，
• 5. 设置完成之后，通过拉动组的宽度就可以轻松实现自适应。
• 
  
• 
•  

  通过以上案例，可以发现“正在调整尺寸(resizing)”属于被动布局，即需要设置完所有参数之后，手动拖编组或者是画板才可以实现自适应。

• 
  

  2.2.5 创建组件

  
  

  创建组件方法很简单，选择图层或文件夹，然后点击“创建控件”，这时会弹出一个弹窗，可以对组件命名，还可以设置他的布局。

• 

  组件支持的布局有7种，x轴上的“向右/居中/向左”布局，y轴上的“向下/居中/向下”布局，还一有种是无布局。所以，组件布局只支持x轴或者y轴上的一种布局，不能同时支持两个方向的布局。

  案例五：下面我们来制作一个按纽：按纽根据按纽文案长度居中自动布局

  • 1.首先把椭圆和文案命名编组
  • 2.设置“大号按纽”字符对齐方式为自动宽度+居中对齐
  • 3.点击创建组件，命名，组件布局选择“水平居中布局”
  • 4.这时在画布界面的右侧覆盖层可以修改文案，即可自动布局
    

• 注意：文字的对齐方式，需要与组件的布局方向一致。

同样的方法可以试着做选项卡等，也可用组件套组件的方法做多个选项卡并实在自动布局

如果需要按纽有最短的长度，可以在组件界面或者组件管理器中去设置最窄宽度（如下图），同时如果想修改布局也可以在这里修改

通过上面的介绍，正在调整尺寸属于被动布局，需要手动去拖动才会实在自适应，而组件布局属于主动布局，会在组件元素变化时，仍然保持最开始设置的参数。那下面我们来看看这两者结合案例。

案例六：做一个图文列表+按纽的自适应

• 1. 首先在案例四基础上加一个按纽，并把按纽编组加入案例四图文编组里
• 2. 按纽的文案对齐方式调整为“自动宽度+居右”
• 3. 按纽创建组件，布局为“水平-居右”
• 4. 设置按纽“正在调整尺寸”如下图
• 
• 
  
• 拖动整个编组区域即可得到以下自适应效果
• 
  
• 
  
• 2.2.7 创建library

  
  

  如果是一个设计，可以把组件库放置于本地文件夹中，如果是多个设计师协作，可以把组件库存在云端，可以实现多人协作。了解以上功能并创建好产品的组件库之后，下面我们来看看如何添加library。

  首选项——组件库——添加组件库，即可添加完成。

• 
• 
  
• 添加完成之后，打开sketch，置入——控件——Weui即可看到添加的微信小程序控件，

随意添加一个控件，看到如下图侧边栏中的控件标识与平时的创建组件不一样这里可以看到library和正常组件icon是有区别的

以上关于组件及library的协作功能已经基本介绍完了，总结大概是以下几点

1.明确symbol和library的区别，了解组件库的作用

2.明确组件库创建时间及内容

3.定义组件的命名规范，熟练掌握文本样式，颜色变量，图层样式，resizing的功能使用，学会结合resizing功能，创建组件和library，方便团队协作。

行动：根据本文所教的方法，尝试把自己的产品的规范命名重新整理，并创建成可复用的组件库，在团队里进行复用。

备注：附件上传了有赞的组件库规范，需要的童鞋可以下载参考

Powered by Froala Editor