每個網(wǎng)站都是由不同功能不同類型的頁面構(gòu)成的，當用戶打開錯誤鏈接的時候，網(wǎng)站的404頁面就派上用場了。一個可靠的404頁面在告知用戶他們走錯地方的同時，還應當引導用戶繼續(xù)瀏覽，安撫情緒，找到他們真正想要的內(nèi)容。

所以，搞定一個404頁面并不會花費太多的精力，但如果想設(shè)計一款自然而又非常有用的404頁面，還是要費一番功夫的。

隨著技術(shù)的發(fā)展，404頁面在設(shè)計、功能上也隨之有所改變，而今天的文章就是總結(jié)一下當前404頁面設(shè)計的趨勢，并用真實的案例為這些技巧進行說明。

理解404

諸多常見的HTTP錯誤當中，404是最常見，也是最為大家熟悉的錯誤代碼。通常當你所訪問的頁面不存在的時候，服務器會返回這么一個代碼。造成這一點的原因可能是Url 鏈接錯誤了，或者原本的頁面被刪除了。

但是你不能要求每個用戶都能熟知這個代碼的含義。即使用戶知道明白，也很難直接排除故障，所以，我們需要讓事情變的更加簡單，解決現(xiàn)實可見的問題。

每個頁面的易用性設(shè)計都直接影響著用戶留存率，頁面設(shè)計的每一個細節(jié)都直接影響著用戶行為。如果在設(shè)計404頁面的時候，時刻關(guān)注著細節(jié)和易用性，抓住用戶的真實需求，會給網(wǎng)站帶來明顯的提升。

千萬不要使用默認頁面

每個網(wǎng)站所托管的服務器都會有默認的404頁面，這個通用又簡陋的頁面其實是非常倒胃口的。也正是這個粗糙的頁面促使大家設(shè)計屬于自己的404頁面。

撇開設(shè)計不談，默認的404頁面也完全不存在任何的功能性，也不會對網(wǎng)站本身有任何裨益。

退一萬步，即使我們不要功能，這個頁面沒法調(diào)用網(wǎng)站的模板，不具備自己的風格，它是徹頭徹尾的雞肋。

所以，設(shè)計自己的404頁面很有必要。保持頁面風格的一致性，功能上則將用戶引導到必要的地方，解決用戶的困惑和問題，這是一個現(xiàn)代404頁面的使命。

自然的用戶體驗流程

首先，沒有人喜歡待在404頁面當中。它存在的目的，就是引導用戶去別的地方。

每個404頁面應該都需要設(shè)計師因地制宜地考量，幫助訪客以最簡單的方式最快地找到想要的內(nèi)容。確保文字易讀，排版清晰，以足夠簡明的方式來呈現(xiàn)功能和內(nèi)容，避免混亂。

同時，如果你想讓用戶感到正被積極地幫助，那么不妨在404頁面中添加內(nèi)容鏈接，最好是相關(guān)內(nèi)容的鏈接。如果用戶能直接在頁面報錯的話，那么能幫助網(wǎng)站更好地解決問題。

避免復雜的專業(yè)用語

考慮到很少有足夠好的診斷機制來根治404的問題，所以最好還是以簡單直接的方式來設(shè)計404頁面。不要去考慮太多的服務器報錯代碼和技術(shù)詞匯的含義，對于用戶而言，這些信息可能是讓他們更加迷惑的根源。

盡量讓頁面保持輕松、幽默的氛圍吧，這是讓用戶告別緊張情緒必需的設(shè)計。提供可行的解決方案，讓他們可以在冷靜中解決問題。

使用幽默的文案和圖片內(nèi)容，可以讓訪客保持愉悅的心情和好奇心，不要讓他們感覺自己做錯了什么。

設(shè)計實戰(zhàn)

下面是一些設(shè)計優(yōu)秀的404頁面，它們在易用性的設(shè)計上非常用心，仔細看看他們都是怎么布局，如何營造氛圍的，也許會對你的下一版404頁面提供不錯的靈感。

Snuggle Bugz

頁面中所有的圖標和按鈕樣式都和整個布局風格保持了高度的一致，略顯可愛的風格環(huán)節(jié)了找不到頁面的尷尬氣氛。

