現(xiàn)代404頁面設(shè)計(jì)趨勢分析與案例

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

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

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

理解404

諸多常見的HTTP錯(cuò)誤當(dāng)中，404是最常見，也是最為大家熟悉的錯(cuò)誤代碼。通常當(dāng)你所訪問的頁面不存在的時(shí)候，服務(wù)器會(huì)返回這么一個(gè)代碼。造成這一點(diǎn)的原因可能是Url 鏈接錯(cuò)誤了，或者原本的頁面被刪除了。

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

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

千萬不要使用默認(rèn)頁面

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

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

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

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

自然的用戶體驗(yàn)流程

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

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

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

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

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

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

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

設(shè)計(jì)實(shí)戰(zhàn)

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

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

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

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

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

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

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

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

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

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

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

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

<span style="color: rgb(82, 82, 82); font-family: Tahoma, Verdana, 宋體; font-size: 14.4px; letter-spacing: 0.25px;