網站圖鑑

每天一個值得學的網站

6分析網站
0採用元素

往下滑開始看

話題產品OpenSEO 的網站畫面
2026 / 10 / 14

OpenSEO

米色底加橘色點綴，把工具介面做成終端機展示

更多細節

為什麼紅

2026 年 10 月 8 日在 Product Hunt 每日榜單前段（榜單分數 403、45 則留言），網站頂端掛著「Number 1 Product of the Day」徽章。它主打開源版的 Ahrefs / Semrush 替代品，用量計費而不是每月 100 美元以上的訂閱，可免費自架，也能透過 MCP 接上 Claude、Codex、Gemini 等 AI 代理。頁面宣稱有 3,000 位以上創業者使用。注意：該日榜單有多個「Promoted」付費位置，名次不完全代表自然票數。

版面

單欄長頁，由上往下：頂端 Product Hunt 徽章、大標題「Grow your business with SEO」加一個主要按鈕、MCP 區（四個斜線指令加終端機畫面）、三張使用者推薦卡、三個功能小區塊、開源區、八張功能卡片的格狀區、最後是頁尾 Discord 連結。桌面版推薦卡與功能卡推測為多欄並排，手機版細節無法從抓取內容確認，也沒有確認是否有固定不動的元素。

主題與配色

暖色極簡風。背景是米色 #F5F1EC，文字近黑 #111111，強調橘色 #FF5600，輔助色是沙色 #E3DCCD 與 #EEE8DE，邊框 #D3CEC6。字體全站用 Inter，標題約 58px、區塊標題約 52px。按鈕圓角 8 到 10px，主按鈕黑底白字。使用 Tailwind 加 shadcn 元件庫，風格偏現代、不花俏。

互動設計

  • 「Copy setup prompt」按鈕一鍵複製設定指令，讓使用者貼給 AI 代理
  • 終端機樣式的畫面展示關鍵字研究指令與結果表格
  • 四個斜線指令（/seo-audit 等）各配一行說明，像可點選的清單
  • 八張功能卡片都是連結，點進去看各功能的說明頁

其他可以學的

  • 標題下方只放一個主要按鈕加免信用卡備註新創產品首頁
  • 頂端掛榜單徽章，並放三張真人推薦卡剛上線的產品
打開這個網站
同類參考TWODESIGNERS 的網站畫面
2026 / 10 / 13

TWODESIGNERS

比利時室內設計工作室，用單一藍色加灰底做出極簡質感

更多細節

為什麼紅

它是位在比利時列日的室內設計工作室，網站被收錄在 Awwwards，頁面顯示 1 件作品、獲得 1 個 Honorable Mention（榮譽提名），沒有拿到 Site of the Day 或 Site of the Month。它紅的原因不是大獎，而是小工作室用很克制的做法就讓人覺得有質感：只有一個主色、少量文字、一個精選專案。證據僅來自 Awwwards 個人頁與官網原始內容。

版面

頂部有白色 Logo 與四個導覽項目：Projects、About、Services、Contact。首頁只放一句自我介紹「A creative studio dedicated to interior design & new experiences」和一張精選專案卡（MUR Coffee & Cycling），卡片附上類型、地點、年份標籤。聯絡資訊獨立成一塊，列出地址、信箱、電話，另有「Start a project?」直接指向創辦人。專案列表放在獨立的 /grid 頁面。手機版的變化沒有抓到資料，無法確定。

主題與配色

極簡、偏工程感的風格。主色是飽和的電光藍 #1F28FF，深一點的藍 #0D16EA，輔助紫藍 #4F51AB（連結色），背景淺灰 #F4F4F4，文字黑色 #000000。標題用 PP Neue Montreal，內文用 PP Neue Montreal Book，說明文字用 ABC Monument Grotesk Semi-Mono 等寬字體。圓角只有 2px，幾乎是直角。內文字級約 10px，標題約 27px，大小差距明顯。

互動設計

  • 首頁只主打一個精選專案，點圖片進入專案頁
  • 專案卡用標籤列出類型、地點、年份，一眼看懂
  • 聯絡區直接放創辦人信箱與「Start a project?」入口
  • 動畫與滑動效果沒有從原始內容中抓到，無法確認

