如何利用组件梳理UI样式？

最近的一个项目中涉及到订单的各个状态，梳理下来多多少少有16种状态，包括可复用样式，最后也有14种订单卡片样式。本着方便开发进行组件定义，也方便我自己后期快速维护，用组件的方式来梳理这14种样式是目前为止最好的方式。庆幸sketch的组件功能如此好用，这要是用PS来做，后期维护成本可就惊人了。

本篇文章会从以下几方面讲。

1、简单介绍sketch组件

2、如何利用组件梳理繁多样式

3、如何将繁多样式输出给开发

1、简单介绍sketch组件

1.1 sketch组件是什么？

本篇文章主要是讲如何利用sketch组件来梳理多种样式，对于sketch组件的讲解会简单一些，想深入了解sketch组件的小伙伴们可以直接在网上搜sketch组件就能出来许多讲解得十分清晰的文章，我也是从这些文章中获取sketch的使用技巧的，非常实用。但是为了还未开始使用sketch的小伙们能更快地看懂下面的内容，这里还是会简单讲解一下sketch组件的使用方法。

我对sketch组件的理解是，它有些像PS中的智能对象，但是比智能对象更加智能……可能有点绕，我举个不太恰当的例子。

• 小明有一块橡皮泥，然后他把橡皮泥分了一块给小红
• 然后小明把剩下的橡皮泥定义为组件
• 这时候小黄和小绿来了，小明又把自己的橡皮泥（已经是组件）分别分给了小黄和小绿一块
• 这时候 小明 小红 小黄 小绿 四人各有一块橡皮泥，除了小红的橡皮泥，其他三人的都是被定义过的橡皮泥
• 这时候小明把自己的橡皮泥捏成了兔子，小黄、小绿的橡皮泥也变成了兔子，但是小红的没变

这就是组件

定义了A为组件后，调用A使用在1、2、3的场景中，更改A的样式后，1、2、3场景中的A的样式也会相继改变。

1.2 组件如何使用？

下面是创建组件的教程图，原谅我使用粗糙的教程图来表达，我认为这样会更容易理解一些。

2、如何利用组件梳理繁多样式

如果需求中订单的样式真的有如此多，第一件事应该是梳理所有状态并理解它们的业务逻辑，而不建议立马吭哧吭哧上手就干。只有理解业务逻辑后才能更好地梳理信息层级和状态样式。

紧接着就需要梳理所有状态可复用的样式，哪些样式是可复用的，哪些是需要改变的，都梳理出来，这样才能方便我们建立组件。下面就拿最近的一个项目来举例子，这个项目订单有16种状态，订单卡片的样式也有14种，但是我梳理下来发现，有大量可重复利用的组件，于是我利用组件来搭建这些卡片，最后使用的组件也不过几个而已。

看下面的图片，总共也就定义了9个组件。听起来很多，可是后期如果遇到修改，那可少加多少班呢。

那么如何用这几个组件搭建出多种状态，并且清晰得展示出来？

我先对订单卡片的组件进行拆解，将组件分为5个部分，订单卡片的样式不过是替换下图中5个部分的样式罢了。

5个部分又可以细分，如A部分可以分为A-1、A-2，剩下要做的就是拼凑了。是不是简单了。

难点来了，我们自己当然对自己设计的东西非常熟悉了，可是面对这么多状态和样式，开发就蒙了，到底哪种样式对应哪种状态？十几种样式……你让开发咋整？？最后实现出来样式和我们设计的不符，这锅是谁背？？

为了避免这些问题，将所有样式按订单状态梳理出来是非常有必要的，这会让开发小哥哥少掉些头发……

3、如何将繁多样式输出给开发

建议工具：蓝湖（其它线上协作工具也OK的）

我个人的工作习惯是把所有样式都梳理出来，传到蓝湖，方便开发进行查看。下面就是我梳理的所有状态样式，内容很多，不过足够清晰。

第一张画板是组件拆解，这个主要是给开发的参考，帮助开发小伙伴们进行组件定义。

第二张画板是对所有状态样式的整理……

以上就是我对如何整理繁多样式的一点小心得，如果你有更好的方法，欢迎一起探讨学习。