好的404錯誤頁面設(shè)計增強用戶體驗
一個網(wǎng)站上的404 錯誤是服務(wù)器在請求資源找不到的時候發(fā)生的。一個設(shè)計合理的404錯誤頁面不僅僅是網(wǎng)站完整性的一部分,還是網(wǎng)站的可用性的重要體現(xiàn)。好的404錯誤頁面設(shè)計可以大大的增強網(wǎng)站的用戶體驗。
1. 它應(yīng)該看起來還是你的網(wǎng)站
如果你不明確的告訴你的服務(wù)器如何處理404錯誤,它將默認提供一個單調(diào)而普通的錯誤頁面。比如在一個白色的頁面上顯示“沒找到 – 請求的URL不能被找到”云云。對用戶來說,這是毫無幫助的和相當(dāng)痛苦的。一個404頁面應(yīng)該開起來像個錯誤頁面,但是它也應(yīng)該看起來仍然是你的網(wǎng)站。如果你在是用一個CMS,一般來說這已經(jīng)為你處理好了。如果你使用一個靜態(tài)網(wǎng)站,你可以通過你的.htaccess(Apache服務(wù)器)文件指定一個404模板。

2. 道歉
沒有人會主動訪問你的404頁面。最常見的是他們來自于你的網(wǎng)站或外部網(wǎng)站的一個壞鏈接。也許這個頁面會讓用戶很不高興,所以道歉是一個可以讓他們皺著的眉頭舒緩的絕佳方式。這也可以讓用戶減少對你的網(wǎng)站的抱怨。

3. 搜索
可能用戶尋找的頁面依然存在,只是URL被改變了或者它的URL在某個地方被拼錯了。由于你的網(wǎng)站應(yīng)該已經(jīng)擁有搜索功能了,這是一個非常重要的提供搜索框的好機會。這可以讓用戶很方便的搜索他們試圖鏈接的內(nèi)容并讓他們自己找到正確的URL。

4. 給用戶有用的鏈接
或許他們鏈接進來的頁面不是壞掉了,而是已經(jīng)不存在了。除了搜索,你還可以想用戶展示一些他們可能覺得有用的鏈接?;蛟S鏈接到首頁,或者是歸檔頁面,或者是其它你已知的通常會訪問或者在你的網(wǎng)站上很熱門的頁面?

5. 報告錯誤或聯(lián)系的方式
可能一個用戶在遇到一個404頁面的時候會有某種非常強烈的情緒。他們可能會很焦慮、擔(dān)心,或者他們會被氣瘋了……讓用戶發(fā)泄是個不錯的主意,因為你不可能成為他們的出氣筒,所以一個聯(lián)系表單可能就會湊效。當(dāng)然,這不僅僅對他們有好處,對你也有好處,因為你可以找到問題然后去修正它或者預(yù)防它再次發(fā)生。

