做網(wǎng)站最頭疼的不是寫代碼，而是沒圖、沒圖標(biāo)、沒配色靈感。尤其當(dāng)你熬夜趕項(xiàng)目，打開設(shè)計(jì)工具卻不知道從哪下手時，一堆現(xiàn)成的開源設(shè)計(jì)資源能救你一命。
免費(fèi)可商用的素材才靠譜
很多人圖方便直接百度搜圖，結(jié)果上線沒多久就收到侵權(quán)通知。真正省心的，是那些明確標(biāo)注 CC0 或 MIT 協(xié)議的開源資源站。它們不僅免費(fèi)，還能用在商業(yè)項(xiàng)目里，不用擔(dān)心法律風(fēng)險。
推薦幾個高頻使用的站點(diǎn)
Undraw 是我常去的地方，里面全是高質(zhì)量的 SVG 插畫，風(fēng)格統(tǒng)一，顏色還能自定義。比如做個用戶注冊頁，直接搜 "signup" 就能挑一張合適的插圖嵌進(jìn)去。
<img src="https://undraw.co/illustrations/signup.svg" alt="注冊插圖">Feather Icons 提供了一套簡潔的矢量圖標(biāo)，全部開源，用起來特別輕快。一個 CDN 鏈接引入，就能在頁面里直接用。
<script src="https://unpkg.com/feather-icons"></script>
<i data-feather="home"></i>
<script>feather.replace();</script>如果你在找配色方案，Coolors 雖然不算傳統(tǒng)意義上的“開源”，但它生成的調(diào)色板可以自由使用，配合開源項(xiàng)目一起出設(shè)計(jì)稿很順手。按一下空格就能隨機(jī)出一組協(xié)調(diào)的顏色，適合猶豫癥患者。
還有像 Open Peeps 這種手繪風(fēng)人物插畫庫，所有素材都是 SVG 格式，能隨意組合發(fā)型、姿勢、表情，適合做引導(dǎo)頁或說明圖。
怎么把資源用進(jìn)自己的項(xiàng)目
別一股腦全下下來扔進(jìn) assets 文件夾。建議先分類：圖標(biāo)放 icons 目錄，插圖畫放 illustrations，配色方案記在文檔里。這樣下次接手的人也好維護(hù)。
遇到需要修改 SVG 的情況，比如想改個顏色或刪掉某部分元素，直接用代碼編輯器打開就行。不像 PSD 動不動就打不開，SVG 本質(zhì)是文本，干凈又靈活。
有些團(tuán)隊(duì)喜歡自己建內(nèi)部資源庫，其實(shí)就是把常用的幾個開源站點(diǎn)整理成鏈接表，新成員入職第一件事就是收藏這份清單。省得每次都要重新搜索。