如何利用sketch组件进行UI设计

sketch组件方便快捷，功能强大，对于UI设计师来说能够大大提升设计效率。大部分设计团队都选择用 Sketch 来搭建设计规范和可复用的组件库。但是有很多小伙伴都不知道如何制作这种sketch组件，今天就来和大家说说如何利用sketch组件进行UI设计。

1、 首先我们先准备好素材

我们需要准备好点击状态和非点击状态图标以及一个工具栏。小伙伴们记得命好名字哟，后面有大用，按照我给的图片去以此命名。

2、 然后我们来分析一下，其实我们可以把4个标签栏的图标文字想成4个整体，而且还是4个样式一样的整体。

这样就可以认为只要做一个样式，其他的就可以改这个样式就可以实现App标签栏图标切换来。

3、 好的，正式开始。如图选中需要首页文字及首页图标，然后创建组件，

然后取名为首页-选中。

4、 创建好后我们进去组件页面，如图所示，然后再把其他的元素全部都复制到组件页面中来。

5、 当把所有元素都复制到组件页面来后，我们选中个“首页-选中”组件进行复制，并把重新命名，一个是选中一个是未选中。

6、 复制好以后把未选中组件中的元素删除掉，替换成上面灰色的元素。这样，我们就做好了标签栏的两种不同状态的组件，记住“这里一定是复制！复制！复制！重要的事情说三遍！”

重新进行命名，应为我们把这个样式作为一种共有样式，就不能实用“首页”这种名字，需要实用通用文字。

7、 这一步后我们需要再分析一下，一个标签的不同两种状态做出来了，就可以开始把每一种状态的各种表现样式给做出来了（可以更换同颜色不同形状的图标），这时就需要我们选中组件“标签-未选中”中的灰色首页图标，右键创建组件，命名为“首页-未选中”，再选中组件“标签-选中”中的绿色首页图标，右键创建组件，命名为“首页-选中”。

上图为调整后的样子。

8、 然后选中新创建的两个组件进行复制，记住，一定是复制！复制！复制！千万不要搞错了，搞错就麻烦大了。

弄好之后，我们开始命名及删除掉后续复制出来的6个组件中的元素。

上面步骤做完后，我们把对应的素材放入到对应的组件中去。

9、 做到上面一步我们就完成了80%了，剩下的就简单了。

我们选择sketch菜单中的“插入”——”文档“中选择“标签-选择”组件点击创建。

10、 选中创建出来的组件，把创建的组件放到标签栏背景上，然后选中两者，右键选择创建组件，命名为“标签栏。

创建完成后，把“标签栏组件”中的图标加文字标签进行复制，依次复制出3个来，然后删除掉没有紫色标头的那一栏标签栏。

删除前

删除后。（记得命名哟）

11、 这个时候我们就可以开始调整标签栏的初始样子了，选中标签栏中的组件，在软件右侧进行状态的选择。

依次进行标签栏图标的修改和文字的修改。

上图为调整完成后的效果，这样我们的标签栏组件基本上就做完了，就剩最后一步了。

12、 回到页面当中，我们选择sketch菜单中的“插入”——”文档“中选择“标签栏”组件点击创建。

看～我们的标签栏组件就完成了，软件右侧就可以进行随意选择，加速我们的设计效率了。

这个时候细心的小伙伴发现了，我们的sketch菜单中的“插入”——”文档“中好乱啊，这才是一个组件，如果把标题栏的组件和其他的组件也做了的话，那该是有多乱啊，不急，我们可以对他进行整理，我们先看看

看上图，我们现在做的组件完全没有分组整理，这个咋办，好办，只需要把同类型的组件在名字前面加前缀就好了，非常简单。

看到了嘛？只要在原来的命名上加上前缀及“/”就可以了，来看看加上去的效果。

这样是不是就完美了，其实各位小伙伴只要能明白这个其中的原理，各种个样的组件就都可以制作啦，这里呢还有一个问题，就是我们在选择标签图标的时候发现很多，能不能变成只有两种选择，这样在项目需求确定后选择起来就更加方便了，其实只要能理解今天的东西，做简单版的简直就是毛毛雨。

各位小伙伴想想下面这中效果该怎么做，如何应用今天的知识点做出来呢，大家可以动手试试。注意图片右侧选项，不一样哟。

（本文系转载，转自公众号 @UI设计师之家，作者 @闫治国）