Whoops

7 個必收藏的網頁設計靈感網站

整理 7 個必收藏網頁設計靈感網站,從 Awwwards、Land-book、Godly、SiteInspire、Mobbin、One Page Love 到 Dribbble,各對應一種設計能力,附比較表、四象限分類與三層萃取法,教你帶問題瀏覽、做拆解筆記,不再越找越像別人。

作者:褚崇名(Sliven)

本頁目錄

客戶約好下週要看首頁視覺,你打開 Figma,盯著那塊 1440 的空白畫布,腦袋跟著一起空白。滑了兩個小時的 Pinterest、存了八十幾張圖,回過頭卻還是生不出半個明確方向。這個畫面,許多設計師都不陌生。

設計卡關,跟才華沒有關係。就算在這一行做久了,設計師到現在還是會卡。差別只在於,手邊有沒有一套固定的「靈感藥櫃」,卡住的時候不會漫無目的地亂滑,而是走過去拉開對的抽屜。

這份清單就是那個藥櫃。接下來會盤點七個值得反覆查看的網頁設計靈感網站,再加上一套能和客戶一起走的靈感蒐集流程、把參考轉成自己作品的萃取方法,以及三個會讓「參考」踩成「抄襲」的地雷。

核心重點

  • 卡關不要亂滑。先把「自己卡在哪一關」講出來,再決定去哪個網站找答案。
  • 靈感網站是一座分科的藥櫃,整站氛圍、版型骨架、行動版畫面、單一元件,各有對應的去處。
  • 七個值得固定回去翻的清單:Awwwards、Land-book、Godly、SiteInspire、Mobbin、One Page Love、Dribbble。
  • 看到不等於用得到。用「拆結構、辨手法、重組」三層萃取,才不會把別人的作品 copy 進來。
  • 找靈感是最便宜的事,把它做出來才是真功夫。挑對工具與流程,比存了幾百張圖更重要。

設計卡關不是你沒才華,是大腦被「空白畫布」癱瘓了

很多人把設計卡關跟「我沒有靈感」畫上等號,於是拚命看更多圖。這個直覺只對了一半。真正讓你卡住的,通常不是素材不夠,而是選擇太多、限制太少。當你可以在幾秒鐘內滑過幾百張漂亮網站,你的大腦會進入一種「什麼都好、什麼都想做」的過載狀態,這個狀態跟完全沒想法一樣危險。

打個比方:你不會走進一間沒有菜單的超市,把架上所有食材丟進購物車,然後回家才想今晚煮什麼。你會先決定「今晚要煮什麼」,再回頭採買。找網頁設計靈感也是同一件事。先決定你這次要解決的問題是什麼(是首頁 Hero 太弱?是行動版的卡片排版很亂?是 CTA 按鈕沒人點?),再帶著這個問題去對的網站找答案,效率會翻好幾倍。

還有一個現實壓力,讓「找對靈感」這件事不能太隨便。超過六成的全球網頁流量來自行動裝置(Statista 的季度統計,2026 年 4 月),設計必須在小螢幕上成立。WordPress 也支撐了網路上一大部分網站(W3Techs 統計,2026 年 6 月);實際專案還得面對 CMS、佈景主題或頁面編輯器的限制。能精準找到可實現的靈感,遠比蒐集一堆炫技卻難以落地的構想重要。

正因如此,找靈感應該被當成一個獨立的專業技能來練,而不是天賦。業餘者等靈感降臨,專業者建立一套讓靈感穩定產出的流程。這套流程不必多複雜,但它要能重複、要能被檢驗、要能在你狀態最差的時候還是把你自己撈起來。接下來要講的這套分類與萃取方法,就是這種在狀態最差的時候還能依靠的流程。

所以這篇文章不會只丟七個網址給你。接下來會先教你怎麼分類自己卡在哪一關,再帶你走過這七個網站各自適合解決什麼問題。

把靈感網站分成四種「藥效」,先對症再找藥

實務上可以把所有靈感網站依照「能幫你解決什麼問題」分成四類。你在開始找資料之前,先問自己一句話:我現在缺的是整體感覺、是結構、是行動版、還是某個小元件?答案決定你該開哪一個網站。

