“未找到404頁面”是網站訪問者不應該看到的一條消息。

然而，人們確實會時不時地登陸404頁，不幸的是，人們自然會對此感到不安。那是因為并非所有404頁面都經過精心設計。產品團隊通常會花很多精力來完善活動頁面，而404頁面則被視為事后的想法，因為它們不屬于幸福路徑，即沒有錯誤條件的場景。但是設計公司深知404頁面的設計方式會顯著影響用戶對網站的感受。用愛創(chuàng)建的頁面可以給訪問者留下積極的印象，并最大限度地減少離開網站的機會。

本文將討論什么是404頁面，為什么自定義404頁面可以使網站設計受益，并提供有關如何設計404頁面的十個實用技巧。

什么是404頁面？

首先，404是什么意思？從技術角度來看，404是一個HTTP錯誤消息代碼，當服務器無法找到用戶請求的內容時，Web服務器發(fā)送給客戶端（您的Web瀏覽器）。簡單來說，404頁面是網絡訪問者在單擊損壞的鏈接時看到的錯誤頁面。

鏈接斷開的主要原因有以下三個：

內容不再可供訪問者使用。 該公司從網站上刪除了該內容，但該鏈接仍可在百度搜索結果中找到。

網站內容版主或Web開發(fā)人員添加了不正確的網站鏈接。 例如，版主輸入錯誤的URL地址或將頁面移動到不同的URL，但忘記添加永久重定向。

網站訪問者錯誤地輸入了頁面的URL。 打字是容易出錯的活動。對于移動用戶來說尤其如此，因為在移動設備的小屏幕上輸入數(shù)據(jù)時更容易出錯。

404頁面有什么好處？

在完美的世界中，網站訪問者永遠不會看到404頁面。但在現(xiàn)實世界中，網站訪問者和網站版主都會犯錯誤，幾乎不可能避免顯示404頁面。設計不佳的404頁面會使訪問者感到沮喪，而設計良好的404頁面可以將沮喪的時刻變成喜悅的時刻。

以下是一個好的404頁面設計可以帶來的一些好處：

用戶體驗的好處。 精心設計的404頁面不會讓人覺得是死胡同；這是一個幫助訪問者決定下一步可以做什么的頁面。例如，它可以提供一些高級頁面，人們可以根據(jù)他們的目標訪問這些頁面。

視覺上的好處。 漂亮的視覺設計可以給訪問者留下積極的印象。事實上，美學-可用性效應表明，當用戶發(fā)現(xiàn)一個視覺上吸引人的界面時，他們更能容忍輕微的可用性問題。

營銷效益。 好的設計可以增強您的品牌形象。最好的404頁面可以引導訪問者做出正確的決定，并成為巨大的轉化機會。

404頁面包含哪些內容？

每個網頁都是從基本構建塊（頁眉、正文和頁腳）創(chuàng)建的。為了使404頁面看起來一致，您可以使頁眉和頁腳與任何其他網頁上的相同。例如，您應該將站點的徽標和頂級菜單放在標題中。頁腳應包含關鍵導航選項。正文應包含與404頁面相關的內容。

顯示“找不到頁面”的副本是您可以在404頁面上顯示的絕對最低限度。如果您的網站包含大量內容，您還可以提供搜索欄來幫助用戶找到他們正在尋找的內容。例如，Apple為其404頁面使用了相當標準的設計——文本部分和搜索欄。

通過添加插圖或照片可以使頁面更具視覺吸引力。視覺可以比簡單的文字更快地傳達主要思想。理想情況下，短信和插圖應該相互加強，幫助訪問者了解正在發(fā)生的事情。樂高的404頁面是將出色的視覺效果與精美的副本相結合的絕佳示例。

如何設計出色的404頁面：帶示例的最佳實踐

那么，如何設計一個出色的404頁面呢？“保持簡單”是構建404頁面時要記住的最重要的規(guī)則。僅僅因為您想創(chuàng)建自定義404頁面并不意味著您必須創(chuàng)建完全創(chuàng)新的東西。404頁面的主要目的是讓用戶清楚地知道他們在哪里以及他們下一步可以做什么。這就是為什么在設計頁面時建議遵循極簡設計原則——更少的文字和更少的視覺細節(jié)——以使其對普通用戶更有效。

404頁面的第二個目的是通過讓訪問者參與互動來防止訪問者放棄網站。根據(jù)您網站的性質，是否可以通過向頁面添加功能性或裝飾性元素來實現(xiàn)目標。

以下是改進404頁面設計的十個技巧：

1.不要在頁面上添加過多的內容

我們知道網絡上的人不閱讀，他們掃描。此規(guī)則適用于所有網頁，包括404。訪問者不應該閱讀404頁面上的文本，他們應該瀏覽頁面并了解正在發(fā)生的事情。這就是為什么你應該避免寫長篇文章的原因。相反，讓每一個字都有意義，直奔主題。例如，ZhenyaRynzuk的404頁面只有一個句子（404錯誤）和一個指向主頁的導航選項（帶我回來）

2.避免通用的404頁面消息

當談到為404頁面編寫錯誤消息時，僅僅寫一個清晰簡潔的副本是不夠的。您還需要確保消息的語氣正確。像“404:PageNotFound”這樣的通用消息聽起來很冷酷和機械化，不會對訪問者的情緒產生積極影響。最好使用更人性化的語氣，例如“糟糕！此頁面不存在”。Hugoware的404消息更進一步——他們說“404。Page被卷入了漩渦！”并且……從字面上展示每個頁面元素是如何進入漩渦的。

3.保持視覺一致性

視覺一致性是良好設計不可或缺的屬性。相同的視覺語言應適用于所有產品部分，包括404頁面。通過這樣做，您將為您的受眾創(chuàng)造熟悉的體驗，并幫助他們更輕松地瀏覽您的網站。

