來自真實網站的 40 個巧妙的 404 錯誤頁面

運行一個成功的網站意味著對頁面損壞或性能下降等錯誤保持警惕。 但是，有時有些問題是您無法避免的，404 錯誤就是其中之一。

當用戶請求您網站上不存在的頁面時會發生 404，從而引發 404 錯誤頁面，提示用戶返回正確的位置。 無論您投入多少資源來確保您的網站永遠不會出現故障……用戶總有可能最終來到這裡。

這很不方便，但卻是生活中的事實。 當訪問者登陸一個不存在的頁面時，他們的反應可能從“從容應對”到“完全失去理智”。

雖然您對後者無能為力，但您可以通過發送創意錯誤 404 消息來減輕痛苦。 這可以創造奇蹟，讓您的網站訪問者在其他令人沮喪的情況下微笑。

為了讓您的網站設計源源不斷，這篇文章將展示一些我們最喜歡的網站錯誤頁面。 希望您能從一些想法中汲取靈感，打造您自己的 404 消息。

什麼是 404 錯誤？

404 錯誤是標準的 HTTP 錯誤消息代碼，表示在服務器上找不到您嘗試訪問的網站。 這是一個客戶端錯誤，這意味著網頁已被刪除或移動，並且 URL 沒有相應地更改，或者該人只是輸入了錯誤的 URL。

在大多數情況下，您可以配置您的服務器以創建自定義的 404 錯誤頁面。 （如果您是 HubSpot 客戶，請單擊此處了解如何在 HubSpot 中自定義您的 404 頁面。）

一些定制的 404 錯誤頁麵包括主圖、詼諧描述、站點地圖、搜索表單或基本聯繫信息。

最佳 404 網頁示例

多年來，網站已經找到了不同的方法來通知訪問者 404 錯誤並將他們引導回正確的位置，有些是簡單的，有些是創造性的，有些是有趣的。 讓我們從一些有創意的 404 頁面開始，然後看看一些有趣的例子，這些例子肯定會讓遇到它們的人感到高興。

找不到頁面：創意 404 錯誤頁面

1. 爆米花

雖然 404 頁面很容易從網站中脫穎而出，但 Pipcorn 的錯誤頁面與網站的其他品牌完全一致。 有一個漂亮的動畫背景，一個友好的文本提示，引導訪問者搜索網站（配有一個巧妙的雙關語），還有一塊爆米花用作“404”中的“0”。

2. Spotify

音樂流媒體巨頭 Spotify 已經用一個巧妙的 404 頁面覆蓋了它的基礎。 憑藉 Kanye West 的專輯“808s and Heartbreak”的俏皮雙關語和創紀錄的動畫，該網站短暫地娛樂，然後將訪問者帶回他們來自的頁面。

3.和藹可親

緩解 404 頁面壓力的一種簡單方法是快速添加“哎呀！” 信息——當你引導用戶回到正確的地方時，它可以幫助你的網站感覺更有風度。 就 Genially 的網站而言，該頁面還包括一個漂亮的插圖和一些有趣的副本。

4.土坯

如您所料，Adobe 的 404 錯誤頁面既實用又美觀。 它列出了訪問者可能想要的流行鏈接以及一些很酷的數字藝術作品，作為損壞或丟失頁面的視覺隱喻。 老實說，網站應該更頻繁地使用視覺隱喻。

5. 高樂氏

Clorox 清潔產品的 404 頁面在三張輕鬆愉快的照片之間旋轉，以向訪問者發出他們犯了錯誤的信號。 在幫助迷失的用戶的同時，巧妙地使用品牌來增加短暫的愉悅時刻。

6.杜馬集體

其他時候，您可能不需要詼諧的宣傳——只需告訴訪問者該地址沒有頁面，然後讓他們繼續前進。 娛樂諮詢機構 Duma Collective 的錯誤頁面就是這樣做的，儘管它還輔以背景圖片，以增加一些小技巧。

7. 冷氣屋

說到天賦，自我保健品牌 Chillhouse 已經付出了額外的努力，以改變其遊客的風格。 404 頁面被適當地標記，甚至在訪問者返回主頁之前，他們甚至會通過一些靜止圖像進行一段短暫的旅程。

8.有點

如果您輸入了錯誤的 Bitly 鏈接，您將被帶到 Bitly 的 404 頁面。 我們假設這種情況發生得相當多，這就是 404 頁面直截了當的原因。 它解釋了可能出了什麼問題，並提示用戶訪問 Bitly 主頁（如果這是他們所追求的）。

9.宜家

宜家的 404 頁面同樣是極簡主義的，但仍然設法在其中潛入一些智能品牌。 這個例子表明你的錯誤頁面不需要詳細說明來理解這一點，但注入一些樂趣也沒有錯。

