很多設計師都有類似經驗：打開 Pinterest，滑了兩個小時，存了很多圖片；但真正要開始設計時，卻不知道哪一張能派上用場。收集靈感不難，難的是把靈感整理成「可以使用的參考」。

這篇文章整理 15 個我認為很適合設計師收藏的網站，包含綜合靈感、作品集、網站設計、UI/UX、字體排版與 Banner 參考。除了介紹網站本身，我也會整理我自己的方法，讓這些網站不只是收藏清單，而是真的能放進設計流程裡。

一、為什麼做設計需要收集靈感？

很多人以為靈感是憑空冒出來的，腦袋一閃，作品就誕生。

不過做過設計就知道，設計比較像重組。你看過的版面、配色、字體、構圖，會在心裡累積成一個視覺資料庫，接到案子時，腦袋會在這個資料庫裡翻找、拼接，再長出新東西。看過 10 種版型的人，跟看過上千種版型的人，面對同一個需求能想到的解法數量差很多。

收集靈感大概有四個好處：

❶ 幫你找方向，還沒決定要走極簡還是科技感時，看大量參考能幫你判斷

❷ 讓溝通更順，客戶說的高級感、乾淨一點都很抽象，拿參考圖討論比較快對齊

❸ 養品味，看得多了，慢慢分得出什麼耐看、什麼只是表面效果

❹ 少走冤枉路，很多版型和情境都有成熟做法，不必每次都重新摸索

📌 當你碰到卡關貨是腦袋一片空白的時候，這些網站就是你的急救包，讓你不用每次從零開始！

二、收集靈感等於抄襲嗎？

這應該算是要分享類似主題時，每個人都會分享的大哉問，我自己認為「收集靈感不等於抄襲」，不過前提是，你看的不是「表面」，而是「方法」。

如果只是把別人的版面、配色、圖片位置、文字比例幾乎照搬過來，只換掉品牌名稱，那很容易變成抄襲。

不過如果你是去觀察它為什麼這樣設計，例如標題為什麼放在這裡、按鈕為什麼這樣突出、圖片為什麼這樣裁切、留白為什麼這麼多，再把這些觀察轉換到自己的內容與品牌情境裡，那就是參考。

我會把使用參考分成三個方向：

❶ 觀察：先看整體感覺與設計方向

❷ 拆解：分析它的版面、色彩、字體、資訊層級與使用情境

❸ 轉化：回到自己的專案，做出適合這次需求的版本

📌 結論：參考不是問題，沒有消化就直接搬用，才是問題。

三、如果你想找設計參考，可以先看哪些網站？

我把 15 個網站分成 5 類，從綜合靈感到平面字體都有！

📌 每個網站都附上一句要注意的地方，因為沒有網站適合所有情境，知道它不擅長什麼，跟知道它擅長什麼一樣重要。

A. 綜合靈感牆 / 視覺書籤（建立自己的 mood board）

網站定位適合情境要注意的地方
Pinterest最大眾的視覺搜尋引擎，什麼都有專案初期廣撒網找方向，用英文關鍵字更準雜訊和廣告多，常找不到原圖，容易越滑越遠
Cosmos設計師版 Pinterest，無廣告、有 AI 搜尋建立長期、品味一致的靈感庫內容量比 Pinterest 少，冷門題材不一定找得到
Savee圈內人愛用的視覺收藏站，編輯感強當主力 mood board，搭 Figma plugin 直接拉圖偏平面、攝影、品牌，UI 和網頁參考少
Designspiration可以用顏色搜尋的靈感庫已有配色方向，要找對應視覺偏視覺氣氛，UI 和網頁不是強項

1. Pinterest

Pinterest 是最容易開始使用的靈感網站。它的內容非常廣，從品牌設計、海報、包裝、攝影、穿搭、室內、UI 到配色，都可以快速找到大量參考。

它很適合用在專案初期，幫助你發散方向。當你還不確定這次設計要走什麼風格時，可以先用不同關鍵字搜尋，慢慢找出共通的視覺感。

不過 Pinterest 的內容也比較雜，很多圖片來源不清楚，所以它比較適合拿來做初步探索，不太適合當成唯一參考來源。

2. Cosmos

Cosmos 比 Pinterest 更偏向設計師與創作者使用。它的介面乾淨，內容也比較有整理感，很適合用來建立自己的靈感資料庫。

如果說 Pinterest 適合大量搜尋，Cosmos 更適合長期收藏。你可以把不同風格、主題、專案相關的參考整理起來，慢慢累積成自己的視覺資料庫。我會比較推薦把 Cosmos 用在「整理品味」這件事上，而不是單純滑圖片。

