



















#p#副標(biāo)題#e#













#p#副標(biāo)題#e#










































什么樣的404錯誤頁面算好?自然要讓人印象深刻,不能看見就煩。同時,其設(shè)計過程也可以充滿樂趣。那么,你應(yīng)該怎么做才能為自己的網(wǎng)站設(shè)計出優(yōu)秀的404頁面呢?下面是一些小建議和技巧,以及一些不錯的范例。
什么是404錯誤頁面?
當(dāng)網(wǎng)站訪客進(jìn)入到不存在的頁面時,就會顯示404錯誤頁面。其原因有可能是頁面被移除、服務(wù)器或網(wǎng)絡(luò)連接失敗、用戶點擊了壞鏈接或輸入了錯誤的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頁面進(jìn)行整體設(shè)計時,有兩個選擇:普通的404頁面或自定義404頁面。普通的頁面只是簡單的甩出上面的信息,不涉及設(shè)計內(nèi)容。而自定義頁面則需要你進(jìn)行設(shè)計并提供選項。要進(jìn)行設(shè)計,必須先獲得進(jìn)入主服務(wù)器的權(quán)限。(關(guān)于這一點我們就不深入講解了,不過你可以通過A List Apart進(jìn)行了解。)
一個優(yōu)秀的404錯誤頁面應(yīng)當(dāng)在用戶不慎進(jìn)入時告訴他們應(yīng)當(dāng)如何進(jìn)行接下來的操作。其中應(yīng)當(dāng)提供有用的信息來幫助訪客不離開你的網(wǎng)站并進(jìn)而找到自己所需要的信息。(如果頁面本身設(shè)計精美就更好了。)
基本必備信息
為了保證充分有效,404錯誤頁面從本質(zhì)上說應(yīng)當(dāng)簡單一些。它應(yīng)當(dāng)說明用戶遇到了錯誤(顯而易見),以及可以采取哪些辦法離開此頁面。
而大堆的技術(shù)術(shù)語是不應(yīng)當(dāng)出現(xiàn)在404頁面上的。(否則豈不會嚇跑用戶。)實際上,連“404錯誤”這個大標(biāo)題都不應(yīng)該出現(xiàn)在頁面上,因為很多用戶完全不知道這玩意是什么意思。你應(yīng)當(dāng)做的是展示更有意義的信息,例如“沒有找到頁面”。
另外還有一些重要信息是404頁面所必不可少的。總而言之,設(shè)計的關(guān)鍵是讓用戶在頁面出錯時繼續(xù)點擊瀏覽,而不是關(guān)閉頁面。
· 顯眼的標(biāo)題或文字向用戶說明出現(xiàn)當(dāng)前頁面的原因。看到自己打開的網(wǎng)頁和預(yù)期的不是一回事是很惱人的。一定要讓用戶知道他們打開的頁面不正確,但所登陸的網(wǎng)站是沒問題的。
· 搜索。在404錯誤頁面上提供與網(wǎng)站其他部分相同(且位置一致)的搜索功能。這樣一來用戶就能自己查找要訪問的頁面。
· 通往主頁和網(wǎng)站地圖的鏈接。這個設(shè)計要素中可以包含與網(wǎng)站其他部分搭配的標(biāo)題或腳注。
· 其他簡化信息。建議刪去復(fù)雜的導(dǎo)航功能。如果用戶進(jìn)入到錯誤頁面,你只需為其提供簡單幾個能夠?qū)蛘_位置的選項。如果選項過多,反而會讓用戶更加頭疼或者困惑。
· 加入顯眼的操作提示。告訴用戶下一步如何操作。
讓404頁面具有用途
在考慮404頁面時,設(shè)計流程中的一個重要部分就是用途。加入能夠讓頁面既好看又有用的功能。
對于自定義404頁面中應(yīng)當(dāng)包含哪些信息,Google的網(wǎng)站管理員工具中提供了一系列很有用的建議。這些建議包括:
· 明確告知用戶其所尋找的頁面無法找到。語言應(yīng)當(dāng)友善、誘人。
· 404錯誤頁面應(yīng)當(dāng)與網(wǎng)站其他部分的外觀和感覺相互匹配。
· 考慮在其中添加通往熱門文章或帖子的鏈接。
· 為用戶提供報告壞鏈接的渠道。
· 讓網(wǎng)絡(luò)服務(wù)器在收到對丟失頁面的請求時返回實際的404 HTTP狀態(tài)代碼,以免其顯示在搜索結(jié)果中。
· 使用Enhance 404工具在自定義404頁面中嵌入搜索框。
· 使用Change of Address工具將網(wǎng)站的動作告知Google。
除了上述之外,還有一條給設(shè)計師們的提示:發(fā)揮創(chuàng)意。404頁面,只要技術(shù)允許,不一定是很無聊無趣的。
設(shè)計具有目的性的404頁面
在考慮404錯誤頁面的設(shè)計時,首先應(yīng)思考其與網(wǎng)站其他部分直接的聯(lián)系。你網(wǎng)站整體設(shè)計的氛圍和基調(diào)是什么?404頁面如何才能與其搭配。
優(yōu)秀的錯誤頁面應(yīng)當(dāng)能夠與其所處的網(wǎng)站無縫銜接。如果你的網(wǎng)站采用了明快幽默的基調(diào),則404頁面也應(yīng)當(dāng)如此。另外,在顏色和圖形使用上也應(yīng)當(dāng)與網(wǎng)站一致。但在設(shè)計過程中,一定要小心謹(jǐn)慎,不要把進(jìn)入錯誤頁面的責(zé)任歸咎到用戶頭上。(這種情況發(fā)生的頻率絕對超出你的想象。)
錯誤頁面的設(shè)計應(yīng)當(dāng)是整體設(shè)計方案中的一個組成部分。
· 保持設(shè)計的一致性。使用與網(wǎng)站其他頁面相同的顏色、字體和圖形風(fēng)格。
· 保留品牌標(biāo)識。使用相同的logo、標(biāo)題和腳注處理方式能夠幫助用戶識別你的網(wǎng)站。
· 保持視覺上的簡約。在錯誤頁面上,少就是多。
· 不要讓用戶滾動鼠標(biāo)。設(shè)計應(yīng)該以一屏為限。
· 不要使用太多噱頭。雖然與整體網(wǎng)站和品牌保持相同的基調(diào)和感覺是個好主意,但是過多的內(nèi)容反而會讓用戶忘記自己本來要找的東西。
· 表示歉意。用戶進(jìn)入錯誤頁面時你道個歉絕對沒問題。
· 如果你的網(wǎng)站需要登陸,可以添加登陸功能。(錯誤是否因為用戶需要登陸而造成?)
· 發(fā)揮創(chuàng)意,或者表現(xiàn)趣味。不要忘記先對頁面進(jìn)行測試。保證所有用戶都能理解你的設(shè)計。
· 如果你使用了“404錯誤”這句話,則應(yīng)當(dāng)再加一行文字告訴用戶其意思是什么,或者他們下一步應(yīng)當(dāng)如何操作。
12個優(yōu)秀范例
碰到一個優(yōu)秀的404錯誤頁面時的感覺是很特殊的。它能夠減緩錯誤鏈接所帶來的惱怒。下面的12個頁面一定能讓你流連忘返。
Deviant Art
Gig Masters
iFolderLinks
Lego
LimpFish
Magnt
Mattel
ModCloth
NPR
Steve Lambert
Titleist
Tobi
最后
把一個因為錯誤而形成的頁面設(shè)計的有趣而有創(chuàng)意很難,但不是不可能。設(shè)計出好的404頁面需要你結(jié)合簡約、實用,同時也少不了設(shè)計天分。
對于404錯誤頁面的設(shè)計,我還有什么遺漏嗎?你是否曾經(jīng)打造出過優(yōu)秀的404頁面?請給我們留言^^
原文地址:designshack
]]>#p#副標(biāo)題#e#
]]>



