非常干貨系列之18年最新的網(wǎng)頁UI設(shè)計(jì)中的404

404報(bào)錯(cuò)頁面，作為提醒網(wǎng)站訪問者服務(wù)器未找到請求資源或文件的頁面，時(shí)常被UI/UX設(shè)計(jì)師，產(chǎn)品經(jīng)理以及網(wǎng)頁/軟件開發(fā)者視作 (包括枯燥的登錄頁面，加載頁面以及引導(dǎo)頁面在內(nèi)) 導(dǎo)致網(wǎng)站/軟件用戶流失或跳出的重要元兇。然而，但這并不意味著404頁面在任何情況下，對于他們來說都是不能提及的噩夢。

事實(shí)上，一款美觀，優(yōu)質(zhì)，富有創(chuàng)意，甚至炫酷的報(bào)錯(cuò)頁面設(shè)計(jì)，不僅能夠有效的引導(dǎo)訪問者快速的瀏覽網(wǎng)頁或軟件的其它頁面，還能夠極大的減緩用戶的負(fù)面情緒，留住用戶的同時(shí)，減少跳出率，提升用戶體驗(yàn)。

然而，對于設(shè)計(jì)師或產(chǎn)品經(jīng)理來說，如何才能設(shè)計(jì)出有趣，美觀而又富有創(chuàng)意的404報(bào)錯(cuò)頁面呢？讓我們閱讀這篇文章，跟著小編的腳步一步欣賞和學(xué)習(xí)14款最新且最具創(chuàng)意的報(bào)錯(cuò)設(shè)計(jì)。

首先，404報(bào)錯(cuò)頁面常用哪些報(bào)錯(cuò)提示？

現(xiàn)今，web/app頁面的設(shè)計(jì)中，越來越多的設(shè)計(jì)師認(rèn)識(shí)到文案的重要性。選擇通過添加精心設(shè)計(jì)和挑選的文字，創(chuàng)建更加清楚明了，且極富個(gè)性和人情味的頁面設(shè)計(jì)。因此，考慮到這一點(diǎn)，在開始逐一介紹404報(bào)錯(cuò)頁面設(shè)計(jì)之前，我們也需要了解報(bào)錯(cuò)頁面的一些404頁面常用報(bào)錯(cuò)提示，以避免出現(xiàn)言不達(dá)意的情況，同時(shí)也可以為后來設(shè)計(jì)和挑選更符合網(wǎng)頁/軟件特色的文案提奠定基礎(chǔ)。以下是一些常用的報(bào)錯(cuò)提示：

*The requested URL was not found on this server.

*404 File or Directory Not Found

*HTTP 404 Not Found/404 Page Not Found

*404 Error/Error 404/HTTP 404

*The page cannot be found

當(dāng)然，UI/UX設(shè)計(jì)師有時(shí)也會(huì)根據(jù)站點(diǎn)/手機(jī)應(yīng)用的特點(diǎn)，特別設(shè)計(jì)一些帶有“404”標(biāo)志的報(bào)錯(cuò)提示，以增強(qiáng)網(wǎng)站可讀性和趣味性。

14款最新創(chuàng)意404報(bào)錯(cuò)頁面欣賞和學(xué)習(xí)

以下是小編搜集的最新且極具具創(chuàng)意的報(bào)錯(cuò)頁面設(shè)計(jì)，希望他們能對你有所幫助：

 

1.Lost in the woods

A.設(shè)計(jì)師：Tajana Barac

B.亮點(diǎn): 色彩對比，色彩漸變，陰影以及形狀的完美應(yīng)用

經(jīng)典藍(lán)白顏色的對比以及漸變，形狀和陰影的完美結(jié)合，給人以寧靜祥和之感，從而有效的減緩了突然報(bào)錯(cuò)給用戶帶來的負(fù)面情緒。更何況其配色和插畫風(fēng)的應(yīng)用也是相當(dāng)吸睛，很自然的分散用戶注意力，減少了用戶的不快體驗(yàn)。

C.學(xué)習(xí)點(diǎn)