3. Savee

Savee 是一個很適合收藏高品質視覺參考的平台。它的內容偏平面、品牌、攝影、排版與視覺風格，整體比 Pinterest 更安靜，也更容易看到完整的視覺方向。

如果你常做品牌設計、社群視覺、海報、網站 moodboard，Savee 很適合當成主要收藏工具之一，它的好處是畫面很乾淨，使用時比較不容易被太多雜訊干擾。

4. Designspiration

Designspiration 適合找平面設計、攝影、配色、排版與視覺語氣。

它不像 UI 靈感網站那麼功能導向，比較適合用來找 moodboard。當你需要建立某種感覺，例如復古、極簡、文藝、粗獷、實驗性或雜誌感，Designspiration 會很有幫助，它也很適合觀察色彩與構圖，尤其是做品牌視覺或平面設計。

B. 設計作品社群（看高手怎麼做、追蹤創作者）

網站 定位 適合情境 要注意的地方
Dribbble 全球最大設計師作品社群 找配色、排版、插畫、動效的視覺方向 多是概念稿，為了好看常犧牲實用性
Behance Adobe 旗下，收完整專案 學設計思路，研究品牌、包裝的完整論述 資訊量大、瀏覽慢，不適合快速找單張圖

5. Dribbble

Dribbble 上有大量 UI、品牌、插畫、Icon、Landing Page 與動態設計作品。它的優點是視覺完成度高，很適合快速找畫面感。

當你想知道某一類風格現在常見的表現方式，例如深色介面、科技感 Dashboard、金融 App、漸層插畫，Dribbble 可以很快給你方向。

但要注意，Dribbble 上很多作品是概念稿，不一定是真實上線產品。所以它適合看視覺表現，但如果要研究真實流程或使用情境，還是要搭配 Mobbin、Page Flows 這類工具。

6. Behance

Behance 更適合看完整專案。它和 Dribbble 最大的差別是，Behance 上常常可以看到一個品牌或設計案從概念、過程到應用的完整呈現。對品牌設計、包裝設計、視覺識別、活動主視覺來說，Behance 很值得花時間看。

如果你正在做完整品牌案，不要只看單張圖片，可以多看 Behance 上的專案如何安排提案邏輯、如何延伸設計系統、如何把視覺應用到不同媒介。

C. 網頁 / Landing Page 設計靈感

網站 定位 適合情境 要注意的地方
Awwwards 網頁設計業界指標 看互動和視覺的天花板，說服客戶投資網站 偏炫技和實驗型，商業案要拿捏轉換率
SiteInspire 依類型、風格、產業分類的網頁靈感庫 快速建立某產業網站的概念 偏成熟穩定，創意刺激不如 Awwwards
Land-book 專收 Landing Page 的案例庫 做活動頁、產品頁、課程銷售頁 聚焦單頁，完整網站或後台參考少

7. Awwwards

Awwwards 是看高品質網站設計與互動設計的經典網站。上面有很多視覺表現強、互動細節豐富的網站案例。

它很適合用來觀察網站設計的可能性，例如滾動動畫、互動方式、頁面節奏、視覺敘事等。不過 Awwwards 上的作品有些比較偏展示型或實驗型，不一定每個都適合直接套用到商業網站。使用時可以把它當成創意參考，再回到專案本身判斷是否適合。

8. SiteInspire

SiteInspire 收錄許多成熟、乾淨、有質感的網站設計，也有不錯的分類方式，可以依照風格、類型、主題去找案例。

相較於 Awwwards，SiteInspire 更適合找實際網站專案的參考。像是品牌官網、作品集、電商、設計工作室網站，都能找到不少可以分析的案例。如果你接到網站設計案，想先理解某個產業或風格常見的呈現方式，SiteInspire 很適合當起點。

9. Land-book

Land-book 很適合研究 Landing Page、產品頁、SaaS 網站與品牌首頁。它的價值在於可以幫你觀察網頁的區塊結構。像是首屏怎麼安排、CTA 放在哪裡、產品特色怎麼呈現、客戶見證怎麼放、FAQ 和定價區塊怎麼設計。

如果你常做行銷頁、課程銷售頁、產品介紹頁或 SaaS 網站，Land-book 會是很實用的參考來源。

D. UI / UX / App 介面參考

網站 定位 適合情境 要注意的地方
Mobbin 真實 App 截圖庫，收錄完整使用流程 研究註冊、結帳這類 UI 流程怎麼設計 免費版有額度限制，重度使用要付費
Figma Community 海量 UI Kit、設計系統、icon、外掛 開案前找現成元件當底，加快製作 模板別照搬，要當結構參考
Page Flows 把真實產品流程錄成影片 設計一整段流程而非單一畫面 以國際產品為主，部分內容要付費

