🎨設計素材

設計工具與可商用素材庫,做圖找靈感從這裡開始。

本分類收錄 19 個站點,最近更新

設計工作流通常分為「專業創作」與「快速出圖」兩條路徑。以下工具按用途分類,並附帶同類產品的核心差異對比。

🎨 一、 設計工具:專業深度 vs 快速出圖

工具核心定位適用場景與優勢
Figma介面設計與團隊協作的行業標準。製作 App/網頁 UI、高保真原型。基於瀏覽器,支援多人即時協作,元件化系統極其強大。
Canva面向非設計師的輕量化視覺創作平臺。快速製作社交媒體配圖、海報、簡報。海量現成模板,拖拽即可出圖,學習成本極低。
PhotoPea瀏覽器端的輕量級影像編輯器。臨時需要開啟或簡單編輯 PSD 檔案,但電腦上沒有安裝 Photoshop 時的絕佳替代品。

💡 二、 靈感與參考

  • Dribbble:設計師作品展示社群。以 UI 介面、插畫、圖示等視覺片段為主,適合尋找短期的視覺風格和配色靈感。
  • Behance:Adobe 旗下的專業作品集平臺。專案展示更完整,常包含品牌設計、包裝設計從概念到落地的完整案例推導過程。

📦 三、 素材庫:圖片、圖示與字型

類別推薦工具特點與授權注意事項
高畫質圖片Unsplash / Pexels質量極高,通常採用 CC0 或類似寬鬆協議,可免費商用且無需署名(但仍建議核實具體圖片要求)。
向量/綜合Freepik資源極其豐富(向量圖、插畫、PSD)。注意:免費使用者下載通常強制要求署名,商用需仔細核對授權範圍。
圖示Lucide / Font AwesomeLucide 是現代化、風格統一的開源線性圖示庫,極度適合現代 Web/App 介面;Font Awesome 則是經典全面的圖示集合。
字型Google Fonts絕大多數為開源授權(OFL),可免費商用,且提供便捷的 Web 嵌入程式碼,是網頁字型最省心的選擇。
配色Coolors按空格鍵即可隨機生成和諧配色方案,支援鎖定喜歡的顏色繼續生成,或直接從上傳圖片中提取色卡。

⚡ 四、 效率小工具

  • remove.bg:上傳圖片即可 AI 自動摳除背景,人像和商品圖的處理效果出色,適合快速處理素材。
  • Squoosh:Google 出品的圖片壓縮工具。在瀏覽器本地處理,不上傳伺服器,可即時滑動對比壓縮前後的畫質與體積。
  • Mockuuups Studio:快速將平面 UI 設計稿貼合到手機、電腦、平板等真實裝置樣機中,提升作品集或產品宣傳的質感。

⚠️ 五、 最重要的一件事:看清授權邊界

「免費下載」絕對不等於「可以免費商用」,這是設計領域代價最高的誤區:

  1. 條款差異巨大:不同站點的授權天差地別。有的允許無限制商用,有的要求必須署名,有的僅限個人非商業使用。
  2. 肖像權與商標權:即使圖片本身允許商用,若照片中清晰出現了可識別的人物肖像、知名品牌商標或受保護的建築,用於商業廣告時仍可能面臨侵權風險。
  3. 字型授權陷阱:「Windows/Mac 系統自帶」或「網上隨便能下載到」的字型,絕大多數不允許直接用於商業海報、Logo 或影片字幕。商用前務必查閱該字型的官方授權說明。

建議:在將任何素材用於正式商業專案前,花兩分鐘閱讀下方的相關文章,瞭解主流相簿和字型站的具體授權邊界。

收錄網站

Figma瀏覽器裡的介面設計與多人協作工具介面設計與協作figma.comCanva模板化設計工具,非專業也能做出好看的圖模板化設計工具canva.comDribbble設計師作品社群,視覺靈感集散地設計作品與靈感dribbble.comBehanceAdobe 旗下作品集平臺,完整專案展示多設計師作品集behance.netUnsplash高質量免費相簿,可商用無需署名免費可用照片unsplash.comPexels免費圖片與影片素材,中文介面友好免費圖片與影片pexels.comPixabay圖片、插畫、音效一站式免費素材免費圖片與音效pixabay.comFreepik向量圖與 PSD 模板資源量極大向量圖與設計模板freepik.comGoogle Fonts免費開源字型庫,含多款優秀中文字型免費開源字型fonts.google.comFont Awesome使用最廣的圖示字型庫常用圖示庫fontawesome.comLucide線條統一、開源免費的現代圖示集開源線條圖示lucide.devCoolors配色方案生成器,一鍵換色很上癮快速生成配色coolors.coremove.bg自動摳圖去背景,邊緣處理乾淨一鍵圖片摳圖remove.bgSquoosh谷歌出品的圖片壓縮工具,本地處理本地圖片壓縮squoosh.appMockuuups Studio快速生成裝置樣機展示圖裝置樣機展示圖mockuuups.studioMobbin收集了大量真實 App 的介面截圖,做設計前先看別人怎麼做真實 App 介面參考mobbin.comAdobe Color配色工具,按色彩規則生成方案,也能從圖裡取色配色與圖片取色color.adobe.comFontshare一批質量很高的免費字型,個人和商用都能用免費字型資源fontshare.comFramer不寫程式碼也能做出好看的網站,設計完直接上線視覺化網站設計framer.com