其他可以學的

  • 說明文字改用等寬字體，和標題做區隔設計類網站
  • 圓角只設 2px，保持近乎直角的利落感極簡風網站
打開這個網站
得獎設計Nick Ho Motorsports 的網站畫面
2026 / 10 / 12

Nick Ho Motorsports

賽車手個人站，灰階深度圖配螢光黃，速度感十足

更多細節

為什麼紅

2026-10-11 獲 Awwwards 每日最佳網站（Site of the Day），總分 7.24 / 10，其中動畫與轉場開發分高達 8.20，Awwwards 使用者給 9.70。同時入圍 No-code Honors。用 Webflow 搭配 GSAP 與 Three.js 做出 3D 與動畫，證明免寫程式的工具也能做出得獎等級的作品。

版面

單頁長捲動，上方固定選單用錨點連結跳到 About、History、Gallery、Calendar、Contact。開頭是大張主視覺，放車手、賽車、安全帽的灰階深度圖，旁邊排出 98 號、17 次登上頒獎台、14 個賽道、10 年以上資歷等大數字。接著依序是簡介加下一場比賽倒數、約 20 個贊助商標誌橫條、六張圖片輪播、五個章節的歷程、五張媒體報導卡片、賽事日曆、贊助手冊下載、約 15 張照片牆、聯絡表單與頁尾。手機版區塊改成單欄直排。

主題與配色

賽車感的暗黑風格。背景以黑色與深灰為主，主視覺是灰階深度圖，只用一個亮黃色 #FED60A 當強調色（取自賽車尾翼與場館燈光），搭配白色文字，安全帽的藍色只當照片裡的點綴。整體黑白灰加單一亮色，視線自然被引到重點。

互動設計

  • 主視覺灰階深度圖有 3D 景深效果，用 Three.js 製作
  • 「下一場比賽」倒數計時，天、時、分、秒即時跳動
  • 圖片輪播顯示 1/6 頁數，附跳過按鈕可直接略過
  • 影片縮圖有 Sound on 音效開關，圖片區可拖曳 drag
  • 聯絡表單送出後顯示成功或錯誤訊息

其他可以學的

  • 照片用灰階深度圖，滑鼠移動產生景深作品集首頁
  • 輪播加上「1/6」頁數和跳過按鈕圖片多的網站
打開這個網站
本週回顧L.I.S.A. — Locomotive 的網站畫面
2026 / 10 / 11

L.I.S.A. — Locomotive

整頁變成聊天問答，用對話取代傳統選單首頁

更多細節

為什麼紅

Awwwards 在 2026 年 9 月 16 日把它選為 Site of the Day。設計圈討論的重點是它不做傳統的服務介紹版面，而是讓虛擬角色 L.I.S.A. 每次只丟一句話、給幾個按鈕讓你選，像在跟人聊天。這是蒙特婁設計工作室 Locomotive 的自家形象作品，用來展現他們在互動與動態網頁上的實力。本週回顧重新打開網站，首屏先用標題逐詞累加的動畫（Digital、Digital-First、Digital-First Design、Digital-First Agency、Based in Montreal, Canada）打出自我介紹，並先跳出 Cookie 同意提示。網頁描述寫著「An independent agency with a deep skill set, big ideas, lots of heart and a global reputation」，品牌定位清楚。

版面

整頁沒有多欄排版，是單一置中的對話流：畫面中央大字顯示 L.I.S.A. 目前的提問，下方用像聊天選項的按鈕讓使用者點選回答。回答完，上一句對話會縮小、變淡並往上堆疊，再露出下一句提問。畫面最上方是固定不動的 Header：左邊 Locomotive® Logo、中間 Work / Agency / Careers / Store 導覽、右邊「Let's talk」按鈕。底部常駐一條音波視覺化 canvas。手機版導覽收進右上角漢堡選單，點開是全螢幕選單。

主題與配色

黑白極簡風，預設主題文字 #000000、背景 #FFFFFF，瀏覽器 theme-color 也設為 #ffffff。另有深色模式（背景 #000000、文字 #FFFFFF），以及磚紅 #DA382E、寶藍 #312DFB 兩組強調色背景搭配白字，推測會依對話分支切換。字體用系統無襯線字，不加裝飾，靠文字節奏與大量留白營造氣氛。