10. Mobbin

Mobbin 是 UI/UX 設計師很值得收藏的網站。它收錄大量真實 App 和 Web 產品畫面，可以依照平台、產品類型、畫面類型、流程去搜尋。

它最大的價值是「真實產品參考」。當你要設計登入、註冊、付款、訂閱、搜尋、篩選、設定、個人頁或 onboarding 流程時，可以直接看成熟產品怎麼處理，如果 Dribbble 偏向看漂亮畫面，Mobbin 更適合看產品慣例與 UI pattern。

11. Figma Community

Figma Community 是 Figma 使用者很實用的資源庫。裡面有 UI Kit、Design System、Wireframe、Icon、Plugin、簡報模板、流程圖模板等內容。

它不只是靈感網站，也可以直接加速實作。當你要做 dashboard、mobile app、landing page、persona、user journey map，都可以先看看有沒有合適的模板或元件可以參考，不過模板最好不要直接照搬，而是把它當成結構參考，再依照專案內容調整！

12. Page Flows

Page Flows 適合研究使用者流程。它收錄許多真實產品的操作流程，包含畫面截圖與影片。如果你設計的是一整段體驗，而不只是單一畫面，Page Flows 會比一般靈感網站更有幫助。

例如註冊流程、升級方案、取消訂閱、購物結帳、建立帳號，這些都不是單看一張畫面就能理解的。你需要看使用者從第一步到最後一步怎麼移動，哪裡需要提醒，哪裡需要降低摩擦。

E. 平面 / 海報 / 字體 / 品牌

網站 定位 適合情境 要注意的地方
typo/graphic posters 全球海報與字體排印作品 做海報、活動主視覺、需要強排版 偏藝術實驗，商業性設計少
Typewolf 字體搭配範例，看真實網站怎麼配字 卡在標題該配什麼字的時候 以英文字體為主，中文搭配要另找
Banner Library 日系高質感 Banner 案例庫 做促銷 Banner、社群圖、電商主視覺 風格偏日系，其他地區調性要另補

13. typo/graphic posters

typo/graphic posters 專注於字體與圖形海報。它很適合看 typography、海報構圖、圖形實驗與視覺張力。如果你常做活動視覺、展覽海報、講座海報、音樂活動主視覺，這個網站可以提供很多排版上的參考，它特別適合用來觀察文字如何成為畫面的主角，而不只是資訊輔助。

14. Typewolf

Typewolf 是字體與網頁排版靈感網站。它會整理網站中使用的字體，也有字體搭配、字體推薦、免費字體資源與排版相關文章。

對設計師來說，字體選擇常常很耗時間。Typewolf 的好處是，它不是只列出字體名稱，而是讓你看到字體在真實網站中的使用方式。如果你想提升英文字體搭配、網站排版或品牌字體選擇能力，Typewolf 很值得定期看看。

15. Banner Library

Banner Library 專門收集 Banner 設計案例，特別適合做廣告圖、社群圖、活動圖、電商促銷圖時使用，它可以依照產業、風格、顏色、尺寸、媒體平台去找參考。像食品、服飾、美妝、旅遊、教育、活動類型的 Banner，都能快速找到相關案例。

Banner 看起來只是小圖，但其實很考驗資訊層級。標題要清楚，主視覺要吸引人，CTA 要明確，品牌也要被看見。Banner Library 很適合拿來研究如何在有限空間裡安排資訊。

四、這些網站，到底該怎麼用？

網站清單本身不是重點，真正重要的是怎麼使用。

而這段也是我這篇文最想寫的方向之一，因為網路上其實已經有很多文章在講這些網站介紹，但不一定會分享具體是怎麼使用這些網站來達成目的，因此在這邊也分享我自己的使用方法跟流程讓大家參考，不過還是推薦大家可以多看一下人的分享後，去找出屬於自己的工作流喔！

📌 我的核心觀點是：如果只是看到喜歡的圖就存起來，久了很容易變成一個很大的資料夾，但真正要設計時還是找不到。比較好的方式，是把靈感收集變成固定流程。基於這個觀點，我分成五個步驟進行：

步驟 ❶： 先定義這次要找什麼

開始找參考前，先問自己：這次要找的是風格、版型、字體、流程、圖片素材，還是資訊架構？

看到漂亮就存沒什麼用，先問自己為什麼覺得它好，是配色、留白，還是某個構圖手法。想清楚再存，你存下的就不只是一張圖，而是一個之後能拿來用的手法，先分清楚目的，後面比較不會越看越亂！

