網頁設計靈感網站：26 個網站案例、SaaS 頁面、UI 元件與互動參考整理

快速答案：網頁設計靈感要拆結構、視覺、互動、文案與轉換目標，不只看漂亮首頁。

看網站參考時，最重要的是先分清楚你要解決哪一種問題：首頁首屏、Landing Page 轉換、產品 UI、品牌視覺、互動細節、手機版延展，或是 404、空狀態、onboarding 這類特殊頁面。這篇整理 26 個網頁設計靈感網站；正文只引用研究表中已查證、預覽圖通過 QA 的 A/B 資源。

先看分類：網站參考不要只收藏首頁

類型	代表資源	免費/付費	適合用途	授權注意
整站案例	Awwwards、Godly、Siteinspire、TWDC、Httpster	免費 / Freemium	品牌網站、作品集、活動頁、視覺方向	案例只能參考結構與語氣，不能照搬版面和素材
SaaS / Landing Page	SaaS Landing Page、SaaSFrame、Land-book、Lapa Ninja、Landingfolio	免費 / Freemium	首屏、CTA、社會證明、功能區塊、定價頁	要依產品定位改文案和資訊架構
UI 元件與產品介面	Interface Craft、Collect UI、21st.dev、Mobbin、Refero	Freemium	元件狀態、產品流程、介面模式、設計系統討論	截圖和元件不可當成授權素材直接使用
互動 / 動效	Design Spells、Whirl、CSS Loaders Dots	免費	微互動、loading、hover、狀態回饋	實作前需檢查效能、可用性與無障礙
日系與響應式案例	Muuuuu、Responsive Web Design JP	免費	日系視覺、活動頁、桌機與手機版延展	需轉換成自己的市場、語言與內容節奏
頁面特殊狀態	404s Design、Page Flows、One Page Love	免費 / Freemium	404 頁、單頁網站、onboarding 與流程參考	特殊頁要符合產品任務，不能只追求漂亮

拆網站參考時先看 5 個層次

• 資訊架構：首頁先講誰、解決什麼問題、為什麼可信。
• 視覺節奏：首屏、功能區、案例、定價、FAQ 是否有清楚段落。
• 互動細節：hover、loading、表單、導覽與轉場是否幫助理解。
• 手機版：不是把桌機縮小，而是重新安排閱讀順序與 CTA。
• 商業目標：漂亮網站不一定轉換好，Landing Page 要回到訴求和行動。

26 個網頁設計靈感網站推薦

1. Interface Craft

官方網站。把介面細節拆得很細，適合訓練產品設計判斷

• 價格型態：Freemium
• 適合用途：產品介面細節、互動模式、設計判斷
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；偏介面知識庫，非網站模板；部分資源偏付費或會員內容

2. Design Spells

官方網站。收集精緻互動細節，適合補網站的動態品質

• 價格型態：免費
• 適合用途：網站互動、微動畫、動態回饋、hover 細節
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；案例不可直接複製；要轉成自己的互動語氣

3. Whirl

官方網站。小而專注的 loading 靈感庫，適合快速找等待狀態方向

• 價格型態：免費
• 適合用途：CSS loading、等待狀態、按鈕回饋
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；偏 loading 動效；實作前需檢查效能與可用性

4. CSS Loaders Dots

官方網站。能直接觀察 loading 節奏，適合補產品細節

• 價格型態：免費
• 適合用途：CSS loading dots、微互動、狀態提示
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；偏程式範例；需自行改成符合品牌的 UI

5. SaaS Landing Page

官方網站。適合比較 SaaS 首屏、社會證明和 CTA 結構

• 價格型態：免費
• 適合用途：SaaS 首頁、功能區塊、定價與 CTA 參考
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；案例以 SaaS 為主；不能照搬品牌視覺或文案

6. SaaSFrame

官方網站。針對 SaaS 拆頁面和區塊，適合產品網站規劃

• 價格型態：Freemium
• 適合用途：SaaS UI、Landing Page、產品頁與轉換頁
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；完整瀏覽和篩選可能需付費；案例不可直接套用

7. Awwwards

官方網站。國際網站設計獎項平台，適合看視覺與互動天花板

• 價格型態：Freemium
• 適合用途：高完成度品牌網站、互動網站、視覺趨勢
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；案例偏創意與獎項，商業轉換頁需自行取捨

8. Godly

官方網站。每日更新感強，適合找近期網站視覺趨勢

• 價格型態：Freemium
• 適合用途：現代網站、品牌頁、產品頁、視覺趨勢
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；高視覺案例多，仍需轉成可落地的資訊架構

9. Dribbble

官方網站。適合快速掃描 UI 風格與介面視覺語氣

• 價格型態：Freemium
• 適合用途：UI 視覺方向、介面風格、網站區塊參考
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；單張作品偏展示效果，未必代表完整產品流程

10. 404s Design

官方網站。專門收集 404 頁面，能補一般靈感庫少見的狀態頁

• 價格型態：免費
• 適合用途：404 頁、錯誤頁、空狀態、品牌細節
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；題材集中，適合作為特殊狀態參考

11. Siteinspire

官方網站。分類成熟，適合用產業、風格和類型快速找網站參考

• 價格型態：Freemium
• 適合用途：品牌網站、作品集、內容網站、依風格篩選案例
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；部分功能需帳號；案例不可直接抄版

12. TWDC

官方網站。補足台灣在地網站案例，適合看中文內容與品牌語氣

• 價格型態：免費
• 適合用途：台灣網站、在地品牌、活動頁、內容網站
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；收錄量較精選；仍需看實際商業目標

13. Webdesign Inspiration

官方網站。案例量大，適合從產業與頁面類型切入找參考

