干货，干货，满满的干货，sketch组件近4年实战经验总结，年终倾情奉献。

前言

话说sketch这款软件，大家也非常熟悉了。

我回忆了下，大概是在15年底的时候，接触到sketch，就在当年入手了第一台苹果笔记本电脑，不论电脑还是sketch给我带来的体验超出了自己想象，也给工作踩了一脚油门，让自己在设计上突飞猛进了很多。sketch，我挺想说声谢谢你。

感觉它确实挺好，和大家分享下我的总结，互相学习、互相探索~~~

基本操作我就不说了，直接上主题，不然对不起这个标题呀。

组件组合拳打法目录：

1.组件与组件间互换

2.组件内容可变性

3.组件复合

4.组件图标导出

5.组件过渡到程序

6.组件更新协作

7.踩坑总结

—————————————————————————————————————

1.组件与组件间互换

1.1形状互换

同一性质的组件能实现相互转换是我的第一目标，比如删除按钮变为编辑按钮，大家是不是感觉非常简单，我也是这么想的，不过在做着做着遇见了一个坑：

就像上面这两个图标，互相切换后，大小不一致了。大家会想说我做图不规范导致的，其实我一开始就是按照图标网格做的。

那么问题出在哪里了呢？原因在于图标网格不是万能的，有时候需要通过视觉进行微调，尤其是结构复杂的，基本都需要微调下。那么当我发现后，已经做了一部分了，为了完美又重新进行微调。

部分图标

但是需要做200多个图标，这个微调的工作量是不小的，其实在做的过程中也找到了一丝丝敲门，圆形方形正常做，异型结构简单的微大些结构复杂的微小些。

1.2颜色互换

图标换颜色绝对会遇到的，那么我是怎样控制颜色的呢？其实大家是不是心中已经有了答案，不防先看看我的做法。

是不是感觉非常系统化，颜色是事先通过整理规范定好的，那么这里就直接适用了，以后颜色规范修改的话，这里也只需修改「整理图层样式」

这样也体现了组件化感念，一改全改。

2.组件内容可变性

下面是文字的变化，不难理解，看下图：

变化文字内容和数量后，保持间距不变，使用的是sketch组件自带的功能，通过调整组件的布局方式即可实现。

还有另一种情况就是换文字颜色，也可以通过字符样式调整，看下图：

字符样式由字体、字重、字号、行高和颜色等多种属性定义的，

但是在做效果图时，使用的字号可能是很多种，如果按照字号归类，只用字符样式控制的话，需要预设非常多的样式。

会导致制作组件的工作量空前大了很多，也会使组件臃肿死板。那有没有其他补充方案呢？我经过一段时间思考后，发现是有的，大体思路是字符样式受限于多种属性的控制，我们征服不了，就做减法，具体减到什么程度呢？

我干脆只留了颜色这一个属性，为什么呢？我认为字符样式对于设计团队来说，主要的目的是为了统一字符颜色，至于字形和大小会根据具体的页面来做判断的，具体的判断在于每个设计师了。这样既兼顾了规范又兼顾了灵活性。大家若有更好的方式，留言区咱们可以讨论哈~

3.组件复合

可以简单理解为组件套组件。什么概念呢？就像是组装一辆汽车，从最小的零件单元「气缸」，到基础组件「发动机」，到复杂组件「传动系统」，到复杂组件聚合「汽车」。我们先看下微信的基本思路：

微信从基础样式-基础控件组合-典型页面实现过来的。我的做法基本与微信差不多，也是先构建基础组件图标→基础组件组合→典型页面→典型模块

这里我想着重说下典型模块，我从事教育行业的设计，其中课程列表页里的课程单元就是其中一个典型模块，各种业务线基本都有此页，那么这个页面做成组件化，是非常值得的。

当时我也是按照正常的模块组件制作方式做的，之后开始投入线上运营中，后来发现了这几个问题：

3.1.后期需要增加字段，没有地方了

后期运营中，由于业务线上升，增加了活动、团购、打折、限时折扣等标签，增加一个两个都还好说，但是后来又多了，不仅放不下了而且显得很乱。我就发现之前考虑的太少，应该把字段进行归类，分块先预设出来，即使目前不显示，但扩展性就变得强了，这也是考核模块组件好不好的一个重要指标。

3.2.一种模板不能适用全部产品线

随着继续进展，一种模块不能满足需求了，需要稿多个模块组件。紧接着我做了7种课程列表单元，但是由于布局的限制，有些布局不能放上全部字段，这就需要结合具体的业务场景和需求，进行选择、调整或者新增了。

当课程列表页模块程序全部实现后，后期不同业务线人员就可以通过后台进行自主选择模板了，大大减少了沟通和设计时间，全局性在这里就显得淋淋尽致了。后期增加了模板统计，方便我们产品和设计了解运营情况，方便做下一步调整。

3.3.代码样式相互影响

由于页面有些部分靠后台调取各个模板显示出来的，出现了一个问题，就是模板样式与现有页面样式相冲突，发生了错乱现象。

由于改模板代码会涉及到其他页面可能又会出现其他问题，我们采取了修改页面样式，来兼容模板代码。这种方式就像打补丁一样，哪有问题修哪。

4.组件图标导出

如果是常规的图标，直接使用sketch自带的功能导出即可。

