寧！大嘎吼~以前的小編云游四方去了，今天時柒來替班！所以要聊點(diǎn)什么呢？

我們平時都會瀏覽網(wǎng)站找素材找資源對不對，不可避免地會遇到彈出報錯的“404頁面”的情況。見到它的時候你可能會失落可能會懵逼，但只需要記得兩點(diǎn)即可。第一，親你掉線er了；第二，雖然你掉線er了，但還是可以點(diǎn)擊別的內(nèi)容再重新上線er。

于是有很多網(wǎng)站會分一些精力放在404頁面的創(chuàng)意設(shè)計上。雖然早在前幾年就開始流行了，但是大家還是對這部分創(chuàng)意內(nèi)容很感興趣。畢竟連404頁面都可以做的很精致的網(wǎng)站，其他內(nèi)容也應(yīng)該是很精良了。

那接下來就給大家分享一些創(chuàng)意404報錯頁面吧，后面都會附上鏈接，有空大家可以自己去體驗一把。當(dāng)然從我們最熟悉的一些網(wǎng)站開始。

Pixar

https://www.pixar.com/404

Pixar的404頁面，用是2015年《頭腦特工隊》里面“憂憂”的形象。畢竟找不到想要的內(nèi)容，確實是件挺憂心的事情。頁面簡潔明了，但是信息丟了也不要想“憂憂”一樣太過于傷心難過才好。

20th Century Fox

https://www.foxmovies.com/404

關(guān)于20世紀(jì)福克斯網(wǎng)站的404頁面，有時很魔性，有時很隨意，有時找不到想要的電影，還得受一下刺激。

總結(jié)來說就是，“影片背景+關(guān)鍵詞標(biāo)題提醒+其他影片推薦”這樣的種種。我看到過的有《菜鳥大反攻》《剪刀手愛德華》和《大人物拿破侖》等等。驚喜的是，標(biāo)題文字還可以繼續(xù)點(diǎn)擊，彈出一個毫無美感&毫無設(shè)計感的“Not Found”頁面...恩，可能是刻意的吧，畫風(fēng)大概都是下面這樣的。

漫威

https://www.marvel.com/404

手動云@一下漫威粉，有了解漫威官網(wǎng)的404頁面的嗎？最近一版設(shè)計是在動態(tài)綿綿細(xì)雨中的鋼鐵俠，殘缺的手臂，傷痕累累的鐵甲，在細(xì)雨中顯得更加凄涼。

之前還有的版本是寡姐，與用戶之間產(chǎn)生互動，就是圖片展示那樣的。

漫威的404都是和品牌牢牢地結(jié)合在一起的，也是一種挺不錯的選擇。

樂高

http://www.lego.com/404notfound

樂高可以算是“超級重視自身品牌塑造”隊伍中的一員了，它的404頁面上是4個驚慌失措的玩偶角色，據(jù)說最開始是沒有文字說明的，現(xiàn)在又加入圖上的哪行小字，反正就是簡簡單單地告訴你，“親，您掉線啦”。

暴雪

http://us.blizzard.com/en-us/not-found.html

暴雪的404設(shè)計也是走了“簡單粗暴”路線，粗暴到把玻璃都敲碎了，可能對于破碎恐懼者和尖銳恐懼者來說有些殘忍，“找不到你就別找了，放棄吧”。

IMDb

https://www.imdb.com/404

特別酷！IMDb也有404。他們加入了對著名電影的標(biāo)題性引入，通過箭頭引導(dǎo)用戶瀏覽下一個頁面，而不是看到404直接點(diǎn)了頁面右上角。

Matteo Vandelli

https://matteovandelli.com/404

意大利平面設(shè)計師Matteo Vandelli個人網(wǎng)站的404頁面與用戶也是有互動的。把鼠標(biāo)指針移動到404藍(lán)字，向不同方向滑動的時候，這仨字就像水一樣竟然產(chǎn)生了漣漪的效果，很是迷幻。

