網(wǎng)站設(shè)計中的404頁面設(shè)計發(fā)布者：本站     時間：2019-11-13 10:11:04

當你試圖訪問一個不存在的網(wǎng)頁時，會彈出一個404頁面。如果你做了一個網(wǎng)站設(shè)計，那么你也你需要一個404頁面。傳統(tǒng)上，他們是一個巨大的挫折來源，但最好的404頁面被網(wǎng)站設(shè)計師變成了品牌的優(yōu)勢。

我們越來越多地看到定制的404頁面，這些頁面使用機智、聰明的用戶體驗或漂亮的設(shè)計來減輕發(fā)現(xiàn)自己在錯誤位置的痛苦。無論是一些深思熟慮的CSS動畫，還是一個很酷的視差滾動效果，或者只是一些比你的平均水平更聰明的拷貝，有很多方法可以活躍你的404錯誤頁面，正如這些例子所證明的。

最好的404頁面可以成為網(wǎng)站設(shè)計本身的迷你大使，它甚至可以在Twitter或相關(guān)博客上分享，作為該網(wǎng)站致力于客戶服務(wù)或獨特設(shè)計風格的一個例子。我們在這里展示的404錯誤頁面已經(jīng)實現(xiàn)了所有這些功能，所以看看吧，希望對網(wǎng)站設(shè)計師的你受到啟發(fā)，跳出自己的思維定式，更大膽創(chuàng)意的完成你的網(wǎng)站設(shè)計項目。

01.年度流行色

圖片：年度色彩

這個網(wǎng)站設(shè)計致力于與潘通年度色彩有關(guān)的一切，它的一切都設(shè)計得很漂亮，包括它的404頁面。網(wǎng)站進入了一個令人印象深刻的數(shù)量的深度，與相關(guān)的色彩系統(tǒng)的部分，建議調(diào)色板，并在使用的陰影的例子。與此同時，404頁面采用了一種智能但簡單的方法。網(wǎng)站上有一條簡短的說明信息，還有一塊潘通（PANTONE）404色塊的樣本，這是一種非常合適的灰棕色，以配合用戶在網(wǎng)站上的心情。

02.上野

圖片：上野

上野是一家提供全方位服務(wù)的機構(gòu)，擁有非常出色的404頁面。你在上面所看到的并沒有抓住它的全部努力：熱狗是動畫的，所以它在一個超現(xiàn)實的風景中無限循環(huán)運行，并且有幾個搞笑的解釋信息要探索，它是瘋狂的和完全獨特的—訪問這里的錯誤頁面。

03.安卓

圖片：安卓

Android通過其游戲化的404頁面將迷失變成了一種有趣的體驗，小小的工作機器人會吐出甜甜圈、果凍豆和棉花糖，用戶旋轉(zhuǎn)齒輪將它們導向正確的管子。運動簡單，可愛和品牌設(shè)計，這款游戲是上癮的糖果正在分類，點擊這里查看。

04.Gymbox

Gym Box是一家致力于提供“倫敦最獨特、最多樣化的課程”的健身公司。這種說法的局限可能是出現(xiàn)在其404頁面上的那種80年代的健身奇觀。短褲，露臍裝和骨盆插入-你還想從錯誤頁面得到什么？

05.松弛

圖片：松弛

可以毫不夸張地說，Slack 2019年的標識更新引起了廣泛的恐慌，而其超級甜蜜的404頁面肯定也有不少討厭它的人。如果在Slack上出了錯，你就會被指引到一個神奇的地方，那里有茂密的樹葉、山脈和彩虹，蝴蝶、雞和小豬在那里自由自在地漫步。隨著鼠標移動，場景也會水平滾動（在這里試試）。

06.泥精制的

Puree Maison是一家專注于傳播策略的創(chuàng)意公司，其特色網(wǎng)站設(shè)計上滿是令人愉快的動畫（建議你多點擊看看）。特別喜歡這個超現(xiàn)實的404頁面，它以某種方式完美地捕捉到了撞上數(shù)字墻的痛苦。

07.皮克斯

圖片：皮克斯

有些人就是把事情看得太重，皮克斯的404頁面以2015年大受歡迎的《頭腦特工隊》（Inside Out）中的悲傷為特色，它簡單、直接，而且很有效。如果它代表了你對404錯誤的反應(yīng)，那么也許你需要重新審視一下你的生活。

08.馬特奧Vandelli

你不需要成為一個主要的品牌投入一點努力在你的404頁面，我們喜歡這個來自平面設(shè)計師Matteo Vandelli的互動例子。他利用他的設(shè)計作品集中的錯誤頁面作為另一個展示他的創(chuàng)造力和設(shè)計悟性的機會。當訪問者瀏覽404頁面時，它會像水一樣泛起漣漪。其效果令人著迷。

09.二十世紀?？怂?/span>

