網站設計 (Website Design)

There is a thin line between engaging and enraging when it comes to a site’s 404 error page. They are the most neglected of any website page. The main reason being, visitors are not supposed to end up there. These pages indicate a broken URL, when a server is down, or missing content.

當涉及到網站的404錯誤頁面時，參與和激怒之間只有一條細線。 它們是所有網站頁面中最被忽略的。 主要原因是，游客不應最終到達那里。 這些頁面指示服務器斷開時URL損壞或內容丟失。

An appealing 404 page offers you a chance to connect visitors with your brand and create an awesome user-experience that leaves them searching through your entire website.

誘人的404頁面為您提供了一個機會，可以將訪問者與您的品牌聯系起來，并創建令人敬畏的用戶體驗，從而使他們可以搜索整個網站。

In this article, I’ll share my favorite 404-pages used by top brands, strategies they apply to increase sales, and how you can optimize your error pages for higher conversions, too.

在本文中，我將分享我最喜歡的404頁，供頂級品牌使用，它們為增加銷售量所采用的策略，以及如何優化錯誤頁面以獲得更高的轉化率。

為什么自定義404頁很重要 (Why a custom 404-page is important)

Links can go bad over time. Products get removed, pages get deleted, or there is a change to a website’s structure.

鏈接隨著時間的流逝會變壞。 產品被刪除，頁面被刪除，或者網站的結構發生了變化。

When visitors click on a “dead” link (removed or deleted page), they will see your 404 error page. So you don’t feel too bad, there are times when visitors simply type in the wrong URL. When they enter an incorrect link, they will be redirected to the 404 page.

訪問者單擊“死”鏈接(已刪除或刪除的頁面)時，將看到您的404錯誤頁面。 這樣您就不會感到難過，有時候訪客只是輸入錯誤的URL。 當他們輸入不正確的鏈接時，它們將被重定向到404頁面。

For example, instead of opening medium.com/@divadsanders (my Medium profile page), try to open medium.com/divad-sanders (this page does not exist). Make sure to come back. We’ve got more to discuss.

例如，嘗試打開medium.com/divads-sanders (該頁面不存在)，而不是打開medium.com/@divadsanders (我的“ Medium”個人資料頁面)。 確保回來。 我們還有更多的要討論。

See the difference? Typing the wrong URL leads to Medium’s 404 page. A 404 error page will display one of the following messages:

看到不同？ 輸入錯誤的URL會導致進入Medium的404頁面。 404錯誤頁面將顯示以下消息之一：

• 404 Not Found
  找不到404
• The requested URL was not found on this server
  在此服務器上找不到請求的URL
• 404 Error
  404錯誤
• The page cannot be found
  找不到頁面

Instead of thinking this page as a mistake, think of it as a safety net. A 404 page should not be the end of the visitor’s journey. They should not be forced to close the window, but instead, be redirected to another page on the site.

不要將頁面視為錯誤，而應將其視為安全網。 404頁面不應成為訪問者旅程的終點??。 不應強行關閉窗口，而應將它們重定向到站點上的另一個頁面。

A 404 page is an opportunity to express your brand and leave visitors with value instead of frustration.

404頁是表達您的品牌并讓訪客獲得價值而不是沮喪的機會。

為什么品牌會有所作為 (Why branding makes a difference)

Let’s say your 404 page was a visitor’s introduction to your entire business. Would they know it was you? Would they get a sense of your company’s personality, offerings, values, or mission?

假設您的404頁面是訪客對您整個業務的介紹。 他們會知道是你嗎？ 他們會了解您公司的個性，產品，價值或使命嗎？

The more generic and lackluster the page, the greater the disappointment. Also, the more apparent the mistake is. A 404 page should be a happy accident that does not lead to confusion or annoyance.

頁面越通用和乏味，失望越大。 同樣，錯誤更加明顯。 404頁應該是一件快樂的事故，不會引起混亂或煩惱。

The best 404 pages are on-brand and continue to tell the story of the business. It is consistent in imagery, voice, colors, font, and message.

最好的404頁是品牌上的，并繼續講述企業的故事。 它在圖像，聲音，顏色，字體和消息方面保持一致。

如何充分利用404頁面 (How to make the most out of your 404 page)

Your site’s homepage should determine how the 404 page feels to visitors.