*結(jié)合各種設(shè)計(jì)趨勢，優(yōu)化報(bào)錯(cuò)頁面設(shè)計(jì)

就最近幾年的UI/UX 設(shè)計(jì)潮流而言，色彩對比，漸變，形狀以及陰影層級之類設(shè)計(jì)元素的混用，總是能幫助設(shè)計(jì)師碰撞出讓人眼前一亮的優(yōu)秀作品。因此，在設(shè)計(jì)報(bào)錯(cuò)頁面時(shí)，也可融入一些當(dāng)前流行設(shè)計(jì)元素和趨勢，打造出獨(dú)具特色的頁面設(shè)計(jì)。（點(diǎn)擊查看更多最新移動(dòng)端軟件設(shè)計(jì)潮流）

2.Wanted

A.設(shè)計(jì)師：From limpfish.com

B.亮點(diǎn): 獨(dú)特的展示形式

不同于一般報(bào)錯(cuò)頁面直接枯燥羅列和展示錯(cuò)誤提示，該頁面設(shè)計(jì)師采用了類似逃犯通緝令的獨(dú)特外觀和形式，更加直觀地展示了頁面報(bào)錯(cuò)原由，十分新穎有趣。而且，其有意做舊和破損的設(shè)計(jì)，也使整個(gè)頁面更加真實(shí)，吸睛。

C.學(xué)習(xí)點(diǎn)

*為你的報(bào)錯(cuò)頁面也設(shè)計(jì)一種特制的展示形式

如若時(shí)間充足，你也可以設(shè)計(jì)一個(gè)系列，使用不同的形式展示404 報(bào)錯(cuò)提示，并將它們添加到你的設(shè)計(jì)日志中，方便日后查看，使用或獲取靈感（當(dāng)然直接選擇一款優(yōu)質(zhì)好用的原型工具，將其制作成可視原型進(jìn)行存儲(chǔ)，也會(huì)是不錯(cuò)的選擇）。

3.Shinobi

A.設(shè)計(jì)師：From cssninjas.com

B.亮點(diǎn): 漸進(jìn)式展開的設(shè)計(jì)方式

除了提供簡單明了的報(bào)錯(cuò)介紹，設(shè)計(jì)師還是采用了一種漸進(jìn)式展開的設(shè)計(jì)方式，給一部分解釋文字嵌入鏈接，拓展網(wǎng)頁功能，消除用戶的迷惑和不滿情緒。

C.學(xué)習(xí)點(diǎn)

*采用漸進(jìn)式展開的設(shè)計(jì)方式，提升404報(bào)錯(cuò)頁面的用戶體驗(yàn)度

在你的頁面設(shè)計(jì)中，也可以采用漸進(jìn)式展開的設(shè)計(jì)方式，添加鏈接、按鈕、側(cè)邊欄菜單或隱藏的菜單欄等等，擴(kuò)展頁面的功能。

4.Error Page Switex

A.設(shè)計(jì)師：Ash Rahal

B.亮點(diǎn): 層疊，感情元素和趣圖的運(yùn)用

該頁面通過文字圖片和陰影的層疊創(chuàng)造出一種空間感，以吸引訪問者注意。而且，為緩解用戶對于突然報(bào)錯(cuò)產(chǎn)生的抗拒情緒，設(shè)計(jì)師專門在頁面中添加了俏皮的解釋文字和趣圖之類情感元素，以獲取用戶諒解和共鳴。這一點(diǎn)是非常值得效仿的。

C.學(xué)習(xí)點(diǎn)

*設(shè)計(jì)中添加情感元素，實(shí)現(xiàn)與用戶的情感交流

所以，在你的頁面設(shè)計(jì)中，也可以添加一些考慮到用戶感受的俏皮文字，表情圖標(biāo)，趣圖或流暢的交互設(shè)計(jì), 甚至是能夠緩解用戶煩躁情緒的配色等等，都能夠讓你的設(shè)計(jì)更加人性化，實(shí)現(xiàn)與用戶的情感交流，從而留住他們。

5.Alana 404 Page

A.設(shè)計(jì)師: Alana Brajdic

