Huozhi

UI 设计初体验

image

用 PPT 也可以画图

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

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

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

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

image

之后在大学的期间我开始大量使用 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 制作

image

Daily UI Challenge

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

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

image

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

Learning Through Practice

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

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

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

© 2020, Huozhi