您網站的首頁應確定404頁面對訪問者的感覺。

The homepage acts as an introduction to not only your website but also your brand. The page must deliver a personality that visitors can immediately connect with. First impressions are everlasting.

主頁不僅可以介紹您的網站，還可以介紹您的品牌。 該頁面必須提供訪問者可以立即聯系的個性。 第一印象是永恒的。

The 404 page is a continuation of that personality. It should retain the same brand guidelines as any other page. However, you have more opportunities to deliver your brand’s quirkiness on the error page. See it as a hidden gem.

404頁是這種個性的延續。 它應保留與其他頁面相同的品牌準則。 但是，您有更多機會在錯誤頁面上傳達您品牌的古怪之處。 將其視為隱藏的寶石。

整合您的產品 (Incorporate your Product)

This error page by Disney features one of their most beloved characters, Wreck-It Ralph. As you can see, where most pages are static images, this 404 page offers a fun animated video to enhance the user experience.

迪士尼的錯誤頁面上顯示了他們最受歡迎的角色之一，無敵破壞王。 如您所見，在大多數頁面是靜態圖像的地方，此404頁面提供了有趣的動畫視頻，以增強用戶體驗。

The page also includes two references from the movie Ralph Breaks the Internet that only fans would know.

該頁面還包含電影Ralph Breaks Internet中只有兩個引用，只有粉絲會知道。

添加搜索欄導航 (Add search bar navigation)

In a situation such as a page being moved, give the user the option to search for the page or the content it contained by including a search bar.

在諸如頁面被移動的情況下，通過包括搜索欄，為用戶提供搜索頁面或其中包含的內容的選項。

For example, this 404 page on the Star Wars website provides visitors the option to search the entire website to find the page they were looking for. The imagery of an incomplete Death Star that is “not fully armed and operational” is a great nod to the movies.

例如，《星球大戰》網站上的404頁面為訪問者提供了選擇搜索整個網站以找到所需頁面的選項。 電影中不完整的“死亡之星”的影像“裝備不完善，無法運作”，這對電影來說是個好頭。

Even though this is an error page, visitors can still see the brand, story, and personality of the business.

即使這是一個錯誤頁面，訪問者仍然可以看到公司的品牌，故事和個性。

分享您的最新優惠 (Share your latest offers)

A standard 404 page gives users little to no options — go to the homepage or leave the site. There is so much opportunity left on the table. Think about the main goal of your website.

標準的404頁面為用戶提供了很少甚至沒有選擇-轉到主頁或離開網站。 桌上還有很多機會。 考慮一下您網站的主要目標。

Do you want to gain subscribers, contact information, book appointments, or sell a product? This is your chance.

您想獲得訂閱者，聯系信息，預約或銷售產品嗎？ 這是你的機會。

Ever notice eBay’s 404 page? Their best deals are stationed for you to see in the hopes that you buy. Any page you come across on the entire eBay website will show multiple products that you can purchase. An error page is no different.

您是否注意到eBay的404頁面？ 他們最好的交易駐扎在您的懷抱中，以期為您帶來希望。 您在整個eBay網站上看到的任何頁面都會顯示您可以購買的多種產品。 錯誤頁面沒有什么不同。

讓游客笑 (Make visitors laugh)

Every Medium writer’s favorite place to find free to use images, Unsplash, offers visitors with a funny video for their 404 pages. It features something different every time.

每個中型作家最喜歡的免費使用圖片的地方都是Unsplash ，它為訪問者提供404頁的有趣視頻。 每次都有不同的功能。

The videos have nothing to do with the Unsplash business. But each one will leave you laughing out loud. Instead of leveraging their products or service, Unsplash is using positive emotions to build a relationship with users and provide an enjoyable experience that makes the brand stand out.

這些視頻與Unsplash業務無關。 但是每個人都會讓你大聲笑出來。 Unsplash并未利用其產品或服務，而是通過積極的情緒與用戶建立關系并提供使品牌脫穎而出的愉快體驗。

Try it for yourself: Click here and refresh the page a few times.

自己嘗試一下： 單擊此處，然后刷新頁面幾次 。

承擔過錯 (Take the blame)

Businesses receive criticism every day for mishandling shipments, terrible customer service, even poor quality in what they produce. But how many actually own up to their mistakes? Not many.