找不到你想要的電影？?？怂闺娪暗木W(wǎng)站有一個很好的方式來激勵你時，你得到一個錯誤的URL；它的404頁面會彈出一部邪典電影的劇照，配上精練的字幕和一些你可能想看的其他電影。我們已經(jīng)看過《剪刀手愛德華》、《書呆子的復仇》和《大人物拿破侖》等電影的片段。具有諷刺意味的是，在撰寫本文時，可單擊的文本會導致另一個設(shè)計不太好的404頁面。

10.云服務(wù)器

云服務(wù)器是在美國、歐洲和亞太地區(qū)運行的云服務(wù)器和云托管服務(wù)。雖然靈活的云服務(wù)器很有用，但它們并不是很有趣，我們猜測這就是為什么該公司在其半開玩笑的404錯誤頁面中添加了一些幽默元素的原因。我們想知道要過多久這個看起來很有幫助的初級開發(fā)者才會被競爭對手挖走。

11.BluePath

另一個在404錯誤頁面上使用幽默的網(wǎng)站設(shè)計是亞特蘭大數(shù)據(jù)戰(zhàn)略咨詢公司BluePath，這一頁顯示了一張亞特蘭大的地圖，在頁面的另一邊有一個小點，表示訪問者“完全不在地圖上”。在一個極其脆弱的鏈接中，該地圖還包括數(shù)據(jù)驅(qū)動的信息，顯示該地區(qū)的犯罪報告?！盀槭裁?？因為你還沒雇我們是犯罪！”這些古怪的數(shù)據(jù)分析師。

12.奇跡

漫威將404錯誤頁面建立在《宇宙觀察者》的基礎(chǔ)上，從而保持了品牌的穩(wěn)固。也許因為Uatu長得不怎么樣（抱歉），漫威決定迎合比我們膚淺的游客，在黑寡婦的背景下只增加他的眼睛。額外的酷點，使眼睛跟隨訪問者的光標在屏幕上。

13.Kualo

網(wǎng)絡(luò)托管公司Kualo已經(jīng)運營了15年，在互聯(lián)網(wǎng)時代是永恒的，它的404頁面通過向訪問者提供Kualo主題的太空入侵者游戲讓人回想起了過去，但它不是完美的。首先，切斷艦隊外圍以減緩入侵者下降速度的關(guān)鍵策略行不通。但它很有趣，如果你設(shè)法獲得超過1000分，它可以為你的托管協(xié)議贏得折扣。

這篇文章也啟發(fā)了美國害蟲控制公司Pointe pest - control，在它的404錯誤頁面中加入了自己的害蟲入侵者游戲，包括不同的飛行和爬行的蟲子。

正如Pointe網(wǎng)站的克洛伊?佐林格（Chloe Zollinger）所言：“對于網(wǎng)站用戶來說，訪問404錯誤頁面最令人沮喪?！蔽覀兠靼拙W(wǎng)頁上的用戶體驗有多重要。為了改善訪問者的體驗，我們的團隊致力于在我們的404頁面上創(chuàng)建一個互動游戲。”

14.Waaark

NSFW；先戴上耳機

法國工作室Waaark的404頁面看起來很不錯，但聽起來更好——盡管可能不是在工作的時候。受《銀河系和傳送門》（Hitchhiker’s Guide to the Galaxy and Portal）作者斯蒂芬·霍金（Stephen Hawking）的啟發(fā)，它使用了一個名為meSpeak的JavaScript文本語音轉(zhuǎn)換工具，讓你聽一場言辭激烈的機器人長篇大論。插上耳機，看一看。

15.史蒂夫?蘭伯特

紐約藝術(shù)家史蒂夫·蘭伯特將此描述為“互聯(lián)網(wǎng)上最尷尬的404未找到頁面”，你知道，他可能是對的。它的特點是一個折磨人的一塊相機，只是繼續(xù)下去。我們不相信你在看完他的視頻時，身體的任何部分都沒有繃緊。

16.維多利亞Spicer

圖片：維多利亞Spicer

維多利亞·斯派塞是倫敦的布景設(shè)計師和道具設(shè)計師，正如你所預(yù)料的那樣，她的作品集站點充滿了美麗的照片，她的404錯誤頁面也不例外。它展示了她頑皮的一面，同時還保持著東西看起來光彩照人。

17.Figma

即使我們在這里有一個Illustrator CC的副本，可以在任何時候使用錨點和Bezier曲線，我們?nèi)匀槐籉igma的404頁面所吸引。超大的404文本將以向量的形式呈現(xiàn)，您可以根據(jù)您的核心內(nèi)容進行重新設(shè)計。

18.Airbnb

這張來自Airbnb的404頁面上有一個簡單但令人愉快的動畫，一個不幸的女孩把冰淇淋掉在了地板上。Airbnb的聲譽建立在它的風度和友好上，這個404頁面完美地符合它的品牌形象。