Fork CMS

Fork CMS 將品牌標志性的形象融入到404頁面中，配合聰明的文案和海洋主題，顯得頗為有趣，令人忍俊不禁。

Gumroad

Gumroad 的404頁面用的是更加安靜的方式來引導用戶：將隨機的產(chǎn)品靜靜擺放到用戶眼前，將失誤轉(zhuǎn)化為銷售的機會，引導用戶深入網(wǎng)站繼續(xù)買買買。

Ramotion

Ramotion 的404頁面足夠簡短也足夠偷懶，簡約而對比強烈的排版讓頁面不會顯得太難看，然后帶著用戶去首頁……似乎也是不錯的選擇。

Angry Birds

憤怒的小鳥的頁面和品牌風格的融合做的非常不錯，有趣的文案和可愛的動漫形象，讓用戶確知他們所在的網(wǎng)站，并且不會讓人覺得尷尬。

Larkef

這個404頁面的設(shè)計就非常幽默，頁面使用了全屏視頻背景，這段視頻是來自著名情景喜劇《IT狂人》，令人捧腹。這個設(shè)計唯一讓人比較尷尬的是，你沒法回到網(wǎng)站首頁……

GitHub

GitHub 這種站點的404頁面的設(shè)計也非常有特色，頁面上巨大的搜索框非常符合網(wǎng)站本身內(nèi)容豐富的特性，一個搜索框就能讓流連此處的程序員們找到他們想要的東西。

ArtStation

ArtStation 頁面的404錯誤代碼相當?shù)拿黠@，網(wǎng)站背景圖片貼合主題，而回到首頁的按鈕是整個頁面中最醒目的按鈕。

Webydo

強對比的色彩和排版是Webydo的特色，這也使得網(wǎng)頁的信息更輕松地吸引用戶的注意力。導航欄的存在讓用戶可以輕松去不同的地方，最醒目的黃色按鈕則干脆引導用戶開始創(chuàng)建網(wǎng)站。

Stormpath

Stormpath 用的背景圖和文案都非常的逗趣，調(diào)侃的味道很濃郁。

Underbelly

很多404頁面都采用了簡約直觀的內(nèi)容設(shè)計，Underbelly 也是如此，不過他們加上了視頻背景，確保了信息量的豐度，也保證了首頁鏈接足夠突出。

Forbes

福布斯的網(wǎng)站是靠排版和內(nèi)容而支撐起來的，而404頁面的設(shè)計也沿襲了它的這一特色。搜索框和鏈接可以幫用戶尋找他們真正需要的內(nèi)容。

Marvel App

出現(xiàn)404頁面之后，最重要的是解決問題。所以Marvel 就給用戶提供了兩個方式來解決問題：發(fā)郵件給他們，或者發(fā)推特給他們。

Engadget

癮科技是著名的科技網(wǎng)站，他們的404頁面也沿襲了他們一貫的“科技風”，從像素風格的404和互聯(lián)網(wǎng)流行的暴漫插畫都充分體現(xiàn)了他們的“互聯(lián)網(wǎng)基因”。

Tripomatic

卡通式的插畫背景創(chuàng)造出輕松愉悅的氛圍，讓404頁面不再顯得單調(diào)無趣。

Aerolab

簡短的文字和高對比度的設(shè)計，營造出獨特的設(shè)計感。

MailChimp

MailChimp 的頂部導航一直常駐在頂部，而為了讓用戶更好地找到想要的內(nèi)容，提供了一個搜索框。

Code School

CodeSchool 的404頁面僅僅添加了一個回首頁的鏈接，不同于其他的頁面，它的特點是漫長的動效。不過總體的用戶體驗還不錯。

TinyCarrier

大家都喜歡矢量圖，而TinyCarrier的404頁面中的插畫都是有趣的矢量圖。頁面的整體設(shè)計和其他的404頁面相差不多。

Email Center UK

Emailcenter 的404頁面干脆為誤入此處的用戶提供了一個有趣的小游戲。

譯者@陳子木 ? ?來源@優(yōu)設(shè)網(wǎng)

原文地址：vandelaydesign?