好的404錯(cuò)誤頁面設(shè)計(jì)增強(qiáng)用戶體驗(yàn)

一個(gè)網(wǎng)站上的404 錯(cuò)誤是服務(wù)器在請求資源找不到的時(shí)候發(fā)生的。一個(gè)設(shè)計(jì)合理的404錯(cuò)誤頁面不僅僅是網(wǎng)站完整性的一部分,還是網(wǎng)站的可用性的重要體現(xiàn)。好的404錯(cuò)誤頁面設(shè)計(jì)可以大大的增強(qiáng)網(wǎng)站的用戶體驗(yàn)。
1. 它應(yīng)該看起來還是你的網(wǎng)站
如果你不明確的告訴你的服務(wù)器如何處理404錯(cuò)誤,它將默認(rèn)提供一個(gè)單調(diào)而普通的錯(cuò)誤頁面。比如在一個(gè)白色的頁面上顯示“沒找到 – 請求的URL不能被找到”云云。對用戶來說,這是毫無幫助的和相當(dāng)痛苦的。一個(gè)404頁面應(yīng)該開起來像個(gè)錯(cuò)誤頁面,但是它也應(yīng)該看起來仍然是你的網(wǎng)站。如果你在是用一個(gè)CMS,一般來說這已經(jīng)為你處理好了。如果你使用一個(gè)靜態(tài)網(wǎng)站,你可以通過你的.htaccess(Apache服務(wù)器)文件指定一個(gè)404模板。
2. 道歉
沒有人會(huì)主動(dòng)訪問你的404頁面。最常見的是他們來自于你的網(wǎng)站或外部網(wǎng)站的一個(gè)壞鏈接。也許這個(gè)頁面會(huì)讓用戶很不高興,所以道歉是一個(gè)可以讓他們皺著的眉頭舒緩的絕佳方式。這也可以讓用戶減少對你的網(wǎng)站的抱怨。
3. 搜索
可能用戶尋找的頁面依然存在,只是URL被改變了或者它的URL在某個(gè)地方被拼錯(cuò)了。由于你的網(wǎng)站應(yīng)該已經(jīng)擁有搜索功能了,這是一個(gè)非常重要的提供搜索框的好機(jī)會(huì)。這可以讓用戶很方便的搜索他們試圖鏈接的內(nèi)容并讓他們自己找到正確的URL。
4. 給用戶有用的鏈接
或許他們鏈接進(jìn)來的頁面不是壞掉了,而是已經(jīng)不存在了。除了搜索,你還可以想用戶展示一些他們可能覺得有用的鏈接?;蛟S鏈接到首頁,或者是歸檔頁面,或者是其它你已知的通常會(huì)訪問或者在你的網(wǎng)站上很熱門的頁面?
5. 報(bào)告錯(cuò)誤或聯(lián)系的方式
可能一個(gè)用戶在遇到一個(gè)404頁面的時(shí)候會(huì)有某種非常強(qiáng)烈的情緒。他們可能會(huì)很焦慮、擔(dān)心,或者他們會(huì)被氣瘋了……讓用戶發(fā)泄是個(gè)不錯(cuò)的主意,因?yàn)槟悴豢赡艹蔀樗麄兊某鰵馔?,所以一個(gè)聯(lián)系表單可能就會(huì)湊效。當(dāng)然,這不僅僅對他們有好處,對你也有好處,因?yàn)槟憧梢哉业絾栴}然后去修正它或者預(yù)防它再次發(fā)生。
6. 自動(dòng)報(bào)告
讓用戶通過聯(lián)系表單幫你報(bào)告錯(cuò)誤是很不錯(cuò)的,但是只有很小比例的用戶才可能會(huì)這樣做。一個(gè)替代的方法是讓你的404頁面自動(dòng)的將錯(cuò)誤報(bào)告給你。有很多種方法可以實(shí)現(xiàn)。一個(gè)快速而且簡潔的方式是將你的錯(cuò)誤頁面做成PHP文件,然后使用mail函數(shù)發(fā)送一封包括該URL的郵件給你。
<?php mail("chriscoyier@gmail.com", "404 report",一個(gè)網(wǎng)站上的404 錯(cuò)誤是服務(wù)器在請求資源找不到的時(shí)候發(fā)生的。一個(gè)設(shè)計(jì)合理的404錯(cuò)誤頁面不僅僅是網(wǎng)站完整性的一部分,還是網(wǎng)站的可用性的重要體現(xiàn)。好的404錯(cuò)誤頁面設(shè)計(jì)可以大大的增強(qiáng)網(wǎng)站的用戶體驗(yàn)。
1. 它應(yīng)該看起來還是你的網(wǎng)站
如果你不明確的告訴你的服務(wù)器如何處理404錯(cuò)誤,它將默認(rèn)提供一個(gè)單調(diào)而普通的錯(cuò)誤頁面。比如在一個(gè)白色的頁面上顯示“沒找到 – 請求的URL不能被找到”云云。對用戶來說,這是毫無幫助的和相當(dāng)痛苦的。一個(gè)404頁面應(yīng)該開起來像個(gè)錯(cuò)誤頁面,但是它也應(yīng)該看起來仍然是你的網(wǎng)站。如果你在是用一個(gè)CMS,一般來說這已經(jīng)為你處理好了。如果你使用一個(gè)靜態(tài)網(wǎng)站,你可以通過你的.htaccess(Apache服務(wù)器)文件指定一個(gè)404模板。
2. 道歉
沒有人會(huì)主動(dòng)訪問你的404頁面。最常見的是他們來自于你的網(wǎng)站或外部網(wǎng)站的一個(gè)壞鏈接。也許這個(gè)頁面會(huì)讓用戶很不高興,所以道歉是一個(gè)可以讓他們皺著的眉頭舒緩的絕佳方式。這也可以讓用戶減少對你的網(wǎng)站的抱怨。
3. 搜索
可能用戶尋找的頁面依然存在,只是URL被改變了或者它的URL在某個(gè)地方被拼錯(cuò)了。由于你的網(wǎng)站應(yīng)該已經(jīng)擁有搜索功能了,這是一個(gè)非常重要的提供搜索框的好機(jī)會(huì)。這可以讓用戶很方便的搜索他們試圖鏈接的內(nèi)容并讓他們自己找到正確的URL。
4. 給用戶有用的鏈接
或許他們鏈接進(jìn)來的頁面不是壞掉了,而是已經(jīng)不存在了。除了搜索,你還可以想用戶展示一些他們可能覺得有用的鏈接。或許鏈接到首頁,或者是歸檔頁面,或者是其它你已知的通常會(huì)訪問或者在你的網(wǎng)站上很熱門的頁面?
5. 報(bào)告錯(cuò)誤或聯(lián)系的方式
可能一個(gè)用戶在遇到一個(gè)404頁面的時(shí)候會(huì)有某種非常強(qiáng)烈的情緒。他們可能會(huì)很焦慮、擔(dān)心,或者他們會(huì)被氣瘋了……讓用戶發(fā)泄是個(gè)不錯(cuò)的主意,因?yàn)槟悴豢赡艹蔀樗麄兊某鰵馔?,所以一個(gè)聯(lián)系表單可能就會(huì)湊效。當(dāng)然,這不僅僅對他們有好處,對你也有好處,因?yàn)槟憧梢哉业絾栴}然后去修正它或者預(yù)防它再次發(fā)生。
6. 自動(dòng)報(bào)告
讓用戶通過聯(lián)系表單幫你報(bào)告錯(cuò)誤是很不錯(cuò)的,但是只有很小比例的用戶才可能會(huì)這樣做。一個(gè)替代的方法是讓你的404頁面自動(dòng)的將錯(cuò)誤報(bào)告給你。有很多種方法可以實(shí)現(xiàn)。一個(gè)快速而且簡潔的方式是將你的錯(cuò)誤頁面做成PHP文件,然后使用mail函數(shù)發(fā)送一封包括該URL的郵件給你。
___FCKpd___0注意: 上面的代碼可能對于小網(wǎng)站是合適的,但是并不適合大流量的網(wǎng)站。在這種情況下,將錯(cuò)誤寫入一個(gè)數(shù)據(jù)庫可能更加有效。
7. 幽默
即便是嚴(yán)肅的網(wǎng)站也可以在404也頁面上添加一些小幽默。這顯然是一個(gè)放松和做一些有趣的事情的好機(jī)會(huì)。
8. 轉(zhuǎn)向?
事實(shí)上,我對此種做法持觀望態(tài)度,但是自動(dòng)的將404頁面轉(zhuǎn)向到其它頁面是可行的?;蛟S首頁正顯示一條關(guān)于這個(gè)錯(cuò)誤的提示信息呢?或許一個(gè)包含來自于該頁面的關(guān)鍵詞的搜索頁面被傳遞?
9. 文件大小
你可能會(huì)驚訝于你的服務(wù)器序號(hào)處理如此多的錯(cuò)誤活動(dòng)。不久前的意見令我驚訝的是有那么多的對“怪異”文件的請求,比如在陌生的子目錄請求或?qū)ふ也⒉淮嬖诘碾S機(jī)文件。當(dāng)這些內(nèi)容不出現(xiàn)的時(shí)候,服務(wù)器就會(huì)加載你的404頁面。不必說,為所有的這些請求發(fā)送一個(gè)完整的頁面會(huì)增加大量的帶寬。最好的方法是與這些不好的請求做斗爭,但是你也應(yīng)該關(guān)注一下404頁面的總大小并減小它——如果帶寬是件很重要的事情的話,在錯(cuò)誤請求很多的時(shí)候,404頁面顯然會(huì)浪費(fèi)很多流量。
SERVER['REQUEST_URI'], "From: chriscoyier@gmail.comn") ?>
注意: 上面的代碼可能對于小網(wǎng)站是合適的,但是并不適合大流量的網(wǎng)站。在這種情況下,將錯(cuò)誤寫入一個(gè)數(shù)據(jù)庫可能更加有效。
7. 幽默
即便是嚴(yán)肅的網(wǎng)站也可以在404也頁面上添加一些小幽默。這顯然是一個(gè)放松和做一些有趣的事情的好機(jī)會(huì)。
8. 轉(zhuǎn)向?
事實(shí)上,我對此種做法持觀望態(tài)度,但是自動(dòng)的將404頁面轉(zhuǎn)向到其它頁面是可行的?;蛟S首頁正顯示一條關(guān)于這個(gè)錯(cuò)誤的提示信息呢?或許一個(gè)包含來自于該頁面的關(guān)鍵詞的搜索頁面被傳遞?
9. 文件大小
你可能會(huì)驚訝于你的服務(wù)器序號(hào)處理如此多的錯(cuò)誤活動(dòng)。不久前的意見令我驚訝的是有那么多的對“怪異”文件的請求,比如在陌生的子目錄請求或?qū)ふ也⒉淮嬖诘碾S機(jī)文件。當(dāng)這些內(nèi)容不出現(xiàn)的時(shí)候,服務(wù)器就會(huì)加載你的404頁面。不必說,為所有的這些請求發(fā)送一個(gè)完整的頁面會(huì)增加大量的帶寬。最好的方法是與這些不好的請求做斗爭,但是你也應(yīng)該關(guān)注一下404頁面的總大小并減小它——如果帶寬是件很重要的事情的話,在錯(cuò)誤請求很多的時(shí)候,404頁面顯然會(huì)浪費(fèi)很多流量。
相關(guān)文章
jquery+css3實(shí)現(xiàn)的小狗繞地球奔跑動(dòng)態(tài)404頁面錯(cuò)誤代碼
是一段實(shí)現(xiàn)了非??蓯鄣男?dòng)物在旋轉(zhuǎn)的地球上奔跑的動(dòng)態(tài)404錯(cuò)誤頁面效果的代碼,本段代碼適應(yīng)于所有網(wǎng)站使用,有需要的朋友們可以前來下載使用2016-02-17- 是一段實(shí)現(xiàn)了非常簡單也大方的效果的網(wǎng)站404錯(cuò)誤頁面效果代碼,當(dāng)鼠標(biāo)經(jīng)過404數(shù)字時(shí),該數(shù)字會(huì)發(fā)光發(fā)亮,本段代碼適應(yīng)于所有網(wǎng)站使用,有需要的朋友們可以前來下載使用2016-02-16
基于DIV+CSS制作鱷魚眼睛會(huì)動(dòng)的404錯(cuò)誤頁面
本文給大家介紹基于div+css制作鱷魚眼睛會(huì)動(dòng)的404錯(cuò)誤頁面,代碼簡單易懂,需要的童鞋直接下載使用哦2015-11-04- 本404頁面源碼包括HTML5效果以及愛心公益代碼2013-07-24
基于jquery的火箭升空動(dòng)畫效果404錯(cuò)誤頁面
jquery實(shí)現(xiàn)的火箭動(dòng)畫效果的404錯(cuò)誤頁面,比較適合娛樂的場合使用。404就是當(dāng)頁面找不到時(shí),顯示的頁面。2010-12-12- 首先我要聲明,我是新手。我希望這篇文章對那些是個(gè)新手朋友的能有所幫助。 死鏈接就是指那些失效的鏈接,打不開的鏈接。很多站內(nèi)都有死鏈接,尤其是那些重新改版的站,2009-05-23
- 當(dāng)網(wǎng)站進(jìn)行調(diào)整、頁面進(jìn)行修改的時(shí)候,便會(huì)有網(wǎng)頁被刪除、改名或移動(dòng)位置,這時(shí)候,雖然相應(yīng)內(nèi)容的網(wǎng)頁還存在于網(wǎng)站中,但使用原來的地址訪問則無法訪問,或者由于拼寫錯(cuò)誤2009-04-02
- 相關(guān)服務(wù)器返回代碼介紹: 200 客戶端請求已成功響應(yīng); 301 永久重定向某個(gè)鏈接; 302 臨時(shí)重定向到某個(gè)鏈接; 404 訪問的頁面暫時(shí)不存在。 當(dāng)2008-12-19
jQuery+CSS3實(shí)現(xiàn)降落傘小男孩動(dòng)態(tài)背景404錯(cuò)誤頁面特效源碼
jQuery+CSS3實(shí)現(xiàn)降落傘小男孩動(dòng)態(tài)背景404錯(cuò)誤頁面特效源碼是一款從天而降的帶著降落傘小男孩,浮動(dòng)的白云和飛著的小鳥,過3秒后會(huì)自動(dòng)404跳轉(zhuǎn)到首頁。需要的朋友前來下載源2016-03-30