身為產品設計師，每天難免接到各式各樣的功能需求，常常想參考其他產品怎麼做類似的流程，卻只能憑印象到處翻找相關的 UI 畫面，非常沒有效率。本文將介紹 10+ 個蒐集上萬張真實產品截圖的參考網站，無論是想參考設計元件（UI component）、介面流程（UI flows）、設計模式（UI Patterns）或單純研究競品，都有對應的工具可以達成。
以下每個網站皆會附上是否須付費、以 mobile（手機）或 desktop（桌機）尺寸截圖、收錄的是 iOS app／Android app／一般網站、是否可篩選設計元件／介面流程等資訊。
個人首選前五名
怕大家 20 幾個看不完，我自己精選了前五名，趕時間的話看這些就好。
1. UXArchive｜免費 UI Flow
Mobile iOS 介面流程 頁面截圖 免費
UXArchive 收集 180 款以上的 App，截圖超過 1 萬張，提供 25 種介面流程分類。他們家截圖排版緊湊、清晰（在看大量案例的時候，逐一點開大圖會很累），還會貼心標示點按區域。UI flows 通常是付費才能看的，但他們選擇免費開放。羊駝我愛你！
2. Mobbin｜世界級資料庫
Desktop Mobile iOS Android 網站 介面流程 設計元件 頁面截圖 付費
Mobbin 是全球最大的 app 和 web app 設計參考資料庫，它有 40 萬張以上的產品截圖，涵蓋 iOS 與 Android，篩選項目包括：
- 產品（App）：大部分日常用到的 App 都有收錄，共 28+ 種產業
- 頁面截圖（Screens）：首頁、註冊登入頁、個人檔案、空狀態等
- 設計元件（UI Elements）：卡片、按鈕、輸入框、列表、標籤等
- 介面流程（Flows）：忘記密碼、訂閱、升級、編輯個人檔案等
這麼強大的功能當然不是免費，非付費會員只能看最新 4 個 app 的截圖，頁面類型、設計元件則限制觀看前 5 項結果，更多搜尋結果、介面流程都須付費。費用最低為每個月 10／15 美金（年繳／季繳）。
即使如此，我仍然很推薦 Mobbin。這個平台上有特別多商業／金融／健康／生產力／新聞／社交／購物類型的 app、web app，如果你要製作相關類型的產品，花個兩千元就可以完整研究競品，應該還是很值得啦。
3. UI Notes｜簡體中文產品
Mobile iOS 介面流程 設計元件 頁面截圖 付費
UI Notes 由 UI 設計師 mx 開發，目標是打造中國最完整、最實用的 UI 設計靈感網站，目前站上已有 300 多個 app、10 萬多張截圖，適合觀摩中文 app 如何排版。站上功能、元件等篩選條件也很齊全。可惜 UI Notes 只專注於 iOS app，Android、網頁產品皆不收錄。期待台灣之後也出個這樣的設計資源庫！
4. Refero｜分類鉅細靡遺
Desktop Mobile iOS 網站 設計元件 頁面截圖 付費
Refero 的收錄頁面數沒有 Mobbin 那麼龐大，分類功能卻做得很細，光是一個列表（list）元件就有 8000 多張截圖，系統還會自動推薦相關的 tag 給你細篩，例如「搜尋中+列表」，便能篩出搜尋時的列表樣式。付費方案最低是每月 8 美元（年繳），月繳方案則是 14 美元，退訂無壓力。
5. App Fuel｜小而美
Mobile iOS 介面流程 頁面截圖 免費
App Fuel 由 Alex、Max 和 Thibault 創立，除了提供 UI flows 跟頁面截圖以外，也額外花時間解析這些產品的設計巧思，撰寫設計小技巧（tricks）並拿來販售。雖然站上 app 數量不多，基本的頁面如登入、註冊、設定、空狀態等依然有一定的畫面量可供參考。
更多 UI 案例參考網站
如果上面的網站滿足不了你，請往下走。
6. Appshot｜有買斷制
Desktop Mobile iOS Android 網站 介面流程 頁面截圖 付費
Appshot 跟 Mobbin 的規模相當，包含 450 個以上的 app、30 多萬張截圖，同樣涵蓋 iOS、Android 和 web app，只是 Appshot 少了篩選設計元件的功能。比較特別的是 Appshot 提供終身買斷的選項，買斷費用 249 美元，你會考慮嗎？
7. Page Flows｜影片為主
Desktop Mobile iOS Android 網站 介面流程 設計元件 頁面截圖 付費
不同於其他平台以靜態截圖為主角，Page Flows 選擇用影片呈現操作流程，觀看體驗上更直覺，就連截圖難以表現的動畫效果也能重現。缺點是 app 截圖混雜了 iOS 及 Android，篩選功能不算好用。免費觀看的流程與畫面有限，我主要參考免費開放最多的 onboarding 流程。比較特別的是，Page Flows 有收錄各家產品的 Email 模板，我沒在其他平台看過這個。
8. UI Sources｜中規中矩
Mobile iOS 介面流程 頁面截圖 付費
UI Sources 收錄了 100 個 app、2400 張以上截圖，最大特色是把截圖整理到一張底圖裡，很適合直接載下來放到簡報或印出來討論。互動流程以影片呈現，簡單清楚。非付費會員無法點擊分類篩選，只能永無止境按下一頁。付費方案依然只有年繳跟季繳，每月最低約 8.25 美元。
9. Design Vault｜簡單堪用
Desktop Mobile iOS 網站 頁面截圖 免費
Design Vault 由產品設計師 Dale-Anthony 營運，是少數同時免費提供 web app 與 app 截圖的平台。網站沒有進階的篩選、搜尋功能，建議直接逛 UI Patterns 去找畫面。加分項：Design Vault 蒐集了一些產品的 Landing page 的案例，方便參考這些成功產品是如何推廣自己的。
10. Chamjo｜ 冷門小眾
Mobile iOS 頁面截圖 免費
Chamjo 的創辦人發現要做銀行產品時，很難找到相關的 reference 參考，因為這些銀行 app 大多數都要求使用者必須同時是銀行客戶，於是有了這個網站的雛形。站上金融、購物、旅遊這三大類的產品較多。沒有進階篩選功能，單純將 app 裡所有頁面列出來。優點（或缺點）是：他們選的 app 多數是我沒看過的。
11. SaaS Interface｜後台專家
Desktop 網站 設計元件 頁面截圖 付費
SaaS Interface 蒐集的都是 SaaS（軟體即服務）的產品，專注於桌機 web 截圖，尤其適合要規劃複雜後台、To B 服務的設計師參考。免費會員有瀏覽限制，付費採買斷制，一次 39 美元，意外親切。
12. Capturando｜拉丁語系
Mobile iOS 介面流程 頁面截圖 免費
Capturando 專門蒐集拉丁美洲的產品，目前已上架超過 50 個 app。最酷的是，他們家 UI flows 是直接連到 Figma 的！用最設計師的方式讓你自己瀏覽整個流程。這裡有很多英文網站沒有的 app，推薦給大家！
13. UI Pocket｜日文產品
Mobile iOS 介面流程 設計元件 頁面截圖 付費
UI Pocket 專門蒐集日本的 app，一個月大概更新 8-10 個新產品，目前已有近 300 個 app 在上面。免費瀏覽額度有限，付費會員是 400 日圓／越（年繳），要開發日文產品的話可以參考。除了參考日本自有的產品外，我會另外搭配 Mobbin、UXArchive 來比較不同語系的介面。
14. WWIT（What Was IT）｜韓文產品
Mobile iOS 介面流程 設計元件 頁面截圖 免費
WWIT（What Was IT）由韓國設計師 Yujin Lee 發起，參考 Mobbin 的模式，專注於蒐集韓國產品。站上目前有近 50 款 app 截圖，可篩選 UI flows（但沒依產品分類，同流程全部混在一起）跟一點點設計元件（僅有輸入欄位跟 bottom sheet 兩種）。儘管如此，用來參考韓國產品如 KAKAO WEBTOON、酷澎 Coupang 還是蠻好用！
蒐集特定產業／設計流程的網站
有些網站只蒐集產品 Onboarding、Landing Page 或付費牆的流程，有些則是效仿 Mobbin，打造其他語系的類似平台。我額外找了一些蒐集遊戲產品、動畫效果、app 上架圖的網站，全部都是從真實產品擷取而來。
15. Marble Flows｜Onboarding
Desktop 網站 介面流程：Onboarding 免費
Marble Flows 主打讓設計 onboarding 表單這件事變得很簡單。他們蒐集了近 90 家產品的 onboarding 流程，是設計 onboarding 的極佳參考資料庫。網頁有點陽春，只能依照產品查看，沒有任何篩選功能。
網址：https://www.marbleflows.com/onboarding
16. SaaS Landing Page｜Landing Page
Desktop 網站 頁面截圖：Landing Page 免費
跟上面提到的 SaaS Interface 出自同家。SaaS Landing Page 蒐集了 770 家 SaaS 企業／服務的 landing page，還收錄數十家公司的定價頁、關於我們、產品特色、部落格、客戶推薦、聯繫我們等常見頁面，完全是做公司官網的優秀靈感來源。
網址：https://saaslandingpage.com
17. Adapty｜Paywall 付費牆
Mobile iOS 頁面截圖：Paywall 付費牆 免費
Adapty 是個 mobile app 收入管理平台，幫助客戶建置自己的付費牆。官網特地展示出 500 多個產品的付費牆截圖，讓你直接看大家是怎麼做付費牆的。上面可篩選產業別及 MRR（每月經常性收入），是個鑽研付費牆設計的好地方。
網址：https://adapty.io/mobile-paywall-library
18. Interface In Game｜遊戲介面
Desktop 網站 設計元件 頁面截圖 免費
Interface In Game 匯集了各類遊戲中的 UI 設計，你可以按照設計元件、遊戲類型／主題、遊玩平台來篩選畫面，推薦遊戲開發者把這個網站存下來。題外話，不知道是我電腦太爛還是怎樣，上這網站時開圖速度有點慢。
網址：https://interfaceingame.com
19. Design Spells｜動畫效果
Desktop Mobile iOS Android 網站 動畫效果 免費
Design Spells 蒐集了許多產品的動畫效果，附有簡易的篩選分類，如 404、按鈕、動態島等。就像它的標語「Design details that feel like magic」，逛完一圈感覺心情蠻好的。
網址：https://www.designspells.com
20. Scrnshts｜App Store 上架圖
Mobile iOS 上架圖 免費
產品做好了，總是要上架。Scrnshts 是設計師 Thomas 受到 Mobbin（又是你！）啟發而製作的平台，蒐集了 600 多套產品的 App Store 上架圖，並按照產業類型分類，點擊 app 名稱即可連至產品的 App Sotre 頁面。
付費平台優、缺點比較
付費平台的資料數量及功能，絕對不是免費平台比得上的。我挑了 Mobbin、Appshot、Refero、Page Flows、UI Sources 這幾個較多人付費使用的平台，整理出費用方案、優缺點給大家參考。
Mobbin | Appshot | Refero | Page Flows | UI Sources | |
付費方式 |
|
|
|
|
|
訂閱價格 | $45 美金／季 | $18 美金／月 | $10 美金／月 | $39 美金／季 | $29 美金／季 |
買斷價格 | - | $249 / 終身 | - | - | - |
截圖數量 | 40 萬張以上 | 32 萬張以上 | 7 萬 6000 張以上 | 11 萬 8000 張以上 | 2400 張以上 |
特色 | 全球最大的資料庫、功能齊全且強大 | 提供終身買斷方案、結帳時有折扣 | 可複合式搜尋元件、分類詳盡 | 影片呈現介面流程、收錄信件模板 | 多張截圖合併一張、互動以影片呈現 |
缺點 | 季訂閱定價較高 | 無法篩選設計元件 | 截圖數量較少 | 篩選功能不好用 | 截圖數量過少 |
個人推薦度 | 沒話講，真的讚 | 適合喜歡買斷制的人 | 適合鑽研設計元件 | 可參考流程轉換動畫 | 資料庫太小應該不好用 |
官方連結 |
定期訂閱本站營運全靠廣告及贊助支持，如果你想看到更多這類型的內容，歡迎按 LIKE 拍手支持，或直接贊助。
♦︎信用卡贊助｜♦︎LINE Pay 贊助
♦︎Buy me a coffee
本月贊助狀況：已有人贊助
