網(wǎng)頁(yè)設(shè)計(jì)404頁(yè)面技巧和示例

時(shí)間：2023-09-30 14:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-30 14:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)設(shè)計(jì)404頁(yè)面技巧和示例：404頁(yè)面在網(wǎng)站中是死胡同。進(jìn)入此錯(cuò)誤頁(yè)面可能會(huì)給讀者帶來(lái)不良的用戶(hù)體驗(yàn)。這可能會(huì)導(dǎo)致他們不滿(mǎn)意地返回您的首頁(yè)，或訪問(wèn)其他競(jìng)爭(zhēng)對(duì)手的網(wǎng)站，或者更糟的是，完全避開(kāi)您的網(wǎng)站。

毫無(wú)疑問(wèn)，應(yīng)該避免這些情況，但是最好的網(wǎng)站都會(huì)碰到這種情況。

因此，我們將指導(dǎo)您瀏覽404頁(yè)（它是什么以及為什么發(fā)生），如何處理它，并在最后向您展示美麗的示例，以使您對(duì)有效的404頁(yè)的外觀有很好的了解。

了解404錯(cuò)誤

首先，從我們的指南開(kāi)始，讓我們首先了解404頁(yè)面以及何時(shí)出現(xiàn)。







它是什么？

用技術(shù)術(shù)語(yǔ)來(lái)說(shuō)，404錯(cuò)誤消息表示客戶(hù)端能夠與服務(wù)器通信，但服務(wù)器無(wú)法找到所請(qǐng)求的內(nèi)容。

換句話說(shuō)，網(wǎng)站找不到訪問(wèn)者正在搜索的內(nèi)容。

什么時(shí)候發(fā)生？

在以下情況下可能會(huì)發(fā)生錯(cuò)誤404：

• 頁(yè)面已從網(wǎng)站上刪除。
• 頁(yè)面已轉(zhuǎn)移到新URL，而沒(méi)有重定向舊的URL。
• URL已重命名。
• 訪客輸入了錯(cuò)誤的URL。
• 由于維護(hù)或服務(wù)器升級(jí)，暫時(shí)無(wú)法訪問(wèn)該頁(yè)面或文件。

這些只是產(chǎn)生404消息的眾多原因中的幾個(gè)。

當(dāng)用戶(hù)登陸404頁(yè)面時(shí)，很有可能立即離開(kāi)您的網(wǎng)站。這將提高您網(wǎng)站的跳出率并影響您的搜索排名，更不用說(shuō)失去潛在的常規(guī)訪問(wèn)者了。網(wǎng)頁(yè)設(shè)計(jì)404頁(yè)面技巧和示例

創(chuàng)建吸引人的自定義404頁(yè)面。

作為設(shè)計(jì)師，這是您最好的地方。您可以減輕訪問(wèn)者的不良用戶(hù)體驗(yàn)，并幫助他們到達(dá)想要去的地方。

但是在探討使自定義404頁(yè)面有效的原因之前，我們首先要討論為什么首先需要擁有它。

它為什么如此重要？

1.它可以為不高興的訪客提供幫助。
在所有原因中，這是最重要的。

當(dāng)然，您在打開(kāi)網(wǎng)站鏈接時(shí)會(huì)經(jīng)歷一些有趣的事情，然后繁榮發(fā)展，出現(xiàn)404錯(cuò)誤消息，告訴您它不再可用。

還記得這種感覺(jué)嗎？這就是您的訪問(wèn)者在您的網(wǎng)站上體驗(yàn)到時(shí)的感受。這就是為什么擁有一個(gè)自定義的404頁(yè)面很重要，它可以幫助他們到達(dá)想要去的地方，否則他們將很快離開(kāi)您的網(wǎng)站。

2.這是一個(gè)展示您網(wǎng)站個(gè)性的機(jī)會(huì)。
想象一下，您的訪客將被帶到僅包含此圖像的頁(yè)面。它不僅顯示出枯燥乏味的設(shè)計(jì)，而且還肯定會(huì)讓他們感到困惑，失望或明顯惱火。

您可以通過(guò)擁有自己的自定義404頁(yè)面來(lái)避免或至少緩解這種情況。它將告訴您有關(guān)您網(wǎng)站的所有內(nèi)容的線索。

我們創(chuàng)建自定義404頁(yè)面的主要目的是防止訪問(wèn)者離開(kāi)您的網(wǎng)站，或者至少減輕他們的煩惱和不太好的體驗(yàn)。

參與自定義404頁(yè)面的基本元素。

1.友好的錯(cuò)誤信息

您不希望訪問(wèn)者看到一個(gè)充滿(mǎn)術(shù)語(yǔ)的頁(yè)面，這些術(shù)語(yǔ)很難理解。這會(huì)使他們感到困惑，甚至更恐慌，他們將立即轉(zhuǎn)到瀏覽器的“后退”按鈕。







取而代之的是傳達(dá)具有人情味的信息，例如“哦，哦”，“贊”等。您甚至可以為諸如“抱歉”之類(lèi)的道歉詞表示不好的體驗(yàn)。

帶有輕松消息的404頁(yè)示例：

RPZ

2.搜索欄

您的搜索欄只會(huì)為訪問(wèn)者提供一個(gè)選擇，使其可以繼續(xù)瀏覽您的網(wǎng)站（查找他們正在尋找的內(nèi)容），而不用離開(kāi)他們。它必須位于容易看到的地方，并添加一條鼓勵(lì)他們使用的消息。

