共计 2153 个字符，预计需要花费 6 分钟才能阅读完成。
前两天我在折腾一个新的个人项目，代码写得差不多了，准备上线个 Landing Page 或者是写篇介绍文章的时候，突然发现页面光秃秃的，全是文字，看着特别干瘪。想找几张像样的配图吧，要么版权是个大坑，要么风格太土，要么就是那种一眼就能看出来的“免费素材库”味道。
作为一个主要写代码、偶尔做做设计的“全干工程师”，找图这件事常常比写 Bug 还让我头大。就在我准备放弃治疗，随便截几张图凑合的时候，我翻出了压箱底的宝贝——unDraw。虽然这个工具出来有几年了，但每次用起来还是忍不住感叹：由于它的存在，不知道拯救了多少像我这样审美“及格线徘徊”的开发者。
什么是 unDraw
unDraw 是一个开源的插画库，由希腊设计师 Katerina Limpitsouni 创建并维护。
简单来说，它提供了一大堆高质量的 SVG 插画，而且完全免费，甚至可用于商业项目。最关键的是，它是 MIT 许可的（现在虽然官网描述更简化了，但核心精神依然是真正的 Open Source），这意味着你不需要署名，也不用担心哪天收到律师函。
在扁平化设计（Flat Design）依然占据主流的今天，unDraw 提供的那种简洁、现代、带有科技感的风格，几乎可以说是“万金油”。无论是用在 SaaS 产品的官网、移动应用的引导页，还是博客文章的题图，都毫无违和感。
为什么它无可替代
市面上的免费图库也不少，像 Unsplash 这种以摄影图片为主的，或者 Freepik 这种矢量图库。但 unDraw 能在我的工具箱里常驻，主要有几个杀手锏：
独门的颜色自定义
这是 unDraw 最让我觉得“天才”的功能。
通常我们下载的图标或插画，颜色都是固定的。如果你的网站主色调是蓝色的，下载了个红色的插画，放上去就显得特别突兀。想要改色？你得懂 Illustrator，得把 SVG 拖进去，一个个图层去调，麻烦得要死。
但在 unDraw 上，右上角有一个颜色选择器。你只需要把你的品牌色（Brand Color）的 Hex 值填进去，整个网站上成千上万张插画的主色调瞬间就会变成你的品牌色。下载下来直接就是能用的成品，这个体验简直不要太丝滑。
统一的视觉风格
很多时候我们在不同的地方找素材，最大的问题是“风格不统一”。一张是手绘风，一张是 3D 风，拼在一起就像是个草台班子。
unDraw 的所有插画都出自 Katerina 一人之手（或者遵循极其严格的统一规范），这意味着你可以在整个项目中随意使用库里的任何图片，它们看起来都像是专门为你的产品定制的一套 UI 资产。这种一致性对于提升产品的专业度至关重要。
真正的矢量与小体积
因为它提供的是 SVG 格式，所以无论你在多大的 4K、5K 屏幕上显示，它都是清晰锐利的。而且 SVG 本质上是代码，体积非常小，对网页加载速度的影响微乎其微。对于前端开发者来说，SVG 还可以直接内嵌到 HTML 中，用 CSS 做一些简单的动画效果，可玩性极高。
实际上手指南
使用 unDraw 几乎没有门槛，但有几个小技巧可以让你的效率更高。
第一步：确定配色
在打开网站之前，先从你的项目里拿到主色调的十六进制代码（比如 #6C63FF）。打开 unDraw 官网，点击右上角的颜色块，把代码粘贴进去。你会发现所有插画里的“重点色”都变了。
第二步：精准搜索
unDraw 的搜索支持英文关键词。建议使用具象的词汇或者抽象的概念词。
- 具象场景：比如搜
login（登录）、server（服务器）、mobile（手机）、payment（支付）。 - 抽象概念：比如搜
happy（快乐）、success（成功）、thinking（思考）、collaboration（协作）。
我发现搜“动词”或者“情绪”往往能找到更有意思的图。比如你想表达“用户流失”，搜 sad 或者 door 可能比搜 churn 更容易找到灵感。
第三步：选择格式
- SVG：主要用于网页开发、App 开发。由于是矢量，你可以无限放大。
- PNG：如果你是做 PPT、Keynote 或者写文章插图，直接下 PNG 更方便，背景透明，拖进去就能用。
第四步：适度裁剪
有时候一张图里元素太多，或者构图太宽。既然是 SVG，我偶尔会把它拖进 Figma 里，把不需要的元素删掉，或者调整一下布局。因为它的图层结构通常很清晰，简单的修改非常容易上手。
一些避坑建议
虽然我很推崇 unDraw，但在使用过程中也有几点需要注意：
首先，不要滥用。正因为 unDraw 太好用、太出名了，你会在无数个初创公司的官网、无数个开源项目的 Readme 里见到它。如果你想让你的品牌看起来独一无二，建议只把它作为“辅助”元素，或者通过后期修改增加一些独特的纹理或元素，避免“撞衫”。
其次，注意留白。unDraw 的风格比较简洁，如果你的页面本身已经很花哨了，再放复杂的插画会显得乱。它最适合的是大面积留白的页面，作为视觉焦点或平衡元素。
最后
在这个“颜值即正义”的时代，好的视觉呈现往往能让原本枯燥的技术内容或产品更容易被用户接受。
unDraw 就像是开源界的一股清流，它不仅解决了一个实际痛点，更传递了一种“设计民主化”的理念。它告诉我们，即使你不是专业的设计师，凭借优秀的工具，依然可以做出体面、专业的产品。
如果你还没用过，强烈建议把它加入你的收藏夹。下次当你在写博客、做 PPT 或者撸页面感到画面空虚时，上去搜一搜，换个颜色，或许就能点亮你的整个设计。
