您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 視覺(jué)設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

如何打造優(yōu)秀的404錯(cuò)誤頁(yè)面

沒(méi)人會(huì)想到網(wǎng)站訪客會(huì)在錯(cuò)誤頁(yè)面上停留,但實(shí)際上這種情況確實(shí)存在。特別是在404錯(cuò)誤頁(yè)面上,訪客會(huì)經(jīng)常逗留。所以,你可以將404錯(cuò)誤頁(yè)面設(shè)計(jì)的更加吸引用戶,而不應(yīng)讓用戶迫不及待離開(kāi)。

什么樣的404錯(cuò)誤頁(yè)面算好?自然要讓人印象深刻,不能看見(jiàn)就煩。同時(shí),其設(shè)計(jì)過(guò)程也可以充滿樂(lè)趣。
先看下之前圖趣分享過(guò)的404網(wǎng)頁(yè)設(shè)計(jì)案例:
1.網(wǎng)易的404公益廣告頁(yè)面
2.20個(gè)很酷的404錯(cuò)誤頁(yè)面   
3.404頁(yè)面精彩設(shè)計(jì)賞析

那么,你應(yīng)該怎么做才能為自己的網(wǎng)站設(shè)計(jì)出優(yōu)秀的404頁(yè)面呢?下面是一些小建議和技巧,以及一些不錯(cuò)的范例。

什么是404錯(cuò)誤頁(yè)面?

當(dāng)網(wǎng)站訪客進(jìn)入到不存在的頁(yè)面時(shí),就會(huì)顯示404錯(cuò)誤頁(yè)面。其原因有可能是頁(yè)面被移除、服務(wù)器或網(wǎng)絡(luò)連接失敗、用戶點(diǎn)擊了壞鏈接或輸入了錯(cuò)誤的URL。

通常來(lái)說(shuō),404錯(cuò)誤頁(yè)面會(huì)顯示下列信息之一:

    404 Not Found

    HTTP 404 Not Found

    404 Error

    The page cannot be found

    The requested URL was not found on this server

在對(duì)404頁(yè)面進(jìn)行整體設(shè)計(jì)時(shí),有兩個(gè)選擇:普通的404頁(yè)面或自定義404頁(yè)面。普通的頁(yè)面只是簡(jiǎn)單的甩出上面的信息,不涉及設(shè)計(jì)內(nèi)容。而自定義頁(yè)面則需要你進(jìn)行設(shè)計(jì)并提供選項(xiàng)。要進(jìn)行設(shè)計(jì),必須先獲得進(jìn)入主服務(wù)器的權(quán)限。(關(guān)于這一點(diǎn)我們就不深入講解了,不過(guò)你可以通過(guò)A List Apart進(jìn)行了解。)

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

基本必備信息

為了保證充分有效,404錯(cuò)誤頁(yè)面從本質(zhì)上說(shuō)應(yīng)當(dāng)簡(jiǎn)單一些。它應(yīng)當(dāng)說(shuō)明用戶遇到了錯(cuò)誤(顯而易見(jiàn)),以及可以采取哪些辦法離開(kāi)此頁(yè)面。

而大堆的技術(shù)術(shù)語(yǔ)是不應(yīng)當(dāng)出現(xiàn)在404頁(yè)面上的。(否則豈不會(huì)嚇跑用戶。)實(shí)際上,連“404錯(cuò)誤”這個(gè)大標(biāo)題都不應(yīng)該出現(xiàn)在頁(yè)面上,因?yàn)楹芏嘤脩敉耆恢肋@玩意是什么意思。你應(yīng)當(dāng)做的是展示更有意義的信息,例如“沒(méi)有找到頁(yè)面”。

另外還有一些重要信息是404頁(yè)面所必不可少的??偠灾?,設(shè)計(jì)的關(guān)鍵是讓用戶在頁(yè)面出錯(cuò)時(shí)繼續(xù)點(diǎn)擊瀏覽,而不是關(guān)閉頁(yè)面。

    顯眼的標(biāo)題或文字向用戶說(shuō)明出現(xiàn)當(dāng)前頁(yè)面的原因。看到自己打開(kāi)的網(wǎng)頁(yè)和預(yù)期的不是一回事是很惱人的。一定要讓用戶知道他們打開(kāi)的頁(yè)面不正確,但所登陸的網(wǎng)站是沒(méi)問(wèn)題的。

    搜索。在404錯(cuò)誤頁(yè)面上提供與網(wǎng)站其他部分相同(且位置一致)的搜索功能。這樣一來(lái)用戶就能自己查找要訪問(wèn)的頁(yè)面。

    通往主頁(yè)和網(wǎng)站地圖的鏈接。這個(gè)設(shè)計(jì)要素中可以包含與網(wǎng)站其他部分搭配的標(biāo)題或腳注。

    其他簡(jiǎn)化信息。建議刪去復(fù)雜的導(dǎo)航功能。如果用戶進(jìn)入到錯(cuò)誤頁(yè)面,你只需為其提供簡(jiǎn)單幾個(gè)能夠?qū)蛘_位置的選項(xiàng)。如果選項(xiàng)過(guò)多,反而會(huì)讓用戶更加頭疼或者困惑。

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

