404 的傳說:你訪問的頁面找不到了!

2020-12-06 愛範兒

文:李超凡

關於「 404 錯誤」的起源,網際網路上一直流傳著一個傳說。

在歐洲核研究組織的 404 號房間內,存放著網際網路第一臺伺服器,全球資訊網的發明者 Berners-Lee 就在這裡辦公。如果你要訪問網頁,必須向這個房間提交申請,如果找不到這個網頁就會提示你「404 not found 」。

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

而開創了超文本結構的另一位網際網路發明者 Robert Cailliau,在最近接受《連線》雜誌採訪時再次否認了這則傳說的真實性,並解釋了 「 404 錯誤」的真正來源:

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

(你對這個頁面也許不陌生)

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

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

下面愛範兒帶你來看看中外網站那些有趣的 404 頁面。

國外篇

Twitter 的宕機鯨魚

這大概是網際網路歷史上流傳最廣和最受歡迎的 404 頁面之一了。

「宕機鯨魚」的最早是華人設計師為慶祝朋友生日創作的一幅插圖。一頭鯨魚被幾隻小鳥用線拉拽著在天空翱翔,寓意「我的祝福像鯨魚一樣重」。

(圖自:矽星人)

而當年只有 200 萬用戶的 Twitter 買下了這幅畫作為自己的宕機頁面,雖然早年 Twitter 宕機頻繁,但這隻「宕機鯨魚」卻深受網友喜愛,在全球引發了無數網友的二次創作。

不少網站的 404 頁面也借鑑了這一設計,其中 Google 圖書的 404 頁面就採用了擱淺鯨魚的設計。

Facebook

相比起 Twitter,流量更大的 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

MiKandi 是世界上第一個 Android 成人應用商店,它的 404 頁面是一個金髮裸體女郎在說「自己的衣服不見了」。

最憂鬱的 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 娘也毫不遜色。

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

優酷則抖了個機靈。

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

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

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

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

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

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

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

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

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

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

話雖如此,但願你的網際網路歷程中不會遇到太多的 404。

