國外那些富有創(chuàng)意的 404 頁面

最近在搜集前端相關(guān)文章時，無意看到了幾篇關(guān)于國內(nèi)外 404 頁面的收集，覺得很多網(wǎng)站的 404 頁面 特別富有創(chuàng)意。

所以趁著周末還有些空余的時間，去梳理了一份富有創(chuàng)意的 國外網(wǎng)站 404 頁面。

周五啦，各位前端大俠們不要太過于沉迷于技術(shù)，一起放松一下吧~

Github

作為程序員，當(dāng)前得先拿 Github 網(wǎng)站來鎮(zhèn)樓嘍~

GitHub 以 “星球大戰(zhàn)” 為主題的 404 錯誤頁面相當(dāng)酷（實話實說，直到此刻我才知道 Github 的主題是星球大戰(zhàn)，愧對社區(qū)?），一個細節(jié)是，當(dāng)你鼠標(biāo)活動時，它會對你的鼠標(biāo)活動作出響應(yīng) —— 這種特效技術(shù)稱為 視差卷軸特效（parallax scrolling）

對 視差卷軸特效 感興趣的讀者快關(guān)注 “前端號” 來催更~~

CSS-Trick

CSS Trick 網(wǎng)站也是我們前端人員經(jīng)常逛的網(wǎng)站，它的 404 頁面也別具個性，放了一張 CSS 相關(guān)的截圖，既自然又貼合主題。

Klaus

來自丹麥的名為 Klaus 的開發(fā)人員在 404 錯誤頁面的設(shè)計中充滿著計算機程序員的情懷，滿滿的復(fù)古風(fēng)。

克勞斯（Klaus）的 404 頁面帶我們回到了計算機技術(shù)的早期時代。頁面中會展現(xiàn)古老的計算機 Shell 界面，然后字符一個一個打印出來~~ （對哦，不是純靜態(tài)頁面）

畫面中展現(xiàn)的是 Commodore 64 計算機界面，它是 1982 年 1 月由 Commodore International 推出的 8 位家用計算機。它被 《吉尼斯世界紀錄》列為有史以來銷量最高的單計算機模型（1500萬臺）。

Roman Braiser

本來想干活，結(jié)果因為網(wǎng)頁打不開玩了 1 個小時游戲？

法國里爾的一名開發(fā)人員 Roman Braiser 在404頁面中添加了一個拯救小旅鼠的小游戲。

不幸進入該頁面的用戶，可以點擊頁面里的鏈接按鈕，進入“為小旅鼠提供降落傘”的游戲中，直到最后一只小旅鼠落地游戲結(jié)束，會跳出一個感謝頁面。當(dāng)然，用戶也可以不玩游戲直接回到主頁。

Airbnb

我們熟知的 Airbnb，它的 404 頁面也采用了動圖，隨著頁面的加載，本來面帶笑容的小女孩的冰激凌掉了...笑容逐漸消失...

可為啥莫名老想一遍遍地看？！可能幸災(zāi)樂禍才能緩解你的郁悶

Figma

估計這張 404 頁面是設(shè)計師的最愛，嗯，你猜的沒錯，頁面拖拽圓點可以改變形狀。

Figma 是一個基于 web 端的在線設(shè)計平臺，可以想象這家網(wǎng)站的網(wǎng)頁設(shè)計師得多熱愛她們的工作...

從前端角度來說，這些點就是貝塞爾曲線的控制點啦，頁面實現(xiàn)也是 canvas 畫布 —— 建議官方添加一個功能，在拖動時實時給出這些貝塞爾參數(shù)唄，這樣我們前端也可以愉快的玩耍了

IMDB（互聯(lián)網(wǎng)電影數(shù)據(jù)庫）

IMDB的 404 頁面很應(yīng)景，展示了許多著名電影的經(jīng)典臺詞，通過一些特定臺詞引導(dǎo)用戶切回其他頁面。

用咱們熟知的影視劇來做示例的話，就相當(dāng)于：

曾經(jīng)有一份真摯的愛情放在我面前， 我沒有珍惜， 等我失去的時候我才后悔莫及...

于是你不但沒生氣，還妥妥地被安利了一把星爺?shù)摹?strong>大話西游》。

Smashing Magazine