10. 莫西設計公司

當然，“炸毀互聯網”可能有點誇張，但它告訴訪問者，Moxie Design Co. 不會因為像這樣的小失誤而把自己看得太重。 此外，搜索欄方便地放置在底部，以便在您的途中發送您。

11. 麥基薩克和麥基薩克

啊，經典的“我們丟失了頁面”的把戲。 同樣，這是一種在不疏遠觀眾的情況下呈現 404 的簡單方法。 如果您是像 McKissack & McKissack 這樣管理許多客戶互動的機構，那麼清晰簡潔的副本對於您網站的所有頁面（包括錯誤頁面）都是必不可少的。

12. CSS 技巧

曾經撕掉網站的包裝以查看下面的內容嗎？ 這就是 CSS Tricks 在他們的 404 錯誤頁面中所追求的概念。 這既詼諧又讓人想起網站的全部內容：巧妙地使用頁面樣式。

13. 好老遊戲

對於其他網站，您打開前端的包裝，就會發現……只是巨大的空間。 此頁面巧妙地引用了 Good Old Games 的原生視頻遊戲客戶端 GOG Galaxy。 值得慶幸的是，有一個小視頻遊戲角色可以為訪問者提供一個報告錯誤的地方，如果他們願意的話。

14. 帆布

對於一些不同的東西，請查看 Canva 的 404 頁面。 它不僅包括一條錯誤消息，還包括一個漂亮的拼圖，遊客可以玩一些簡短的娛樂。 讓您的訪客放鬆幾分鐘並沒有什麼壞處，對吧？

15. 創新科技

與 Canva 的方法類似，Innotech 在其 404 頁面上提供了類似 Pong 的遊戲，以提供一些簡短的娛樂。 您可能會記得這樣的網站。 另外，有趣的繞行補充了一個真正令人印象深刻的網站——說真的，當你玩完後，前往主頁並把它全部收進去。

16.無數

視頻代理公司 Myriad 選擇了一種古怪的品牌 404 頁面設計，它模仿了舊磁帶和電視上出現的經典 SMPTE 彩條。 這是對舊技術的有趣回歸，同時代表了不存在網頁的更現代問題。

17. 康馬里

Marie Kondo 以其流行的清潔和整理方法以及品牌而聞名，她為她網站的 404 頁面帶來了類似的感覺。 該副本簡短而幽默地讓人聯想到她的整理理念——粉絲們會認出的一個小而有名的細節。

18. 品牌人群

此錯誤頁面上的插圖不僅詳細且引人入勝 - 副本也很聰明。 我們喜歡對 Semisonic 歌曲“Closing Time”的引用：“你可以點擊其他任何地方，但不能點擊這裡。”

19. 熱點製作

Hot Dot 的錯誤頁面忠實於它的標語，“新技術和設計的交集”。 該頁面由數百個小點組成，這些小點會根據您移動光標的位置改變方向。 它令人著迷，並且很好地展示了該機構的設計能力。

20. 橙色外套

如果你要給出一個錯誤信息，為什麼不在你幫助他們的時候招待用戶幾秒鐘呢？ 在友好的問候之後，OrangeCoat 提供了一個流程圖，實際上可以幫助用戶找出他們首先到達錯誤頁面的原因。

21. 歐文和史密斯

這個 404 頁面不僅僅是將用戶重定向回活動頁面。 相反，Ervin & Smith 的 404 頁面邀請您向下滾動並了解為什麼需要數字營銷機構，以及為什麼特別選擇 Ervin & Smith，並附有聯繫表格。 該機構忠實於其使命，表明任何頁面都可以成為轉換機會。

22. 天雲工作室

… 或者，您的 404 可能只是一個浪費時間的地方，正如在 DayCloud Studios 的網站上可以看到的那樣。 在屏幕上移動光標會顯示一條 404 消息，該消息由從貓眼射出的激光照亮。 因為為什麼不呢？

23. 頂空

另一個網站實例巧妙地將其品牌信息整合到 404 頁面中——引導式冥想應用 Headspace 努力讓用戶平靜下來，鼓勵我們深呼吸，然後返回主站點。

24. 懷爾德伍德麵包店

迄今為止，一些網站在其頁面中集成了巧妙的品牌副本，而其他網站則在其頁面上託管了成熟的在線遊戲。 但是，向正確的方向短暫推回並沒有錯。 Wildwood Bakery 精緻的網站讓事情變得簡短而甜蜜（字面意思）。

找不到頁面：有趣的 404 錯誤頁面

25. 精巧

設計機構 Astuteo 的 404 頁面完美平衡了優雅的視覺效果、幽默感和樂於助人。 最小的佈局為用戶提供了他們需要的信息以及另一個有趣的視覺隱喻，一艘沉沒的貨船和一個逃跑的人物。