B.亮點(diǎn): 簡約風(fēng)和更多頁面選擇的結(jié)合

就如設(shè)計(jì)師留言所表達(dá)的那樣，報(bào)錯(cuò)頁面需要簡潔直觀，有意義。同時(shí)提供更多網(wǎng)站/應(yīng)用的其它頁面鏈接，方便用戶根據(jù)需要點(diǎn)擊跳轉(zhuǎn)，一遍為用戶提供更佳的體驗(yàn)。而且，其整個(gè)頁面透著的簡約風(fēng)，也與近幾年日益簡化的用戶體驗(yàn)設(shè)計(jì)潮流相符合的。

C.學(xué)習(xí)點(diǎn)

*采用具有更多功能選擇和更佳用戶體驗(yàn)的簡約設(shè)計(jì)

頁面設(shè)計(jì)無需復(fù)雜多變。當(dāng)功能和外觀不能兼顧時(shí)，簡單直觀，且包含更多功能鏈接/選擇的頁面，也可以很成功。

6.UI 404 Page

A.設(shè)計(jì)師: Mario Sestak

B.亮點(diǎn): 強(qiáng)烈地視覺沖擊，圖片和內(nèi)容的完美呼應(yīng)

設(shè)計(jì)中添加了極具視覺效果的黑色背景圖片，搭配白色的報(bào)錯(cuò)提示，突出頁面文案的同時(shí)，也起到讓點(diǎn)進(jìn)用戶眼前一亮的作用。而且，圖片對文字的完美呼應(yīng)，也使解說文本更具說服力，減少用戶產(chǎn)生不滿情緒的可能。加之，通過側(cè)邊欄顯示的幫助和其它站點(diǎn)相關(guān)鏈接，對于提升用戶體驗(yàn)，也是極其有效的。

C.學(xué)習(xí)點(diǎn)

*添加視覺元素增加頁面吸引力

在實(shí)際的頁面設(shè)計(jì)中，很多元素是可以幫助增加視覺效果，例如高質(zhì)量的圖片，恰到好處的配色，極富創(chuàng)意的主題等等。

*使用側(cè)邊欄，拓展網(wǎng)站功能，提升用戶體驗(yàn)

7.404 Page

A.設(shè)計(jì)師: Hossein Mahmoodi

B.亮點(diǎn): 特色的電影海報(bào)展示形式和科幻大片的主題的選用

該設(shè)計(jì)最突出的特點(diǎn)就是采用了一種類似電影海報(bào)的展示形式，并選用了科幻大片的主題，將404的報(bào)錯(cuò)標(biāo)志——即“404”字樣，融入到科幻“海報(bào)”內(nèi)容之中，引起網(wǎng)站訪問者聯(lián)想不斷的同時(shí)，極大的增加了其頁面趣味性。

C.學(xué)習(xí)點(diǎn)

*選擇一個(gè)適合的主題進(jìn)行展示

選擇一個(gè)恰當(dāng)?shù)闹黝}進(jìn)行報(bào)錯(cuò)展示，對于增加網(wǎng)站趣味性和吸引力也是非常有用的。 例如，在頁面設(shè)計(jì)中，添加電影，動(dòng)漫，節(jié)日，特色民族文化，甚至是某些人群或地方特色主題元素等等，都是非常值得嘗試的。

8.404 Page Not Found

A.設(shè)計(jì)師: Nayab Fatima

B.亮點(diǎn): 靈動(dòng)動(dòng)畫和插畫風(fēng)的應(yīng)用

頁面最具特色的設(shè)計(jì)，是添加了兩只一閃一閃眨著眼睛的貓頭鷹，靈動(dòng)可愛。而且配合上應(yīng)景的文字解說，給人以寧靜舒適之感。此外，其插畫風(fēng)格和部分留白的應(yīng)用，也使整個(gè)設(shè)計(jì)更加美觀，極具夢幻色彩，仿佛落入設(shè)計(jì)師編織的童話世界里一般。對于緩解訪問者的不滿情緒也是極佳的。

C.學(xué)習(xí)點(diǎn)

*利用動(dòng)畫或交互優(yōu)化頁面設(shè)計(jì)

