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

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

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

理解404

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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