6. 自動報告
讓用戶通過聯(lián)系表單幫你報告錯誤是很不錯的,但是只有很小比例的用戶才可能會這樣做。一個替代的方法是讓你的404頁面自動的將錯誤報告給你。有很多種方法可以實現(xiàn)。一個快速而且簡潔的方式是將你的錯誤頁面做成PHP文件,然后使用mail函數(shù)發(fā)送一封包括該URL的郵件給你。
<?php mail("chriscoyier@gmail.com", "404 report",一個網(wǎng)站上的404 錯誤是服務(wù)器在請求資源找不到的時候發(fā)生的。一個設(shè)計合理的404錯誤頁面不僅僅是網(wǎng)站完整性的一部分,還是網(wǎng)站的可用性的重要體現(xiàn)。好的404錯誤頁面設(shè)計可以大大的增強網(wǎng)站的用戶體驗。
1. 它應(yīng)該看起來還是你的網(wǎng)站
如果你不明確的告訴你的服務(wù)器如何處理404錯誤,它將默認提供一個單調(diào)而普通的錯誤頁面。比如在一個白色的頁面上顯示“沒找到 – 請求的URL不能被找到”云云。對用戶來說,這是毫無幫助的和相當(dāng)痛苦的。一個404頁面應(yīng)該開起來像個錯誤頁面,但是它也應(yīng)該看起來仍然是你的網(wǎng)站。如果你在是用一個CMS,一般來說這已經(jīng)為你處理好了。如果你使用一個靜態(tài)網(wǎng)站,你可以通過你的.htaccess(Apache服務(wù)器)文件指定一個404模板。
2. 道歉
沒有人會主動訪問你的404頁面。最常見的是他們來自于你的網(wǎng)站或外部網(wǎng)站的一個壞鏈接。也許這個頁面會讓用戶很不高興,所以道歉是一個可以讓他們皺著的眉頭舒緩的絕佳方式。這也可以讓用戶減少對你的網(wǎng)站的抱怨。
3. 搜索
可能用戶尋找的頁面依然存在,只是URL被改變了或者它的URL在某個地方被拼錯了。由于你的網(wǎng)站應(yīng)該已經(jīng)擁有搜索功能了,這是一個非常重要的提供搜索框的好機會。這可以讓用戶很方便的搜索他們試圖鏈接的內(nèi)容并讓他們自己找到正確的URL。
4. 給用戶有用的鏈接
或許他們鏈接進來的頁面不是壞掉了,而是已經(jīng)不存在了。除了搜索,你還可以想用戶展示一些他們可能覺得有用的鏈接?;蛟S鏈接到首頁,或者是歸檔頁面,或者是其它你已知的通常會訪問或者在你的網(wǎng)站上很熱門的頁面?
5. 報告錯誤或聯(lián)系的方式
可能一個用戶在遇到一個404頁面的時候會有某種非常強烈的情緒。他們可能會很焦慮、擔(dān)心,或者他們會被氣瘋了……讓用戶發(fā)泄是個不錯的主意,因為你不可能成為他們的出氣筒,所以一個聯(lián)系表單可能就會湊效。當(dāng)然,這不僅僅對他們有好處,對你也有好處,因為你可以找到問題然后去修正它或者預(yù)防它再次發(fā)生。
6. 自動報告
讓用戶通過聯(lián)系表單幫你報告錯誤是很不錯的,但是只有很小比例的用戶才可能會這樣做。一個替代的方法是讓你的404頁面自動的將錯誤報告給你。有很多種方法可以實現(xiàn)。一個快速而且簡潔的方式是將你的錯誤頁面做成PHP文件,然后使用mail函數(shù)發(fā)送一封包括該URL的郵件給你。
___FCKpd___0注意: 上面的代碼可能對于小網(wǎng)站是合適的,但是并不適合大流量的網(wǎng)站。在這種情況下,將錯誤寫入一個數(shù)據(jù)庫可能更加有效。
7. 幽默
即便是嚴(yán)肅的網(wǎng)站也可以在404也頁面上添加一些小幽默。這顯然是一個放松和做一些有趣的事情的好機會。
8. 轉(zhuǎn)向?
事實上,我對此種做法持觀望態(tài)度,但是自動的將404頁面轉(zhuǎn)向到其它頁面是可行的?;蛟S首頁正顯示一條關(guān)于這個錯誤的提示信息呢?或許一個包含來自于該頁面的關(guān)鍵詞的搜索頁面被傳遞?
9. 文件大小
你可能會驚訝于你的服務(wù)器序號處理如此多的錯誤活動。不久前的意見令我驚訝的是有那么多的對“怪異”文件的請求,比如在陌生的子目錄請求或?qū)ふ也⒉淮嬖诘碾S機文件。當(dāng)這些內(nèi)容不出現(xiàn)的時候,服務(wù)器就會加載你的404頁面。不必說,為所有的這些請求發(fā)送一個完整的頁面會增加大量的帶寬。最好的方法是與這些不好的請求做斗爭,但是你也應(yīng)該關(guān)注一下404頁面的總大小并減小它——如果帶寬是件很重要的事情的話,在錯誤請求很多的時候,404頁面顯然會浪費很多流量。
SERVER['REQUEST_URI'], "From: chriscoyier@gmail.comn") ?>
注意: 上面的代碼可能對于小網(wǎng)站是合適的,但是并不適合大流量的網(wǎng)站。在這種情況下,將錯誤寫入一個數(shù)據(jù)庫可能更加有效。
7. 幽默
即便是嚴(yán)肅的網(wǎng)站也可以在404也頁面上添加一些小幽默。這顯然是一個放松和做一些有趣的事情的好機會。