*插畫風(fēng)格的應(yīng)用也能極大地提升頁面外觀和趣味性

9.Daily UI - 404 Page

A.設(shè)計(jì)師: Carlos Pariente

B.亮點(diǎn): 搞笑風(fēng)趣以及影視人物動(dòng)畫的應(yīng)用

看到這個(gè)頁面時(shí)，忍不住笑出了聲？好。無論其功能設(shè)計(jì)是否符合常規(guī)的設(shè)計(jì)原則，至少在用戶體驗(yàn)和吸引訪問者目光方面的作用是極佳的，不是嗎？再加之其配合文字而添加的影視人物動(dòng)畫，對于熟悉這些影視人物的人們來說，又有了更深層次的共鳴。這些就是這個(gè)頁面設(shè)計(jì)的精妙之處。

C.學(xué)習(xí)點(diǎn)

*設(shè)計(jì)中添加幽默元素

*設(shè)計(jì)中添加一些眾所周知的元素，當(dāng)然，不僅僅是電影方面

10.Daily UI Challenge - 404 Page

A.設(shè)計(jì)師: Andrea Hock

B.亮點(diǎn): 結(jié)合網(wǎng)站或軟件特點(diǎn)進(jìn)行設(shè)計(jì)

除了通過適當(dāng)?shù)南嚓P(guān)聯(lián)想和優(yōu)質(zhì)圖片的添加， 頁面設(shè)計(jì)也可簡單的結(jié)合網(wǎng)站，app或售賣產(chǎn)品的特點(diǎn)，進(jìn)行設(shè)計(jì)。比如，該報(bào)錯(cuò)頁面，就結(jié)合了珠寶網(wǎng)站的特色，將404報(bào)錯(cuò)網(wǎng)站作為另一個(gè)展示各類珠寶的平臺(tái)，讓用戶即使遇到報(bào)錯(cuò)的情況，亦能繼續(xù)他們的預(yù)覽，減少網(wǎng)頁跳出率。

C.學(xué)習(xí)點(diǎn)

*結(jié)合網(wǎng)站或產(chǎn)品特色添加適當(dāng)內(nèi)容，豐富頁面

11.Daily UI-8 404 Error Page

A.設(shè)計(jì)師: Deanna Lam

B.亮點(diǎn): 舒適的風(fēng)景設(shè)計(jì)

就如該頁面設(shè)計(jì)一樣，在介紹頁面中添加能夠讓用戶情緒更加舒緩的生活類或風(fēng)景類背景圖片也是不錯(cuò)的設(shè)計(jì)概念。

C.學(xué)習(xí)點(diǎn)

*為報(bào)錯(cuò)頁面添加舒適的生活類或風(fēng)景類圖片

12.404 page of the Hermitage Friends

A.設(shè)計(jì)師: Anton Borzenkov

B.亮點(diǎn): 有趣的油畫風(fēng)格以及周到的搜索框設(shè)計(jì)

整個(gè)頁面采用了古典的油畫風(fēng)格，極具特色。而且，為給用戶提供更加愉悅流暢的體驗(yàn)，設(shè)計(jì)師還緊接著報(bào)錯(cuò)信息，添加了搜索框，以方便用戶能夠根據(jù)需要跳轉(zhuǎn)到想看的頁面，盡可能的降低了用戶的不快。

C.學(xué)習(xí)點(diǎn)

*選擇和使用油畫或中式水墨風(fēng)增加頁面的獨(dú)特性和吸引力

13.David 404 Page

A.設(shè)計(jì)師: David Kovalev

B.亮點(diǎn): 3D技術(shù)的應(yīng)用

頁面設(shè)計(jì)者采用了最新的3D技術(shù)呈現(xiàn)404報(bào)錯(cuò)提示，有趣直觀，高端大氣。

C.學(xué)習(xí)點(diǎn)

*利用最新最前沿的技術(shù)來提升你的報(bào)錯(cuò)設(shè)計(jì)