404頁面應該與網站的其他品牌完美契合，無論是在語言還是樣式方面。您需要使用與網站上所有其他頁面相同的視覺屬性（顏色、字體、間距）。請注意電子郵件自動化服務Mailchimp如何在其404頁面上保持視覺一致性。顯示“MailchimpHome”的號召性用語按鈕與右上角的“免費注冊”具有相同的樣式屬性。

4.使頁面功能化

404頁面的主要目的是指導訪問者下一步可以做什么，因此提供下一步（或多個步驟）至關重要。根據(jù)您網站的性質，您可以提供一個鏈接（即“轉到主頁”）、幾個指向您網站關鍵頁面的鏈接（即，對于公司網站，您可以添加“主頁”、“產品”和“關于我們”），甚至添加搜索欄（即，用于電子商務網站）。在其404頁面上，Airbnb提供了一些代表網站主要功能和區(qū)域的關鍵方向。

不要過度提供太多選擇，這一點至關重要。提供太多選擇會使頁面在視覺上的吸引力降低，并使訪問者更難決定他們接下來要做什么。這種現(xiàn)象被稱為分析麻痹。使用您的分析數(shù)據(jù)來了解您網站的哪些部分對訪問者最重要，選擇最重要的部分（根據(jù)經驗，最多5個）并將它們添加到此頁面上。

5.添加相關圖像

一張圖片勝過千言萬語。使用相關圖像是與觀眾進行視覺交流并表現(xiàn)出對細節(jié)的高度關注的好方法。正確選擇的插圖、照片或視頻可以幫助您吸引興趣并與您的觀眾建立情感聯(lián)系，并鼓勵他們留在您的網站上。音樂流媒體服務Spotify在其404頁面上使用非常相關的圖像。黑膠唱片的插圖是一個很好的視覺隱喻，對于這項服務的音樂愛好者來說是很清楚的。

如果您想在404頁面上使用圖像，則需要確保選擇大多數(shù)訪問者與您的品牌相關聯(lián)的圖像。訪問者應該更容易解碼含義。例如，如果您銷售汽車，則可以在404頁面上使用汽車圖像。

6.使用大量的空白

由于404頁面的內容不多，因此可以使用空格讓內容呼吸。您在單個元素周圍添加的空白越多，它將獲得更多的用戶關注。在CUSP404頁面上可以找到一個使用大量空白的非常有趣的示例。一個簡單的黑白頁面的中心是一個偽3D球體，它隨著鼠標光標的移動而旋轉。對比度和空白協(xié)同工作，將整個用戶的注意力引導到關鍵信息上。

重要的是要記住，您的頁面布局在任何屏幕和分辨率上都應該看起來同樣出色。EditorX讓您可以完全控制單個元素的空白。您可以為每個屏幕和分辨率定義自定義斷點并優(yōu)化內容。

7.利用您的品牌屬性

問問自己，“我可以直觀地展示我的公司所做的事情嗎？”如果答案是肯定的，那么恭喜你——你也應該能夠找到獨特的方式來直觀地表達其404頁面。MyriadVideo是一家專門從事視頻制作的創(chuàng)意機構，它使用相當常見的圖像來模仿曾經出現(xiàn)在舊電視上的經典彩條。大多數(shù)電視用戶都熟悉此信號，并且可以輕松了解公司的工作領域（視頻制作）。

8.引入創(chuàng)意視覺效果

運動效果可以使頁面更加動態(tài)和生動。原創(chuàng)動畫可以展示您的工藝水平并讓您的訪客感到驚訝。下面你可以看到來自軟件開發(fā)者AndreaReni個人網站的404頁面。頁面中心的動畫元素象征著故障。當您移動光標時，此故障會移動，從而為訪問者創(chuàng)建可愛的視覺反饋。

向您的網站添加動態(tài)效果很容易。EditorX提供了多種可以在您的網站上使用的效果，包括移動、變換和顏色變化。

9.添加健康劑量的幽默

添加幽默是在個人層面上與觀眾建立聯(lián)系的最佳方式。一個有趣的404頁面可以讓訪問者發(fā)笑并在您的網站上停留更長時間。幽默可以是任何東西——從您在頁面上開的一個笑話到您邀請訪問者參與的有趣游戲。來自深圳的網站設計公司設計發(fā)現(xiàn)了一種非常不尋常的方式來將幽默融入404頁面。一旦訪問者登陸404頁面，他們就會參與一個有趣的游戲，他們需要保存從屏幕頂部掉下來的旅鼠。這個聰明的設計決策增加了另一層興趣，并使網站本身更加人性化和吸引人——即使用戶偶然登陸。

同時，幽默并不是一件容易的事。如果您想為您的網站添加幽默感，請確保您的笑話能引起用戶的共鳴。訪客不應被您的笑話冒犯。了解有關您的目標受眾的更多信息，并使用這些信息來設計適合他們的笑話。

10.添加意想不到但有用的功能

在404頁面上添加一個意想不到但非常有用的功能可以將一時的惱怒轉變?yōu)楦吲d的時刻。設計是一家專業(yè)的網站設計公司，其使用404頁面使用最小布局，為用戶提供所需的基本信息，但它也允許訪問者使用滑塊生成HEX顏色。對于設計行業(yè)的許多人來說，這是一個簡潔而有益的功能。

化失敗為機遇

設計在于細節(jié)。您越完善個人設計決策，您的用戶將獲得更好的體驗。錯誤頁面（包括404頁面）的質量可以很好地說明您對細節(jié)的關注。設計用精心設計的404頁面設計是產品創(chuàng)建者真正關心他們的用戶并希望為他們提供最佳體驗的主要標志。