優(yōu)秀404頁面設(shè)計案例分享

時間：2023-10-11 00:54:01 | 來源：網(wǎng)站運營

時間：2023-10-11 00:54:01 來源：網(wǎng)站運營

優(yōu)秀404頁面設(shè)計案例分享：404頁面是我們上網(wǎng)經(jīng)常碰到的報錯頁面，很多用戶估計跟我一樣，不是很清楚404到底是啥，但卻知道是頁面出錯了。為了分享本文章，我特地去百度百科搜索了一下，官方對404的定義：404是一種http狀態(tài)碼，其意思是： 所請求的頁面不存在或已被刪除。通俗的講就是當用戶輸入了錯誤的鏈接時，返回的頁面。

404頁面雖然常見，但是很多網(wǎng)站設(shè)計師在設(shè)計時會比較容易忽略該頁面，經(jīng)常見到的是使用瀏覽器默認的報錯頁面，而且很多技術(shù)性的提示語言。但是優(yōu)秀的公司會抓住每一個表現(xiàn)的機會，包括404頁面的設(shè)計。本文就來介紹一些優(yōu)秀的404頁面設(shè)計案例，大家一起淺品一下吧。

//案例1: 404頁面也能具有高互動性、游戲感

Emailcenter UK Limited是英國一家著名的電子郵件營銷平臺。它采用幽默的方式將404頁面設(shè)計成了一個小游戲，游戲情節(jié)是圖片中開發(fā)人員應該為你看到的404頁面負責，所以你決定fire誰呢？Luke、James、Martin還是Chris呢。當然你也可以發(fā)揮你的同情心，選擇原諒他們返回主頁。這種有趣的方式，成功化解了404頁帶來的尷尬，令人印象深刻。




Dribbble是一家設(shè)計作品展示和搜索的網(wǎng)站，它的404頁面設(shè)計的互動性高，用戶只需要拖拽底部的色彩條，圖片中的404就會變成由該色彩組成的作品墻。這種有互動趣味的設(shè)計突出了該網(wǎng)站的特性，甚至叫人忘記了這是404頁面。




這是一家做風險投資-DIGITAL HORIZON公司的404頁面設(shè)計，該頁面的典型特征是支持用戶與頁面互動，通過上下拖拽鼠標光標，404仿佛變成了一個裝水的容器，水位根據(jù)鼠標位置上下浮動。這種交互形式新鮮有趣。

// 案例2: 404頁面能創(chuàng)造性反應公司的業(yè)務屬性

看過頭腦特工隊的小伙伴應該很熟悉，這不是那個主導悲傷情緒的小藍（中文名“憂憂“）嗎？她為什么會出現(xiàn)在頁面上方，一看文案原來是404了，還暖心的安慰她不要哭，只是404了而已。這么有趣生動的404設(shè)計原來是皮克斯的官網(wǎng)404頁面呀，沒錯，該動漫是該公司創(chuàng)作。這個形象放在這個頁面簡直是妙筆生花的設(shè)計，動漫人物的悲傷情緒準確的傳達了用戶此刻的心情，但是叫人在看到這個頁面時，不僅不會生氣，焦慮，反而很暖心，甚至已經(jīng)開始回想動漫情節(jié)。實在感慨沒有誰更能了解皮克斯設(shè)計師對人的情緒和導向的把控了。




EMBRACE公司是一家寵物保險公司，這么說你是不是一下子被這個404頁面?zhèn)鬟_的語意給擊中了，它告訴你，你的頁面是被狗狗給吃掉了，你還會生氣嗎？再者你腦中是不是立馬想到自家狗狗，那要不要給他它來份保險呢？




潘通（PANTONE）公司是一家享譽全球的色彩權(quán)威機構(gòu)，它不僅定義制作色卡，它還為自己公司的404頁面設(shè)計了專門的顏色，名稱就叫 404 C。作者不得不感慨這就是有‘顏色’任性呀。

//案例3: 404頁面也可以很幽默

上圖采用的是擬人的手法，把404形容成一個黑箱，用戶被抽象成一雙緊張的眼睛自處張望不知所措。然后文案默認用戶的想法：“怎么回事兒？什么情況，啊。。。”“帶我走吧”。有趣的404頁面。




上圖的404頁面文字突然變成一張抽象的人臉符號，隨即這張臉就垮了下來并嘆了口氣，生動描述了用戶的心理。生氣前先看個動畫，想象一下自己生氣的樣子多難看吧。




你的頁面被一忍者偷了，你敢找他算賬嗎？算了算了，還是趁早跑路吧。簡單的圖案，卻把場景和趣味傳達的淋漓盡致。


另一個有趣的404案例，這個中間的手怎么是斷的，還在移動？好詭異。看文案，原來你抵達了地獄。這個404效果怎么樣？