4. Audiko


6. I Love Icons

7. Molome


9. Week done

10. Centresource

#p#副標(biāo)題#e#
11. Jackrabbit

12. Twurn

13. OBJ + ADJ

14. Vasa Museet

15. Agens

16. MedicalMissions

17. Good Dog Design

18. Bluegg

19. Specialized

20. Carnation Group

#p#副標(biāo)題#e#
21. William Csete

22. The Wall

23. Iamtiago

24. Pizza Milano

25. Pulp Fingers

26. H-ART

27. Habrahabr

28. Henrik Hedegaard

29. We are anonymous

30. Bored Panda

#p#副標(biāo)題#e#
31. A List Apart

32. iStockPhoto

33. Red Bilby

34. distilled

35. ff0000

36. Focus Lab

37. ideapaint

38. Stickermule

39. Dribbble


#p#副標(biāo)題#e#
41. Humaan

42. Blogalization

43. Okostroy

44. Fastcentrik

45. The Fontain

46. Netico

47. TUTS Plus

48. Atlassian

49. Shamballa Jewels

50. DotSilo








Looks Like You’ve Lost Your Way





#p#副標(biāo)題#e#




Please Proceed to the Main Level


404: on noes, there’s nothing in here





The Wrong Kind of Breaking News

#p#副標(biāo)題#e#

The Universe You Are Looking For Doesn’t Exist











#p#副標(biāo)題#e#














JumpingJackRabbit.com
WebDesignAlley.com
RetardZone.com
JuicyGraphics.net
AirGid.com
TemplatesFreelance.com
GreatDirectories.org
MarkLawrenceDesign.com
Mint.com
IRDB.com
AnnualDesignAwards.com
#p#副標(biāo)題#e#
WebBuildersGuide.com
FocusLabllc.com
Fastcentrik.cz
Frontend2011.com
MonstersLab.be
Peapod.ca
Giraffe.net
Madebyshape.co.uk
]]>
#p#副標(biāo)題#e#
#p#副標(biāo)題#e#
#p#副標(biāo)題#e#
]]>
#p#副標(biāo)題#e#
#p#副標(biāo)題#e#
#p#副標(biāo)題#e#
]]>