然后我們再來看幾個雖然不是行業(yè)內(nèi)但是創(chuàng)意讓人眼前一亮的404。

Gymbox

https://gymbox.com/404

Gymbox是倫敦的一家健身公司，品牌核心是要提供“全倫敦最獨(dú)特、最多樣化的健身課程”。他們網(wǎng)站404頁面出現(xiàn)的是那種很80年代畫風(fēng)，這樣的健身場景有點(diǎn)意味深長，自己試著體會下？

Purée Maison

https://pureemaison.com/404/

Purée Maison是法國一家專注于提供傳播/交流策略的創(chuàng)意機(jī)構(gòu)，他們的404頁面是由一個角色小動畫引出來的，在數(shù)字世界里四處碰壁就是找不到信息的方向，像不像是瀏覽到404頁面的你呢？

Blue Path

https://path.blue/404/

位于亞特蘭大的數(shù)據(jù)戰(zhàn)略咨詢公司BluePath的404網(wǎng)站報錯頁面也很幽默，左邊是亞特蘭大地圖，右邊就是和組織失去聯(lián)絡(luò)的你。他們在右半部分還開了一個玩笑，“如果說，不是我們的客戶也是一種罪的話，那你簡直是罪大惡極”（就大概是這類意思的吧）。個人覺得一點(diǎn)兒都不好笑，那就不再過多解釋了。

The Useless Web Index

https://www.theuselesswebindex.com/error/

不知道大家有沒有聽說過“無用網(wǎng)站”，它專門收集一些沒什么用、沒什么意義，但是卻很好玩的內(nèi)容，建成了一個內(nèi)容涉及全世界的龐大數(shù)據(jù)庫。即便是這樣，它也不可能提供所有你想要的東西，就像這群呆萌狐獴，遠(yuǎn)遠(yuǎn)望著蒼茫戈壁，嗅嗅遠(yuǎn)處出來的風(fēng)，卻不知該如何是好。你看那凝視的狐獴，像你不？

Figma

https://www.figma.com/404/

Figma是一款基于瀏覽器的協(xié)作式UI界面設(shè)計軟件，完美支持多人寫作功能。2017年使用排名僅次于Adobe家的Photoshop、Illustrator和XD之后。雖然我們平時對于定位點(diǎn)和貝塞爾曲線什么的已經(jīng)很熟悉了，但看到這個404頁面還是能玩上半天。

Airbnb

https://www.airbnb.com/404

Airbnb家的報錯頁面是很可愛了，小姑娘手中的冰淇淋掉到了地上，情不自禁地喊了一聲“Oops！”，非常符合他們簡單友好的品牌形象。只不過在現(xiàn)實生活中，要是好大一坨冰淇淋掉地上…怕是沒有這么簡單了…

Hot Dot Production

http://hotdot.pro/en/404/

Hot Dot Production（一眼看成了Hot Pot，阿門）的404頁面，很好的詮釋了他們“設(shè)計與技術(shù)相結(jié)合”的品牌思路，三個數(shù)字由數(shù)百個小紅點(diǎn)組成，移動鼠標(biāo)指針就可以改變其方向和角度，應(yīng)該也是屬于“無聊可以玩半天”系列的那種。

Kualo

https://www.kualo.co.uk/404

有著15年經(jīng)營歷史的虛擬主機(jī)公司Kualo，他們的404頁面是一個以Kualo為主題的太空入侵者游戲。用戶通過左右鍵移動畫面下方的發(fā)射器，敲空格發(fā)射炮彈來消滅入侵者。游戲不是重點(diǎn)哦，看到右下角的計分顯示沒？如果用戶得分超過1000分，就可以享受他們服務(wù)折扣價。

Pointe Pest Control

https://pointepest.com/404

既然提到了Kualo的游戲，那就再提一下美國害蟲防治公司Pointe Pest Control 的404，包含了一款殺蟲劑消滅小蜘蛛小爬蟲的游戲，叫做Pest Invaders。鏈接都給你了，來試一把鴨。