藥效分類 你會問自己的問題 適合去的網站類型
整站氛圍 「我要的風格到底是科技冷感、還是溫暖手作?」 得獎作品庫、編輯精選集
版型骨架 「這個段落到底要怎麼排,資訊才不會打架?」 Landing Page 合集、排版作品集
行動版畫面 「手機上看起來會不會很擠、按鈕好不好點?」 App 畫面截圖資料庫
單一元件 「這個卡片、按鈕、導覽列要怎麼設計?」 設計師作品社群、元件庫

這個分類最大的好處是:它逼你先把問題講清楚。不少「設計卡關」其實是需求還沒講清楚。當客戶說「我想要現代感」,這句話是空的;但當客戶說「我想要首頁第一屏像科技公司的留白跟冷色調」,你就知道要往整站氛圍類的網站去找,避開按鈕設計那一塊。

把這個四象限記在心裡,接下來的七個網站就能對號入座。

七個值得固定回去翻的網頁設計靈感網站

底下這七個網頁設計參考網站,是依照前述問題分類整理的口袋名單。每個網站都會標出它屬於哪一種「藥效」、最強的地方在哪,以及不適合拿來做什麼。你也可以先看總覽表,再往下挑有興趣的細讀。

在使用這份清單之前,還有一個觀念要先講清楚:沒有哪一個網站是「最好」的,只有最適合你當下問題的那一個。同一個網站,你在不同關卡去翻,會看到完全不同的東西。所以與其死記網址,不如記住每一個網站最擅長解的問題。下面會盡量把「什麼時候去」講清楚,讓你之後可以像查字典一樣按圖索驥。

網站 主要藥效 最強項 不適合拿來
Awwwards 整站氛圍 有評審機制的高水準前衛作品 找簡單可落地的小型站台
Land-book 版型骨架 Landing Page 大全、可分類篩選 找複雜的多頁內容站結構
Godly 整站氛圍 科技、SaaS、AI 新創質感站 找傳統產業或電商氛圍
SiteInspire 版型骨架 編輯精選、極簡與網格美學 找花俏動效
Mobbin 行動版畫面 真實 App 畫面截圖資料庫 找桌面版的複雜排版
One Page Love 版型骨架 一頁式網站與模板資源 找多層級的內容站
Dribbble 單一元件 設計師上傳的元件 shot 看整站實際上線樣貌

Awwwards:看世界級作品的天花板

Awwwards 是一個有評審制度的網站設計競賽平台,每天都會選出當日作品,每月、每年還有更大的獎項。它的價值在於「門檻」:能在這裡被選上的網站,普遍在視覺、互動、技術執行都達到一個檔次。所以它最適合的用途,是讓你看看「這個產業的天花板長什麼樣子」。

但有個陷阱要誠實提醒:Awwwards 上的網站很多是「炫技型」的,動效繁複、版面前衛,這些構想在真實商業專案裡往往做不出來,或做出來會拖垮效能。比較建議的用法是把它當「眼睛的營養品」,定期翻一翻維持品味,但真的要落地時,再去找比較收斂的參考。

卡在一個「我不知道這個產業可以做到多強」的時候,去 Awwwards。卡在「我要怎麼把這個動效做出來」的時候,不要在這裡找答案。

Land-book:Landing Page 的百科全書

Land-book 把網路上的 Landing Page 整理成一個可篩選的資料庫,你可以依照產業(設計公司、電商、餐飲、作品集)或風格去過濾。它解決的是「結構」問題:當你不知道一個頁面的段落順序該怎麼排、Hero 接下來該放什麼、定價區塊要怎麼呈現,這裡有成百上千個真實案例可以參考。

做行銷活動頁的時候,這裡最常派上用場。因為活動頁的本質就是 Landing Page,它有一套相對穩定的結構公式:抓住注意、說明價值、建立信任、引導行動。如果你想把這套結構摸熟,可以先看我們寫的Landing Page 轉換指南,再來 Land-book 對照真實案例,會很有感。

Godly:科技與新創的質感集中營