19.熱導生產(chǎn)

Hot Dot Productions在其令人印象深刻的404頁面中加入了“設(shè)計與技術(shù)相遇之處”（where design meets technology）的口號。404頁面上有三個由數(shù)百個小圓點組成的數(shù)字，這些小圓點會隨著訪問者鼠標的移動而改變方向或分散。你可以自己在這里嘗試一下。

20.樂高

在我們眼中，樂高不會做錯任何事（你讀過我們關(guān)于樂高如何將自己重塑為超級品牌的文章嗎？）我們喜歡這個可愛的404頁面，它用一些嚇人的樂高數(shù)字和一個無術(shù)語的解釋使事情變得簡單。

21.GitHub

你會期望從一個致力于代碼版本控制的網(wǎng)站上看到一些技術(shù)奇跡，當你移動鼠標的時候，404頁面通過一個簡單的模仿《星球大戰(zhàn)》的效果來吸引不同類型的極客。GitHub還有一個不錯的500頁，可以在服務(wù)器崩潰時使用。

22.CSS忍者

網(wǎng)站設(shè)計世界喜歡忍者，通常是自封的工作頭銜的一部分。CSS Ninjas的404頁面順應(yīng)了這一潮流（我們猜，它的名字也是如此），它的特點是簡潔、有風格的插圖，反映了網(wǎng)站的總體設(shè)計思路。

23.MailChimp

2018年秋，超時尚的電子郵件通訊服務(wù)MailChimp進行了網(wǎng)站設(shè)計改版，其404頁面也進行了更新。新外觀的錯誤頁面上的功能是圍繞MailChimp的新品牌中心的不合時宜的，天真的插圖。說真的，說“我迷路了”，有什么比一頭腦袋埋在洞里的驢子更合適呢？

24.Volta鞋類

圖片：沃爾特

Volta是一家位于米蘭的鞋店，它的網(wǎng)站包含了很多很酷的UI設(shè)計，我們喜歡它不僅僅是一個標準的404頁面。高質(zhì)量，專注的產(chǎn)品攝影與一個古怪的觸摸-一個微型大理石雕像，點頭到旗艦店的意大利家-幫助提升這個錯誤的頁面。

25.布雷特·維克多

計算機科學家Bret Victor的404頁面，當然是受到Rene Magritte的標志性畫作《圖像的背叛》的啟發(fā)，向觀眾提出了一些富有挑戰(zhàn)性的哲學問題。如果這不是一頁，那它是什么？什么是“頁面”？它是一種可以真正說存在的東西嗎？這個明顯沒有頁面的“this”指的是什么？有什么是真的嗎？讓你覺得不是嗎？

26.IMDb

另一個很棒的基于電影的404錯誤頁面可以在IMDb網(wǎng)站上找到，這個全面的電影事實數(shù)據(jù)庫在其404頁面上添加了一些著名電影的經(jīng)典臺詞，并對其進行了巧妙的編輯，以適應(yīng)其新的用途。看看你得到了什么。

27.bit.ly

圖片：Bitly的

404頁面的鏈接縮短服務(wù)位，ly的特色是一條可愛的河豚魚在互動的海洋中上下翻騰。擱淺的魚會對你的鼠標移動做出反應(yīng)，而云朵和海鷗中微妙的動畫細節(jié)有助于營造一種平靜的情緒。

28.DropBox

DropBox取代了多年來裝飾其404頁面的埃舍爾式的“不可能的盒子”，取而代之的是一幅同樣古怪的插畫。我們喜歡把所有出錯的事情都抽象地表現(xiàn)出來——輪子掉了。這是一個漂亮的、簡單的手繪插圖，它很好地傳達了信息，并提供了大量有用的導航鏈接，為頂級用戶提供了體驗。

29.eHarmony

當你在尋找愛情的時候，你最不想聽到的就是：你找不到它。在線婚戀網(wǎng)站eHarmony的404頁面顯示，雖然你所訪問的頁面無法訪問，但海里還有大約50萬條魚。

30.星巴克

星巴克充分利用其主要產(chǎn)品來說明其404信息，在這個例子中，丟失咖啡杯的“泄密”標志被用來講述這個故事，還有一些無術(shù)語的拷貝來幫助用戶找到他們想要的。

31.暴雪娛樂公司

視頻游戲開發(fā)商暴雪對其404頁面采取了獨創(chuàng)的方式，在它，工作的網(wǎng)站設(shè)計似乎已經(jīng)成為破碎：標題導航下降，有一個破碎的屏幕效果。沒有太多有用的鏈接，相反，暴雪選擇了一個嚴肅的錯誤信息：“這個頁面不存在或其他一些可怕的錯誤已經(jīng)發(fā)生”。