用 PPT 也可以画图

我记得那是大二刚开学的时候，科协准备给新生进行简单培训，我被分到讲 PPT 的教学。当时毫无想法，我问 @honka 有什么特别的技巧可以传授，他说只要让大家觉得和基础操作有些不一样就好了。

于是我画了大约一周在晚上空闲时间研究 PPT 能做什么。在发现普通的「直线」可以进行编辑定点的这个功能后，尝试做了一些基础的图形，然后在剩余的时间，用曲线拼凑出了一张「贝吉塔」。从此通过 PPT 打开了新世界的大门。

那几天座位两旁的 @Du 和 @YY 一直在疯狂看 Android，因为马上就要去参加一次 hackathon。准备比较仓促，从图书馆借 Android 的书突击入门。现场手忙的开发后组织决定将最后制作 Slides 的任务交给我，他们俩继续在酒店的小茶几上疯狂学习 Android 小知识。这次我们做了一款「蜂窝输入法」，我们的队名叫 CloseType。（前一阵和 @Du 的聊天提到这次经历，突然十分怀念）

「贝吉塔」和当时 hackathon 的某页 slide「蜂窝输入法」 👇

之后在大学的期间我开始大量使用 PPT 作为所有画图的工具。一是当时孱弱的设备只能带得动一些 Windows 上的常规软件，二是当时并没有「UX 设计」概念这回事，对真正的设计工具并不了解。

Sketch

第一次加入正经的前端 team 是在知乎实习的时候，首次接触设计稿从「中文验证码」的项目开始的。那时候才知道原来从产品概念到 UI 形象，是有另外的设计工具来参与，那就是 Sketch App。Sketch 是一款设计工具，只支持 Mac 且需要付费授权。当时整个设计 team 和前端 team 依靠 sketch 文稿来沟通设计图和细节，Sketch 的付费授权是一次 $99，大约可以撑 2 年左右，设计 + Dev 们人手一个 Sketch 授权还是挺不方便。加上设计稿的版本同步，搭上了 dropbox，google drive 一起操作，还是很麻烦。

后来慢慢地有团队开始迁移到 Zeplin，设计师依然用 Sketch 设计，但上传到 Zeplin，工程师可以通过网页来 inspect UI 细节，比设计稿更贴近代码（因为毕竟不需要工程师修改设计原稿），然后也解决了需要安装授权 Sketch，同步设计稿也变得简单。Zeplin 作为中介，使得工程师或者设计师以外的一方不再需要跟设计工具打交道，只跟「设计交付工具」沟通。

再后来到 Hulu 使用 inVision 查看设计稿，发现和 Zeplin 走的路线也差不多，对外面屏蔽了设计工具的细节。

Figma

真正让我开始发愁生产效率的是给自己的博客设计 icon，发现使用 Mac 但没有 Sketch 的话完全没有趁手的工具。但是突然想起来自己的电脑上有 Windows XP 虚拟机，就进去找到了「画图」工具，给自己粗糙的画了第一个 icon。

后来有一次和同事聊天突然说到 google slides 可以画些简单的图，才想起来还有云版 PPT 可以代替，于是开始使用 google slide 代替「windows 画图」进行 icon 编辑。第二版本做完后，发出去后收到 @xinyu 的回复：「可以试试 Figma，免费又好用」。我突然回忆起这个好像被设计师们偶尔谈论过的工具。在打算制作第三版 icon 的时候我终于开始使用它！

从第一版「画图」工具制作到第三版 Figma 制作

Daily UI Challenge

看到推上 @shuding 提到了一个 Daily UI 100 的挑战，100 天有 100 个设计 idea 让你来做，有的是一些比较零碎的组件，或者只是一个简单的页面，随你发挥。觉得可以帮助自己练习一下使用设计工具，然后果断订阅了这个活动。在每个工作日会收到一封邮件，包含一个 idea，诸如设计一个登录表单，或者一个计算器等。对于如何用 code 实现对自己来说已经不重要了，所以这次只注重在画图和表达出一些特殊的思考在里面。

我会随机选择一些挑战来做，并不会每个作业都完成，可能有想法地或者比较适合练习的就优先进行。设计确实很耗时，且当我制作一个很简单的图稿时，甚至算不上设计的全部流程，只是其中一个很小的阶段。最麻烦的就是你经常会想要修改你的 idea，修饰一下这里优化一下那里，这里调两个颜色那里改三个字号。两周期间在画别的图稿的同时，也来来回回地在修改第一张稿子「登录表单」，下面这张图从左到右见证了它从最初版（左）到最终上传到 dribbble 上（右边）经历的一些变化：

不停调颜色真的是让人眼瞎的工作。上传结束的那一刻我突然明白了些什么，设计师每次要不停修改不停优化设计稿，甚至要为某个平台上无法实现的效果来裁剪自己的设计时的艰难。有时候灵感不总是在开始才来的，它可能在你做完的几天后才出现，也可能一直不来。也有点像在 code review 时遇到一篇巨大的改动，反复 review 几轮才发现更深入、更需要修改的问题；亦或是产品上线前突然想 polish 一下某个小细节。

Learning Through Practice

对自己来说这可能只是一个开始，有机会尝试一些一直想尝试的东西。今天恰巧看到了一篇 zeit 成员接受采访的文章，提到了自己 learning through practice 的经历，觉得这也蛮不错的。我发现我真的很喜欢 zeit 这个团队（现在改叫 vercel），但看他们成员的经历确确实实带给我了一些灵感。

莫名高兴成为了 Dribbble Player，好像又和世界连接在了一起。

很多技能的入门并不要求你有一份科班的证明，如果想做可以尽快尝试起来。送给所有还在犹豫尝试某件事情或者想学习某个技能的人。