關于「 404 錯誤」的起源，互聯網上一直流傳著一個傳說。

在歐洲核研究組織的 404 號房間內，存放著互聯網第一臺服務器，萬維網的發明者 Berners-Lee 就在這里辦公。如果你要訪問網頁，必須向這個房間提交申請，如果找不到這個網頁就會提示你「404 not found 」。

當人們讓 Berners-Lee 就 「 404 錯誤」發表意見時， Berners-Lee 以這是無關緊要的瑣事為由拒絕置評，讓這段傳說更加撲朔迷離。

而開創了超文本結構的另一位互聯網發明者 Robert Cailliau，在最近接受《連線》雜志采訪時再次否認了這則傳說的真實性，并解釋了 「 404 錯誤」的真正來源：

「 404 錯誤」就是程序員為了讓用戶在網絡連接錯誤時，可以知道自己錯在哪而設置的。

△ 你對這個頁面也許不陌生

這樣的說法讓「 404 錯誤」的傳奇色彩蕩然無存，可能會讓很多人失望吧。

不過自從互聯網誕生以來，設計師們為了讓你不會因為錯誤訪問而對網站失望，在 404 頁面上花了不少功夫，而 404 頁面的變化也是互聯網交互形式發展的一個剪影。

下面愛范兒（微信號：ifanr）帶你來看看中外網站那些有趣的 404 頁面。

國外篇

Facebook

看起來，Facebook 的 404 頁面似乎不怎么走心，這個設計來源于自家的「點贊」圖標。

Google

Google 在不同節日的 Logo 設計一直別出心裁，而它的 404 頁面也不例外。

你最熟悉的，可能就是這幅手繪風格的機器人。

但更有趣的是 Google Chrome 的 404 頁面，這是一個操控恐龍躲避障礙物的小游戲。

這個頁面由 Google 設計師 Sebastien Gabriel 設計， Chrome 瀏覽器中眾多經典的 404 頁面 icon 都出自他手。

吃豆人

同樣是把 404 頁面做成小游戲，這家公司選擇了經典的街機游戲《吃豆人》（ Pacman） 。

皮克斯

皮克斯的 404 頁面采用了《頭腦特工隊》中的「憂憂」在哭泣的畫面，并配上「噢……別哭。」（Awww…Don’t Cry.）的文字。

IMDB

影評網站 IMDB 則把不同電影中的經典臺詞用在了自己的 404 頁面上。

彭博社

Bloomberg 的 404 頁面是一段無厘頭的動畫，一個西裝男拍散一部屏幕顯示 404 的電腦，然后自己原地粉碎……

Airbnb

網頁找不到的心情，和冰淇淋球掉了有點像？

MiKandi

最憂郁的 404 頁面

這是伊利諾伊州香檳分校計算機機械協會網站的 404 頁面，頁面中會陸續打下一段段文字，告訴你對于它找不到頁面十分沮喪，甚至想「爬進垃圾桶分解自己」。

這一大段話都喪得不行，口吻跟《銀河系漫游指南》那個換上抑郁癥的機器人 Marvin 很像。

給「404 not found 」加點特效

下一站，404

這個 404 頁面是個地鐵站臺，每隔一段時間就有一班地鐵靠站，畫面可以隨著鼠標移動，戴上耳機聽更有感覺。

讓鼠標動起來

404 頁面也是一個很好的用戶交互界面，這個頁面讓幽靈的眼睛跟著鼠標動。

同樣是讓眼睛跟著鼠標動，這個頁面對密集恐懼癥患者就很不友好。

由你來設計

△ 網友作品

這個 404 頁面就是一個布滿空白像素點畫布，你可以根據自己喜好在上面隨意涂鴉。

△ 圖: Reddit Place 界面

這有點像今年愚人節 Reddit 發起的一個活動，讓全球網友在一塊空白的巨大畫布著色。

總有一張動圖能表達你的心情

每次打開都有不同的動圖，看著都疼。

同樣是不斷變換的動圖，風格更加多變。

貨不對板的 「404 網頁」

這家網站叫「404 page found」，主要為了給那些已經從服務器中刪檔的舊網頁存檔，讓用戶可以瀏覽那些消失在互聯網歷史的網頁。

△ 一個麥當勞最想屏蔽的網站

在這里可以找到 1993 年到 2009 年間的不同網站的歷史版本，是個小型的互聯網歷史博物館。

國內篇

在中國，「404」是個舶來品。在中國的互聯網語境， 「 404 錯誤」有了更多含義，它可以是網頁不存在，可以是內容不符合法規，也可以是發布者主動刪除了內容。正如《連線》雜志那篇文章所說：

「 404 錯誤」提醒著人們，網絡技術，由人類創造，受人類控制，并非完全可靠。

下面來看看國內互聯網的公司的各種「404 頁面」。

騰訊、百度和網易的 「404 頁面」都是失蹤兒童信息，這些 404 頁面可以讓用戶在的 404 頁面中嵌入一段簡單的代碼，通過這個頁面傳播失蹤兒童信息，體現了一家企業對公益事業的態度。

淘寶的 404 頁面提醒著用戶，淘寶是姓馬的，馬云的馬。

京東用了自家的「京東狗」。

網易嚴選走了性冷淡風。

新浪和新浪微博放在一起，對待 404 頁面 ，感覺還是新浪微博的產品經理更上心。

知乎的 404 頁面可以說很符合知乎的調性了。

A 站的 404 頁面有著濃烈的二次元風格，前段時間 A 站無法訪問的幾天相信很多人都看過略帶憂傷的 AC 娘。

論二次元，B 站家的 22 娘與 33 娘也毫不遜色，還在 404 頁面新增了漫畫小劇場。

騰訊視頻跟 IMDB 類似，用了不同電影中的電影臺詞，還配上了劇照。

優酷則抖了個機靈。

愛奇藝順手給你推薦一個視頻。

一看就知道是外賣平臺的 「404 頁面」，這是餓了么的。

美團的風格則和 AB 站有點像。

大麥網的「404 頁面」大概很容易能觸到粉絲的淚點。

「404 頁面」是互聯網中的一個錯誤，被稱為「互聯網的最后一頁」。它的存在除了提醒人們訪問的頁面不存在，也悄悄成為了各個企業品牌宣傳的廣告位。

雖然超文本結構發明者 Robert Cailliau 認為對于「404 頁面」的創意毫無必要，但那些創意十足的「404 頁面」確實成了互聯網中有趣的一角。

對于產品經理和設計師來說，「404 頁面」也是 UI 設計中不可忽略的一部分，Google 設計師 Sebastien Gabriel 曾表示：

設計錯誤提示 icon 是一件有意思的事情，你希望用戶最好永遠不要看到它們，而一旦他們看到了，你就要避免他們產生更多掃興的感覺。

至于該如何設計「404 頁面」，負責騰訊產品視覺和交互設計的 CDC 團隊認為體驗良好的 「404 頁面」應該遵循以下幾個原則：

• 提供簡明的問題描述，用輕松的話語消除訪客的挫敗感，使得訪客轉到某個地方而不是后退。
• 提供合理的解決方案，輔助訪客完成訪問目標。
• 提供個性化的友好界面，提升訪問體驗。

話雖如此，但愿你的互聯網歷程中不會遇到太多的 404。

「超多實戰案例！教你設計404頁面」

• 《歡迎入坑！現代404頁面設計趨勢分析與案例》
• 《娓娓道來！50個實用設計思路幫你設計創意404頁面(上)》
• 《娓娓道來！50個實用設計思路幫你設計創意404頁面(下)》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com