讓404頁(yè)面具有用途

在考慮404頁(yè)面時(shí),設(shè)計(jì)流程中的一個(gè)重要部分就是用途。加入能夠讓頁(yè)面既好看又有用的功能。

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

    明確告知用戶其所尋找的頁(yè)面無(wú)法找到。語(yǔ)言應(yīng)當(dāng)友善、誘人。

    404錯(cuò)誤頁(yè)面應(yīng)當(dāng)與網(wǎng)站其他部分的外觀和感覺(jué)相互匹配。

    考慮在其中添加通往熱門文章或帖子的鏈接。

    為用戶提供報(bào)告壞鏈接的渠道。

    讓網(wǎng)絡(luò)服務(wù)器在收到對(duì)丟失頁(yè)面的請(qǐng)求時(shí)返回實(shí)際的404 HTTP狀態(tài)代碼,以免其顯示在搜索結(jié)果中。

    使用Enhance 404工具在自定義404頁(yè)面中嵌入搜索框。

    使用Change of Address工具將網(wǎng)站的動(dòng)作告知Google。

除了上述之外,還有一條給設(shè)計(jì)師們的提示:發(fā)揮創(chuàng)意。404頁(yè)面,只要技術(shù)允許,不一定是很無(wú)聊無(wú)趣的。

設(shè)計(jì)具有目的性的404頁(yè)面

在考慮404錯(cuò)誤頁(yè)面的設(shè)計(jì)時(shí),首先應(yīng)思考其與網(wǎng)站其他部分直接的聯(lián)系。你網(wǎng)站整體設(shè)計(jì)的氛圍和基調(diào)是什么?404頁(yè)面如何才能與其搭配。

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

錯(cuò)誤頁(yè)面的設(shè)計(jì)應(yīng)當(dāng)是整體設(shè)計(jì)方案中的一個(gè)組成部分。

    保持設(shè)計(jì)的一致性。使用與網(wǎng)站其他頁(yè)面相同的顏色、字體和圖形風(fēng)格。

    保留品牌標(biāo)識(shí)。使用相同的logo、標(biāo)題和腳注處理方式能夠幫助用戶識(shí)別你的網(wǎng)站。

    保持視覺(jué)上的簡(jiǎn)約。在錯(cuò)誤頁(yè)面上,少就是多。

    不要讓用戶滾動(dòng)鼠標(biāo)。設(shè)計(jì)應(yīng)該以一屏為限。

    不要使用太多噱頭。雖然與整體網(wǎng)站和品牌保持相同的基調(diào)和感覺(jué)是個(gè)好主意,但是過(guò)多的內(nèi)容反而會(huì)讓用戶忘記自己本來(lái)要找的東西。

    表示歉意。用戶進(jìn)入錯(cuò)誤頁(yè)面時(shí)你道個(gè)歉絕對(duì)沒(méi)問(wèn)題。

    如果你的網(wǎng)站需要登陸,可以添加登陸功能。(錯(cuò)誤是否因?yàn)橛脩粜枰顷懚斐桑浚?/p>

    發(fā)揮創(chuàng)意,或者表現(xiàn)趣味。不要忘記先對(duì)頁(yè)面進(jìn)行測(cè)試。保證所有用戶都能理解你的設(shè)計(jì)。

    如果你使用了“404錯(cuò)誤”這句話,則應(yīng)當(dāng)再加一行文字告訴用戶其意思是什么,或者他們下一步應(yīng)當(dāng)如何操作。

12個(gè)優(yōu)秀范例

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

Deviant Art

 

Gig Masters

 

iFolderLinks

 

Lego

 

LimpFish

 

Magnt

 

Mattel

 

ModCloth

 

NPR

 

Steve Lambert

 

Titleist

 

Tobi

 

最后

把一個(gè)因?yàn)殄e(cuò)誤而形成的頁(yè)面設(shè)計(jì)的有趣而有創(chuàng)意很難,但不是不可能。設(shè)計(jì)出好的404頁(yè)面需要你結(jié)合簡(jiǎn)約、實(shí)用,同時(shí)也少不了設(shè)計(jì)天分。

對(duì)于404錯(cuò)誤頁(yè)面的設(shè)計(jì),我還有什么遺漏嗎?你是否曾經(jīng)打造出過(guò)優(yōu)秀的404頁(yè)面?請(qǐng)給我們留言^^

 

原文地址:designshack

[教程作者:designshack]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/ui2618.html
主色與副色——迅速提升色彩搭配能力的思維
暢游VC:游戲視覺(jué)設(shè)計(jì)與用戶體驗(yàn)
圖趣網(wǎng)微信
建議反饋
×