Godly 聚焦在「數位與科技領域」的質感網站,收錄很多 SaaS、AI 工具、開發者工具的官方站台。如果你做的是 B2B、科技、軟體類的專案,這裡幾乎是你要的味道:冷色調、留白、剛好的字體層次、不過度裝飾。

它的定位跟 Awwwards 有點重疊,但風格更收斂、更貼近商業現實。所以如果你的客戶是科技公司、新創,或你自己做的是工具型產品,Godly 會比 Awwwards 更「用得到」。思考「AI 時代的網站到底該長什麼樣」的時候,也適合來這裡找方向,這部分也可以搭配我們寫過的 AI 網頁設計主題一起看。

SiteInspire:編輯精選的極簡與網格美學

SiteInspire 走的是編輯精選路線,收錄的網站偏極簡、排版導向、網格美學。它可以用風格 tag(例如 minimalist、typography、illustrative)去篩選,非常適合在「我想做一個安靜、有質感、不靠動效取勝的站台」時來翻。

這個網站最大的啟發,是「留白也是一種設計決策」。很多自架站的朋友怕畫面空,於是把每個區塊都塞滿,結果反而失去層次。SiteInspire 上的案例會讓你看到,一個靠字體層次與留白就成立的首頁,質感可以贏過一堆塞滿資訊的網站。對字體與排版有興趣的話,再延伸看排版設計的相關技巧

Mobbin:行動版設計的真實教科書

前面提到過,超過六成的網頁流量來自手機,依據是 Statista 的行動流量統計。這代表設計任何頁面時,都不能把手機版放到最後才處理。Mobbin 是一個真實 App 畫面截圖資料庫,收錄大量 iOS 與 Android 介面,可以依照畫面類型(登入、設定、列表、個人檔案)去篩選。

為什麼一個網頁設計師要看 App 截圖?因為手機螢幕就這麼大,App 設計師被逼著用極少的空間解決資訊呈現問題,他們對「單屏資訊密度」「按鈕好點不好點」「卡片層次」的處理,往往比網頁更精煉。當你在煩惱行動版的某個區塊怎麼排時,去 Mobbin 找同類型的 App 畫面,常常一句話就通了。搭配我們的網頁版面設計攻略一起看,行動版的功力會進很快。

One Page Love:一頁式網站與模板寶庫

One Page Love 顧名思義,專注在一頁式網站,同時也提供不少模板資源。它解決的是「小站結構」問題:個人作品集、活動頁、單一產品介紹頁、小型服務頁。這類網站不需要複雜的多層導覽,重點是把一個故事在單一頁面裡說完、說服人。

做個人品牌、接案作品集、或幫小型工作室架站的朋友,建議第一站就來這裡。它的案例能幫你快速決定「這個段落要不要」「順序怎麼排」「收尾要放什麼」。如果你同時在思考怎麼把這些段落串成轉換路徑,可以再讀我們的CTA 按鈕設計指南,把每一個段落的「下一步」都設計清楚。

Dribbble:單一元件的靈感便利店

Dribbble 是設計師上傳作品的社群平台,上面充滿了單一畫面、單一元件的 shot。它跟前六個網站最大的不同,是這裡的內容多半屬於設計師的提案、練習、概念稿,未必是實際上線的網站。所以它最適合的用途,是找「單一元件」的靈感:一個定價卡片、一組 onboarding 流程、一個儀表板介面、一顆按鈕的狀態。

相對地,Dribbble 最不適合拿來判斷「整站該長什麼樣」。因為很多 shot 是脫離真實營運情境的概念稿,看起來漂亮,搬到真實站台會有很多問題(內容長度不可控、沒有效能考量、沒有無障礙考量)。所以比較建議的用法是把它當「零件供應商」,缺某個零件的時候去逛,不要把它當整站參考。

把別人的神仙構想變成你自己的:三層萃取法

找靈感最怕的一件事,是看了一百個網站,最後做出來的東西還是空的。原因出在「看」跟「用」之間,少了一個轉換步驟。這個轉換可以拆成三層,也適合拿來當團隊共同的工作方法。

第一層:拆結構,不要看顏色