簡單介紹一下這個 “Smashing Magazine” 網(wǎng)站，它是專業(yè)的網(wǎng)頁設(shè)計師和開發(fā)人員的在線雜志網(wǎng)站（受眾主要是兩個相愛相殺的職位 —— 設(shè)計師和前端），站內(nèi)對前端開發(fā)者來說也有不少的干貨。

上面看到截圖是最新的，可能覺得平平淡淡，之前這個網(wǎng)站的 404 頁面可能會有創(chuàng)意一些，也更加 “理工男審美“ 一些：

• 頁面 404 文章的格式與他們的標(biāo)準文章相同
• 同時還融合了幽默，稱 “Smashing Magazine's Server” 為作者，“Right Now” 為出版時間，文章內(nèi)容則是 “我們找不到您的頁面?。?04錯誤）”

個人認為還是覺得舊版有創(chuàng)意，新版更偏向美觀

Marvel（漫威）

相信讀者很多都是漫威迷，如果你第一次打開漫威的 404 頁面看到只是一把 “雷神之錘”，那么請不要擔(dān)心，漫威公司有的是錢，它不會吝嗇在 404 上多放一些角色，你所要做的只需要刷新當(dāng)前 404 頁面即可~

Pixar（皮克斯）

舉世聞名的皮克斯（Pixar）在 404 頁上放置的這個角色名為憂憂（Sadness） —— 它來自 2015 年上映的《頭腦特工隊（Inside Out）》，這部電影豆瓣評分高達 8.7 分，沒看過的讀者可以去找來看看哦，的確是一部很受啟發(fā)的電影。

在這個 404 頁面上還附帶一段可愛的文案，貌似這段文案就是在動畫電影情節(jié)中出現(xiàn)的。（如果有讀者知道具體出處可以留言告知~）

20th Century Fox（20世紀?？怂构荆?/span>

20世紀?？怂构镜?404 頁面上放置的是該公司出品的經(jīng)典視頻短片。每次刷新看到是不一樣的短片（我打開看到是 《愛德華·剪刀手》（Edward Scissorhands）電影片段），每個視頻的配有相關(guān)的文本片段，都不同哦~ 它不僅觸發(fā)了精彩的電影記憶，而且點擊后會跳轉(zhuǎn)到該影片介紹頁面。

Hakim El Hattab

這張頁面比較獵奇，一進入頁面那些那么多眼睛 ? 盯著你，還一眨一眨的，略微密恐。不僅如此，當(dāng)您移動光標(biāo)時，眼球?qū)嶋H上跟隨您...

還是趕緊點擊頁面上的連接前往主頁吧。

Blizzard（暴雪公司）

暴雪娛樂公司（Blizzard Entertainment）的 404 頁面用游戲場景來提醒用戶點擊下方按鈕回主頁，非常符合游戲公司的特征。

這張頁面的前端為了減少交互，直接放了一個 video 標(biāo)簽...em...頗有本小編風(fēng)范，能少做的絕不多碼一個字

Disney（迪士尼）

同屬于大廠，迪士尼大廠解決 404 頁面用的也是動畫電影角色，也是直接放了一個 video 標(biāo)簽。

大廠的解決方案從來都是這么簡單高效么？??！

不禁讓老夫想起了自己編程的處事風(fēng)格，果然高手過招從來不多費口舌：

Dave Barton

這個 404 頁面來自于 David Barton （一位藝術(shù)家）的個人網(wǎng)站。

該網(wǎng)站的 404 頁面也很文藝委婉，用舊報紙背景客觀敘述每個 404 頁面想要的內(nèi)容：真正的 HTML 內(nèi)容。

哎嘛，同樣是 404 頁面，為何就你的那么具有藝術(shù)感呢？！

Embrace Pet Insurance

”我們的網(wǎng)頁被狗吃了...“

emm...這家寵物保險公司這個心機耍的可以，我們就算訪問到 404 頁面，看到這么萌的寵物狗，老夫的少女心都花了，還怎么可能會生氣啊

好了，暫時就整理這么多了~

小結(jié)

許多品牌和企業(yè)都忽略了 404 錯誤頁面的重要性，一個視覺上吸引人的，用戶友好的404錯誤頁面向客戶展示了您對他們的關(guān)心，并且有興趣將其保留在您的網(wǎng)站上。

如果恰好你自己搭建博客或者網(wǎng)站，那么就可以借鑒或參考這些別具一格的 404 頁面，讓你的網(wǎng)站更具個性風(fēng)格。

如果覺得本文還不錯，點個“在看”唄~~