UI 设计初体验

用 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），但看他们成员的经历确确实实带给我了一些灵感。

想看其他设计内容，或者想监督我的 Daily UI Challenge 可以去我的 Dribbble 主页 - huozhi 看我上传的图稿。莫名高兴成为了 Dribbble Player，好像又和世界连接在了一起。

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