當你看到一個喜歡的網站,第一個動作是把它的結構拆出來,先別急著記配色。它有幾個段落?每個段落在做什麼事?段落之間的順序是什麼?資訊層次怎麼安排?你可以用一張白紙,把它的結構用方塊畫出來,這就是它的骨架。

為什麼先拆結構、不看顏色?因為結構是可以直接搬用的(業界本來就有公認的版型公式),而配色跟字體是品牌識別,搬了就出事。把結構抽離出來,你已經拿到一半的價值,而且不會踩到抄襲的紅線。對版型結構有興趣,可以延伸讀我們整理的Bento Grid 排版教學,看一種當代很流行的版型骨架怎麼運作。

第二層:辨識手法,給它一個名字

第二層是去辨識「它用了什麼手法」。例如:它用了大字標題配小字副標的層次對比、它用了一個置中的 hero 搭配漸層背景、它把定價做成三欄中間放大的比較表。把你看到的手法用一句話講出來,給它一個名字。

這一步的威力在於:當手法被你命名之後,它就脫離了原本那個網站的影子,變成你「工具箱裡的一個工具」。下次你自己設計的時候,你可以自由地把這個工具跟其他工具組合,做出跟原作完全不同的東西。這也是設計師跟抄襲者最大的差別:設計師吸收手法,抄襲者複製外觀。

第三層:用自己的材料重組

第三層,是把前兩層抽出來的「骨架」與「手法」,套進你自己的品牌材料裡重新組合。你自己的品牌色、你自己的字體、你自己的圖片、你自己的文案長度。同一個骨架,套上不同的材料,會長出完全不同的東西。

這一層也是大多數人偷懶跳過的地方。他們看到喜歡的網站,直接把配色、字體、間距全部抄過來,這不是找靈感,這是複製。真正的萃取,是只借結構與手法,材料全部用自己的。當你能做到這一點,就算你參考的對象跟你的成品擺在一起,別人也看不出血緣關係。

一個實際的萃取示範

以下用常見的 SaaS 工具官網做示範。第一層拆結構:首頁先是「置中大標配一句副標、一顆主 CTA、底下產品截圖」的英雄區,接著是三欄功能卡片,再來是社會證明的客戶 logo 牆,收在定價比較區。把這個骨架用方塊畫成草圖,全程不碰它的顏色跟字體。

第二層辨識手法:可以看出它用了「置中對齊搭配大量留白」「三欄等高卡片」「把客戶 logo 轉成灰階降低視覺干擾」這幾個手法。接著給每一個手法取一個名字,存進自己的設計筆記,這幾個名字之後可以單獨拿出來用。

第三層重組:把同一個骨架,套進律師事務所這類品牌的材料:深藍主色、穩重的襯線字體、真實的案件現場照片。出來的成品跟原本那個 SaaS 站擺在一起,沒有人會覺得它們有血緣關係,但骨子裡是同一套結構。這就是萃取的真正力量:你借的是骨,不是皮。同一副骨架,換上不同的材料,可以長出無限種成品。

看完之後,怎麼真的在畫面上做出來

找靈感是最便宜的一步,把靈感做出來才是真功夫。很多人卡在「我看到了神仙構想,但我做不出來」。這時候你要分的問題是:你是卡在「設計能力」,還是卡在「工具能力」?

如果是設計能力(不會排、不會抓比例、不會配色彩),那就回頭補網頁設計的基礎觀念。我們寫過一篇網頁設計從零到一的完整指南,把 UI/UX 原則、響應式、SEO 友善架構串起來,先讀過一遍,你看靈感網站的眼光會完全不一樣。配色跟字體的基礎,可以再搭配順手的配色工具與我們整理的最新網頁設計趨勢,把品味校準到當下。

如果是工具能力(知道要什麼,但工具做不出來),那就回到「你用什麼架站」。WordPress 支撐了網路上一大部分網站(依 W3Techs 到 2026 年中的統計),許多專案也會受佈景主題或頁面編輯器的能力限制。這時候選對編輯器,會影響哪些靈感能合理落地。頁面編輯器比較可以幫你挑出適合的工具。

