动机
因为前面有一些项目要做，所以自己也就体验了一把设计师。而作为目前最流行的设计工具：Sketch，自然就成为了我体验设计的第一门工具啦。
在经过一段时间的设计之后，我发现 Sketch 这个工具，在设计的过程中 手动化 太过严重了，所以在设计重复性事物时如果没有合理的方法来辅助，那么效率会大打折扣。
所以我就想到了以下两种方式来优化设计流程：
-
借助 Sketch 插件，帮助减少重复劳动
-
在头脑中建筑工程意识，用科学有效的方法来优化流程
今天我想说的就是第二种。当然了，科学有效的方法 有很多方面，我今天也只提到了一个 切面，日后有更多的实践之后，我会持续更新...
组件和组件意识
好的，我们进入正题。
今天我们要说的就是：组件意识，在具体谈及 组件意识 时，我们先来说一说什么是 组件。
先看下面的图：
一堆重复的元素
在上图中，我们很容易能判断，四个块状元素，除了文字内容有区别外，其他的属性都相同，例如：background-color（背景颜色），shadow（阴影），border-radius（边框角度）等。
上图四块元素中任何一块都可以称之为 组件 ，而我们只需要将其中一块元素（组件）作为一个整体进行设计，那么剩下的三块元素就是 CTRL + C 和 CTRL + V 的功夫了。
好的，说完了什么是 组件，现在来说说什么是 组件意识。
我将通过一次实例的演示来诠释 组件意识。
首先我们来看一个缺乏 组件意识 的设计：（请看图）
缺乏组件意识的设计
在我做了红色标记的两块元素分别对应 Sketch 中的 视觉效果 和 设计元素，两块是一一对应的。
很明显，在上图中，我们的设计没有 组件意识，没有将四块元素中的任意一块看做一个 组件，而是单纯的用了八个 设计元素，然后通过大量的手工操作：将文字居中到方块，移动文字和方块到合理的位置等。这样子在设计完第一个方块和文字后，下一次的方块和文字又需要再次消耗大量的精力做重复的事。而且即使你此次调整好了位置，但是下次要改进的时候，每操作一个文字和方块组合，就要选中两个元素。
好了，我们已经展示了比较糟糕的，缺乏 组件意识 的设计过程。
下面我们来展示一个比较合理的设计过程。
首先我们先设计一个 组件。
一个组件
那么如何做到如上的样子了，Sketch 有个功能叫做 Group Selection，可以使用选中两个元素，然后点击鼠标右键，选择 Group Selection，或者快捷键：Command + G （Mac版）。
Group Selection
好的，我们现在已经创建了一个组件了。接下来的事就很简单，我们只要按住 option + 鼠标左键，拖动整个 组件，就可以简单的复制一个一模一样的组件。
组件的复制
这样我们以后对一个项进行改动，那么剩下的三项，只要使用 Sketch 的 Copy Style 功能，就能直接应用到其余三个啦，而且以后的设计中，增，删，改 都可以更加便捷。
Copy Style
总结
好的，我们来总结一下我们此次讲到的东西。
-
现有的设计的缺陷，通过现有的设计，会给以后 增， 删， 改 的带来大量负荷，大大减低效率。
-
然后我们介绍了 组件，进而引出了 组件意识，然后讲了如何设计一个组件，以及组件带来的好处。
本次讲解到此结束，这是我第一次写关于设计的文章，还有很多不足，希望以后能够不断进步，谢谢！
网友评论