相關焦點

  • 出現網頁錯誤時,404、502這些數字代表什麼?
    平時,我們在瀏覽網頁時偶爾會遇到寫有502的報錯頁面,更多時候會出現404錯誤頁面,那麼它們到底是什麼意思呢?登錄網頁時這些步驟在後臺運行當我們在IE、搜狗、火狐等瀏覽器中訪問一個網址(域名)的時候,首先要找到域名所對應伺服器的IP位址,簡單說就是先要找到所需的伺服器在哪裡。
  • 查遍中國地圖也找不到的神秘城市-核城404
    核城404「404」這個代號關於核工業人而言具有特殊的意義,四0四坐落於嘉峪關以西的蒼茫戈壁之中,是一個傳說在地圖上找不到的神秘小城。據404生活工作過的人描述,404集結了各行各業的高人,不光是核專家,還有上海冠生園最牛的頂級廚師、南京路上的優異營業員,各地最好的技工。國家一聲召喚,好幾萬人「上不告爸爸媽媽,下不告妻兒」,悉數奔向這戈壁灘,鼎盛時期,甭說造原子彈的工廠,404連醋廠都有,茫茫沙漠裡,404第一代居民們能喝上自己釀的醋,吃上自己做的冰棍和雪糕。
  • 出現網頁錯誤時,數字502、404等分別是什麼意思? - 北京科學中心
    502這三個數字估計是粉絲們最怕看到的了,因為它意味著可能搶不到票了!平時,我們在瀏覽網頁時也偶爾會遇到寫有502的報錯頁面,更多時候會出現404錯誤頁面,那麼它們到底是什麼意思呢?我們來一探究竟吧。這一步的目的是,查看你有沒有訪問伺服器內相應資源的權限。以上步驟完成後,伺服器會將資源發送給瀏覽器,這一步稱為網頁響應。在資源傳輸完成後,瀏覽器成功接收到來自伺服器的資源時,電腦就會顯示出我們想要查看的相應內容。
  • 出現網頁錯誤時, 404、502這些數字代表啥_新聞動態_教育頻道_雲南網
    原標題:出現網頁錯誤時, 404、502這些數字代表啥「機」本法則平時,我們在瀏覽網頁時偶爾會遇到寫有502的報錯頁面,更多時候會出現404錯誤頁面,那麼它們到底是什麼意思呢?這一步的目的是,查看你有沒有訪問伺服器內相應資源的權限。以上步驟完成後,伺服器會將資源發送給瀏覽器,這一步稱為網頁響應。在資源傳輸完成後,瀏覽器成功接收到來自伺服器的資源時,電腦就會顯示出我們想要查看的相應內容。前面介紹的一系列動作都是在瞬間完成的,平時我們點擊網頁後,電腦後臺進行的,便是「請求資源」和「網頁響應」的過程。
  • 科普:404/401/408...這些HTTP網頁狀態碼代表啥含義? - IT之家
    在這個廣域網中,我們所有人都一定會看到3個Logo:測試你網速的藍色熊掌,令你絕望的加載圓圈,還有「褲子都脫了就給我看這個?」的404頁面。前兩個好歹還能讓你看點東西,而最後一個則是最糟糕的用戶體驗——除了告訴你打不開網頁就似乎真的什麼也沒有了,不知道各位有沒有想過這個404是怎麼產生的,除了404還有什麼?今天我們就來談一談那些狀態碼。
  • 中國有一座在地圖上找不到的城市,代號404,當地人也說不清具體位置
    當我們在網上搜索某個網站時,如果伺服器無法響應,就會跳出來一個404頁面,這個404就是伺服器未找到目標連結的錯誤代碼。那麼你知道中國有一座代號404的城市嗎?這座城市你在任何公開的信息中都找不到,它只有一個代碼叫404。
  • 網站出現 404 錯誤時應如何處理?-站長之家
    比如,網站出現了404、 503 等訪問錯誤,站長們需要了解清楚其出現的原因和快速解決的方法。下面文章內容是針對網站出現 404 錯誤時應如何處理的介紹。  出現 404 錯誤的原因:  1、網站出現 404 錯誤說明該訪問頁面不存在  出現這種情況,很有可能是由於網站URL生成規則發生改變、網頁文件更名或移動位置、導入連結拼寫錯誤等,導致原來的URL地址無法訪問。
  • 16款Chrome擴展插件以及擴展頁面無法訪問解決辦法
    ,你無需訪問mail.google.com即可撰寫博客。當你把GmailThis!的連結添加到瀏覽器工具欄後,收發郵件就變得簡單的多了。使用方法如圖所示。7. 使用chrome擴展的方法:目前chrome被牆,需要翻牆,下面介紹最簡單的方法Google推出Chrome擴展頁面後有些朋友可能訪問不了(請不要討論原因,眾所周知)。現時可以通過修改hosts文件的方法來解決。
  • 英在亞馬遜下架NS《塞爾達:天空之劍》頁面已失效
    據外媒報導,在昨日引發關注之後,目前在英國亞馬遜商店已經找不到《塞爾達傳說:天空之劍》Switch版本,嘗試訪問後顯示為錯誤頁面。在遊戲下架前亞馬遜商店顯示,遊戲售價69.99英鎊(約637元),預計於2030年發售,顯然為佔坑之用。
  • 中國「最神秘」的城市,沒有名字只有代號,在地圖上根本找不到
    在中國,有這樣一座城市,它沒有名字,只有代號,同樣,不管是在公開發行的紙質地圖、電子地圖、城市列表、車牌號、電話區號,淘寶可送達的城市列表上,你都找不到它。除了它,還有哪座城市堪當中國最神秘之城?這座城市只有一個代號——404。
  • 我國「最神秘」的城市,4平方公裡大以數字命名,地圖上找不到
    404是我國最神秘的城市,搜尋引擎在地圖上找不到,所以只能從老人嘴裡聽到關於他的故事,404很小,萬塔萬山只有4平方公裡,大家幾乎都知道,但球、檢、法、電視臺、報社等都是一應俱全的,在這裡,在無數科學家的努力下,中國第一個核反應堆誕生了,在這裡,中國也製造了原子彈,這裡是一座充滿輝煌和榮耀的城市,現在已經成為一座廢棄的小城。
  • espcms訪問動態頁面出現「Access denied!」的解決辦法
    ac=article&at=read&did=69」這樣的動態頁面訪問出現一個「Access denied!」錯誤提示。 朋友使用espcms做了一個網站,傳到看伺服器上之後發現,諸如「index.php?
  • 中國最神秘的城市,任何地圖上都找不到,如今廢棄但還有軍隊駐守
    中國最神秘的城市,任何地圖上都找不到,如今廢棄但還有軍隊駐守 核城404,這是一個在地圖上都找不到的地方,它位於甘肅省嘉峪關地區。
  • 我的世界:mc傳說系列的11個「禁忌」種子,不要在凌晨三點玩!
    我的世界:mc傳說系列的11個「禁忌」種子,不要在凌晨三點玩!而下面這11個「禁忌」種子,建議你不要輕易嘗試。②Seed:Notch的生日;1979年6月1日這是《我的世界》創世神的生日,據玩家RageElixir所述,Herobrine也同樣誕生於這一天,當你在這個存檔探索超過11個小時之後,不經意間,你將會發現Notch和Him的痕跡。
  • 全國多所高校的校園網用戶反映,目前谷歌學術搜索可以直接訪問了!
    打開APP 全國多所高校的校園網用戶反映,目前谷歌學術搜索可以直接訪問了! 無論你是一位行將畢業的大學生,或是搞科研的技術人員,在你的瀏覽器收藏夾裡,一般都會常駐谷歌學術搜索(Google Scholar),因為我們查論文找資料根本離不開它! 我們不得不找代理、用鏡像,只為了能夠方便地連接谷歌學術!用一句話說就是:如果你從事科學研究,首先要學會科學上網。
  • 《塞爾達傳說:天空之劍》在亞馬遜下架
    昨日任天堂旗下《塞爾達傳說:天空之劍》上架英國亞馬遜商店引發關注,今日(8月18日)據外媒報導,《塞爾達傳說:天空之劍》現已在亞馬遜下架。
  • 《塞爾達傳說:天空之劍》Switch版預售頁從英國亞馬遜移除
    昨日任天堂旗下《塞爾達傳說:天空之劍》Switch版上架英國亞馬遜商店引發關注,不過目前《塞爾達傳說:天空之劍》已在亞馬遜移除。 目前在英國亞馬遜商店已經找不到《塞爾達傳說:天空之劍》Switch版本,嘗試訪問後顯示為錯誤頁面。
  • 如果頁面長時間不被收錄,我們要不要刪除它?
    很簡單的道理,如果你網站頁面收錄得越多,你在搜尋引擎平臺展現的位置就越多,那麼你被用戶搜索到的機率就越大,你的網站轉換率就越高,所以,檢查頁面是否被搜尋引擎收錄是我們每個SEOer需要長期關注的問題。很多SEOer都會有這樣的困惑,頁面長時間都沒有被收錄,我們要不要刪除它?
  • 亞馬遜出現《塞爾達傳說:天空之劍》NS版預售頁面
    據外媒報導,亞馬遜英國上架了 Nintendo Switch 版《塞爾達傳說:天空之劍》這款遊戲的預售頁面。 正如爆料者@Wario64 所發現的那樣,該頁面列出了任天堂的這款經典遊戲。但發行日期尚未提及,頁面標有 69.99 英鎊的價格。
  • 英亞增加NS版《塞爾達傳說:天空之劍》佔位預售頁面
    亞馬遜的商品頁面有時給出的信息相當準確,有時則是完全錯誤的。不過確實給了我們對新項目的早期確認,同時也給了我們對從未存在過的作品錯誤的期望。現在英國亞馬遜就增加了Switch版《塞爾達傳說:天空之劍》的佔位預售頁面。該頁面沒有任何其他信息,比如發行日期、圖像等。這裡只是69.99英鎊的標價。