國外知名404頁面

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

在歐洲核研究組織的 404 號房間內,存放著網際網路第一台伺服器,萬維網的發明者 Berners-Lee 就在這裡辦公。

如果你要訪問網頁,必須向這個房間提交申請,如果找不到這個網頁就會提示你「404 not found 」。

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

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

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

0822232a6ce8d5beb3e3b4fb9a07b0b6-thumb

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

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

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

Facebook

6bb45619a822274c9ca72e2aaa8f737d-thumb

看起來,Facebook 的 404 頁面似乎不怎麼走心,這個設計來源於自家的「點讚」圖標。

Google

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

62ec308b551ab75c78c43e6ce4344c90-thumb

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

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

461bc6f9bb2ca971cbb7ad7f3a18e099-thumb

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

8e5579d16695623e98f128fc981c487c-thumb

吃豆人

cfdb573a01cb5c63024e5e3cb3c13a76-thumb

同樣是把 404 頁面做成小遊戲,這家公司選擇了經典的街機遊戲《吃豆人》( Pacman) 。

皮克斯

43e85c334a3cecfd7be8b48191194384-thumb

皮克斯的 404 頁面採用了《頭腦特工隊》中的「憂憂」在哭泣的畫面,並配上「噢……別哭。」(Awww…Don』t Cry.)的文字。

IMDB

d37ca0ed9af134ea3191e07475f199d7-thumb

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

彭博社

2ea4926b75fc4db922a472da8d957b6f-thumb

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

Airbnb

a46fba68dd208dff4b555f7ff14222fb-thumb

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

MiKandi

cab49f0895ef80db612e85eebaf45c19-thumb

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

最憂鬱的 404 頁面

406989715c0000a467e62685a2d75373-thumb

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

d7334b69680b5fc56828b3d2c079792c-thumb

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

給「404 not found 」加點特效

0fb4fbf5ea5304ed4d1fbec9d2a73ef4-thumb

4b2cf778fd4a2f7d27130136afa19f9f-thumb

下一站,404

6fab32bc26c5e3b85470a8d97fc2abd7-thumb

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

讓滑鼠動起來

c00aeab0adfc48d4dd398452c59e92da-thumb

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

c3ae0cd272560b3a0369030dc41e027d-thumb

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

由你來設計

5ab7ba8141e355152e031b6ec5dfc634-thumb

△ 網友作品

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

15055171ebbd52d5937d19a7b8477210-thumb

△ 圖: Reddit Place 界面

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

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

0c5c7e0672afafe3cb6a60349e1dc74d-thumb

24cb15ff7238426e706be244bd97a77e-thumb

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

895e14cfd47d19e9737ba74dc97efa8d-thumb

5c7e909cf51867cdb4961838d7721303-thumb

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

貨不對板的 「404 網頁」

af2da89f2436b8bd6302adf5ffbb260e-thumb

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

c43a6b3286f56dbfd3a6d4e5e0a9f33c-thumb

△ 一個麥當勞最想阻擋的網站

在這裡可以找到 1993 年到 2009 年間的不同網站的歷史版本,是個小型的網際網路歷史博物館。

 

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

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

16679c19b230fa6084e162d13d1f6d74-thumb

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

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

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

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

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


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化