但是有一点，还记得吗？上面的组件间互换，讲到了图片既要保证视觉统一，也要保证实际尺寸统一。为了方便程序在换图标时，只关注换哪个图标，不用关心需不需要调整大小，就像之前的图片尺寸是44px，换图标后尺寸还是44px，极大方便了后续维护工作。

但sketch自带的功能导出实际是这样的，

导致导出的图标与源文件尺寸不一致，原因是sketch只针对实际面积进行导出，后来我找到了一种方式，就是给每个图标背景都画一个线框，保证线框尺寸一致，导出的图标尺寸就一致了。

这个线框通过设置粗细和不透明度后，肉眼是看不出来的，不会影响使用效果。这样就实现了导出的所有图标尺寸都是保存一致的。

我导出的图标都是SVG格式，因为我们公司移动端页面使用的都是SVG图标，至于SVG图标的优点大家想了解可以自行baidu哈。

那么是不是在想PC端的图标也用SVG吗？不是的，原因是部分浏览器不支持此格式，由于我们是个平台，考虑的会多些，这种不兼容现象是不允许的。

PC端使用字体图标，我们用的阿里Iconfont字体图标，它也是由SVG转成字体的。所以只需导出SVG这一种格式的图标即可。但我不会直接上传，因为sketch下的SVG对Iconfont还不够友好，有些图标转成字体后识别会出问题。

我们看下官网「制作流程」

显然对AI导出的SVG更友好，那么我把图标又导入AI里，之后再导出。这个具体是怎么的友好，咱们做UI的没必要深挖，也挖不出来。后来我倒发现了一处不同：

sketch导出的SVG

AI导出的SVG

看到不同了吧，就是修改颜色上，AI要方便的多，对程序很友好。好，图标导出，就说到这里，大家有各种高见可以留言哈~

5.组件过渡到程序

上面提到有代码冲突的情况，这里我想详细说下破解方法。想做好组件化，程序也要同步实现组件概念，不然只会停留在想法上，停留在设计层面上，无法发挥真正的作用。为了能进一步推进，开发团队多次开会碰撞，由设计先行，输出各种组件规范，成熟后，程序再跟进同步。

想必大家所在的公司也已经这么做了，我具体说下我们是怎么样的同步方式吧，共同学习。

第一步：设计输出成熟的完整规范和组件，导出标注给到程序。

由于画板太多，我就不一一截图了，大家想看的话可以「点击这里」

第二步：详细标明具体细节和想法。

比如品牌色使用蓝色，蓝色会有这四种状态：正常、悬停、点击、不可用。我在设计时，只需先定出正常状态的颜色，至于其他三种颜色使用第三方工具实现，在这里我推荐使用https://ant.design/docs/spec/colors，功能很庞大，也是阿里系的。

这里有种调色板工具，使用自定义取色器定义主色，Ant Design的颜色生成算法将为您生成调色板，我们设计选出其他三个色块数字即可。

为什么要用这个工具，而不是设计自己定义这四种颜色呢？自己调会显得颜色更可控，想改就改，使用这套工具反而改不了了，受局限。此话没毛病，如果从另一个维度看待的话，可能会有解。

对于我来说不仅看重设计效果，同时也会看重设计效率。用Ant Design颜色算法会提升效率，我多次尝试对比后，它给出的颜色确实也不差，会高于一般设计师出的色彩。具体提升效率是在于下面：

为开发人员提供Less全局变量的功能，通过统一控制颜色编号即可实现一改全改，那么这就有意思了，当品牌色升级或者BOSS要求换色系时，真实太方便了，再也不用一个挨着一个地修改了。

第三步：程序输出组件规范

程序通过看标注图和不定时的沟通后，就可以整理出程序能用的组件了。我们公司基本都整理到了语雀上了https://www.yuque.com/              

由于其他内容涉及到公司内部信息，我就不一一给大家截图了。那么这样打造出来一整套规范+组件后，组件从设计过渡到程序也就差不多完成了。

6.组件更新协作

对于一个多人的设计团队来说，组件在使用过程中，会遇到添加或修改内容的情况，那么组件里的哪些内容是由谁负责，需要明确，不然会乱，原始组件一乱，后果很严重。

我们团队由两名设计师进行维护，其他设计师接收更新。具体的协作方式是，比如我的页面设计完毕后，有些图标需要放到组件库里，我不能直接放进去，需要给专门负责维护图标库的同事进行对接，等他制作完毕，我再接收最新版本，更新到设计图里面。看似如此麻烦的流程，但保证了不出错，和统一性，这就是体系。

版本控制是通过SVN实现的，并没有使用sketch的cloud，它应该没有版本记录和回滚功能，我没研究过哈。

7.踩坑总结

• 图标网格不是万能的，有时要灵活调整
• 字符样式不能适用全部情况就做减法
• 组件互换时，保持尺寸一致
• 组件要具有扩展性，前期要结合业务尽量把扩展前置化
• 一个业务模块做多种组件样式，适用性更强
• 组件上线时，避免页面各种冲突，需要提前留意
• 打通程序，让组件不止停留在设计上
• 随之组件的完善，避免出现冗杂、混乱现象

————————————————————————————————————————

下期预告《怎么打造高效实用的交互产物》

下期见~~~

祝大家新年玩得开森

Powered by Froala Editor