效率至上-画图狗的工具兵器铺

“经常加班的人，要不就是能力不足，要不就是安排不当。”

                                              ——一直在耳边BB的Mr.刘

工作以来，一直很认同 Mr.刘 的看法，在工作中也会有意的总结、反思自己的工作方式，以寻求工作与生活之间的最平衡状态（也就是不加班、多去浪）。今天想要聊聊，最近自己在画稿时，提高效率的一些工具和方法。

| 前情

本人现在是一名交互设计师，我所讨论的画图方式也许对你并不适用。

| 正文

在我的工作流程中，主要分为以下：

·几个模块【组件】【插件】

·几个关键词【灵活性】【复用度】

·几个工具【Sketch】【Paddy】【Craft】

---

首先，从我的日常画稿流程讲起。

我的工作流程

如上图所示，在日常的画稿流程中，我会刻意积累可复用的组件库，并将其symbol化。便于之后的需求绘制。

我的组件库，由主要页面、控件组成。

1.主要页面的建立，是为了当出现相同页面时，可直接复用或微做修改使用；例如下图的对话页和反馈收集页，如果在之后的页面中出现相同功能的页面，便可以直接拿来复用。

My UI Kits-页面

2.控件部分，控件由系统控件和产品独有控件组成。

系统控件，主要用于程序中需要使用原生控件的部分，如弹窗、小程序/H5头部；

产品独有控件，是指贯穿于应用中、具有固定使用规则且复用性极强的控件。在搭建新页面时，控件的复用可以减少绘制成本、开发成本。例如横滑tab、tag、搜索框等…

My UI Kits-控件

---

有了自己的控件库，接下来需要谈谈设计过程中最常见的“改改改”。

改改改是射鸡师工作中爱恨交加又不可割舍的一部分，文字行数的变动、图片个数的增加都会让射鸡师门头痛不已。

想象一下，经过一番奋斗后你将交互文档拿到PM爸爸面前，一句“这里好像得3行文案，那里4个图片不太好、有点挤”就可能造成整个页面的变动。每个页面中，一个像素的移动都会连带着该页面的其他元素的调整。

在备受折磨之后，被 Mr.刘 安利了一款改稿神器——【Paddy】

Paddy已经融入我工作的一部分，简述它的优势就是，绝对的间距、对齐控制。

间距控制，即两个元素之间的间距、元素与周围背景之间的绝对间距控制；

图片来自于Paddy

对齐，无论你设计素材如何变动，都会保持绝对对齐。

图片来自于Paddy

有了这个神奇，妈妈再也不会担心我改稿了~

---

其他神器推荐：

- Dapollo（阿里爸爸的控件库）

在没有Dapollo时，你可能需要不停出入于Iconfont，但有了Dapollo后，任何icon和组件都可以在这直接进行搜索。

Dapollo

- Unsplash（Sketch52.1更新后，配合Data功能的官方插件）

交互童鞋应该都有，一张一张插图/Mask的痛点；新版Sketch中的Data就解决了这一痛点，它包含文字、图片等元素的随机填充。Unsplash可以填充任何你需要内容的随机图片，只需一键即可搞定。

Unsplash

p.s.新的Sketch存在着很多的bug，如果暂时不想更新，那你可以试试InVision开发的Craft。

-其他有趣的小插件

Emoji，可以快速在设计稿中添加emoji图标，瞬间让你的设计稿逗比起来~

Rename，强迫症的福音，整理图层名字的神器。

最后

感谢你看到了这个位置，笔芯~

也许，你们有更6的操作，欢迎分享给我~