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