企業每天都會因運輸不當，糟糕的客戶服務甚至生產的產品質量差而受到批評。 但是有多少人真正承擔了自己的錯誤呢？ 不太多。

The coffee giant Starbucks relieves visitors of any wrongdoing on their part. Where most 404 pages seem robotic and automated, this one emotes a sense of remorse. Very human don’t you think? This is not by accident.

咖啡巨頭星巴克(Starbucks)可以減輕游客的不當行為。 在大多數404頁看起來都是自動的和自動化的地方，這讓人產生一種re悔的感覺。 你是不是很人道？ 這并非偶然。

Branding gives an otherwise lifeless entity, such as a business, a human personality that customers feel comfortable connecting with. The best way to do that is through the messaging, tone, and voice of a brand.

品牌賦予了原本毫無生氣的實體，例如企業，是一種讓客戶感到滿意的人格特質。 最好的方法是通過品牌的消息傳遞，語氣和聲音。

Let’s go down the list of everything Starbucks does right on this page:

讓我們在此頁面上列出星巴克所做的所有事情：

• Apologizes for the mistake
  為錯誤表示歉意
• Expresses their fault in users landing on the page
  向用戶登陸頁面表示錯誤
• Explains why visitors may have run into an error page
  解釋為什么訪客可能會遇到錯誤頁面
• Attempts to remedy the situation with next steps
  嘗試通過后續步驟糾正這種情況
• Adds multiple links to the homepage, contact page, and sitemap
  將多個鏈接添加到主頁，聯系頁面和站點地圖
• Allows visitors a way to comment about the broken link
  允許訪問者評論斷開的鏈接

These components demonstrate the experience visitors should expect when interacting with the Starbucks brand. Ideally, this expression of customer service, accountability, and understanding should be apparent wherever customers and Starbucks connect (online, in-stores, on the phone, etc.).

這些組件說明了訪問者與星巴克品牌互動時應期望的體驗。 理想情況下，無論客戶與星巴克之間的聯系方式(在線，實體店，電話等)，客戶服務，問責制和理解的表達都應該顯而易見。

修復斷開的鏈接 (Fix the broken links)

Ideally, your website should not have a 404 page. Every link should function properly allowing visitors to find exactly what they are looking for. However, that’s wishful thinking. Mistakes happen. But a 404 page makes sure you don’t lose potential customers.

理想情況下，您的網站應該沒有404頁面。 每個鏈接均應正常運行，以使訪問者可以準確地找到所需的內容。 但是，這是一廂情愿的想法。 發生錯誤。 但是404頁面可確保您不會失去潛在客戶。

The best way to prevent visitors from landing on an error page is to eliminate their need. Check your site for broken links. Depending on how large your site is will determine how often you should review your links.

防止訪問者登陸錯誤頁面的最佳方法是消除他們的需求。 檢查您的站點是否有損壞的鏈接。 根據您網站的大小，將確定您應該多久查看一次鏈接。

Search for missing articles, videos, pictures, and even hyperlinks to other sites. You may need to update due to missing links on websites you reference.

搜索丟失的文章，視頻，圖片，甚至到其他站點的超鏈接。 由于您所參考的網站上缺少鏈接，您可能需要更新。

If there are just too many pages for you to search through, try using Dead Link Checker. It’s a free tool that crawls through your entire website to identify broken links.

如果要搜索的頁面太多，請嘗試使用Dead Link Checker 。 這是一個免費工具，可在您的整個網站中進行爬網以識別斷開的鏈接。

Every 404 page will not be the same. There are a variety of ways that companies design their pages. Some get straight to the business while others elicit a light-hearted approach to their interaction with visitors.

每個404頁都不相同。 公司設計頁面的方式有很多種。 有些直接進入業務，而另一些則采取輕松的方式與訪客互動。

Either way, you want to give visitors a path to prevent them from leaving the website and express your brand to build a connection with them.

無論哪種方式，您都希望為訪問者提供一條防止他們離開網站并表達您的品牌與他們建立聯系的途徑。

Have you found other unique 404 pages that I have not listed? Or tips to get the most out of a 404 page? Please comment and share below!

您是否找到了我未列出的其他唯一404頁面？ 或充分利用404頁面的提示？ 請在下面發表評論并分享！