現(xiàn)今，有很多先進(jìn)的技術(shù)是可以運(yùn)用到設(shè)計(jì)中。例如以上提及的3D技術(shù)，音頻以及視頻的添加和應(yīng)用等等，在提升頁面功能和用戶體驗(yàn)，美化頁面外觀方面都發(fā)揮著重要作用。

14.Shremal 404 Page

A.設(shè)計(jì)師: Shremal Patel

B.亮點(diǎn): 通過恰當(dāng)聯(lián)想，利用頁面講述一個(gè)有趣的故事

設(shè)計(jì)師使用各種形狀，顏色，陰影以及文字，集中講述著一個(gè)故事：“你搜索的頁面已經(jīng)不在地球上了”或者“你搜索的頁面已經(jīng)將你帶到了地球以外的星球”。這種通過恰當(dāng)聯(lián)想，利用頁面講述一個(gè)故事的設(shè)計(jì)理念也是相當(dāng)有趣的。

C.學(xué)習(xí)點(diǎn)

*利用合理想象，講述有趣的故事

總的來說，希望你能從這些最新的404頁面設(shè)計(jì)作品中獲得靈感， 并吸取到一些有用的東西。

Mockplus助你輕松“留住”和迭代稍縱即逝的404頁面設(shè)計(jì)靈感

欣賞完以上14款最新404報(bào)錯(cuò)頁面之后，靈感涌現(xiàn)？不希望這些珍貴的設(shè)計(jì)靈感毫無痕跡的消失掉？究竟怎樣才能快速有效地“留住”這些稍縱即逝的頁面設(shè)計(jì)靈感呢？不用擔(dān)心。Mockplus, 作為一款簡單快速的原型工具，能夠助你快速地將閃現(xiàn)的設(shè)計(jì)靈感轉(zhuǎn)化成美觀可視的交互原型，實(shí)現(xiàn)快速更迭，并存儲(chǔ)到你的個(gè)人設(shè)計(jì)日志，方便以后查看和使用。

Mockplus具體提供了哪些強(qiáng)大功能幫助你快速轉(zhuǎn)化和提升404報(bào)錯(cuò)頁面設(shè)計(jì)呢？馬上跟著小編詳細(xì)了解一下：

1.快速便捷的添加和導(dǎo)入靜態(tài)/動(dòng)態(tài)圖片

作為一款更快，更簡單的原型工具，Mockplus為用戶提供了一系列以用戶便捷使用為目的的圖片相關(guān)組件和功能：

*利用“圖片”組件直接添加報(bào)錯(cuò)頁面圖片

使用Mockplus的過程中，你可以輕松的拖拽 “圖片” 組件為你的404報(bào)錯(cuò)頁面原型添加所需圖像。而且，當(dāng)需要大量添加圖片時(shí)，也可結(jié)合Mockplus的“格子和自動(dòng)填充”功能，快速添加和填充大量圖片。

*利用“我的組件庫”批量導(dǎo)入圖片

當(dāng)你希望批量導(dǎo)入圖片美化報(bào)錯(cuò)頁面時(shí)，也可打開”我的組件庫” 功能區(qū)，批量導(dǎo)入和添加需要的圖片資料。

*輕松導(dǎo)入Sketch文檔

在實(shí)際的頁面設(shè)計(jì)之中，難免會(huì)遇到需要使用Sketch的圖文文件，以優(yōu)化404頁面設(shè)計(jì)。而在使用Mockplus的過程中，你也可簡單的利用其“導(dǎo)入Sketch文檔”功能，直接導(dǎo)入所需文檔。當(dāng)然，Mockplus提供的Sketch插件，也極大地方便了用戶使用各類Sketch圖文文件。

*利用“Gif”添加動(dòng)態(tài)圖片，增強(qiáng)頁面趣味性

希望添加動(dòng)態(tài)的圖片，讓你的報(bào)錯(cuò)頁面更加生動(dòng)有趣？你可簡單拖拽Mockplus中的GIF 組件實(shí)現(xiàn)。

*利用其“圖片輪播”動(dòng)態(tài)展示和切換頁面圖片

Mockplus提供的“圖片輪播”組件，對于在報(bào)錯(cuò)頁面中添加輪播效果，動(dòng)態(tài)展示和切換各類圖片也是非常有效的。