步驟 ❷： 收藏時加上一句自己的觀察

不要只收藏圖片，也要記下你為什麼收藏，例如：

這個版面留白很舒服、這個 CTA 很明顯、這個字體搭配適合精品感、這個 Banner 的商品圖比例很好、這個 onboarding 流程很短，使用者壓力比較低等等…。這些觀察會讓參考變得有用。下次回來看時，你不只是看到一張圖，而是看到一個可以被使用的設計方法。

步驟 ❸： 用分類整理，而不是全部丟在一起

留下觀察後，也順手分類！收藏時就分好資料夾，可以照用途（海報、網頁、品牌），照元素（配色、字體、構圖），或照手上的專案分。

加上步驟自己的觀察，就可以讓你的資料庫涵蓋分類＋觀察兩大重點資訊，後續再瀏覽跟閱讀時更能有效率的掌握這些內容。且在現在的 ai 時代裡，這些你自己萃取的資訊也可以讓 ai 有更好的搜尋與檢視！

步驟 ❹： 定期檢視與整理

我習慣每幾週、或每個案子開始前翻一次收藏夾，你會發現兩件事，一是很多當初存的東西現在剛好用得上，二是你慢慢看出自己的「品味」傾向，這就是你風格的雛形。回頭翻的過程，是把別人的東西慢慢變成自己判斷的過程。

步驟 ❺： 開始設計前，只保留 3 到 5 個核心參考

參考太多，反而容易讓方向變模糊。

真正開始設計時，建議只挑 3 到 5 個最接近這次需求的參考。每個參考都要知道它的用途：一個看配色、一個看版面、一個看字體、一個看流程，這樣你是在有意識地使用參考，而不是被參考牽著走。

五、常見問答

Q1：靈感網站看太多，反而不知道怎麼做怎麼辦？

建議先縮小範圍！目標找配色，就不要同時看版型和字體、目標找網站首屏，就不要滑到海報和包裝，每次只處理一個問題，參考才會變清楚！

另外，收集會給人一種「我有在進步」的錯覺，但沒有產出。給自己設條線：收集是手段，產出才是目的。可以規定逛靈感和動手做的時間比例，例如 1 比 3，收集只為服務手上的案子。

如果常常不知道怎麼開始，多半是設計目標還不夠清楚，先回到問題本身：這次要解決什麼、傳達什麼感覺、受眾是誰。

Q2：Dribbble 和 Behance 差在哪？Pinterest、Cosmos、Savee 差在哪？

Dribbble 適合快速看視覺表現，通常是一張漂亮的畫面或概念稿；Behance 適合看完整專案，包含設計脈絡、應用方式與提案呈現。簡單說，想找畫面感看 Dribbble；想看完整案例看 Behance！

Pinterest 適合大量搜尋、內容最廣；Cosmos 適合長期整理品味、建立靈感庫；Savee 像高質感的視覺收藏平台，適合找平面、品牌、攝影風格。

Q3：做 UI 設計只看 Dribbble 夠嗎？

不太夠。Dribbble 很適合看視覺，但很多作品不一定是真實產品。做 UI/UX 時，建議搭配 Mobbin 和 Page Flows，去看真實產品的畫面與流程。

漂亮畫面很重要，但產品設計還需要考慮使用者怎麼完成任務。

Q4：素材或模板可以直接使用嗎？

要看授權，也要看使用情境。

Figma Community 裡有很多模板可以直接複製，但正式專案還是建議依照品牌、內容與需求調整。Banner Library、Pinterest、Behance 這類案例則更適合作為參考，不建議直接拿來改字使用。

Q5：怎麼避免作品看起來太像參考？

不要只參考一個作品或是直接抄成品！照前面說的拆解手法、用自己的內容重做，反而會因為養分多元而長出自己的風格，例如：你可以用 A 的配色邏輯、B 的版面節奏、C 的字體層級，再加上自己的品牌內容與限制。

當參考來源變多，而且每個參考都只取其中一個方法，最後做出來的東西就比較不會像單一來源。

六、結語

靈感網站沒有魔法，它們只是原料庫（又或說是入口）。真正有用的，不是收藏了多少網站，而是你能不能把看到的東西整理、拆解，再用回自己的設計裡。

綜合前面的所有內容，我想可以用這句話跟大家結尾：「別當收藏家，當使用者，收藏一千張圖不會讓你變厲害，把其中三張真的用進作品、而且做得更好，才會！」

挑 2 到 3 個適合你的網站固定逛，幫每張收藏想一個為什麼，然後把它用出來，逛久了你會發現，自己不是在找靈感，是在培養一套自己的設計判斷！