還有一條更快的路:用 AI 協助把靈感落地。現在的 AI 網站生成工具已經可以做到「給它一個參考、它生出一個初版給你改」的程度,對非設計背景的朋友特別友善。這條路的優點是快,缺點是生出來的東西往往很「平均」,缺乏你品牌的獨特性。所以建議的做法是:用 AI 生初版,再用前面講的三層萃取法,把品牌材料一層一層換進去。對這條路有興趣,可以看我們實測的AI 網頁設計實戰

換句話說,一個觀念:工具是手段,從來都不是目的。實務上常見到朋友陷入「工具焦慮」,一直換新工具、找新外掛,卻遲遲不動手把第一個版本做出來。找靈感、選工具、動手做,這三件事的時間比例應該落在 2 比 1 比 7。把七成的力氣放在實作與迭代,你的設計能力才會真的進步。再漂亮的靈感、再強的工具,不動手都是零。

一個室內設計專案的靈感蒐集流程示範

以室內設計公司的官網需求為例,客戶可能丟來一整個 Pinterest board,說「這些我都要」。Board 裡從北歐風客廳、工業風餐廳到極簡禪風臥室全混在一起,又擔心做出來的網站「沒有那種感覺」。

遇到這種 board,第一步不是打開編輯器,而是把那兩百張圖分成三堆:一堆是「氛圍參考」(想傳達的感覺,例如自然光、木質、留白),一堆是「版型參考」(喜歡的版面,例如大圖滿版、作品集卡片牆),一堆是「誤會參考」(跟網頁無關的室內照片,對設計沒有指導意義)。分完之後,真正的需求通常會浮現:要的不是「把這兩百張圖都放進網站」,而是「一個安靜、有質感、用大圖說話的作品集站台」。

接著把前面講的四象限分類套上去。氛圍參考那一堆,對照 SiteInspire 跟 Godly,找出幾個同樣走「安靜留白」路線的網站,確認「這種感覺在網頁上長這樣」。版型參考那一堆,對照 Land-book 跟 One Page Love,找出幾個室內設計公司或建築師事務所的真實案例,看看「作品集站台可以怎麼排」。全程沒有抄任何一個網站,而這樣整理下來,通常一看就能確認「對,就是這個味道」。

客戶給的參考,價值通常在於它透露出的需求,不只在外觀。你的工作是把客戶用圖片表達的感覺,翻譯成具體的設計決策。這個流程可以整理成一個表,直接拿來用:

階段 動作 產出
1. 盤點 把客戶給的所有參考分成氛圍、版型、誤會三堆 一句話講得出的真實需求
2. 對照 帶著需求去對應的靈感網站找同類案例 三到五個可對話的參考站
3. 萃取 用三層萃取法抽出結構與手法 一張骨架草圖與手法清單
4. 重組 套進客戶的品牌材料重新組合 獨一無二的初版設計

進階:把靈感蒐集變成可重複的工作流

很多人找靈感是「靈感來了才找」,這是被動式。更好的狀態是建立固定工作流,定期蒐集並整理,不必等到卡關才慌張地滑手機。底下分成日常、每週與專案三個節奏,也可以帶著團隊和客戶一起跑。

節奏 頻率 動作 目的
日常 每天十分鐘 固定逛一兩個網站,存喜歡的 養眼睛、累積語彙
週更 每週一次 整理參考、四象限歸檔、寫一句話筆記 消化而非囤積
專案 有案子才做 帶著具體問題開對應的抽屜 精準解題

日常:十分鐘的眼睛保養

每天給自己十分鐘,固定逛一到兩個靈感網站,看到喜歡的就存下來。重點不是數量,是規律。就像運動一樣,每天十分鐘會比一個月一次、一次兩小時有效太多。例如早上喝咖啡的時候順手滑一下 Godly 跟 SiteInspire,存個兩三張就收工。這十分鐘的目的是維持品味、累積語彙,不為了當下要解決什麼問題。久了你會發現,自己看一個網站的速度變快、判斷變準,這就是日常保養的複利。

週更:整理你的靈感庫

每週撥一段時間,把這週存下來的參考整理一次。用前面講的四象限分類歸檔,把重複的刪掉,把雞肋的清掉。這一步很重要,因為它強迫你去消化每一張參考,避免靈感庫淪為單純的囤積。整理的時候順手給每一張參考寫一句話筆記:它哪一點值得借鏡、它解決了什麼問題、可以怎麼用。這個筆記才是真正屬於你的資產,圖片只是觸發點。沒有筆記的參考,三個月後你再看到它,多半已經想不起當初為什麼存。

