國外知名404頁面

國外知名404頁面

在設計網頁的時候,如果找不到這個網頁就會提示你「404 not found 」,錯誤訊息是HTTP的其中一種「標準回應訊息」,很多設計師會使用404玩設計創意!快來看看這些案例如何設計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。

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。