做有情懷的設計師！如何打造善意優(yōu)雅的404頁面？

編者按：相信我，這不是標題黨。本文提到的大多數(shù)細節(jié)設計，都很難在平常的網(wǎng)站里尋到蹤跡，不過恰恰如此，這篇文章的可讀性非常高，如果哪一天你看到這么體貼的404網(wǎng)站，找到那個設計師嫁了吧。

【今年人氣最高的資源+教程，同學你不看一眼么？】 >>> 《年度頒獎盛典！2014年最受歡迎的設計資源大盤點》

@網(wǎng)秦UEC?：沒人會想到網(wǎng)站訪客會在錯誤頁面上停留，但實際上這種情況確實存在。特別是在404錯誤頁面上，訪客會經(jīng)常逗留。所以，你可以將404錯誤頁面設計的更加吸引用戶，而不應讓用戶迫不及待離開。

什么樣的404錯誤頁面算好？自然要讓人印象深刻，不能看見就煩。同時，其設計過程也可以充滿樂趣。那么，你應該怎么做才能為自己的網(wǎng)站設計出優(yōu)秀的404頁面呢？下面是一些小建議和技巧，以及一些不錯的范例。

什么是404錯誤頁面？

當網(wǎng)站訪客進入到不存在的頁面時，就會顯示404錯誤頁面。其原因有可能是頁面被移除、服務器或網(wǎng)絡連接失敗、用戶點擊了壞鏈接或輸入了錯誤的URL。

通常來說，404錯誤頁面會顯示下列信息之一：

• 404 Not Found
• HTTP 404 Not Found
• 404 Error
• The page cannot be found
• The requested URL was not found on this server

在對404頁面進行整體設計時，有兩個選擇：普通的404頁面或自定義404頁面。普通的頁面只是簡單的甩出上面的信息，不涉及設計內容。而自定義頁面則需要你進行設計并提供選項。

一個優(yōu)秀的404錯誤頁面應當在用戶不慎進入時告訴他們應當如何進行接下來的操作。其中應當提供有用的信息來幫助訪客不離開你的網(wǎng)站并進而找到自己所需要的信息。（如果頁面本身設計精美就更好了。）

基本必備信息

為了保證充分有效，404錯誤頁面從本質上說應當簡單一些。它應當說明用戶遇到了錯誤（顯而易見），以及可以采取哪些辦法離開此頁面。

而大堆的技術術語是不應當出現(xiàn)在404頁面上的。（否則豈不會嚇跑用戶。）實際上，連“404錯誤”這個大標題都不應該出現(xiàn)在頁面上，因為很多用戶完全不知道這玩意是什么意思。你應當做的是展示更有意義的信息，例如“沒有找到頁面”。

另外還有一些重要信息是404頁面所必不可少的。總而言之，設計的關鍵是讓用戶在頁面出錯時繼續(xù)點擊瀏覽，而不是關閉頁面。

1. 顯眼的標題或文字向用戶說明出現(xiàn)當前頁面的原因。看到自己打開的網(wǎng)頁和預期的不是一回事是很惱人的。一定要讓用戶知道他們打開的頁面不正確，但所登陸的網(wǎng)站是沒問題的。

2. 搜索。在404錯誤頁面上提供與網(wǎng)站其他部分相同（且位置一致）的搜索功能。這樣一來用戶就能自己查找要訪問的頁面。

3. 通往主頁和網(wǎng)站地圖的鏈接。這個設計要素中可以包含與網(wǎng)站其他部分搭配的標題或腳注。

4. 其他簡化信息。建議刪去復雜的導航功能。如果用戶進入到錯誤頁面，你只需為其提供簡單幾個能夠導向正確位置的選項。如果選項過多，反而會讓用戶更加頭疼或者困惑。

5. 加入顯眼的操作提示。告訴用戶下一步如何操作。

讓404頁面具有用途

在考慮404頁面時，設計流程中的一個重要部分就是用途。加入能夠讓頁面既好看又有用的功能。

對于自定義404頁面中應當包含哪些信息，Google的網(wǎng)站管理員工具中提供了一系列很有用的建議。這些建議包括：