互動設計

  • 首屏標題逐詞累加顯示：Digital、Digital-First、Digital-First Design、Digital-First Agency，最後補上 Based in Montreal, Canada，像一句話慢慢被打出來
  • 核心是聊天式問答：每次只顯示一句提問與 2 到 4 個按鈕，不用打字，點選後上一句縮小變灰往上堆疊
  • 導覽列連結 hover 時文字先隨機打亂重組幾次再定格回原字
  • 進站約 1.2 秒黑底 Preloader，結束後 Logo 用 0.9 秒縮放加淡入登場
  • 底部有 Three.js 畫的動態音波，搭配可開關的環境音效按鈕
  • Cookie 提示提供「Accept All」與「Accept Necessary」兩個按鈕，另附「Let me choose」小連結

其他可以學的

  • 導覽文字 hover 時隨機打亂 0.2 秒再定格作品集導覽列
  • 用 data-theme 切換 3 組背景色，版面不變多產品線品牌站
打開這個網站
話題產品Creem 2.0 的網站畫面
2026 / 09 / 19

Creem 2.0

AI 收款平台大改版,首頁用終端機情境劇秀「一鍵開店」拿下 PH 冠軍

更多細節

為什麼紅

Creem 是主打「AI 建站者專用」的收單平台(Merchant of Record),2026 年 9 月 17 日的 2.0 改版登上 Product Hunt 當日排行榜第一名。它的口碑很大一部分來自獨立開發者社群:官網直接引用 Marc Lou、Tibo、Florin Pop 等知名 indie hacker 在 X 上的真實推文當作見證,而不是自己寫的行銷詞,這種「同溫層背書」在 Product Hunt/Hacker News 的開發者受眾裡特別有說服力。產品本身也踩中話題:讓 AI agent 直接透過 CLI/MCP 建立商品、開結帳連結、處理退款,呼應了「AI 自動開店做生意」這波討論。

版面

整頁是單欄式的全寬區塊由上往下堆疊(無側邊欄),但 Hero 區不是傳統文字+大圖,而是三個懸浮卡片組成一齣小情境劇:左邊是終端機視窗(顯示打指令建立商品的過程)、中間是結帳視窗 UI(顯示產品與價格)、四個角落飄著 Slack 風格的通知氣泡,三者疊在一起說明「一個指令自動生完成開店到收到通知」的流程。往下依序是三欄功能卡片區、顧客 Logo 橫向陳列、Billing 功能用三個並排的迷你控制面板截圖(信用額度包、用量計費、自訂計量單位)呈現、全球收款用四欄圖示+文字說明、聯盟行銷區塊有真實數據儀表板截圖(分潤比例、短連結點擊數)、文末重複一次「終端機+結帳+通知」情境劇呼應開頭、雙欄手機截圖展示 iOS/Android App、單張定價卡、橫向排列的 X 推文見證卡、FAQ 問答列表,最後是大字 CTA 收尾。頂部導覽列固定不動,內容含 Pricing、Customers、Blog 與「Get started」按鈕。

主題與配色

走黑白極簡的金融科技風,背景為白色 #FFFFFF,主要文字、Logo 與線條圖示為黑色 #000000,全站沒有大面積的彩色裝飾色。所有示意畫面(終端機、結帳、儀表板)都做成深色卡片(接近 #0A0A0A 的深黑)浮在白底上,靠明暗對比而不是彩色來製造層次,圖示則統一用細單線條(line icon)風格,搭配大量留白與置中排版,整體給人「工程師系」的乾淨可信感,只有嵌入畫面中的假資料(如金額、圖表)偶爾帶一點色彩。

互動設計

  • 首頁與文末各出現一次同一組「終端機下指令、結帳視窗、Slack 通知氣泡」的組合畫面,用重複敘事而非文字條列來說明產品怎麼運作
  • Billing 區塊把「信用額度包」「用量計費」「自訂計量單位」三種收費模式各自做成一張迷你控制面板截圖並排陳列,方便一眼比較
  • 定價區有「One-time payments / Subscriptions」的分頁切換,同一張定價卡依所選分頁顯示不同費率情境
  • 顧客見證直接嵌入真實 X 貼文卡片(含頭像、帳號、原文連結),不是重新排版過的引言文字
  • 聯盟行銷區塊用真實感的儀表板截圖(分潤比例圓餅、短連結點擊/結帳轉換數字)取代抽象說明圖