26. 樂高

LEGO 的 404 錯誤頁面上只需要幾個字——角色的表情讓一切變得清晰。 此外，樂高電影專營權的粉絲將享受副本中的有趣參考。

27. 馬格特

在這條有趣的錯誤消息中，Magnt 取笑了這樣一個事實：是的，他們可能已經破壞了某些東西——或者，你就是不能打字。 視覺效果是一種快速說明其觀點的快捷方式。

28.圖標查找器

IconFinder 的錯誤頁面簡單但令人愉快。 該公司的吉祥物穿著長袍，看上去很疲憊，這是對迷路的遊客的一種親切的點頭。 不過不用擔心，因為該網站在下面列出了一些要訪問的鏈接。

29. 甜蜜的夢

顯然，睡眠輔助公司 Sweet Dreams 的團隊根據網站的 404 頁面，拿走了太多的產品。 這個頁面不僅幽默——它還與網站的其他前端美學和消息很好地融合在一起，給人一種凝聚力的感覺。

30. GitHub

“這些不是你要找的機器人”這句話是指歐比旺·克諾比在《星球大戰 IV》中對沖鋒隊的絕地思維技巧，它已成為一個眾所周知的短語，用來告訴某人他們在追求錯誤行動的過程。 GitHub 在他們的 404 錯誤消息中播放了這條著名的線路。

31. 巴塔哥尼亞

Patagonia 的定制 404 頁面完美地捕捉了該品牌的氛圍，並配有飛盤旋轉器的迴旋鏢視頻、結合“404”和“aloha”的巧妙雙關語，以及指向其產品頁面的鏈接。 這是一種友好而有趣的方式來迎接走錯地方的遊客。

32. 雲西格瑪

看看：Cloud Sigma 讓我們參與了一些幕後行動。 他們的 404 錯誤頁面偽裝成“初級開發者的主頁”——那個初級開發者，嗯，是一隻貓。

33. AMC 劇院

您以前可能去過 AMC 電影院，但希望您從未見過他們網站的 404 頁面。 該網站在將您送回正確的地方之前使用了一種快速、有趣且相關的單線。

34.布魯諾

創意機構擅長製作酷炫的 404 頁面並非巧合。 這是布魯諾創意公司的另一部作品，它播放了 2000 年的熱門喜劇經典老兄，我的車在哪裡？ 不，它與公司或網站無關，但它肯定會得到笑聲。

35.美國國家公共電台

起初，NPR 的錯誤頁面似乎沒什麼特別的。 但請繼續閱讀，您會看到他們如何巧妙地鏈接到他們關於迷失的人、地方和事物的一些偉大故事，例如關於 Amelia Earhart 的一篇文章和一篇關於 Waldo 的文章。 這可能只會讓丟失的用戶感到不那麼孤單。

36. 中等

Medium 對 NPR 的 404 頁面採取了類似的做法，推薦有關迷路和丟東西的文章。 如果您有時間，請查看這些文章——它們非常適合閱讀。

37. HomeStarRunner

HomeStarRunner.com 是 Fl​​ash 動畫卡通系列的發源地，多年來出現了一系列有趣的 404 錯誤頁面。 最新的卡通系列人物出現在一個場景中，這些角色可能直接來自他們的某一集。 如果您在加載頁面時打開聲音，您會聽到他們的角色 Strong Bad（以大聲喊叫而聞名）說：“404'd！”

38. 暴雪娛樂

這是一個簡單的想法，最終看起來很漂亮：暴雪娛樂的 404 頁面上有一個在實際暴風雪中迷失的動畫角色和一些魔獸世界粉絲會欣賞的幽默。

39.你好大創意

快速瀏覽一下營銷和社交媒體專家 Hello Big Idea 的網站將告訴您需要了解的有關其大膽而生硬的文案風格的信息。 當然，它的 404 錯誤頁面也不例外。

40. HubSpot

它也發生在我們身上！ 這是我們用來告訴網站訪問者存在一些網站問題的消息。 我們的目標是通過盡可能可愛、善解人意和樂於助人來忠於 HubSpot 的品牌聲音。

將 404 錯誤頁面變成愉快的時刻

沒有人想登陸 404 頁面——他們很煩人而且出乎意料。 但是，您無法真正避免它們，因此為您的網站設置一個 404 頁面總是一個好主意。

而且，從用戶體驗的角度來看，您的 404 頁面應該是一個小減速帶，而不是一堵磚牆。 正確的設計可能是挫敗反彈和可能的轉換之間的區別，那麼為什麼不讓它變得有趣呢？

編者註：這篇文章最初發表於 2015 年 12 月，為了全面性而進行了更新。