工具上,可以用 Figma 把參考資料整理成一個「靈感板」檔案,每個畫板對應一個專案,把相關參考貼進去加註。Figma 的好處是可以順便畫草圖、做 wireframe,從蒐集到草圖都在同一個地方完成,省去在多個工具之間切換。對 Figma 還不熟,可以從 Figma 的完整教學資源入門,把工作流程一步步搭起來。參考一多,單一 Figma 檔案也會開始難以翻找,這時可以把靈感庫搬進 Eagle,利用色彩搜尋與標籤找回截圖和原始檔,讓累積的靈感真正成為可重複使用的資產。

專案:帶著問題找答案

真正的專案來的時候,你已經有日常跟週更打好的底。這時候找靈感是帶著問題找答案:先像前面講的,用一句話講出自己卡在哪一關,再開對應的抽屜。因為你平常已經在養眼睛,這時候看一個網站的速度會快很多,一眼就能抓到它用了什麼手法、能不能解決你的問題。從被動等靈感切換到主動養靈感之後,卡關的時間通常會少一大半,因為很多答案其實早就存在靈感庫裡,只是等著被翻出來。

三個會把「參考」變成「抄襲」的地雷

找靈感這件事,做對了是專業,做錯了是災難。底下三個地雷,是實務上最常見、也最容易踩的抄襲陷阱。

地雷一:連配色字體一起搬

前面講三層萃取法的時候提過,結構可以借,配色跟字體是品牌識別,不能搬。但很多人做不到這一點,因為「它看起來就是漂亮」。判斷標準很簡單:如果你把兩個網站擺在一起,一個一般讀者會說「這兩個好像」,那就是抄,不是參考。要避開這個地雷,強迫自己換掉配色、換掉字體、換掉圖片風格,只留結構。只要做到這一點,相似度就會立刻掉下來。

地雷二:只收集,不整理

很多人有「靈感庫焦慮」,存了幾百張圖,卻從來不分類、不回頭看。這個習慣有兩個問題。第一,你的靈感庫會變成垃圾場,真的要用的時候找不到。第二,你會陷入「我已經看很多了,所以我很會設計」的錯覺,但實際上你只是囤積,沒有消化。實務做法是每個月清一次靈感庫,把過期的刪掉,把留下來的重新分類到前面講的四象限。寧可庫存小而精,也不要大而雜。

地雷三:追流行脫離品牌

每年都有當紅的設計風格,例如前陣子很紅的毛玻璃效果、近期的 Bento Grid 排版。追流行沒有錯,但流行要服務你的品牌,不是你的品牌去服務流行。常見的失誤是,傳統產業的品牌硬套上科技新創的設計語彙,結果看起來像穿了別人尺寸的衣服。判斷的標準是:這個流行有沒有強化你的品牌訊息?如果沒有,再炫也不要用。對當下流行有興趣的話,可以看我們整理過的網頁設計趨勢內容,但趨勢是參考用的,不是照單全收的購物清單。

關於找靈感,最常被問到的三個問題

一定要付費訂閱這些網站嗎?

不一定要付費。這些網站通常提供公開瀏覽或免費層級,付費功能則可能包含進階篩選、完整截圖、收藏或較高額度;各站方案會調整,使用前要看當期限制。先用免費功能確認自己真的需要哪些工作流程,再決定是否升級。

看了很多還是做不出來,怎麼辦?

這通常是看跟做之間的斷層。建議是強迫自己看完一個網站之後,立刻用三層萃取法做一次拆解,然後當天就用你手邊的工具(哪怕是 Canva、是 Figma、是頁面編輯器)試著把那個骨架做出來一次。哪怕做得很醜都沒關係,重點是走完「看、拆、做」的迴圈。你走過十次之後,手跟眼睛的連結就會建立起來,再做就不會那麼心虛。看的目的從來都是為了做,看而不做,等於沒看。

