每個網站都是由不同功能不同型別的頁面構成的，當使用者開啟錯誤連結的時候，網站的404頁面就派上用場了。一個可靠的404頁面在告知使用者他們走錯地方的同時，還應當引導使用者繼續瀏覽，安撫情緒，找到他們真正想要的內容。
所以，搞定一個404頁面並不會花費太多的精力，但如果想設計一款自然而又非常有用的404頁面，還是要費一番功夫的。
隨著技術的發展，404頁面在設計、功能上也隨之有所改變，而今天的文章就是總結一下當前404頁面設計的趨勢，並用真實的案例為這些技巧進行說明。
理解404
諸多常見的HTTP錯誤當中，404是最常見，也是最為大家熟悉的錯誤程式碼。通常當你所訪問的頁面不存在的時候，伺服器會返回這麼一個程式碼。造成這一點的原因可能是Url 連結錯誤了，或者原本的頁面被刪除了。
但是你不能要求每個使用者都能熟知這個程式碼的含義。即使使用者知道明白，也很難直接排除故障，所以，我們需要讓事情變的更加簡單，解決現實可見的問題。
每個頁面的易用性設計都直接影響著使用者留存率，頁面設計的每一個細節都直接影響著使用者行為。如果在設計404頁面的時候，時刻關注著細節和易用性，抓住使用者的真實需求，會給網站帶來明顯的提升。
千萬不要使用預設頁面
每個網站所託管的伺服器都會有預設的404頁面，這個通用又簡陋的頁面其實是非常倒胃口的。也正是這個粗糙的頁面促使大家設計屬於自己的404頁面。
撇開設計不談，預設的404頁面也完全不存在任何的功能性，也不會對網站本身有任何裨益。
退一萬步，即使我們不要功能，這個頁面沒法呼叫網站的模板，不具備自己的風格，它是徹頭徹尾的雞肋。
所以，設計自己的404頁面很有必要。保持頁面風格的一致性，功能上則將使用者引導到必要的地方，解決使用者的困惑和問題，這是一個現代404頁面的使命。
自然的使用者體驗流程
首先，沒有人喜歡待在404頁面當中。它存在的目的，就是引導使用者去別的地方。
每個404頁面應該都需要設計師因地制宜地考量，幫助訪客以最簡單的方式最快地找到想要的內容。確保文字易讀，排版清晰，以足夠簡明的方式來呈現功能和內容，避免混亂。
同時，如果你想讓使用者感到正被積極地幫助，那麼不妨在404頁面中新增內容連結，最好是相關內容的連結。如果使用者能直接在頁面報錯的話，那麼能幫助網站更好地解決問題。
避免複雜的專業用語
考慮到很少有足夠好的診斷機制來根治404的問題，所以最好還是以簡單直接的方式來設計404頁面。不要去考慮太多的伺服器報錯程式碼和技術詞彙的含義，對於使用者而言，這些資訊可能是讓他們更加迷惑的根源。
儘量讓頁面保持輕鬆、幽默的氛圍吧，這是讓使用者告別緊張情緒必需的設計。提供可行的解決方案，讓他們可以在冷靜中解決問題。
使用幽默的文案和圖片內容，可以讓訪客保持愉悅的心情和好奇心，不要讓他們感覺自己做錯了什麼。
設計實戰
下面是一些設計優秀的404頁面，它們在易用性的設計上非常用心，仔細看看他們都是怎麼佈局，如何營造氛圍的，也許會對你的下一版404頁面提供不錯的靈感。
Snuggle Bugz
頁面中所有的圖示和按鈕樣式都和整個佈局風格保持了高度的一致，略顯可愛的風格環節了找不到頁面的尷尬氣氛。
Fork CMS
Fork CMS 將品牌標誌性的形象融入到404頁面中，配合聰明的文案和海洋主題，顯得頗為有趣，令人忍俊不禁。
Gumroad
Gumroad 的404頁面用的是更加安靜的方式來引導使用者：將隨機的產品靜靜擺放到使用者眼前，將失誤轉化為銷售的機會，引導使用者深入網站繼續買買買。
Ramotion
Ramotion 的404頁面足夠簡短也足夠偷懶，簡約而對比強烈的排版讓頁面不會顯得太難看，然後帶著使用者去首頁……似乎也是不錯的選擇。
Angry Birds
憤怒的小鳥的頁面和品牌風格的融合做的非常不錯，有趣的文案和可愛的動漫形象，讓使用者確知他們所在的網站，並且不會讓人覺得尷尬。
Larkef
這個404頁面的設計就非常幽默，頁面使用了全屏視訊背景，這段視訊是來自著名情景喜劇《IT狂人》，令人捧腹。這個設計唯一讓人比較尷尬的是，你沒法回到網站首頁……
GitHub
GitHub 這種站點的404頁面的設計也非常有特色，頁面上巨大的搜尋框非常符合網站本身內容豐富的特性，一個搜尋框就能讓流連此處的程式設計師們找到他們想要的東西。
ArtStation
ArtStation 頁面的404錯誤程式碼相當的明顯，網站背景圖片貼合主題，而回到首頁的按鈕是整個頁面中最醒目的按鈕。
Webydo
強對比的色彩和排版是Webydo的特色，這也使得網頁的資訊更輕鬆地吸引使用者的注意力。導航欄的存在讓使用者可以輕鬆去不同的地方，最醒目的黃色按鈕則乾脆引導使用者開始建立網站。
Stormpath
Stormpath 用的背景圖和文案都非常的逗趣，調侃的味道很濃郁。
Underbelly
很多404頁面都採用了簡約直觀的內容設計，Underbelly 也是如此，不過他們加上了視訊背景，確保了資訊量的丰度，也保證了首頁連結足夠突出。
Forbes
福布斯的網站是靠排版和內容而支撐起來的，而404頁面的設計也沿襲了它的這一特色。搜尋框和連結可以幫使用者尋找他們真正需要的內容。
Marvel App
出現404頁面之後，最重要的是解決問題。所以Marvel 就給使用者提供了兩個方式來解決問題：發郵件給他們，或者發推特給他們。
Engadget
癮科技是著名的科技網站，他們的404頁面也沿襲了他們一貫的“科技風”，從畫素風格的404和網際網路流行的暴漫插畫都充分體現了他們的“網際網路基因”。
Tripomatic
卡通式的插畫背景創造出輕鬆愉悅的氛圍，讓404頁面不再顯得單調無趣。
Aerolab
簡短的文字和高對比度的設計，營造出獨特的設計感。
MailChimp
MailChimp 的頂部導航一直常駐在頂部，而為了讓使用者更好地找到想要的內容，提供了一個搜尋框。
Code School
CodeSchool 的404頁面僅僅新增了一個回首頁的連結，不同於其他的頁面，它的特點是漫長的動效。不過總體的使用者體驗還不錯。
TinyCarrier
大家都喜歡向量圖，而TinyCarrier的404頁面中的插畫都是有趣的向量圖。頁面的整體設計和其他的404頁面相差不多。
Email Center UK
Emailcenter 的404頁面乾脆為誤入此處的使用者提供了一個有趣的小遊戲。