帶搜索框的404頁(yè)面示例：

MailChimp

3.其他有用的鏈接

您不希望訪問(wèn)者在404頁(yè)登陸后離開(kāi)您的網(wǎng)站嗎？將它們指向您網(wǎng)站中的其他位置。您的主頁(yè)，關(guān)于頁(yè)面，投資組合，受歡迎/最近的帖子和檔案館是幫助他們重新吸引您的網(wǎng)站的良好開(kāi)端。

以簡(jiǎn)潔明了的方式添加這些鏈接，以便可以使用一些有用的鏈接。

帶有有用鏈接的404頁(yè)面示例：

WUFOO

4.聯(lián)系方式

另外，通過(guò)在404頁(yè)面上添加聯(lián)系人鏈接，使訪問(wèn)者與您取得聯(lián)系。他們可以在此處通過(guò)斷開(kāi)的鏈接提交報(bào)告，這對(duì)您很有幫助，因?yàn)槟梢灾绬?wèn)題所在并采取措施。

這也可以幫助他們傳達(dá)他們的擔(dān)憂和投訴。在某種程度上，這可能是他們從不愉快的經(jīng)歷中釋放自己的感受的出口。

帶有聯(lián)系/報(bào)告選項(xiàng)的404頁(yè)示例：

視力

5.與您的網(wǎng)站相似

對(duì)于大多數(shù)用戶(hù)而言，默認(rèn)的404消息是通用，丑陋且令人不安的。僅此一項(xiàng)就足以為您的站點(diǎn)創(chuàng)建自定義錯(cuò)誤頁(yè)面。

但是，這樣做時(shí)，請(qǐng)確保其設(shè)計(jì)仍看起來(lái)像仍是網(wǎng)站的一部分。這將減輕他們的困惑和沮喪。

它應(yīng)該包含相同的顏色主題，徽標(biāo)和網(wǎng)站的主導(dǎo)航，以使他們感到自己仍在頁(yè)面上，而不是扔到404 void的白色世界中。

類(lèi)似于其網(wǎng)站的404頁(yè)示例：

DeviantArt

404頁(yè)面創(chuàng)意示例

現(xiàn)在您已經(jīng)掌握了熟練的404自定義頁(yè)面，現(xiàn)在該展示一些具有驚人美學(xué)設(shè)計(jì)的創(chuàng)意示例了。欣賞并熱衷于每個(gè)示例使用什么元素。

http://Universe.com

宇宙是事件的社交市場(chǎng)。它的404頁(yè)設(shè)計(jì)有各種顏色的氣球嬉戲的背景圖案。這使錯(cuò)誤頁(yè)面不那么令人生畏并且更易于處理。它使用輕松的消息，并提供指向其支持中心和主頁(yè)的鏈接。而且，它的徽標(biāo)仍在頂部中心部分。








Agens

阿讓斯（Agens）的設(shè)計(jì)顯示一名宇航員在太空中丟失了“ 404”標(biāo)志。它仍然保留其標(biāo)題欄，其中包含其徽標(biāo)和其他導(dǎo)航鏈接。它還為訪問(wèn)者提供了檢出其其他項(xiàng)目的選項(xiàng)。








http://Fortysevenmedia.com

這里的47家媒體向我們展示了一個(gè)簡(jiǎn)單的設(shè)計(jì)也可以使404頁(yè)的威脅更少?！?404”中的版式設(shè)計(jì)類(lèi)似于其網(wǎng)站的標(biāo)準(zhǔn)設(shè)計(jì)-呈橙色填充的呈侵蝕性的低劣質(zhì)感，使其看起來(lái)像是網(wǎng)站的一部分。它還保留其導(dǎo)航欄，并包括指向其產(chǎn)品組合，關(guān)于頁(yè)面和博客的鏈接。








404

在這里，您將獲得一包包含各種背景動(dòng)畫(huà)的404模板。它包含一條友好而道歉的消息，后跟一些選項(xiàng)，供您返回使用搜索框的首頁(yè)。








http://Fork-cms.com

Fork是使錯(cuò)誤頁(yè)面與網(wǎng)站設(shè)計(jì)相似的一個(gè)很好的例子。它通過(guò)使用網(wǎng)站的配色方案，背景圖片和吉祥物來(lái)完全使用其品牌。








http://Us.blizzard.com

暴雪幽默地顯示一個(gè)破碎的屏幕，作為對(duì)破碎鏈接的隱喻。盡管導(dǎo)航欄似乎出現(xiàn)故障，但仍可以正常使用。








動(dòng)畫(huà)動(dòng)物

此高級(jí)模板包以純CSS內(nèi)置，因此加載速度非?？?。它包括2種具有獨(dú)特有趣的懸停動(dòng)畫(huà)的動(dòng)物（狗和貓頭鷹）。

總結(jié)

在內(nèi)容很多的站點(diǎn)中，幾乎不可能避免鏈接斷開(kāi)或丟失。但這并不意味著我們對(duì)此無(wú)能為力。

檢查上面我們共享的元素和示例，以幫助您的訪問(wèn)者避免在遇到404頁(yè)時(shí)出現(xiàn)死胡同。通過(guò)為他們提供愉悅的美學(xué)設(shè)計(jì)和其他選擇來(lái)幫助他們找到所需的東西，從而扭轉(zhuǎn)局面。

想要學(xué)習(xí)或者提升設(shè)計(jì)可以來(lái)AAA教育。

相關(guān)推薦：