客戶給的參考跟我方向不一樣,怎麼辦?

這是接案者最常見的困境。做法是前面提過的翻譯法:把客戶的參考當成他表達需求的語言,先別把它當成他要的最終外觀。你先翻譯出他真正的需求(例如他想要的是專業感、不是那個特定藍色),再用你自己的專業判斷,找出最能滿足這個需求的設計方向。把這個邏輯講給客戶聽,多半能取得共識。記得,客戶找你是為了你的專業判斷,不是為了當他的代工滑鼠。這部分的心法,也可以參考我們整理給品牌網站的幾個關鍵建議

你的下一步:建立自己的靈感藥櫃

找靈感這件事,講白一點就是建立一套可重複的系統。一旦系統建立起來,你就不會再每次都從零開始發慌,而是走過去拉開對的抽屜。底下是這週就可以開始做的五個動作。

  1. 盤點現有的靈感來源。把現在你會去找靈感的所有地方(Pinterest、書籤、手機截圖)全部列出來,誠實問自己:哪些真的用得到、哪些只是囤積。
  2. 用四象限分類重新歸檔。把留下來的參考,分成整站氛圍、版型骨架、行動版畫面、單一元件四大類。這個分類會成為你未來找資料的索引。
  3. 從七個網站挑三個固定回去翻。不要七個都用,那會回到過載狀態。依照你常做的專案類型,挑三個最對口的,變成你的固定口袋名單。
  4. 下一次卡關,先問問題再開網站。強迫自己在打開任何靈感網站之前,用一句話講出「我現在卡在哪一關」。講得出來,你才知道該開哪個抽屜。
  5. 對每一個參考跑一次三層萃取。拆結構、辨手法、用自己的材料重組。只要養成這個習慣,你就不會再把參考做成抄襲。

最後想跟你說一句實在話。找靈感這件事,短期看像在浪費時間,長期看卻是設計能力最關鍵的複利來源。你今天存下的每一個好參考、寫下的每一句手法筆記,都會在未來某一個專案裡回報你。設計這一行的天花板,往往不是軟體熟不熟練決定的,而是你的語彙庫有多深、眼界有多寬。這兩件事只能靠日常一點一滴養出來,沒有捷徑,也騙不了人。

設計卡關是常態,不是失誤。這七個網站、四象限分類與三層萃取法,可以組成一套持續更新的工作方式。實際用過幾輪後,再依自己的專案類型調整分類;藥櫃整理得越精準,卡關時就越容易找到下一步。

常見問題

有哪些必收藏的網頁設計靈感網站?
本文整理的七個是 Awwwards、Land-book、Godly、SiteInspire、Mobbin、One Page Love 與 Dribbble,分別對應整站氛圍與評審精選、Landing Page 版型骨架、科技新創質感、極簡網格美學、行動版 App 截圖、一頁式網站模板、以及單一元件 shot 等不同強項。
Awwwards、Siteinspire、Dribbble 各自適合什麼情境?
Awwwards 適合看進階動效與前端技術天花板;Siteinspire 適合看乾淨極簡版型與品牌內容站排版;Dribbble 適合看單畫面 UI 視覺細節、配色與微互動提案。
怎麼從靈感網站學到東西又不會抄襲?
用三層萃取法:先拆結構不看顏色、再辨識手法給它一個名字、最後用自己的品牌材料重組。只借結構與手法、材料全部用自己的,原創性自然產生,抄襲風險也大幅降低。
可以把作品投到網頁設計網站曝光嗎?
可以,例如 Awwwards 本身就是有評審制度的網站設計競賽平台,每天選出當日作品;投稿細節以各平台官網最新規定為準。

主題聚落|網頁設計原則與趨勢 看「網頁設計與前端開發」中樞 →

相關文章

褚崇名(Sliven) 創辦人・巫普斯科技有限公司

長期投入技術 SEO、GEO/AEO 與 AI 搜尋實務。本站文章以可驗證資料、公開來源與實作觀察整理而成。

完整作者介紹LinkedInGitHubX

想把這篇的方法用在自己的站上?

SEO 健檢、GEO/AEO 引用優化、網頁設計諮詢——把文章裡的方法落地到你的網站。