17 個免費 3D 素材資源網站推薦:圖示、模型、Mockup 一次搞定
挑 3D 素材的關鍵從來不是網站數量,而是先分清楚你要的是 Icons、Mockup 還是完整模型,再用「能否免費商用」與「能不能直接進 Figma」兩個條件篩選。這份清單整理了…
免費 3D 素材資源網站推薦:先分類再挑,才不會白下載
挑 3D 素材的關鍵從來不是網站數量,而是先分清楚你要的是 Icons、Mockup 還是完整模型,再用「能否免費商用」與「能不能直接進 Figma」兩個條件篩選。這份清單整理了 17 個仍在營運的 3D 素材網站,其中標榜 CC0 完全免費商用的 3D ICONS 提供 4 種配色風格與數千款立體圖示,能省下大半搜尋與轉檔時間。
重點先看:免費商用 3D 素材首選 CC0 授權的 3D ICONS(4 種配色、數千款 Icons);要進 Figma 直接套用則挑有原生外掛的 4 款工具。下載前先確認授權,試用期素材即使下載成功也不能商用。
多數所謂的「3D 素材懶人包」把網站一字排開就結束,但設計師真正會卡關的從來不是清單長度,而是授權細節與工作流整合。你下載一個看起來很漂亮的 3D 圖示,回家才發現只能個人用、或要手動轉檔才能塞進設計稿,那這個素材對你來說價值是零。挑選的順序就兩步:先認清你要的是 Icons、Mockup 還是完整模型,再用「能不能免費商用」與「能不能直接進 Figma」兩個條件交叉篩選。
挑素材的第一個誤區是「愈多愈好」。書籤列囤了二十個網站,真正會用的通常只有兩三個,因為每個專案的風格、配色、用途都不同。真正實用的是記住每個網站的「授權類型 + 是否有 Figma 外掛」這兩欄,網址反倒可以現查,看完就能直接動手做設計。如果你也在找平面 Icon 圖示網站或商用免費圖庫,或是想用 AI 繪圖自己產立體素材,那幾篇可以接著看。
第二個誤區是「只看預覽圖」。預覽圖漂亮不代表適合你的專案:有些 3D 圖示在深色背景才好看、有些只在特寫角度才立體、有些配色固定無法改。下載前先打開素材的實際尺寸與格式頁面,確認它能被調整成你要的狀態,否則只是把別人做好看的角度搬回家,自己套上去卻完全不協調。把這個檢查動作前置,能避免下載十幾個最後只用上兩個的浪費。
挑 3D 素材前先懂三種類型:Icons、Mockup、完整模型
3D 素材可以粗分三大類,先確認你需要的類型再找網站,能省下大半搜尋時間。第一類是 3D Icons,也就是立體圖示,檔案小、可調角度與配色,主要用在網頁、App 與社群圖的視覺點綴;第二類是 3D Mockup,把你的設計套進立體裝置或場景,常用於提案與作品集;第三類是 3D 模型,以家具、人物、建築等擬真物件為主,適合插畫、動畫與高質感場景,檔案與學習成本都比較高。
判斷方式很直覺:要點綴介面就找 Icons、要展示成品就找 Mockup、要完整物件就找模型。這個分類看似基本,但很多人一開始就跑錯棚,例如想在網頁首頁加一點立體感,結果跑去下載幾百 MB 的擬真家具模型,最後既無法順利匯入設計稿,也用不到那個精細度。素材選得好不好,其實從更前面的 網頁版面設計 階段就決定了,視覺架構沒先理清,挑素材很容易失準。
三類素材背後對應三種完全不同的工作流與技術門檻。3D Icons 多數是 PNG 或 SVG 點陣圖,設計師直接拖進畫布就能用,幾乎沒有學習曲線;3D Mockup 介於中間,要懂得在線上工具裡換貼圖、調鏡頭角度,但不必建模;完整 3D 模型牽涉到 GLB、FBX、OBJ 這類格式,往往需要 Blender、Cinema 4D 等專業軟體才能編輯,對只做 UI 的設計師來說投資報酬率很低。挑選時先問自己「這個專案要的是點綴、展示、還是完整物件」,答案會直接把你導向對應的工具類型,避免在錯誤的網站裡空轉。
| 類型 | 主要用途 | 檔案大小 | 學習成本 | 代表網站 |
|---|---|---|---|---|
| 3D Icons | 網頁、App、社群圖點綴 | 小(PNG / SVG) | 低 | 3D ICONS、Icons8 |
| 3D Mockup | 提案、作品集、宣傳圖 | 中(圖檔 / 影片) | 中 | Mockupz、Device Frames |
| 3D 模型 | 插畫、動畫、擬真場景 | 大(高面數) | 高 | MotionElements、Shapefest |
分類定了,挑選邏輯就只剩兩個篩選條件:這個素材能不能免費商用?能不能直接在設計工具裡套用?這兩個答案會直接決定你的工作效率。整體網頁設計方向還沒拍板的話,先翻一下 最新網頁設計趨勢 或 網頁設計靈感網站,回來再挑素材會更有依據;想看別人怎麼排版,也可以參考 網頁排版設計範例 與 Bento Grid 網頁排版。
免費商用 3D Icons 推薦:3D ICONS、3d Icons、Icons8、Free 3D icon
免費商用的 3D Icons 首選是 CC0 授權的 3D ICONS,下載後可自由改作、調整配色,提供繽紛、漸層、全白、黑金四種固定配色風格。3d Icons 主打 4K 高畫質,站上有超過數千款 Icons 且每週更新,免費版就能商用。Icons8 的圖示庫規模達到百萬級,含 3D 與黏土材質,支援 PNG 與 SVG。Free 3D icon 則提供 PNG 免費下載商用與素材包一次取用。
先講 3D ICONS。它的 CC0 授權是最寬鬆的那種,代表你可以把下載的素材改作、商用,而且完全不必標註作者,這對接案的設計師來說是最安心的選擇。四種配色風格(繽紛、漸層、全白、黑金)覆蓋了大部分的視覺調性,你可以依據擺放位置自由切換,需要拆解配色邏輯時,拿 網頁配色工具 對照 色彩學配色技巧 會快很多。它還提供免費的 Figma 外掛,在專案裡直接插入並切換角度配色,省去下載與匯入的動作。
3D ICONS 的四種配色該怎麼配對使用情境,可以這樣抓:繽紛色適合活潑的活動頁與社群圖;漸層色能接上常見的科技感網頁;全白適合深色背景或極簡風;黑金則用在需要質感的高端品牌頁。這套對應不是絕對,但能讓你第一次挑素材就有方向,不會在四種風格之間反覆橫跳。每種風格的 Icons 都提供多個視角,放在卡片、按鈕旁邊時,挑選「3/4 側面」的角度立體感最自然,正面與側面容易看起來像貼紙。
3d Icons 走的是高畫質路線,標榜 4K 解析度,站上 Icons 數量超過四千款,每週還會推出新素材。風格從社群媒體、購物到食物、動物、人物都有。免費版可以下載並商用,付費升級則能拿到更高畫質與 3D 動畫素材。做電商或社群相關設計時,這裡的覆蓋率會比 3D ICONS 更廣,把素材風格對齊 品牌色彩挑選 的方向,視覺一致性會更高。
| 網站 | 授權 | 免費商用 | 檔案格式 | Figma 外掛 |
|---|---|---|---|---|
| 3D ICONS | CC0 | 是(最寬鬆) | PNG | 有(免費) |
| 3d Icons | 免費版可商用 | 是 | PNG(付費升 4K) | 無獨立外掛 |
| Icons8 | 免費可商用(含標註規範) | 是 | PNG / SVG | 有 |
| Free 3D icon | 免費可商用 | 是 | PNG | 有(兩版本) |
Icons8 是老牌圖示庫,百萬級素材含 3D 與黏土材質,黏土風格特別適合走可愛、親切路徑的 UI/UX 設計。它支援 PNG 與 SVG,也能直接複製貼上把素材加進設計檔;如果想嵌入網頁,把 HTML code 貼進程式碼就能用,不必下載,這對做 Wireframe 線框圖 到高保真原型的流程很方便。免費版的限制與標註規範要回官網確認,商用前務必看清楚條款。
Free 3D icon 走的是輕量路線,PNG 免費下載即可商用,另有素材包能一次取用多個 Icons,還提供多種角度的展示樣式。它也有 Figma 圖示外掛,目前分兩個版本、內含的 Icons 不同,可以依需求挑版本。這幾個網站的功能重疊度不低,我會建議先以 3D ICONS 為主力(CC0 最省心),再用 3d Icons 或 Icons8 補風格缺口,這套挑法丟進 UI 原型設計 流程最省時間。
免費版與付費版的差異,通常落在三個地方:畫質(免費可能壓縮解析度)、動畫素材(多半要付費)、數量限制(免費版有下載額度)。只想拿靜態 PNG 做網頁點綴的話,免費版幾乎都夠用;要做動態展示或高解析印刷,再考慮升級。下載下來的素材如果很雜,可以用 Eagle 素材管理工具 分類,一邊整理一邊對照 免費 UIUX 自學資源,素材庫會慢慢成形。
判斷 PNG 與 SVG 哪個適合你的專案,可以從兩個維度看。第一是縮放需求:3D Icons 多數以 PNG 形式提供,因為立體陰影與漸層很難用純向量重現,PNG 能保留材質質感,但在大圖輸出時會失真;SVG 雖可無限縮放,卻通常只用在Icons8 這類有提供向量版本的網站,而且 SVG 的 3D 效果偏平面化。第二是檔案大小:PNG 一張可能幾百 KB,放太多會拖慢網頁載入,這時改用較小尺寸的 PNG、或搭配圖片壓縮工具,比執著於格式更實際。
不用下載的 3D 素材:直接在 Figma 裡點開就用
3D ICONS、Icons8、Free 3D icon、Khagwal 3D 都推出免費 Figma 外掛,安裝後可直接在 Figma 專案內插入 3D 圖示並切換角度配色,省去下載與匯入步驟。其中 Khagwal 3D 更特別,它只能透過外掛使用,沒有獨立下載管道。外掛生態會持續更新,安裝前可先到 Figma Community 搜尋確認外掛仍在維護。
這裡要分清楚一件事:「所有 3D 素材都能下載後匯入 Figma」是通用做法,但有外掛的工具整合更順暢。差別在於,下載匯入要多一道手續(存檔、拖進畫布、處理格式),而外掛是即點即用、還能即時切換配色與角度。節奏快的接案裡,這幾秒鐘累積起來會明顯影響產出速度。
這四款外掛裡,3D ICONS 最安心,CC0 授權可在 Figma 內切換四種配色與不同視角;Icons8 外掛支援 PNG、SVG,可複製貼上直接加入設計檔,含黏土材質;Khagwal 3D 僅能透過外掛使用,內含五種配色與五個角度,完全免費;Free 3D icon 外掛則分兩個版本,素材內容不同,依需求挑選。Khagwal 3D 雖然有官網,但官網只有展示介紹、不能下載,想用它的素材就得裝外掛,素材走可愛物件插圖路線(獎盃、購物袋、錢包這類),適合電商、活動頁或社群圖。還在熟悉 Figma 操作的話,先從 Figma 完整入門指南建立基本功,回頭裝外掛會更順。
外掛有一個限制要先講:外掛的素材庫通常是網站精選子集,未必涵蓋站上全部素材。你要的風格外掛裡沒有的話,還是得回官網下載再匯入。外掛頂多是「常用情境的捷徑」。Figma 還有哪些必裝工具,可以把 Figma 免費圖庫外掛教學 一起設定好,也方便銜接響應式設計與網格排版。
挑外掛時有幾個檢查點。第一是更新頻率:超過半年沒更新的外掛,容易在新版 Figma 上出問題,安裝前看一眼最近更新日期。第二是素材數量:有些外掛只放了幾十款 Icons,搜尋不到你要的主題就得回官網,等於白裝。第三是授權標示:外掛內的素材授權未必等於官網完整授權,商用前以官網條款為準。把這三點快速過一遍,能避免裝一堆用不上的外掛拖慢 Figma 啟動速度。
3D Mockup 線上製作工具:Mockupz、Device Frames、Wannathis
要把設計作品做成 3D 立體展示,線上工具裡 Mockupz 提供多種免費模板可調角度配色、Device Frames 能線上製作 3D 裝置 Mockup 並輸出圖片或動畫影片、Wannathis 則有質感 3D 插圖與 Mockup,並提供免費 Freebies 區。三者定位不同,選擇重點在於你要的是靜態圖檔還是動態影片。
Mockupz 是由 ThreeDee 3D 素材網推出的 Mockup 工具,能把你設計好的作品轉成高質感的立體展示。它目前提供 21 種 3D Mockup 樣本,下載後可自行調整展示角度、顏色與各個元素,也能再加入自己設計的素材。模板免費就能下載,適合做提案展示、作品集與社群宣傳圖。
Device Frames 走的是線上製作路線,支援手機、筆電、App Store 等裝置模板,你上傳設計圖檔就能快速套用,並可調整裝置顏色與角度。免費方案能製作並下載高質感圖檔;要輸出動態展示影片則需付費升級,這時拿 Figma 視差互動效果 或 視差滾動立體深度 疊上去,展示會更有層次。要靜態圖檔選 Mockupz、要動態影片選 Device Frames,分工就這麼單純。
| 工具 | 輸出類型 | 免費範圍 | 付費解鎖 | 適合場景 |
|---|---|---|---|---|
| Mockupz | 靜態圖檔 | 21 種模板免費下載 | 更多模板 | 提案、作品集 |
| Device Frames | 圖檔 + 動畫影片 | 圖檔免費 | 動畫影片 | 動態展示、社群宣傳 |
| Wannathis | 插圖 + Mockup | Freebies 區免費 | 付費素材庫 | 質感插圖搭配 |
Wannathis 首頁上方多為付費素材,但往下滑找到「Freebies」區就能下載免費 3D 素材,質感都不差。它的優勢是插圖與 Mockup 一起提供,還有 3D 素材動畫能讓設計變得更生動。如果你做的是 作品集網站、作品集範本 或 作品集網站製作教學,Wannathis 的素材套進去能快速提升整體美感,對到 Elementor 作品集、Divi 作品集設計 這類版型也很順手。
這類工具的共通特點是「線上操作、不用裝軟體」,對不熟 3D 軟體的設計師很友善。但要注意,免費方案的模板選擇通常有限,若你的客戶要求特定裝置或場景,可能還是得付費或自己建模。把它們當成「快速產出提案視覺」的工具來用最務實,最終成品的主力還是得回到正式建模或高階素材。
3D 人物與角色素材,免費版到底能做多少
想找可自訂動作與配件的 3D 人物素材,Homies 3D 與 Humans 都能客製化角色的髮型、表情、動作與服裝;Shapefest 則提供大量可愛 3D 人物與幾何圖形,含香檳金、玫瑰金、雷射等高質感材質,可一鍵打包同款風格。三者的免費範圍都不大,完整功能多需付費。
Homies 3D 的特色是讓你創造屬於自己的 3D 角色,髮型、表情、衣服、動作都能客製化,還附超過 50 種配件(愛心、購物籃、相機等)任你組合。免費版只給一個角色樣本試用,想完整體驗客製化就必須付費升級。它更像是「先試用、再決定要不要買」的工具,免費版能做的有限。
Humans 走的是姿勢與動畫路線,站上有超過八十種姿勢(運動、旅遊、溜滑板等),服裝會跟著動作變化,還提供幾個簡短動畫效果(溜滑板、拳擊、聽音樂搖擺)讓角色更生動。使用 Humans 製作 3D 角色需要付費購買套件,但網站有免費 Demo 可以試用。如果你做的是動態較多的社群素材,Humans 的動畫功能會比靜態角色更實用。
| 工具 | 強項 | 免費範圍 | 付費解鎖 |
|---|---|---|---|
| Homies 3D | 角色客製化 + 50 種配件 | 僅一個樣本 | 完整客製化 |
| Humans | 80+ 姿勢與簡短動畫 | Demo 試用 | 付費套件 |
| Shapefest | 多種配色與角度、一鍵打包 | 人物 / Icons / 幾何圖形 | 更高解析度 |
Shapefest 是這三者裡免費範圍相對寬鬆的,可愛 3D 人物、社群 Icons、精緻幾何圖形都能免費下載,並提供多種配色與角度。它最實用的是「一鍵打包」功能,找到喜歡的風格後可以把整套同款素材一次打包,完全免費。幾何圖形的材質選擇豐富,從香檳金、玫瑰金到雷射都有,不論你跟的是哪一種 設計趨勢,或對到什麼 網站色彩計畫、色彩心理學,都找得到匹配的素材。
角色類素材要特別留意一點:免費版通常限制較多(樣本數少、不能匯出高解析、動畫鎖定),完整功能幾乎都要付費。專案若大量需要 3D 角色,與其在免費版裡東挑西揀,不如直接評估付費方案划不划算。角色素材用得好能讓設計有人味,用不好反而會讓畫面看起來像廉價素材庫,這中間的分寸要拿捏,本身就是 網頁設計關鍵元素 取捨的一部分。
大圖庫裡的 3D 素材與擬真模型:Freepik、Adobe Stock、IconScout、MotionElements、Unsplash
Freepik、Adobe Stock、IconScout、MotionElements 都能在站內搜尋「3D」找到大量素材,多數為混合付費與免費,可用左方工具列篩選「Free」僅顯示免費項目;Unsplash 則以攝影為主,但也有設計師上傳的 3D 素材且多可免費商用、免標註。大型圖庫的優勢是素材類型齊全,缺點是免費與付費混在一起,要花時間篩選。
Freepik 在搜尋框輸入「3D」就能找到 Icons、背景、文字等素材,檔案格式涵蓋圖檔、AI 檔、SVG 檔。篩選方式是左方工具列選「Free」,就只顯示免付費項目。Freepik 的強項是種類多,Icons、3D 背景、3D 文字應有盡有,下載後也能用 圖片 SEO 優化 處理後再上線;相對地,免費項目的質感參差不齊,要自己挑。
Adobe Stock 提供 30 天免費試用,但這裡有個容易踩雷的點:試用期間下載的素材不能用於商業用途。你以為免費拿到的素材,其實只是讓你「試用看看」,要商用就必須付費購買版權。接案設計師一定要記清楚這條規定,免得交付作品後才發現侵權,平時蒐集 網頁設計靈感 時也別把試用素材當免費可用。
| 圖庫 | 3D 素材類型 | 免費篩選 | 商用注意 |
|---|---|---|---|
| Freepik | Icons / 背景 / 文字 | 左方選 Free | 免費項目可商用,需標註(依方案) |
| Adobe Stock | Icons / 背景 / 插圖 | 30 天試用 | 試用期下載不可商用 |
| IconScout | 3D Icons(數十萬款) | 免費版有數量限制 | 複製貼上免下載 |
| MotionElements | 擬真模型(家具 / 人物) | 篩選「免費」 | 多為付費,免費較少 |
| Unsplash | Icons / 3D 物件 | 多數免費商用 | 免註冊、免標註 |
IconScout 是國外知名素材網站,光是 3D Icons 就多達數十萬種(廠商自述,實際數量以官網為準),含人物角色、電商插畫、Emoji、幾何圖形。它最方便的是可以直接複製 3D 素材、貼到設計上,不必下載到電腦佔空間,這對講求效率的原型設計流程很加分。IconScout 也有 Figma 外掛,能選 PNG 或 SVG,還能搭配 Lottie 動畫呈現,但免費版有使用數量限制。
MotionElements 主打超擬真 3D 模型,家具、人物、動物、建築都有,質感接近實拍。素材多為付費,但可以透過左方工具列篩選「免費」找出可用的免費項目。除了擬真模型,它也有可愛風格的 3D Icons,加在網頁設計裡不會太突兀。當你需要的偏向高質感場景或物件、而非 Icons 時,MotionElements 會比前面幾個 Icons 網站更對口,這類擬真素材還能與 Illustrator 商品倒影、Illustrator 波浪線條 這類向量技巧混搭。
Unsplash 雖以攝影為主,但也有設計師上傳的 3D 素材,風格從可愛 Icons 到高質感 3D 物件都有,且多種下載格式可選。它的優勢是授權寬鬆:幾乎都可免費商用、下載免註冊、免標註作者。不想處理授權細節的人,Unsplash 是最省事的選擇之一,用 Canva AI 魔法工作室、Canva 新手教學 也能快速組裝成社群圖。習慣在 Figma 裡直接取用圖庫的話,把外掛設定好,Unsplash 的素材也能整合進來。
大型圖庫的共通策略是「免費與付費混合」,這其實是平台的商業手法:用免費素材吸引你進來,再引導你升級付費方案。使用時要保持清醒,篩選 Free 之後還要逐一確認每個素材的授權標示,不要看到「下載」鈕就點。常需要管理大量素材的話,用素材管理工具把下載的檔案分類整理,之後找素材會快很多,再配上 Canva Pro 進階技巧 產出效率會再高一截。
立體文字、黏土材質與動畫:幾個值得收藏的特殊風格
除了 Icons 和 Mockup,還有幾個走特殊用途的 3D 素材。Khagwal 3D 提供可愛物件插圖(獎盃、購物袋等),五種配色、五個角度,完全免費但僅限 Figma 外掛使用;Artify 3D lettering 提供上百種 3D 文字與單字母素材可自拼句子;IconScout 則有黏土材質與可搭配 Lottie 動畫的 3D 素材。
Artify 3D lettering 解決的是一個很具體的需求:把平面文字變成立體。一般設計裡的文字都是平面的,頂多靠粗細、顏色、大小來凸顯,加入 3D 文字後能同時凸顯內容並增加層次感。站上有兩百多種 3D 文字語錄(Hello World、Sale、About Us 等),若沒有你要的句子,還有單字母素材讓你自己拼出任何句子。免費版可下載 10 個 3D 文字,但僅限個人用,商用需付費升級。這類立體文字還能跟 精選英文字體、Logo 標準字設計、排版字體行距技巧 一起組合使用。
IconScout 的黏土材質是另一個值得提的特殊風格,走柔軟、可愛路線,跟 Icons8 的黏土風格有點像但細節不同。它還能接上 Lottie 動畫呈現,讓 3D 素材動起來,跟 Figma 環形文字效果、Illustrator 霓虹燈文字效果算是同一掛的立體動態技巧。3D 動畫素材通常需要付費升級,挑選時要先有心理準備。想把 2D 圖片轉成 3D 動畫,也可以看看把 2D 圖片變 3D 動畫的工具,那是另一種產出立體感的方式。
Artify 提供單字母素材這點,等於把「3D 文字素材」從固定語錄擴充到任意句子,靈活度大幅提升。你可以用它拼出品牌名、活動標語、CTA 按鈕文字,這對做 Landing Page 或社群宣傳圖的人來說很實用,再用 AI Logo 產生器、AI 去背工具 把視覺補齊就更快了。不過要記得,免費版僅限個人用,商用前一定要升級,否則交付客戶的作品會有侵權風險。
3D 素材使用技巧與授權注意事項
使用 3D 素材前務必確認授權條款是否允許商用、是否需標註作者,其中 CC0 為最寬鬆(可自由改作、商用、免標註);設計上則要避免堆疊過多 3D 元素導致畫面凌亂,適量加一點動態效果來提升 UI/UX 體驗就夠了。這兩件事看似瑣碎,卻是決定作品能不能順利上線的關鍵。
授權部分,先弄懂幾個常見類型。CC0 是最寬鬆的,等同於「放棄版權、任你使用」,免費商用、免標註、可改作,3D ICONS 就是這類。一般免費授權(如 Icons8、Freepik 免費項目)允許商用,但可能有標註要求或使用額度限制,要逐案確認。試用期下載的素材(如 Adobe Stock)則完全不能用於商業作品,這是最容易踩雷的一類。CC0 與一般免費授權的差別,就在於標註義務與改作自由度的不同,重要性跟 RGB 與 CMYK 色彩模式 一樣,是基礎但影響深遠的觀念。
| 授權類型 | 商用 | 標註作者 | 改作 | 代表網站 |
|---|---|---|---|---|
| CC0 | 可 | 免 | 可 | 3D ICONS |
| 一般免費授權 | 多數可 | 視條款 | 視條款 | Icons8、Freepik |
| 試用期下載 | 不可 | — | — | Adobe Stock(試用期) |
| 付費授權 | 可 | 免 | 視授權 | 各付費素材庫 |
授權踩雷最常發生在三種情境,每一種都有對應的防呆做法。第一種是把試用期素材當免費素材交付客戶,例如從 Adobe Stock 試用方案下載的 3D 圖示直接進商用稿;防呆做法是試用期素材一律放進獨立資料夾、命名加註「不可商用」,交付前再清查一次。第二種是忽略標註義務,把需要標註來源的免費素材直接上線,導致接到侵權通知;防呆做法是下載當下就截圖授權頁、把標註文字一起存進素材資料夾。第三種是跨專案重複使用素材卻沒重查授權,原網站可能在這段期間改了授權模式;防呆做法是每個新專案都回官網確認一次,不要假設舊判斷還有效。
設計部分,3D 元素用太多反而會讓畫面凌亂。一個畫面裡,3D 元素最好只承擔一個視覺重點(例如首頁主視覺的立體圖示),其餘區塊維持平面,立體感才會被襯托出來,而不是互相打架。動態效果不用多,一點點就夠:例如動態按鈕、載入動畫、毛玻璃質感,讓 3D 元素在互動中自然浮現就好,別為了熱鬧而堆疊。
下載後匯入 Figma 是通用做法:多數 3D 素材下載成 PNG 或 SVG 後,直接拖進 Figma 畫布就能用。有外掛的工具(3D ICONS、Icons8、Free 3D icon、Khagwal 3D)可以省去這個步驟,在專案內即點即用。還不熟悉匯入流程的話,先看 Figma 官方文件的操作示範,把 網頁字體 與 中文字體 設好,3D 素材與文字的搭配用 色相環配色手冊 校一下會更協調。
最後提醒一件容易忽略的事:授權條款會變。網站今天的 CC0,不代表明天不會改授權模式;今天免費的素材,也可能在某次改版後轉為付費。商用前務必回到官網確認最新授權條款,不要只憑任何第三方整理就下定論。把「查授權」當成下載後的固定動作,才能避免日後的侵權風險,這件事跟做 網站 Logo 設計與配色、參考 品牌 Logo 設計案例 一樣,都是顧品牌資產的基本功。
3D 素材挑選評分卡:用四個維度幫網站打分
面對十幾個 3D 素材網站,光憑感覺挑很容易失準。這裡提供一個四維度評分卡,每個維度給 1 到 5 分,加總後就能客觀比較哪個網站最適合你當前的專案。評分卡的好處是強迫你把模糊的「這個看起來不錯」拆成可量化的判斷,尤其接案時要跟客戶解釋為什麼選 A 不選 B,有分數當依據會更有說服力。
| 維度 | 1 分 | 3 分 | 5 分 |
|---|---|---|---|
| 授權寬鬆度 | 試用期 / 僅個人用 | 免費商用但需標註 | CC0 可改作免標註 |
| 工作流整合 | 只能下載手動匯入 | 有下載但格式需轉檔 | 有原生 Figma 外掛 |
| 風格覆蓋 | 單一主題、數量少 | 覆蓋常用主題 | 多風格、持續更新 |
| 畫質彈性 | 固定低解析 | 多尺寸 PNG | 多解析度 + 動畫 |
用這張評分卡實測前面的網站,會浮現清楚的取捨。3D ICONS 在授權寬鬆度與工作流整合都得 5 分(CC0 加 Figma 外掛),但風格覆蓋只有 3 分(四種固定配色),適合需要安心商用與快速套用的網頁點綴情境。IconScout 在風格覆蓋拿 5 分(數十萬款),但授權寬鬆度因免費版有數量限制只給 3 分,適合需要大量多元素材、可接受部分付費的團隊。MotionElements 在畫質彈性與擬真度最高,但工作流整合最弱(無 Figma 外掛、檔案大),適合做高質感場景而非介面設計。分數沒有絕對優劣,重點是讓取捨有依據。 舉一個接案常見的情境說明評分卡怎麼用。假設你接到一個品牌活動頁,需要十多個統一風格的 3D 圖示、客戶要求可商用、且設計稿就在 Figma 上協作。把 3D ICONS 放進評分卡:授權 5(CC0)、整合 5(外掛即用)、覆蓋 3、畫質 4,合計 17 分;再把 3d Icons 放進去:授權 4、整合 3(無獨立外掛)、覆蓋 4、畫質 5,合計 16 分。兩者只差一分,但差距落在「整合」這欄,而這個專案恰好最看重協作效率,所以選 3D ICONS。換成一個擬真家具展示專案,MotionElements 的畫質 5 會拉開差距,結論就會反過來。評分卡的真正價值,是逼你把每個專案最看重的維度先標出來,再讓網站去對齊它,算出誰最高分只是附帶結果。
3D 素材與網頁效能:立體視覺的載入代價
3D 素材放到網頁上會帶來載入成本,這個成本在行動裝置上特別明顯。根據 Statista 統計,2026 年第一季行動裝置(不含平板)占全球網站流量的 52.27% [來源:〈Statista — Share of mobile web traffic worldwide quarterly 2015-2026〉〈https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/〉〈2026-04-28]。換句話說,超過一半的訪客用手機看你的網站,他們的網路速度與裝置效能往往不如桌機,一張未壓縮的高解析 3D 圖示,就可能讓手機版首頁多花幾秒鐘載入。
載入速度直接影響使用者體驗與搜尋排名。Google 自 2021 年 5 月起將 Core Web Vitals 列為搜尋排名訊號之一,結合行動裝置友善度、HTTPS 與干擾性插頁廣告規範一起評估頁面體驗 [來源:〈Google Search Central Blog — Timing for page experience ranking rollout〉〈https://developers.google.com/search/blog/2020/11/timing-for-page-experience〉〈2020-11-10]。把一整頁 3D 圖示都塞成高解析 PNG,很可能讓 LCP(最大內容繪製)與 INP(互動到下次繪製)兩個指標惡化,反而抵銷了視覺升級的好處。
務實的做法是把 3D 素材分級使用。首頁主視覺這類需要最大衝擊力的位置,可以用較高解析的 3D 圖示;二級頁面或內文配圖,改用壓縮後的小尺寸 PNG;大量出現的功能 Icons,維持平面向量更輕量。同時善用延遲載入(lazy loading),讓摺頁下方的 3D 素材等到使用者滾動時才載入,能顯著降低首屏的載入壓力。網頁端的圖片記得做 圖片 SEO 優化,壓縮、命名片名與 alt 文字一起處理,立體視覺與效能才能兼顧。
以一個把首頁塞滿高解析 3D 圖示的內容站為例,這類網站常見的狀況是:單張未壓縮的 PNG 落在約 300-800 KB,一頁若同時擺放 8 到 12 張立體圖示,首頁圖片總重很容易衝到約 4-7 MB,LCP(最大內容繪製)在行動裝置上會被拉到約 3.5-5.5 秒,遠超 Google 建議的 2.5 秒門檻;INP(互動到下次繪製)也可能因為瀏覽器忙著解碼大量 PNG 而退到約 250-400 毫秒。把同一批素材做分級處理(主視覺保留高解析、內文配圖壓到約 80-150 KB、功能 Icons 換成平面向量)之後,依這類站的典型表現幅度,首頁圖片總重多半能降到約 1.2-2 MB,LCP 約回落到 2.0-2.8 秒,INP 約回到 120-200 毫秒,大致回到「良好」區間。
這裡要誠實點出一個限制:上述幅度是依這類網站的典型表現概估,實際數字會因主機、CDN、裝置與網路條件而浮動,並非每個站壓縮後都必然落在這個範圍;少數已經做過圖片最佳化、或本身流量極低的網站,優化前後的差距會更小,分級處理的效益也就沒那麼顯著。換成決策角度來看,與其糾結壓縮後能省下多少 KB,不如先判斷這個專案的核心是不是「行動裝置首屏體驗」:如果是,3D 圖示分級與延遲載入就值得優先排進工時;如果主力流量來自桌機、或主視覺本來就只有一張,那麼只壓一張高解析 PNG 反而比全面重做素材系統更划算。先把「要解決的效能問題」講清楚,再決定素材投入的力道,才不會為了立體感而把載入代價轉嫁給手機訪客。
什麼情況不該用 3D 素材:四個該收手的訊號
3D 素材不是萬靈丹,有些情境硬套反而扣分。以下是四個該收手的訊號,出現任何一個就代表平面素材或攝影會更合適。學會「不用」比學會「怎麼用」更需要判斷力,也是區分設計師品味的關鍵。
- 品牌調性走的是克制與留白:金融、法律、醫療這類需要傳遞信任與穩重的產業,過度立體的圖示容易顯得花俏不專業,這時極簡線條 Icon 比立體 Icons 更對題。
- 資訊密度已經很高:表格密集的後台介面或資料儀表板,再疊 3D 元素只會讓使用者分心於視覺而忽略內容,這類介面優先講求掃讀效率。
- 預算或時程只夠用一次:3D 素材要發揮效果通常需要一套同風格的 Icons 形成系統,只買一個單點素材放進去會像貼紙,改用一套風格一致的平面 Icon 會更協調。
- 目標受眾偏好功能性大於美觀:工具型產品的使用者要的是快速完成任務,過多立體裝飾會拖慢理解速度,這時清晰勝於華麗。
判斷訊號出現時,並不等於 3D 素材完全出局,而是該降低它的份量。例如整體維持平面、只在關鍵轉換點(CTA、定價方案)放一個立體元素強調,既保留 3D 的吸引力,又不會讓畫面失焦。重點是讓 3D 素材服務設計目的,用得節制才有價值,這個拿捏跟 網頁設計關鍵元素 的整體取捨是一脈相承的。
3D 素材工作流檢查清單:從搜尋到上線
把 3D 素材的使用整理成一個可重複的檢查流程,能降低漏掉授權或格式問題的機率。以下清單分成四個階段,每個專案都照著走一遍,久了會內化成直覺,出錯率會明顯下降。
- 搜尋階段:確認素材類型(Icons / Mockup / 模型)→ 用「能否免費商用」與「能否直接進 Figma」兩條件篩網站 → 先看實際尺寸與格式頁,不只看預覽圖。
- 下載階段:截圖當下授權頁存檔 → 把需標註的素材標註文字一起存進資料夾 → 試用期素材獨立命名加註「不可商用」。
- 設計階段:同畫面 3D 元素只承擔一個視覺重點 → 配色對齊品牌色 → 大量功能 Icon 優先考慮平面向量,立體素材留給主視覺。
- 上線階段:網頁用素材做圖片壓縮與延遲載入 → 命名與 alt 文字依 SEO 處理 → 跨專案重用前回官網重查最新授權。
常見問題
哪些 3D 素材網站可以免費商用?
CC0 授權的 3D ICONS 是最安心的免費商用選擇,可改作、免標註;3d Icons、Icons8、Free 3D icon 的免費版也允許商用,但可能有標註或額度規範,商用前以官網授權頁為準。Unsplash 上的 3D 素材多可免費商用且免標註。
3D Icons、3D Mockup、3D 模型差在哪?要去哪找?
Icons 是立體圖示,檔案小、調角度配色容易,找 3D ICONS、Icons8;Mockup 是把設計套進立體裝置,用於提案與作品集,找 Mockupz、Device Frames;模型是家具、人物等擬真物件,適合動畫與高質感場景,找 MotionElements、Shapefest,整體方向也能對照 UI/UX 設計差異來思考。
有 Figma 外掛的 3D 素材有哪些?
3D ICONS、Icons8、Free 3D icon、Khagwal 3D 都有免費 Figma 外掛,可在專案內直接插入並切換配色角度;IconScout 也有外掛,支援 PNG、SVG 與 Lottie 動畫,但免費版有數量限制,想看更多可參考 Figma 圖示外掛推薦。
3D 素材下載後怎麼匯入 Figma?
多數 3D 素材下載成 PNG 或 SVG 後,直接拖進 Figma 畫布即可使用;AI 檔則需先在向量軟體轉檔。若有外掛,安裝後即可在專案內即點即用,不必手動下載匯入。
CC0 與一般免費授權的 3D 素材差別是什麼?
CC0 等於放棄版權,可自由商用、改作、免標註作者;一般免費授權雖常允許商用,但可能要求標註來源、限制使用額度或禁止改作,差別在標註義務與改作自由度。
付費 3D 素材值得買嗎?免費版夠用嗎?
若只需靜態 PNG 做網頁點綴,免費版多半夠用;若需要高解析印刷、動畫素材或大量角色客製化,付費方案才划得來。建議先用免費版試水,確認風格與工作流契合再升級,動畫需求可搭配 Figma 載入動畫製作。
商用 3D 素材要標註作者嗎?
取決於授權類型。CC0 與多數付費授權免標註;一般免費授權(如部分 Icons8、Freepik 免費項目)可能要求標註來源或連結。以各網站授權頁說明為準,商用前務必逐案確認,圖片上線後也別忘了做圖片 SEO 優化。
什麼時候不該用 3D 素材?
當設計目的是傳遞信任、資訊密度高、或預算只夠買單點素材時,平面素材或攝影往往比 3D 更到位。一個簡單的判斷是:如果你的專案連一套同風格的立體 Icons 都湊不齊,那麼硬塞單一 3D 元素只會像貼紙;這時回頭用風格一致的平面向量,整體反而更協調。