Sketch中样式和组件的合理搭配使用

之前为大家介绍过组件的使用，实际使用组件的过程中会遇到许多与样式相关的问题，今天为大家带来一些关于组件和样式搭配使用的知识和一些小的心得。

如果没有看过之前关于组件讲解的同学也不要慌，可以补课嘛。

我们先来简单同步一下对于样式的认知。

样式的基础概念

在sketch中样式分为两种：图层样式和字符样式

1、图层样式

图层样式不仅包括“样式”中的属性，还包括“外观”中的不透明度。

2.字符样式

包括“字符”的属性、“外观”中的不透明度以及“样式”中的属性

需要为什么我们建议将样式和组件搭配使用呢

之前如果需要制作类似的下图的两个卡片时，我们可能会首先想到做出两个不同的组件。

但是如果我们结合样式的话，只需要做一个卡片组件，然后为文字选择不同的字符样式，为文字背景选择不同的图层样式，就可以实现之前需要建两个组件才能达到的效果。这样降低了自己组件库的复杂程度的同时也为后期设计稿的修改减少了操作成本。

如何使用样式

在之前我们讲组件的时候，推荐将组件分为系统级组件和页面级组件。在建立和使用样式时，我们依然推荐使用这种思路。

一方面可以将使用组件的思路用在样式上，减少自己重新建立使用习惯的成本。另外在命名方面也可以直接采用和组件一样的方式，让同学尽快上手搭建自己的样式和组件,在实际工作中就能提升自己的效率。

一些需要注意的情况

实际工作中页面内涉及到需要切图的icon还是要用不同的组件来制作其不同的状态，不建议用样式去制作icon的不同状态。

如下图一个页面中不同状态的按钮icon，正常思路下是可以建立一个组件然后给不同状态以不同图层样式制作。

但是我们不建议这样来做，因为我们现在大多数的切图场景都是在组件面板内做好切片和命名，然后上传至蓝湖与开发小哥哥对接。

上图中如果使用两个不同组件制作，上传之后给到开发也是两个独立命名（各自组件内切片命名）的icon切图，不会产生任何问题。如果是同一个组件采用不同样式制作，上传之后给到开发，这个两个icon命名就会重复，开发还需要重新修改命名，造成了不必要的麻烦。

总结

其实样式和组件搭配使用还是为了提升大家的工作效率，我们一直强调的页面级和系统级的分类也是为了让大家没有顾虑的将这些知识先用起来，之后再在实践中总结归纳并找出更适合自己的使用方法。

最后给大家附上新像素《新像素 Sketch组合技：样式和组件的搭配使用 合理使用 简化组件的嵌套》b站视频链接

https://www.bilibili.com/video/BV1v5411W7MC