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

2021-01-08 愛範兒

文:李超凡

關於「 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。

相關焦點

  • 如何修復WordPress 404頁面「Not Found」錯誤
    如果沒有正確維護,您通常會在您的網站上遇到WordPress 404頁面錯誤。但有時候您的網站處於維護狀態,您的訪問者也會自動轉到404錯誤頁面。你是否也遇到過WordPress 404錯誤?不要害怕,wpnicer為您提供解決方案。
  • 【遊俠導讀】404錯誤頁面是伺服器接到瀏覽器訪問請求後返回的狀態...
    404錯誤頁面是伺服器接到瀏覽器訪問請求後返回的狀態碼(伺服器信息頭),不同的代碼有著不同的含義,但是它們都是告訴你一件事,出錯了!這個頁面打不開了!
  • 一個有趣的404頁面,是如何體現的?
    頁面,指的是顯示網站錯誤連結的頁面,可能是該訪問的頁面不存在,也可能是頁面已經被刪除。大概來說,一般看到404頁面的人群,基本也屬於「網絡情況問題」和「產品本身問題」,但是他們都有個相同的特徵,就是在「需要你的時候,你掛了」。
  • 為什麼老遇上404 not found?你懂的
    404錯誤頁面又稱「網際網路的最後一頁」因為404就是一個網站的墓志銘啊來跟學霸一起唱「不找了找不到的~」「 你還在想些什麼~」「該來她總會來的~」 「別找了~」請求的網頁不存在(丟了或找不到)而蒂姆的辦公室也在這裡朋友們去找他時老是找不到人
  • Brave瀏覽器原生集成「網站時光機」服務,404也能訪問
    當用戶通過瀏覽器訪問已消失的網頁時,就會看到「Page Not Found」的錯誤信息。對於這種情況,相信大多數人也只能不了了之。不過有責任心的組織——網際網路檔案館為了提供更可靠的Web服務,它聯手Brave瀏覽器專門針對此類網頁提供了一鍵加載存檔頁面的功能。
  • 404 也能訪問!Brave 瀏覽器原生集成「網站時光機」服務
    當用戶通過瀏覽器訪問已消失的網頁時,就會看到「Page Not Found」的錯誤信息。對於這種情況,相信大多數人也只能不了了之。不過有責任心的組織——網際網路檔案館為了提供更可靠的Web服務,它聯手Brave瀏覽器專門針對此類網頁提供了一鍵加載存檔頁面的功能。
  • 出現網頁錯誤時,數字502、404等分別是什麼意思? - 北京科學中心
    502這三個數字估計是粉絲們最怕看到的了,因為它意味著可能搶不到票了!平時,我們在瀏覽網頁時也偶爾會遇到寫有502的報錯頁面,更多時候會出現404錯誤頁面,那麼它們到底是什麼意思呢?我們來一探究竟吧。上網需要哪些過程在此之前,我們先來了解一下,登陸一個網頁,計算機後臺都需要哪些步驟?
  • 404錯誤頁面幫找失蹤兒童:公益域名NotFound.org亮了-站長之家
    404錯誤頁面幫找失蹤兒童:公益域名NotFound.org亮了 易名中國(eName.cn)9月28日訊,據悉,Missing Children Europe和European Federation
  • NotFound計劃:把404頁面換成尋找丟失小孩的公告 | 雷鋒網
    Missing Children Europe和Child Focus打算與網站合作把他們的404錯誤頁面換成尋找丟失或受性虐兒童的公告。這些組織說在歐盟每年都有數千個兒童丟失,到目前為止找到他們並帶回安全地方最有效的辦法就是張貼他們的照片。NotFound計劃由總部設於布魯塞爾的廣告機構Famous管理。
  • 什麼是「404 Not Found」?為什麼會出現?意思不僅僅是未找到
    如果伺服器收到、解析並接受你的請求,它就將你所請求的內容和一個狀態代碼一起發送過來,以代碼「200 OK」為例,你無法看到這段代碼,因為你的瀏覽器通常只顯示它接收到的內容。不過,如果情況有所不同,比如這個伺服器碰到一種特殊問題,這個代碼就可見了。上面會顯示」404未找到」,具體來說這個狀態代碼意味著伺服器能夠接收到請求,但是它無法找到所請求的內容。
  • 科技公益404頁面變身失蹤兒童尋人啟事
    科技也公益:404頁面變身失蹤小孩告示你一天能在網上看到多少404錯誤頁面?為什麼不充分利用一下這種資源呢?現在,你可以用它幫助別人尋找失蹤的孩子。Missing Children Europe官員瓦爾利亞·賽迪(Valeria Setti)表示,通過這一項目,該組織將在404錯誤頁面上刊登失蹤兒童的姓名和照片,並提供NotFound.org網站的連結,為用戶提供更多信息。頁面上還將設計一個按鈕,方便用戶向自己認識的企業和個人發送信息,建議他們在自己的網站上安裝同樣的頁面。
  • 404Error:這部片子告訴你,那些打不開的頁面背後都藏著什麼秘密
    可能是失望,尤其是那種給了你希望之後又出現的失望。比如,當你興致勃勃地單擊了一個信息量爆表的標題,彈出來的卻是「404Error 你訪問的頁面不存在」……有多少人每次看了這個頁面會忍不住想掀桌子?終於,有人站出來意淫這個萬惡的404了,還帶了部片子——《404次元》。
  • 404、403、405、500|常見網頁錯誤代碼解析 - 聯想商用服務
    No.1 404 無法找到文件404是大家上網衝浪時最常見的錯誤代碼,一般出現的原因可能是:①頁面被刪除或不存在②網址輸入有誤③沒插網線或沒有聯網做為生活中最常見的404,除了本身找不到查詢頁面的含義,還延伸出很多額外的意義。
  • 404 not found是什麼鬼?怎麼解決!_網易訂閱
    08 16:22:38 來源: 酷我科技交流小站 舉報   大家在瀏覽網頁時經常會遇到網頁404
  • 必應搜索, 深度踐行「404公益」
    (1月31日,北京)近日,必應搜索與「益雲公益」社會創新中心等機構聯合推出「404公益「行動,並成為該活動的特別支持方。必應搜索不僅將在404錯誤頁面放置公益廣告幫助失蹤兒童回家,而且成為率先將公益信息更加深入地整合到搜索結果中的搜尋引擎。
  • 16款優秀的網站404錯誤頁面HTML模板-站長之家
    站長之家(CHINAZ.com)3月20日編譯:404錯誤頁面是一個非常普遍的現象,該頁面的目的是告訴瀏覽者其所請求的頁面不存在或連結錯誤,同時引導用戶使用網站其他頁面而不是關閉窗口離開。
  • 網站出現 404 錯誤時應如何處理?-站長之家
    比如,網站出現了404、 503 等訪問錯誤,站長們需要了解清楚其出現的原因和快速解決的方法。下面文章內容是針對網站出現 404 錯誤時應如何處理的介紹。  出現 404 錯誤的原因:  1、網站出現 404 錯誤說明該訪問頁面不存在  出現這種情況,很有可能是由於網站URL生成規則發生改變、網頁文件更名或移動位置、導入連結拼寫錯誤等,導致原來的URL地址無法訪問。
  • 【極客人物】404 not found 背後的布道師 | 極客公園
    2013 年 5 月 12 日,濟南市一個 8 歲的小女孩鈺鈺失蹤,父母立即報了案,騰訊 404 公益頁面上很快掛出失蹤信息。9 天后,鈺鈺的屍體被警察在一個樹林找到,她的媽媽聽到噩耗後哭倒在床上久久不能站立。404 公益頁面的志願者 lily 在網上搜索到該事件的報導,得知這個女孩已經是該家庭失去的第二個孩子,「如果能再早一點找到她就好了。」
  • 訪問時出現401、403、404等錯誤的原因分析
    OWA訪問時出現401、403、404等錯誤的原因分析經常看到有人問OWA訪問時出現404、401、403等錯誤,此現象尤其容易出現在用戶修改了默認的收件人策略或是建立了多個域名的收件人策略時。這時這些用戶訪問OWA就會出現上述錯誤。當出現此現象時,您仍能夠使用MAPI可戶端或POP3等客戶訪問您的郵箱。解決:1、為不能正確登錄的用戶配置或增加和HTTP虛擬伺服器相同的SMTP地址。2、修改收件人策略,將默認的主SMTP地址域配置或修改成和HTTP虛擬伺服器SMTP域相同。
  • 谷歌新計劃:跟「404 Not Found」說拜拜-404,Not found,谷歌...
    上網時,恐怕沒有什麼比遇到「404 Not Fonud」更讓人蛋碎的事情了,不過現在谷歌正在嘗試解決之。谷歌為此計劃推出了名為「Service Workers」的全新 WEB 瀏覽器標準,其目的在於讓本地可以存儲更多的頁面信息,只要瀏覽器使用者同意,網頁就會在本地建立高速的數據緩存,尤其是已經訪問過的網頁。因此,即使網際網路連接已經斷開,用戶仍然能夠看到舊的離線內容,而不是可怕的「404 Not Fonud」頁面信息。