• 價格型態：免費
• 適合用途：網站案例、產業分類、Landing Page 與作品集
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；廣告與推薦區塊需分辨；案例來源需自行開啟檢查

14. Web Design Inspiration

官方網站。視覺瀏覽效率高，適合快速比較不同網站風格

• 價格型態：Freemium
• 適合用途：品牌網站、作品集、網站視覺搜尋
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；篩選與完整使用可能需帳號或付費

15. Muuuuu

官方網站。日系網站案例完整，適合看留白、排版與活動頁語氣

• 價格型態：免費
• 適合用途：日系網站、品牌頁、活動頁、視覺節奏
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；語言與分類偏日本市場；需轉成自己的內容情境

16. Responsive Web Design JP

官方網站。可觀察同一網站在不同裝置的視覺延展方式

• 價格型態：免費
• 適合用途：響應式網站、桌機/手機版型延展
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；偏日本案例；需要自行開站檢查手機體驗

17. Collect UI

官方網站。適合找特定 UI 元件或頁面片段的參考

• 價格型態：免費
• 適合用途：登入頁、表單、卡片、列表、介面模式
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；偏單一 UI 畫面；不等於完整網站流程

18. 21st.dev

官方網站。適合設計與工程討論可落地的現代 UI 區塊

• 價格型態：Freemium
• 適合用途：現代 UI 元件、可實作介面、產品區塊
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；偏前端元件，不是完整網站靈感庫

19. Land-book

官方網站。Landing Page 案例集中，適合拆首屏和轉換區塊

• 價格型態：Freemium
• 適合用途：Landing Page、SaaS、品牌網站、區塊靈感
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；完整收藏或篩選可能需帳號；案例不可直接照搬

20. Lapa Ninja

官方網站。適合找產品頁架構和首屏視覺方向

• 價格型態：Freemium
• 適合用途：Landing Page、產品頁、創業網站、頁面區塊
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；部分資源導向付費素材或模板；需分清案例與模板

21. One Page Love

官方網站。單頁網站案例完整，適合看敘事節奏與長頁結構

• 價格型態：Freemium
• 適合用途：單頁網站、活動頁、個人頁、產品頁
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；部分內容偏模板或廣告；需判斷是否適合商業目標

22. Landingfolio

官方網站。適合拆 Landing Page 區塊和轉換元素

• 價格型態：Freemium
• 適合用途：Landing Page、SaaS 區塊、元件與範例
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；完整分類與資源可能需付費；案例不可直接套版

23. Mobbin

官方網站。產品流程資料完整，適合研究真實 App 與 Web app 介面

• 價格型態：Freemium
• 適合用途：App 流程、Web app、產品介面、UI pattern
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；完整使用需登入或付費；截圖仍屬原產品權利

24. Page Flows

官方網站。能看完整流程，不只看單頁視覺，適合 UX 規劃

• 價格型態：Freemium
• 適合用途：使用者流程、App/Web 流程、產品 onboarding
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；多數內容需付費；案例截圖不可作為素材

25. Refero

官方網站。適合做產品 UI research，補足網站靈感的流程面

• 價格型態：Freemium
• 適合用途：產品 UI 截圖、競品研究、SaaS 介面
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；完整資料庫可能需付費；截圖僅供研究

26. Httpster

官方網站。精選網站案例有風格，適合找非模板化的視覺方向

• 價格型態：免費
• 適合用途：網站首頁、作品集、實驗網站、視覺探索
• 授權注意：不提供素材授權；僅作網站設計參考，作品權利屬原作者/平台；案例偏視覺和創意，需自行評估商業落地性

怎麼把靈感轉成自己的網站？

不要從「我要做成這個網站的感覺」開始，而是先把參考拆成可描述的決策。例如首屏是大標加產品截圖，還是情境照片加 CTA；導覽是產品導向，還是內容導向；案例區是品牌 logo、數字證據，還是實際作品。拆完後，再用自己的內容、視覺素材和品牌語氣重組。

• 先選 3 個主參考、5 個輔助參考，不要一次塞滿 30 個網站。
• 每個參考只取一個理由，例如首屏、卡片密度、CTA 或互動。
• 把桌機和手機分開看，尤其是長頁 Landing Page。
• 設計稿完成後，回頭檢查是否仍像某個單一參考站。

站內延伸資源

• 網頁設計靈感：站內已整理的網站靈感入口。
• 設計資源專區：回到設計工具、素材與教學總入口。
• Figma 資源：把網頁參考拆成設計稿與元件時可搭配使用。

FAQ

網頁設計靈感網站有哪些？

如果要看整站案例，可以先看 Awwwards、Siteinspire、Godly、TWDC 和 Httpster；如果是 SaaS 或 Landing Page，Land-book、Lapa Ninja、SaaSFrame 和 Landingfolio 會更直接。

Awwwards 適合商業網站嗎？

適合看視覺完成度、互動和品牌感，但不一定適合直接照著做商業轉換頁。正式專案仍要回到內容架構、速度、可讀性和 CTA。

Landing Page 參考要看哪些重點？

先看首屏主張、CTA、社會證明、功能區順序、價格或方案呈現、FAQ 和使用情境。不要只看版面漂亮，而要看它如何說服使用者往下一步走。

手機版網站參考怎麼找？

可以用 Responsive Web Design JP、Mobbin、Page Flows 這類資源看桌機與手機版的差異。重點是閱讀順序、按鈕位置、導覽收合和表單操作。

網站截圖或案例可以直接放進設計稿嗎？

不建議。這些資源是參考網站，不是素材授權庫。可以用來拆結構和設計邏輯，但正式設計稿要使用自己製作或已授權的圖片、字體、插圖和品牌元素。