在设计群里经常看到关于Sketch和蓝湖的一些问题，我这里就以更好的多人协作为目标，分享一些自己的心得。

在工作中经常碰遇到需要多个设计师共同去设计或维护一个项目，此时各个设计师负责的不同板块内容无法第一时间同步给其他设计师。导致的问题主要有以下3点：

 ① 产品的界面统一性大打折扣。

 ② 设计师将进行重复而无用的工作，工作效率低下。

 ③ 由于设计的不统一导致开发也将进行重复而无意义的工作，给开发造成很大压力。（设计与开 发将不再和谐）。

本文主要从以下3个方面解决来解决上面问题：

「创建规范Sketch组件」

「蓝湖网盘的正确使用」

「基于蓝湖网盘的Sketch组件库运用」

「规范Sketch组件」

1.UI设计中的组件是什么样的？

我常常把组件比喻成一块块的乐高积木。

第一：它具有够小的颗粒度，可搭建成各种形体的物体。

第二：它可以重复无限次的使用，节约成本。

第三：它上手容易，搭建方便快捷。

图：乐高积木

然而sketch创建的组件比乐高更有优势的一点是：即使它已经是最小颗粒，它仍具有改变尺寸及字符内容等功能，同时还能保持相应的适配性。下面将会具体讲到sketch组件其强大的适配能力。

2.如何建立自适应的组件？

可能有些小伙伴也慢慢开始有意识的去创建自己的组件，但是往往会发现自己创立的组件在其他项目中复用的时候由于尺寸不符的原因没法直接使用，然后会傻傻的打散组件（从组件中分离）来调整，实际上这破坏了组件最小颗粒的属性，也失去了组件原有的意义。

「 Sketch的组件有很强的尺寸适配能力 」用以下例子进行说明演示

GIF：组件适配演示

案例1：组件没有设置【调整尺寸】。拉伸时，提示文字发生偏移；搜索icon发生形变

案例2：组件设置【调整尺寸】。拉伸时，提示文字自动靠左；下拉箭头不变形且自动靠右

从以上动图可以看出，案例1：输入框并不具有适配的能力，所以这样的组件是不合格的。如果将这种组件运用到其他项目中，或作为公共组件库来给其他设计师使用会使工作效率大大降低。而案例2：选择器已具备尺寸调整的适配能力，可以将它作为组件库运用到不同项目中。

-----------------------------------------------------------------------------------------

那么【调整尺寸】到底该如何理解呢？

下面还是以案例2中的选择器来举例。为了方便说明，我把组件进行了扩大，预留出白色边缘区域。

图：调整尺寸设置

如何理解「靠边固定」

在说明1中：我选中“提示文字”并设置了「靠边固定」：左

此时“提示文字”「靠边固定」：左，到底靠的是白底的边，还是灰色框边？答案是：灰色框边。原因是：我将“提示文字”、“下拉箭头”、“框” 放在一个组。而「靠边固定」是以组的边界为参考线的。

需要提醒的是：整个组件面板也是一个组，所以当选择“组”的时候也是可以进行「靠边固定」设置。此时“选择器”靠的边则是白色底边了。

如何理解「固定尺寸」

在说明2中：我选中“下拉箭头”并设置了「固定尺寸」：高度和宽度

此时“下拉箭头”就如案例2中GIF演示一样，它不会随着组件尺寸的变化而发生变形。这个功能主要针对的对象是图形，当然你也可以对文字设置固定尺寸，但是目前我在实际工作中还未发现具体用处。

在组件创建过程中，我们需要结合分组、靠边固定、固定尺寸等来搭配，才能做出具有适配能力的组件，具体细节还需大家在实践中摸索。

3.组件的命名有什么讲究？

这里我并不是要说，一定要用英文来更规范组件的命名。实际上我自己也很懒，并且我也是用中文命名的。最主要的一点是：Sketch组件的命名关系到组件库的层级。

图：组件命名规范

左列：组件不按层级命名。当存在大量组件时，会导致所有组件堆在一列中，毫无分类可言，对后续筛选使用组件造成很大困扰。

右列：用“/”进行层级命名。组件自动会对应一级、二级、三级...进行归类，方便设计师查找。

「蓝湖网盘的正确使用」

1.重新认识蓝湖网盘

相信很多小伙伴都已经用过蓝湖了，它强大的功能帮设计师和开发省了不少心。实际上蓝湖还有一款神器，就是它的网盘（不吹了，不吹了...蓝湖考不考虑给我充值一下？）。它不仅仅是网盘，它还是一个多人协作的同步盘。

同步盘的原理

图：同步盘示意图

同一团队内的设计师各自在本地电脑更新组件库，网盘都会自动将组件库同步更新到其他成员本地电脑，以此达到设计师之间的协同合作。

使用方式

① 协作的几个设计师需要在同一个蓝湖团队里。

② 由于本文是基于sketch基础上的设计师协作，所以我们在选择同步内容的时候，只要勾选sketch即可。

③ 请注意！！！！蓝湖官方下载的网盘，有个问题：无论何时在sketch里上传在蓝湖时，都会将该sketch源文件同步到蓝湖网盘，这样导致网盘里sketch文件越来越多，无法管理。（不知道现在这个问题是否已经优化，知道小伙伴可以告知下）

所以，请到蓝湖官方QQ群里跟管理员要一个手动同步的版本。

「基于蓝湖网盘的sketch组件库运用」

前面已经讲了组件的规范创建以及网盘的使用。下面才是提高工作效率的时候了！

1.Sketch组件放入蓝湖网盘

当整理好的组件放入网盘的那一刻，它就具有很强的责任属性，它应该具有足够的信心去给到别的设计师使用。并且以后每一次组件的更新变化，都可能会影响到其他设计师的设计稿，所以这份组件一定是通过设计师的长期打磨，开发的验证实践之后的产物。

2.组件与组件库的区别？

在某个项目sketch文件中创建的组件，没有办法直接被调用到其他项目的sketch文件。（如果有复制粘贴的想法，请掐灭它┐(ﾟ～ﾟ)┌） 而组件库是可以直接被任何项目调用的。我们看下图演示是如何把网盘里的组件进化成【组件库】

GIF:载入组件库

如上图依次操作 [插件] - [管理插件] - [组件库] - [添加组件库] - [从蓝湖网盘中选择组件库]

3.如何从组件库调用？

菜单选择 [置入] - [组件库名称] ，选择想要的组件就可以直接用在设计稿中，设计效率爆炸提升。

GIF：用组件搭建弹窗

另外，当需要改变这个组件的样式时，可以双击组件并选择「与组件库断开连接」，这时候改变样式并不会影响组件库。当然也可以选择「在原始文档中打开」，这时候要慎重，因为改变组件库里的样式会影响到其他设计师。

「小结」

组件库的建立本质上是为了提高设计师的工作效率，运用同步盘这类工具能更进一步的提升设计师之间的协同合作效率。而组件的建立则需要一个过程，从设计师角度需要不断的去打磨，以此确保组件具有够广的可用性，可适用在不同的项目之中。从开发角度，组件需要他们去实践验证，确保每个组件可以实现落地。

所以我并不建议在一个产品的初期就开始建立组件，这样容易因为公司战略的调整，产品功能交互的不完善，或设计师自身考虑不全导致夭折。

最后要说明的一点是：组件库的建立并不只是适合后台界面，在app里的一些列表，按钮，输入框，图标等同样适用。

第一次写文章，有疑问请留言讨论。      明人不说暗话：点个赞吧 (*￣∇￣*)