8. 轉(zhuǎn)向?
事實上,我對此種做法持觀望態(tài)度,但是自動的將404頁面轉(zhuǎn)向到其它頁面是可行的?;蛟S首頁正顯示一條關(guān)于這個錯誤的提示信息呢?或許一個包含來自于該頁面的關(guān)鍵詞的搜索頁面被傳遞?
9. 文件大小
你可能會驚訝于你的服務(wù)器序號處理如此多的錯誤活動。不久前的意見令我驚訝的是有那么多的對“怪異”文件的請求,比如在陌生的子目錄請求或?qū)ふ也⒉淮嬖诘碾S機文件。當(dāng)這些內(nèi)容不出現(xiàn)的時候,服務(wù)器就會加載你的404頁面。不必說,為所有的這些請求發(fā)送一個完整的頁面會增加大量的帶寬。最好的方法是與這些不好的請求做斗爭,但是你也應(yīng)該關(guān)注一下404頁面的總大小并減小它——如果帶寬是件很重要的事情的話,在錯誤請求很多的時候,404頁面顯然會浪費很多流量。
相關(guān)文章

jquery+css3實現(xiàn)的小狗繞地球奔跑動態(tài)404頁面錯誤代碼
是一段實現(xiàn)了非??蓯鄣男游镌谛D(zhuǎn)的地球上奔跑的動態(tài)404錯誤頁面效果的代碼,本段代碼適應(yīng)于所有網(wǎng)站使用,有需要的朋友們可以前來下載使用2016-02-17
是一段實現(xiàn)了非常簡單也大方的效果的網(wǎng)站404錯誤頁面效果代碼,當(dāng)鼠標(biāo)經(jīng)過404數(shù)字時,該數(shù)字會發(fā)光發(fā)亮,本段代碼適應(yīng)于所有網(wǎng)站使用,有需要的朋友們可以前來下載使用2016-02-16
本文給大家介紹基于div+css制作鱷魚眼睛會動的404錯誤頁面,代碼簡單易懂,需要的童鞋直接下載使用哦2015-11-04
本404頁面源碼包括HTML5效果以及愛心公益代碼2013-07-24
jquery實現(xiàn)的火箭動畫效果的404錯誤頁面,比較適合娛樂的場合使用。404就是當(dāng)頁面找不到時,顯示的頁面。2010-12-12- 首先我要聲明,我是新手。我希望這篇文章對那些是個新手朋友的能有所幫助。 死鏈接就是指那些失效的鏈接,打不開的鏈接。很多站內(nèi)都有死鏈接,尤其是那些重新改版的站,2009-05-23
- 當(dāng)網(wǎng)站進行調(diào)整、頁面進行修改的時候,便會有網(wǎng)頁被刪除、改名或移動位置,這時候,雖然相應(yīng)內(nèi)容的網(wǎng)頁還存在于網(wǎng)站中,但使用原來的地址訪問則無法訪問,或者由于拼寫錯誤2009-04-02
- 相關(guān)服務(wù)器返回代碼介紹: 200 客戶端請求已成功響應(yīng); 301 永久重定向某個鏈接; 302 臨時重定向到某個鏈接; 404 訪問的頁面暫時不存在。 當(dāng)2008-12-19

jQuery+CSS3實現(xiàn)降落傘小男孩動態(tài)背景404錯誤頁面特效源碼
jQuery+CSS3實現(xiàn)降落傘小男孩動態(tài)背景404錯誤頁面特效源碼是一款從天而降的帶著降落傘小男孩,浮動的白云和飛著的小鳥,過3秒后會自動404跳轉(zhuǎn)到首頁。需要的朋友前來下載源2016-03-30