其他可以學的

  • 推薦見證直接嵌入真實社群貼文卡片,附頭像與帳號連結任何產品口碑區
  • FAQ 用一句話搶答「跟同類有何不同」等疑慮句產品官網 FAQ 區
打開這個網站
得獎設計L.I.S.A. — Locomotive 的網站畫面
2026 / 09 / 17

L.I.S.A. — Locomotive

加拿大設計工作室 Locomotive 用一個叫 L.I.S.A. 的虛擬對話角色取代傳統選單首頁,把整個官網變成一場一問一答的聊天。

更多細節

為什麼紅

Awwwards 在 2026 年 9 月 16 日把它選為 Site of the Day,設計圈討論的重點是它整頁不做傳統的服務介紹版面,而是用類似聊天機器人的問答流程引導訪客(每次只丟一句話、給幾個按鈕選項讓你選),是 Locomotive 自家官網的形象作品,展現這間工作室在互動與動態網頁上的技術實力。

版面

整頁沒有多欄式排版,是單一置中的對話流:畫面中央大字顯示 L.I.S.A. 目前的提問,下方用像聊天選項的按鈕(不是打字輸入框)讓使用者點選回答;回答完,上一句對話會縮小、變淡,往上堆疊成可回頭點擊的紀錄軌跡,再露出下一句提問,模仿真人對話的節奏。畫面最上方是固定不動的 Header,左邊是 Locomotive® 的 Logo,中間是 Work / Agency / Careers / Store 導覽,右邊是「Let's talk」按鈕;畫面最底部常駐一條用 Three.js 畫的音波視覺化 canvas。手機版導覽會收進右上角的漢堡選單,點開後是全螢幕選單,底部附語言切換與地點資訊。

主題與配色

整體走黑白極簡風,主要文字色是 #000000、背景是 #FFFFFF(對話進行中的預設「lisa」主題)。網站另外準備了深色模式(背景 #000000、文字 #FFFFFF)以及兩組強調色主題:磚紅色背景 #DA382E、寶藍色背景 #312DFB 搭配白字 #FFFFFF,推測會依對話走到的分支切換背景色來區分情境或情緒。字體用系統無襯線字,不特別裝飾,靠文字本身的節奏與排版留白營造氣氛。

互動設計

  • 進站有約 1.2 秒的黑底 Preloader,結束後 Logo 用 0.9 秒的縮放加淡入動畫(scale 0.9 到 1、透明度 0 到 1)登場,避免字體或版面跳動閃爍
  • 導覽列連結與 Logo 滑過(hover)時文字會先隨機打亂重組幾次、再定格回原字的「shuffle」效果
  • 核心是聊天機器人式的問答流程:每次只顯示一句提問與 2 到 4 個按鈕選項,不用打字,點選後上一句對話縮小變灰堆疊到上方,露出下一句提問
  • 背景有可開關的環境音效(loop 播放),畫面上有 toggle sound 按鈕控制靜音與否
  • 頁面底部有一條用 Three.js(WebGL canvas)畫的動態音波視覺化效果,常駐在畫面下緣
  • 部分選項是「複製到剪貼簿」按鈕,點擊後會直接複製內容並顯示確認提示文字

其他可以學的

  • 頁面進場先蓋一層純色 Preloader,約 0.9 秒後 Logo 用縮放(0.9 到 1)加淡入(透明度 0 到 1)的動畫移除遮罩,避免字體與版面載入時的閃爍跳動圖片或字體較重、講究第一印象的形象官網
  • 用 CSS 變數(例如 --color、--color-bg)集中定義主題色,搭配 data-theme 屬性一鍵切換 3 種以上配色(黑白、紅底、藍底),讓同一套版面依情境或使用者選擇即時換色有多條產品線或需要依活動主題切換視覺的品牌官網
打開這個網站