簡而言之，Mockplus能夠輕松地滿足你對于404報(bào)錯(cuò)頁面圖片添加方面的各種需求。

2.利用“標(biāo)簽”和“多行文本”添加有趣且富有感情的頁面文案

在404報(bào)錯(cuò)頁面設(shè)計(jì)之中，有趣，幽默以及簡單明了的報(bào)錯(cuò)說明，也能為整個(gè)頁面設(shè)計(jì)增色。而在使用Mockplus的過程中，你可以簡單拖拽其“標(biāo)簽”和“多行文本”組件，添加和編輯有趣且富有感情的頁面文案。而且其文本本身的屬性，例如大小，顏色，粗體，斜體，居中方式等等，設(shè)置起來也是極其方便的。此外，其組件交互狀態(tài)的設(shè)置和添加，對于增加文案以及整個(gè)報(bào)錯(cuò)頁面的視覺效果，也是極佳的。

3.利用“表情”圖標(biāo)提升報(bào)錯(cuò)頁面的情感體驗(yàn)

情感元素，尤其是一些俏皮的表情圖標(biāo)，能夠非常有效的提升報(bào)錯(cuò)頁面的情感體驗(yàn)，實(shí)現(xiàn)與用戶的情感對話。而Mockplus為你提供了包括各類表情圖標(biāo)在內(nèi)的超過3000個(gè)方方面面的矢量圖標(biāo)，方便你根據(jù)需要，自由地選擇和添加。

4.簡單快速添加各式交互

交互和動(dòng)畫設(shè)計(jì)也是增強(qiáng)網(wǎng)站趣味性和吸引力的重要因素。而Mockplus為你提供了多樣的交互設(shè)計(jì)命令。你可以簡單拖拽各種組件的鏈接點(diǎn)，即可根據(jù)需要添加各類頁面動(dòng)畫，實(shí)現(xiàn)與訪問者的互動(dòng)。而且其極具視覺效果的頁面轉(zhuǎn)換方式也是非常值得嘗試的。

5.項(xiàng)目文件云端發(fā)布之后，可以在任何地點(diǎn)和時(shí)間下載，滿足各種設(shè)計(jì)需要

希望原型工具能夠提供云端存儲(chǔ)服務(wù)，以便簡單上傳發(fā)布之后， 即可在任何地點(diǎn)和時(shí)間下載，實(shí)現(xiàn)即時(shí)編輯，修改和分享？Mockplus完全能夠滿足你這方面的需求。而且，Mockplus還提供了多達(dá)8種項(xiàng)目預(yù)覽和分享方式，方便用戶輕松根據(jù)不同，甚至是實(shí)時(shí)變化的404頁面設(shè)計(jì)需求，自如地選擇合適的預(yù)覽和分享方式。

總之，不論你是否正在設(shè)計(jì)一個(gè)404報(bào)錯(cuò)頁面，Mockplus將會(huì)是你“留住”和迭代各類頁面設(shè)計(jì)的最佳原型工具。Mockplus所提供的簡單，快速且全面的原型設(shè)計(jì)功能，總是能夠輕松地滿足你對于web/app/page設(shè)計(jì)的各種需求。

結(jié)語：

所以，404報(bào)錯(cuò)頁面，作為網(wǎng)站/應(yīng)用不可或缺的重要頁面之一，對于設(shè)計(jì)師和產(chǎn)品經(jīng)理來說，不應(yīng)該被視作是設(shè)計(jì)痛點(diǎn)，相反，應(yīng)該被好好利用，使其成為為用戶提供更好的頁面/軟件引導(dǎo)，娛樂并留住用戶的重要平臺(tái)， 從而打造出更有特色，更具趣味性以及創(chuàng)造性的網(wǎng)站/軟件?？傊?，希望以上介紹的14款最新創(chuàng)意404報(bào)錯(cuò)頁面設(shè)計(jì)和簡單快捷的原型工具（Mockplus), 能夠?qū)δ愕捻撁嬖O(shè)計(jì)有所幫助。