404 Museum — 設計與開發互動式 404 網頁體驗
404 Museum — 設計與開發互動式 404 網頁體驗
404 Museum — 設計與開發互動式 404 網頁體驗
個人專案，一個結合設計與開發的實驗專案，透過互動式敘事將「迷路」轉化為探索的過程
個人專案，一個結合設計與開發的實驗專案，透過互動式敘事將「迷路」轉化為探索的過程
個人專案，一個結合設計與開發的實驗專案，透過互動式敘事將「迷路」轉化為探索的過程
Role
Role
Role
Solo Designer & Developer
Solo Designer & Developer
Solo Designer & Developer
Timeline
Timeline
Timeline
Mar 2025 – May 2025
Mar 2025 – May 2025
Mar 2025 – May 2025
Tools & Tech
Tools & Tech
Tools & Tech
HTML, CSS, JavaScript, Leaflet.js, GSAP, JSON, Zeabur
HTML, CSS, JavaScript, Leaflet.js, GSAP, JSON, Zeabur
HTML, CSS, JavaScript, Leaflet.js, GSAP, JSON, Zeabur
1. 專案背景
1. 專案背景
這個專案是在 University of Maryland「Programming Human-Centered Interfaces」課程所完成的作品。課程主要聚焦於如何透過程式設計，打造兼具易用性、創意與技術實作的互動式網頁介面。
這個專案是在 University of Maryland「Programming Human-Centered Interfaces」課程所完成的作品。課程主要聚焦於如何透過程式設計，打造兼具易用性、創意與技術實作的互動式網頁介面。
我一直很喜歡那些設計得很用心的 404 頁面，它們能把原本令人困惑的錯誤訊息，轉變成一個有趣、甚至令人會心一笑的體驗。許多品牌會透過這些「迷路的角落」，展現自己的品牌個性。例如：
Figma 讓使用者感覺像是在畫布中直接編輯 404 頁面
ChatGPT 把 404 轉化成一段富有詩意的文字
Dribbble 讓使用者可以玩轉顏色與構圖
Pixar 則透過角色動畫，把焦慮感轉化為溫暖的安慰
每個例子都反映了品牌自身的個性，也把原本的錯誤瞬間，轉變成一個 與使用者建立連結的小時刻。
我一直很喜歡那些設計得很用心的 404 頁面，它們能把原本令人困惑的錯誤訊息，轉變成一個有趣、甚至令人會心一笑的體驗。許多品牌會透過這些「迷路的角落」，展現自己的品牌個性。例如：
Figma 讓使用者感覺像是在畫布中直接編輯 404 頁面
ChatGPT 把 404 轉化成一段富有詩意的文字
Dribbble 讓使用者可以玩轉顏色與構圖
Pixar 則透過角色動畫，把焦慮感轉化為溫暖的安慰
每個例子都反映了品牌自身的個性，也把原本的錯誤瞬間，轉變成一個 與使用者建立連結的小時刻。
受到這些設計的啟發，我也想嘗試設計屬於自己的互動式 404 頁面。不只是單一畫面，而是一座小型的 「迷路博物館」，讓使用者能透過各種有趣、帶有個人感的互動，探索「迷路」這種感受。
受到這些設計的啟發，我也想嘗試設計屬於自己的互動式 404 頁面。不只是單一畫面，而是一座小型的 「迷路博物館」，讓使用者能透過各種有趣、帶有個人感的互動，探索「迷路」這種感受。
1. 專案背景
這個專案是在 University of Maryland「Programming Human-Centered Interfaces」課程所完成的作品。課程主要聚焦於如何透過程式設計，打造兼具易用性、創意與技術實作的互動式網頁介面。
我一直很喜歡那些設計得很用心的 404 頁面，它們能把原本令人困惑的錯誤訊息，轉變成一個有趣、甚至令人會心一笑的體驗。許多品牌會透過這些「迷路的角落」，展現自己的品牌個性。例如：
Figma 讓使用者感覺像是在畫布中直接編輯 404 頁面
ChatGPT 把 404 轉化成一段富有詩意的文字
Dribbble 讓使用者可以玩轉顏色與構圖
Pixar 則透過角色動畫，把焦慮感轉化為溫暖的安慰
每個例子都反映了品牌自身的個性，也把原本的錯誤瞬間，轉變成一個 與使用者建立連結的小時刻。
受到這些設計的啟發，我也想嘗試設計屬於自己的互動式 404 頁面。不只是單一畫面，而是一座小型的 「迷路博物館」，讓使用者能透過各種有趣、帶有個人感的互動，探索「迷路」這種感受。
Demo & Concept
Demo & Concept
Demo & Concept
當人們來到 404 頁面時，通常只是一次意外的迷航。我希望把這個「迷路的瞬間」轉化為一段有趣且值得停留的體驗，讓每一次互動都呈現出對「404」不同的詮釋。
當人們來到 404 頁面時，通常只是一次意外的迷航。我希望把這個「迷路的瞬間」轉化為一段有趣且值得停留的體驗，讓每一次互動都呈現出對「404」不同的詮釋。
當人們來到 404 頁面時，通常只是一次意外的迷航。我希望把這個「迷路的瞬間」轉化為一段有趣且值得停留的體驗，讓每一次互動都呈現出對「404」不同的詮釋。
你可以在下方體驗 Live Demo，這是一個重新想像 404 的互動式網頁體驗，從充滿隨機感的拉霸機，到一張承載個人記憶的旅行地圖。
你可以在下方體驗 Live Demo，這是一個重新想像 404 的互動式網頁體驗，從充滿隨機感的拉霸機，到一張承載個人記憶的旅行地圖。
你可以在下方體驗 Live Demo，這是一個重新想像 404 的互動式網頁體驗，從充滿隨機感的拉霸機，到一張承載個人記憶的旅行地圖。
404 Museum 由三段短暫的探索旅程組成，每一段都把「迷路」轉化成不同形式的發現。整體體驗圍繞三個概念：隨機性、重新詮釋，以及個人連結。
404 Museum 由三段短暫的探索旅程組成，每一段都把「迷路」轉化成不同形式的發現。整體體驗圍繞三個概念：隨機性、重新詮釋，以及個人連結。
404 Museum 由三段短暫的探索旅程組成，每一段都把「迷路」轉化成不同形式的發現。整體體驗圍繞三個概念：隨機性、重新詮釋，以及個人連結。
01 拉霸機 — 迷路的隨機性
01 拉霸機 — 迷路的隨機性
01 拉霸機 — 迷路的隨機性
從一台拉霸機開始，就像拉下拉桿時不知道會出現什麼結果一樣，象徵錯誤發生時的不可預測性。使用者也不會預期自己會「轉出」一個 404，這個充滿遊戲感的互動作為旅程的開場，為整個體驗建立一種輕鬆又帶點意外的氛圍。
從一台拉霸機開始，就像拉下拉桿時不知道會出現什麼結果一樣，象徵錯誤發生時的不可預測性。使用者也不會預期自己會「轉出」一個 404，這個充滿遊戲感的互動作為旅程的開場，為整個體驗建立一種輕鬆又帶點意外的氛圍。
從一台拉霸機開始，就像拉下拉桿時不知道會出現什麼結果一樣，象徵錯誤發生時的不可預測性。使用者也不會預期自己會「轉出」一個 404，這個充滿遊戲感的互動作為旅程的開場，為整個體驗建立一種輕鬆又帶點意外的氛圍。
02 調配雞尾酒 — 從錯誤中調製新的意義
02 調配雞尾酒 — 從錯誤中調製新的意義
02 調配雞尾酒 — 從錯誤中調製新的意義
404 有時令人挫折，但也可能激發創意。在這個部分，使用者可以調製屬於自己的 「404 調酒」，透過混合不同水果，創造新的顏色與風味。這個互動象徵人們如何把看似沒有意義的瞬間重新詮釋，就像調酒一樣，將不同元素混合，創造出屬於自己的味道。
404 有時令人挫折，但也可能激發創意。在這個部分，使用者可以調製屬於自己的 「404 調酒」，透過混合不同水果，創造新的顏色與風味。這個互動象徵人們如何把看似沒有意義的瞬間重新詮釋，就像調酒一樣，將不同元素混合，創造出屬於自己的味道。
404 有時令人挫折，但也可能激發創意。在這個部分，使用者可以調製屬於自己的 「404 調酒」，透過混合不同水果，創造新的顏色與風味。這個互動象徵人們如何把看似沒有意義的瞬間重新詮釋，就像調酒一樣，將不同元素混合，創造出屬於自己的味道。
03 照片地圖 — 屬於自己的迷路地圖
03 照片地圖 — 屬於自己的迷路地圖
03 照片地圖 — 屬於自己的迷路地圖
旅程最後來到一張世界地圖，由我拍攝的照片組成，並拼湊成「404」的形狀。這些照片來自三個地方：
台灣：我的出生地
歐洲：我曾交換學習的地方
美國：我目前攻讀碩士的所在地
這一部分加入了更個人的層次，即使是在迷路的時刻，我們仍會留下屬於自己的軌跡，那些曾經走過的地方，與我們成為現在自己的故事。
旅程最後來到一張世界地圖，由我拍攝的照片組成，並拼湊成「404」的形狀。這些照片來自三個地方：
台灣：我的出生地
歐洲：我曾交換學習的地方
美國：我目前攻讀碩士的所在地
這一部分加入了更個人的層次，即使是在迷路的時刻，我們仍會留下屬於自己的軌跡，那些曾經走過的地方，與我們成為現在自己的故事。
旅程最後來到一張世界地圖，由我拍攝的照片組成，並拼湊成「404」的形狀。這些照片來自三個地方：
台灣：我的出生地
歐洲：我曾交換學習的地方
美國：我目前攻讀碩士的所在地
這一部分加入了更個人的層次，即使是在迷路的時刻，我們仍會留下屬於自己的軌跡，那些曾經走過的地方，與我們成為現在自己的故事。
What went wrong
What went wrong
01 單頁式網站的頁面切換問題
01 單頁式網站的頁面切換問題
整個網站是以 single-page 的方式建構，透過按鈕觸發不同區塊的顯示。一開始，當使用者點擊 「Next」時，頁面並沒有正確切換到下一個區段，原因是我沒有完整更新各區塊的 visibility state。後來又發現另一個問題：當使用者返回起始頁面時，部分元素沒有正確 reset，導致它們仍然停留在畫面上。
整個網站是以 single-page 的方式建構，透過按鈕觸發不同區塊的顯示。一開始，當使用者點擊 「Next」時，頁面並沒有正確切換到下一個區段，原因是我沒有完整更新各區塊的 visibility state。後來又發現另一個問題：當使用者返回起始頁面時，部分元素沒有正確 reset，導致它們仍然停留在畫面上。
02 拉霸機 3D 版面過於複雜
02 拉霸機 3D 版面過於複雜
最初我希望設計一個具有 3D 效果的拉霸機，包含多層轉軸與陰影效果。然而，在實作過程中，我發現要讓每一層元素對齊並維持動畫的一致性變得非常複雜，也難以維護。因此我最終決定簡化為平面風格的設計，保留互動的趣味與回饋感，同時讓實作更加穩定。
最初我希望設計一個具有 3D 效果的拉霸機，包含多層轉軸與陰影效果。然而，在實作過程中，我發現要讓每一層元素對齊並維持動畫的一致性變得非常複雜，也難以維護。因此我最終決定簡化為平面風格的設計，保留互動的趣味與回饋感，同時讓實作更加穩定。
03 地圖的響應式設計問題
03 地圖的響應式設計問題
「404」照片地圖最初是以固定像素座標排列每一張照片。這個方法在 桌面版呈現效果很好，但在較小螢幕上會出現版面錯位的問題。由於缺乏 動態縮放或相對定位機制，響應式設計成為這個功能的一大限制。
「404」照片地圖最初是以固定像素座標排列每一張照片。這個方法在 桌面版呈現效果很好，但在較小螢幕上會出現版面錯位的問題。由於缺乏 動態縮放或相對定位機制，響應式設計成為這個功能的一大限制。
What went wrong
01 單頁式網站的頁面切換問題
整個網站是以 single-page 的方式建構，透過按鈕觸發不同區塊的顯示。一開始，當使用者點擊 「Next」時，頁面並沒有正確切換到下一個區段，原因是我沒有完整更新各區塊的 visibility state。後來又發現另一個問題：當使用者返回起始頁面時，部分元素沒有正確 reset，導致它們仍然停留在畫面上。
02 拉霸機 3D 版面過於複雜
最初我希望設計一個具有 3D 效果的拉霸機，包含多層轉軸與陰影效果。然而，在實作過程中，我發現要讓每一層元素對齊並維持動畫的一致性變得非常複雜，也難以維護。因此我最終決定簡化為平面風格的設計，保留互動的趣味與回饋感，同時讓實作更加穩定。
03 地圖的響應式設計問題
「404」照片地圖最初是以固定像素座標排列每一張照片。這個方法在 桌面版呈現效果很好，但在較小螢幕上會出現版面錯位的問題。由於缺乏 動態縮放或相對定位機制，響應式設計成為這個功能的一大限制。
What went right
What went right
01 拉霸機的隨機感與動畫節奏
01 拉霸機的隨機感與動畫節奏
即使沒有使用 GSAP，我仍透過 setInterval 和 setTimeout 製作出流暢的轉動效果。每個轉軸會依序停止，並帶有些微的時間差，形成自然且具有遊戲感的節奏，讓整體互動看起來意外地精緻。
即使沒有使用 GSAP，我仍透過 setInterval 和 setTimeout 製作出流暢的轉動效果。每個轉軸會依序停止，並帶有些微的時間差，形成自然且具有遊戲感的節奏，讓整體互動看起來意外地精緻。
02 調酒拖曳互動設計
02 調酒拖曳互動設計
我將 杯子與液體拆分為兩層 SVG，讓液體可以顯示在杯子後方，並在使用者拖曳水果（🍓🍋🍇）進入時 動態改變顏色。在實作過程中，需要同時處理 drag event 與顏色混合邏輯，協調起來有一定難度，但最終呈現出的視覺效果非常直觀且有趣。
我將 杯子與液體拆分為兩層 SVG，讓液體可以顯示在杯子後方，並在使用者拖曳水果（🍓🍋🍇）進入時 動態改變顏色。在實作過程中，需要同時處理 drag event 與顏色混合邏輯，協調起來有一定難度，但最終呈現出的視覺效果非常直觀且有趣。
03 404 照片地圖的效能優化
03 404 照片地圖的效能優化
雖然地圖需要載入多張圖片，但整體效能仍保持流暢。我事先將圖片尺寸調整為 100×150px，並控制檔案大小，使頁面載入速度比預期更快，也讓使用者能立即看到視覺回饋。
雖然地圖需要載入多張圖片，但整體效能仍保持流暢。我事先將圖片尺寸調整為 100×150px，並控制檔案大小，使頁面載入速度比預期更快，也讓使用者能立即看到視覺回饋。
What went right
01 拉霸機的隨機感與動畫節奏
即使沒有使用 GSAP，我仍透過 setInterval 和 setTimeout 製作出流暢的轉動效果。每個轉軸會依序停止，並帶有些微的時間差，形成自然且具有遊戲感的節奏，讓整體互動看起來意外地精緻。
02 調酒拖曳互動設計
我將 杯子與液體拆分為兩層 SVG，讓液體可以顯示在杯子後方，並在使用者拖曳水果（🍓🍋🍇）進入時 動態改變顏色。在實作過程中，需要同時處理 drag event 與顏色混合邏輯，協調起來有一定難度，但最終呈現出的視覺效果非常直觀且有趣。
03 404 照片地圖的效能優化
雖然地圖需要載入多張圖片，但整體效能仍保持流暢。我事先將圖片尺寸調整為 100×150px，並控制檔案大小，使頁面載入速度比預期更快，也讓使用者能立即看到視覺回饋。
Reflection
Reflection
Reflection
這個專案是我做過 最具探索性的作品之一。我刻意暫時脫離較為結構化的 UX 設計流程，專注於透過程式實作打造一個更具表現力的互動體驗。這段過程也提醒我，實驗本身就是設計的一部分，尤其是在創意與技術實作之間建立連結的時候。
這個專案是我做過 最具探索性的作品之一。我刻意暫時脫離較為結構化的 UX 設計流程，專注於透過程式實作打造一個更具表現力的互動體驗。這段過程也提醒我，實驗本身就是設計的一部分，尤其是在創意與技術實作之間建立連結的時候。
這個專案是我做過 最具探索性的作品之一。我刻意暫時脫離較為結構化的 UX 設計流程，專注於透過程式實作打造一個更具表現力的互動體驗。這段過程也提醒我，實驗本身就是設計的一部分，尤其是在創意與技術實作之間建立連結的時候。
1
1
1
當程式形塑設計
當程式形塑設計
當程式形塑設計
親手實作每一個互動，讓我更清楚地理解 前端機制如何影響使用者體驗。像是 Flexbox、Viewport Height（VH）與響應式版面設計等概念，不再只是「工程師的術語」，而逐漸成為影響 資訊層級、流程與視覺平衡的重要設計工具。
親手實作每一個互動，讓我更清楚地理解 前端機制如何影響使用者體驗。像是 Flexbox、Viewport Height（VH）與響應式版面設計等概念，不再只是「工程師的術語」，而逐漸成為影響 資訊層級、流程與視覺平衡的重要設計工具。
親手實作每一個互動，讓我更清楚地理解 前端機制如何影響使用者體驗。像是 Flexbox、Viewport Height（VH）與響應式版面設計等概念，不再只是「工程師的術語」，而逐漸成為影響 資訊層級、流程與視覺平衡的重要設計工具。
2
2
2
在玩樂中學習
在玩樂中學習
在玩樂中學習
當我允許自己在沒有過度規劃的情況下進行實驗時，也獲得了更多探索與學習的空間。我開始意識到，coding 不只是把設計實作出來的過程，它也是一種原型工具，能夠測試情緒與氛圍，觀察動態、節奏與互動如何讓一個簡單的 404 頁面變得更有生命力。
當我允許自己在沒有過度規劃的情況下進行實驗時，也獲得了更多探索與學習的空間。我開始意識到，coding 不只是把設計實作出來的過程，它也是一種原型工具，能夠測試情緒與氛圍，觀察動態、節奏與互動如何讓一個簡單的 404 頁面變得更有生命力。
當我允許自己在沒有過度規劃的情況下進行實驗時，也獲得了更多探索與學習的空間。我開始意識到，coding 不只是把設計實作出來的過程，它也是一種原型工具，能夠測試情緒與氛圍，觀察動態、節奏與互動如何讓一個簡單的 404 頁面變得更有生命力。
其他專案
其他專案
其他專案
其他專案