為了吸引用戶，給大家創(chuàng)造更好的瀏覽體驗，創(chuàng)意設(shè)計者可謂“無所不用其極”，連404都不放過。正是這樣的互動形式，才加深了與用戶的交流，塑造了更接地氣的品牌形象，也告訴我們其實創(chuàng)意可以無處不在。所以大家還見過那些很好玩的404報錯頁面呢？

多剛接觸網(wǎng)站的朋友，經(jīng)常會討論404頁面是什么？簡單來說，404頁面簡單點(diǎn)來說，就是當(dāng)有人訪問了你的網(wǎng)站，輸入的訪問地址，而在你網(wǎng)站中這個地址不存在，系統(tǒng)自動反饋出的結(jié)果頁面。

這個結(jié)果頁面，經(jīng)常性的是系統(tǒng)自帶的頁面，提示404 not found。

這也就是404頁面與404 not found之間的關(guān)系。

當(dāng)然站長朋友們，也可以自己制作404頁面，進(jìn)而提升用戶體驗，虛擬主機(jī)可以在網(wǎng)站控制面板中設(shè)置，如果是vps可以直接在iis下面設(shè)置。

合理的利用404頁面，在網(wǎng)站seo優(yōu)化中也起到了一定作用。

一、導(dǎo)致404頁面錯誤的原因：

1、無法在所請求的端口上訪問Web站點(diǎn)。

2、Web服務(wù)擴(kuò)展鎖定策略阻止本請求。

3、MIME映射策略阻止本請求。

4、網(wǎng)站更新改版，但某些局部板塊沿用原來的模塊，而原有的模塊調(diào)用的文件已經(jīng)被刪除或轉(zhuǎn)移了路徑。

5、跟蹤訪問的各類腳碼或CSS文件無效但調(diào)用代碼依然存在。

6、某個目錄直接刪除（導(dǎo)致一段時間該目錄的文件在被爬行時全部報404 Not Found錯誤）

7、網(wǎng)頁URL生成規(guī)則改變、網(wǎng)頁文件更名或移動位置、導(dǎo)入鏈接拼寫錯誤等，導(dǎo)致原來的URL地址無法訪問

二、解決404頁面錯誤的方法：

1、對于存在的網(wǎng)頁內(nèi)容由于路徑改變而導(dǎo)致訪問不了時，可在IIS中定義404錯誤指向一個動態(tài)頁面，在頁面里面使用301永久重定向跳轉(zhuǎn)到新的地址，此時服務(wù)器返回301狀態(tài)碼。

2、設(shè)置404指向一個設(shè)計好的html文件，此時頁面返回的404狀態(tài)碼。現(xiàn)在的idc提供商基本都提供404設(shè)置的功能，直接上傳文件設(shè)置即可。

在IIs中設(shè)置方法：打開IIS管理器-->點(diǎn)擊要設(shè)置自定義404的網(wǎng)站的屬性-->點(diǎn)擊自定義錯誤選項-->選中404頁-->選中并打開編輯屬性-->設(shè)置成URL-->URL里填寫“/err404.html”-->按確定退出再把做好的err404.html頁面上傳到網(wǎng)站根目錄下。

此處在“消息類型”中一定要選擇“文件”或“默認(rèn)值”，而不要選擇“URL”，不然，將導(dǎo)致返回“200”狀態(tài)碼。

3、把404指向一個動態(tài)頁面，比如error.asp，如果不在頁面里面進(jìn)行設(shè)置，僅僅是返回提示的HTML代碼，將導(dǎo)致頁面返回200狀態(tài)碼，這是不正確的，我們可以在顯示完提示內(nèi)容后，增加語句：Response.Status="404NotFound"，這樣就保證頁面返回404狀態(tài)碼。

4、Apache下設(shè)置404錯誤頁面。

為ApacheServer設(shè)置404錯誤頁面的方法很簡單，只需在.htaccess文件中加入如下內(nèi)容即可，ErrorDocument404/notfound.php。