• 明確告知用戶其所尋找的頁面無法找到。語言應當友善、誘人。
• 404錯誤頁面應當與網(wǎng)站其他部分的外觀和感覺相互匹配。
• 考慮在其中添加通往熱門文章或帖子的鏈接。
• 為用戶提供報告壞鏈接的渠道。
• 讓網(wǎng)絡服務器在收到對丟失頁面的請求時返回實際的404 HTTP狀態(tài)代碼，以免其顯示在搜索結果中。
• 使用Enhance 404工具在自定義404頁面中嵌入搜索框。
• 使用Change of Address工具將網(wǎng)站的動作告知Google。

除了上述之外，還有一條給設計師們的提示：發(fā)揮創(chuàng)意。404頁面，只要技術允許，不一定是很無聊無趣的。

推薦一組逸趣橫生的404網(wǎng)站，可以借鑒 ：）《來吧！讓你的404頁面更有愛》

設計具有目的性的404頁面

在考慮404錯誤頁面的設計時，首先應思考其與網(wǎng)站其他部分直接的聯(lián)系。你網(wǎng)站整體設計的氛圍和基調是什么？404頁面如何才能與其搭配。

優(yōu)秀的錯誤頁面應當能夠與其所處的網(wǎng)站無縫銜接。如果你的網(wǎng)站采用了明快幽默的基調，則404頁面也應當如此。另外，在顏色和圖形使用上也應當與網(wǎng)站一致。但在設計過程中，一定要小心謹慎，不要把進入錯誤頁面的責任歸咎到用戶頭上。（這種情況發(fā)生的頻率絕對超出你的想象。）

錯誤頁面的設計應當是整體設計方案中的一個組成部分。

1. 保持設計的一致性。使用與網(wǎng)站其他頁面相同的顏色、字體和圖形風格。
2. 保留品牌標識。使用相同的logo、標題和腳注處理方式能夠幫助用戶識別你的網(wǎng)站。
3. 保持視覺上的簡約。在錯誤頁面上，少就是多。
4. 不要讓用戶滾動鼠標。設計應該以一屏為限。
5. 不要使用太多噱頭。雖然與整體網(wǎng)站和品牌保持相同的基調和感覺是個好主意，但是過多的內容反而會讓用戶忘記自己本來要找的東西。
6. 表示歉意。用戶進入錯誤頁面時你道個歉絕對沒問題。
7. 如果你的網(wǎng)站需要登陸，可以添加登陸功能。（錯誤是否因為用戶需要登陸而造成？）
8. 發(fā)揮創(chuàng)意，或者表現(xiàn)趣味。不要忘記先對頁面進行測試。保證所有用戶都能理解你的設計。
9. 如果你使用了“404錯誤”這句話，則應當再加一行文字告訴用戶其意思是什么，或者他們下一步應當如何操作。

12個優(yōu)秀范例

碰到一個優(yōu)秀的404錯誤頁面時的感覺是很特殊的。它能夠減緩錯誤鏈接所帶來的惱怒。下面的12個頁面一定能讓你流連忘返。

Deviant Art

科學上網(wǎng)。

Gig Masters

iFolderLinks

Lego

LimpFish

Magnt

Mattel

NPR

Steve Lambert

Titleist

Tobi

最后

把一個因為錯誤而形成的頁面設計的有趣而有創(chuàng)意很難，但不是不可能。設計出好的404頁面需要你結合簡約、實用，同時也少不了設計天分。

對于404錯誤頁面的設計，我還有什么遺漏嗎？你是否曾經(jīng)打造出過優(yōu)秀的404頁面？請給我們留言^^

?【設計師的細膩思考，暖到著火】

日常生活里有哪些不輕易發(fā)現(xiàn)的設計細節(jié)？
《細節(jié)里藏著小心思！聊聊日常生活中包含的設計哲學》

打動我們的除了星辰大海，還有設計與愛：
《于細微處動真情！聊聊產品細節(jié)中的情感化設計》

外婆她的期待，設計師她說有辦法！
《溫暖人心的情感化設計：那些寬衣解帶的事》

原文地址：designshack
譯文地址：http://uec.nq
譯者：蔣燦

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內人氣最高的網(wǎng)頁設計師學習平臺，專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量88萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com
官方微信：想在手機上、被窩里獲取設計教程和各種意想不到的"福利"嗎？添加優(yōu)設哥微信號：youshege