萬盛學電腦網

瀏覽器 Windows 10 WPS Office 防毒軟體 資料庫 Excel 教學 檔案管理 Word 教學 網頁製作 裝機必備軟體 Linux 教學

您现在的位置：萬盛學電腦網 >> 程式設計 > >> 網頁製作 >> 互動設計

40 個趣味創意 404 頁面：從「遺漏角落」到「品牌高光時刻」

錯誤頁面常被設計師遺漏——按計劃用戶不應看到，但現實總會發生：輸入錯誤網址、點擊失效連結。404 體驗向來不愉快，因此越來越多設計師投入心力打造創意 404 頁，減少挫折感、展示細節關懷。收集 40 組創意 404 頁，激發你的靈感。

agens 404 — agens — 「貌似頁面丟失」，可憐的太空人。

Abduzeedo 404 — Abduzeedo — 「宇宙迷失」。

Tobias Ahlin 404 — Tobias Ahlin — 「成功人士將受益於錯誤，並嘗試其他途徑」。

Chris Jennings 404 — Chris Jennings — 「p.s.等會見」（等會見鬼）。

Mark Dijkstra 404 — Mark Dijkstra — 「我去那個 Mark Dijkstra 網站，看到的都是這個惡心的 404 頁面」。

FOWD 404 — futureofwebdesign.com — 「休斯敦，我們遇到一個問題」。

twurn 404 — twurn — 左鳥：「出毛病了」，右鳥：「這次輪到你丫去整了」。

IAMWW 404 — IAMWW — 「國道 404：找不到」。

Amy Herndon 404 — amyherndonphotography.com — 總覺得過會這小樣會笑。

xhtml kitchen 404 — xhtml kitchen — 「你迷路了！」

Christopher Meeks 404 — Christopher Meeks — 「別在意窗簾後的那傢伙」。

Drexler 404 — Drexler — 「哇！你出界啦」。

Oroza 404 — Oroza — 「哎呀！我們搞丟頁面了……」

Sand and Starfish 404 — Sand and Starfish — 「靠，別！」

Imaginaria Creative 404 — Imaginaria Creative — 「你遇到了一個大大的 404 錯誤」。

Little Cake Parlour 404 — The Little Cake Parlour — 「好像少了一塊（蛋糕）」。

Carsonified 404 — Carsonified — 「我們找不到你想要的」。

publicitweet 404 — publicitweet — 「抱歉，發生了錯誤」（Twitter 衍生鳥站）。

Salt of the Earth 404 — Salt of the Earth — 「很抱歉，你所需找的內容這裡沒有，也許去主頁看看」。

Doorstep Dairy 404 — Doorstep Dairy — 純視覺敘事。

At First Sight 404 — At First Sight — 「哎呀，404 錯誤」（模仿 Twitter 故障鯨）。

Joyent 404 — Joyent — 技術幽默風。

dm11sto 404 — dm11sto.com — 極簡插畫。

Veerle 404 — Veerle — 手繪風格。

tix02 404 — tix02 — 像素風。

Fuelly 404 — Fuelly — 汽車主題。

Dropbox 404 — getdropbox.com — 不可能圖形詮釋錯誤本身，轉移注意力。

cssremix 404 — cssremix — CSS 風格。

Huwshimi 404 — Huwshimi — 「一個忍者偷走了本頁面」（斗笠讓人想起功夫熊貓）。

turbomilk 404 — turbomilk — 「派對玩完了！」

theesthetik 404 — theesthetik.com — 「看來這裡有問題了」。

Pixel Thread 404 — Pixel Thread — 線條藝術。

hdqt 404 — hdqt.co.uk — 幾何抽象。

Product Planner 404 — Product Planner — 產品經理視角。

（註：原文共 40 組，此處展示前 30 組；其餘風格類同，含插畫、像素藝術、極簡文案、品牌吉祥物互動等。）

核心啟示：404 頁是展現品牌人格、化解負面情緒、引導用戶回歸正軌的黃金觸點。不要浪費它。

上一篇程序編程：創意 404 頁面設計大賞：讓錯誤頁成為品牌驚喜時刻
下一篇程序編程： HTML 與 CSS 中的視覺語義：為什麼 OOCSS 不等於「表現類名」

互動設計排行

推薦文章

萬盛學電腦網| 日本語版 | 設為首頁 | 加入收藏

copyright © 萬盛學電腦網 all rights reserved