自定義404頁面 (Custom 404 pages)

To customize or not to customize your 404 page? I hope by now you know the answer is that, yes, under essentially all circumstances you should customize your 404 page. 404 errors occur when someone attempts to visit a URL on your website that doesn’t exist. It’s not fun to see a 404 error, but it will happen.

要自定義還是不自定義404頁面？ 我希望到目前為止，您知道答案是，是的，在基本上所有情況下，您都應該自定義404頁面 。 當有人嘗試訪問您網站上不存在的URL時，會發生404錯誤。 看到404錯誤并不是一件有趣的事，但是它會發生。

The best of the web anticipates that it’s going to happen and takes advantage of it by creating optimal user experiences out of bad ones.

最好的網絡預見到它將發生并通過從不良情況中創造最佳的用戶體驗來利用它。

I took a random stroll around the Internet to find examples of 404 pages that were either doing a good job, not doing a good job, or were otherwise impressive or not impressive.

我在Internet上四處逛逛，以查找404頁的示例，這些頁面要么做得很好，要么做得不好，或者令人印象深刻或不令人印象深刻。

All ten of these examples at least took a stab at turning a bad situation into good. Some did a better job than others. Here they are, ranked in order of my favorite to least favorite along with why.

所有這些例子中的十個，至少都把壞情況變成了好事。 有些人比其他人做得更好。 在這里，它們按我最喜歡到最不喜歡的順序以及為什么的順序排列。

＃1中 (#1 Medium)

It was tough to find a better 404 page than Medium’s own among these ten. I tried. After evaluating and re-evaluating the other random sites below, Medium’s does the best job.

在這十個頁面中 ，很難找到比Medium更好的404頁面。 我試過了。 在評估并重新評估下面的其他隨機網站后，Medium的表現最好。

什么有效 (What works)

• Clarity. A clear error message explains what happened and why the visitor is seeing the page.

  清晰度 。 清晰的錯誤消息說明發生了什么以及訪問者為何看到該頁面。

• Next step. There is an obvious and enormous call to action to Search Medium to rectify the situation.

  下一步 。 顯然有巨大的行動號召搜索媒介來糾正這種情況。

• Empathy. The team went beyond the next step to empathize with the visitor and drive them deeper into some articles, complete with interesting thumbnails. It’s the only of the random ten that even attempted empathy.

  同情心 。 該團隊超越了下一步，對訪問者產生了同情，并將他們帶入了一些更有趣的縮略圖的文章中。 這是隨機十個人中唯一嘗試同理的人。

• No place like home. They included an explicit link to the homepage.

  沒有地方像家一樣 。 它們包括指向主頁的顯式鏈接。

什么不起作用 (What doesn’t work)

• The design of the CTA to search Medium is muted and fades away, negating the fact that the typography is so large. I would have used Medium’s more prominent primary button for the search instead of this muted outlined button, which is generally used to signify that the something is inactive.
  搜索媒介的CTA的設計被靜音并逐漸消失，從而消除了字體如此大的事實。 我本來會使用Medium更為突出的主按鈕來進行搜索，而不是使用此已靜音的概述按鈕，該按鈕通常用于表示某些內容處于非活動狀態。

＃2白宮 (#2 The Whitehouse)

It is befitting that a website with 31,000+ referring sites1 should have a useful 404 page, and Whitehouse.gov did not disappoint.

擁有31,000多個推薦站點1的網站應該有一個有用的404頁面，而Whitehouse.gov并不令人失望。

什么有效 (What works)

• Clarity. It explains what’s going on, including the unique situations that U.S. executive branch administrations have. Most other sites aren’t going to have archives just because they switch out their leadership every 4 to 8 years, like Whitehouse.gov. This 404 page explanation makes it clear that the URL entered may have existed once and was legitimately moved.

  清晰度 。 它解釋了正在發生的事情，包括美國行政部門行政部門的獨特情況。 其他大多數網站都不會擁有存檔，因為它們像Whitehouse.gov這樣每隔4至8年就會更換領導職位。 此404頁說明清楚地表明，輸入的URL可能已經存在一次并被合法地移動了。

• Guidance. There is a button to go to the archives mentioned above.

  指導 有一個按鈕可以轉到上述檔案。

• Design. It’s on brand and clean.

  設計 。 它的品牌和清潔。

什么不起作用 (What doesn’t work)

• The placement of a single button to check out archives makes a significant assumption that people were looking for something archived. That’s probably true — given how much referral traffic the site gets. But in all this assumption, the page doesn’t help people get around the current site well, and should at least help direct people to the homepage.
  放置單個按鈕以檢出檔案的一個重要假設是人們正在尋找檔案。 鑒于網站獲得了多少引薦流量，這可能是正確的。 但是，在所有這些假設下，該頁面并不能幫助人們很好地瀏覽當前站點，并且至少應該有助于將人們引導至首頁。

＃3 Fiverr (#3 Fiverr)

Okay, Fiverr. High-five for fun.

好的， Fiverr 。 高五娛樂。

什么有效 (What works)

• It’s funny — or at least, humorous. Maybe funny is a stretch. It’s certainly eyebrow raising.

  這很有趣 -或至少是幽默。 也許好笑是舒展。 這肯定是眉毛。

• Next step. It’s focused on a specific next step, which is to look for a service.

  下一步 。 它專注于特定的下一步，即尋找服務。

• Drives traffic deeper. The team had the bright idea to help people along in their search by highlighting some of the more popular services. This drives deep, quality traffic into the site and helps uncover intent at the same time.

  將流量推得更深 。 該團隊有一個聰明的主意，通過突出顯示一些更受歡迎的服務來幫助人們進行搜索。 這樣可以將大量優質流量吸引到網站中，并有助于同時發現意圖。

什么不起作用 (What doesn’t work)

• I would prefer to see 404 in text, not an image. It should be clear to everyone, including screen readers, what happened.
  我希望看到文本中的404，而不是圖像。 所有人(包括屏幕閱讀器)都應該清楚發生了什么情況。
• The general 404 functionality is bad. It’s actually quite hard to get a 404 page on Fiverr because service and seller pages have top-level URLs and they come and go as they please, creating a void.
  通用404功能不好。 實際上，在Fiverr上獲得404頁非常困難，因為服務和賣方頁面具有頂級URL，并且它們隨心所欲地來去去去，從而造成空白。
• Also, very common misspellings of important pages do not have proper redirects and also do not trigger a 404. For example, /login is the real login URL, but if you typed /loginn, you don’t get a 404 and you don’t get the login page. You get a page that says the page no longer exists. Which is bizarre and hopefully not intentional. You can fix this, Fiverr!
  同樣，重要頁面的常見拼寫錯誤沒有正確的重定向，也不會觸發404。例如，/ login是真實的登錄URL，但是如果鍵入/ loginn，則不會得到404，并且不會無法獲得登錄頁面。 您得到的頁面顯示該頁面不再存在。 這是奇怪的，希望不是故意的。 你可以解決這個問題，Fiverr！

＃4亞馬遜 (#4 Amazon)

I wanted to love Amazon’s 404 page, but I don’t. I get it, dogs are cute. But 404s are important business, and Amazon is a huge site with tons of navigation i?s?s?u?e?s challenges. They are missing an opportunity here.

我想愛亞馬遜的 404頁面，但我不喜歡。 我明白了，狗很可愛。 但是404是重要的業務，亞馬遜是一個巨大的站點，面臨著眾多的導航挑戰。 他們在這里錯過了機會。

Still, this 404 page’s virtue is that it’s succinct and (mostly) helpful.

盡管如此，此404頁的優點在于它簡潔明了((大部分)有用)。

什么有效 (What works)

• Clarity. The message is to the point. It’s very clear that you’re trying to get to a page that doesn’t exist.

  清晰度 。 信息很明確。 很顯然，您正在嘗試訪問一個不存在的頁面。

• Human-ish. It attempts to smooth over the situation, and perhaps bring some humanity to the e-commerce giant, with photos of cute and cuddly employee dogs.

  人性化的 。 它試圖解決這種情況，并可能通過可愛可愛的員工狗的照片為電子商務巨頭帶來一些人性。

什么不起作用 (What doesn’t work)

• Maybe they should take a page from either Medium or Fiverr and attempt to drive traffic somewhere, such as to popular categories or items that are on sale. I don’t imagine there is much 404 traffic but surely they could use this page to learn a bit more about what people want.
  也許他們應該從“中型”或“ Fiverr”頁面瀏覽，然后嘗試將流量吸引到某個地方，例如熱門類別或正在銷售的商品。 我不認為會有404個點擊量，但是可以肯定的是，他們可以使用此頁面來學習更多有關人們想要的東西。
• It could use a better design, honestly. When you look at it critically, what stands out is just a giant apology and a dog. The rest gets completely lost.
  老實說，它可以使用更好的設計。 當您批判地看時，突出的只是道歉和一只狗。 其余的完全丟失。

＃5紐約城市大學 (#5 City University of New York)

Did you know?

你知道嗎？

CUNY (City University of New York) has over 250,000 students. It’s one of the largest universities in the world. And you can bet that comes with a TON of web traffic. They absolutely need a custom 404!

紐約市立大學( CUNY ) 有25萬多名學生 。 它是世界上最大的大學之一。 您可以打賭，它會帶來大量網絡流量。 他們絕對需要自定義404！

And they have one. It’s not super, but it’s also not atrocious. It starts our downward slope at #5.

他們有一個。 它不是超級，但也不殘暴。 它從＃5開始向下傾斜。

什么有效 (What works)

• Checks all the boxes. It meets all of the important criteria of a 404 page, which includes primarily explaining what the heck happened.

  選中所有框。 它符合404頁的所有重要條件，其中主要包括解釋到底發生了什么。

• Attempts to guide. It provides a list of popular CUNY links — places that most students, faculty or employees are trying to go.

  嘗試指導 。 它提供了受歡迎的CUNY鏈接列表-大多數學生，教職員工或員工都想去的地方。

什么不起作用 (What doesn’t work)

• It’s insanely boring and it honestly makes me wonder if the university is as boring as the 404 page. Absolutely no character, unless their character is an image of a cardboard box. And if they had included a cardboard box, it would be better.
  這真是無聊，它使我懷疑大學是否像404頁面一樣無聊。 絕對沒有字符，除非它們的字符是紙板箱的圖像。 如果他們包括一個紙板箱，那會更好。

• The list of helpful websites suffers greatly from what almost all university navigation systems do: information overload. University websites are always trying to be all things to all people. Instead, they should prioritize something, such as students, and use special treatment such as a card deck to highlight Admissions, Apply and Current Student links. The rest can be tossed in a list.

  幾乎所有大學導航系統所做的工作都會使有用的網站列表遭受極大的折磨：信息過載。 大學網站一直在努力讓所有人都擁有一切。 取而代之的是，他們應該優先考慮諸如學生之類的事物，并使用諸如卡片套之類的特殊處理來突出顯示“ 招生” ，“ 申請”和“ 當前學生”鏈接。 其余的可以扔在列表中。

• There is an instruction to use the search function “above” but it’s unhelpful. The search icon is a tiny little thing way up and to the right, and not “above” like it says. These types of visual directions are also not accessible. As a remedy, they could just change the instructions to “Additionally, you can search for what you’re looking for” and use a real search link instead of something script-based that you can’t get to via URL. You’re welcome, CUNY!

  上面有一條使用搜索功能的說明，但沒有幫助。 搜索圖標是一個很小的小東西，位于右上方，而不是像上面所說的“上方”。 這些類型的視覺方向也無法訪問。 作為一種補救措施，他們可以將說明更改為“另外，您可以搜索所需的內容”，并使用真實的搜索鏈接，而不是無法通過URL訪問的基于腳本的內容。 不客氣，CUNY！

＃6 Coursera (#6 Coursera)

“Um, hello, Coursera? 1982 called and wants its graphic back.”

“嗯，你好，Coursera？ 1982年致電并要求其圖形返回。”

In addition to the seriously off-brand, super retro, animated GIF of “404” on Coursera’s custom 404 error page, there are other situations they need to address.

除了在Coursera的自定義404錯誤頁面上嚴重虛假的 ，超復古的動畫GIF“ 404”之外，還需要解決其他情況。

什么有效 (What works)

• Next-steps. There are a number of places you can go from here and Coursera neatly links to them.

  下一步 。 您可以從這里找到許多地方，Coursera整齊地鏈接到它們。

什么不起作用 (What doesn’t work)

• There is an odd progression of declining font sizes to the point where some actually valuable links, such as to “Coursera for Business” or the blog, are so small they are almost illegible.
  字體大小不斷下降的奇怪過程到了某些實際上有價值的鏈接(例如“ Coursera for Business”或博客)如此之小以至于難以辨認的程度。

• It sort of tells you what’s going on... in the form of an animated GIF. Ideally, as I mentioned with Fiverr, the 404 error should be clear and in text.

  它像是告訴你這是怎么回事... GIF動畫的形式。 理想情況下，正如我在Fiverr中提到的那樣，404錯誤應清晰明了且文字清晰。

• Like some of the other custom 404s, Coursera is missing an enormous opportunity to help people along and drive them deeper into the site by maybe taking a page from their own web design and using cards and imagery with links to categories, popular courses, etc.
  像其他一些自定義404一樣，Coursera缺少巨大的機會來幫助人們，例如通過從他們自己的網頁設計中獲取頁面，并使用帶有類別，熱門課程等鏈接的卡片和圖像來幫助他們并將其帶入網站。

＃7科羅拉多大學博爾德分校 (#7 University of Colorado, Boulder)

I actually like Colorado-Boulder’s custom 404 page aesthetically. Just not functionally.

實際上，我從美學上喜歡Colorado-Boulder的自定義404頁面。 只是沒有功能。

So there is clever and fun, and then there is too clever or too fun. In this instance, the boulder use of extra large typography (sry, couldn’t help myself) and the presence of some sort of Lego-style bull action figure renders the page unusable until you scroll past it.

因此，有聰明和樂趣，然后有太聰明或太有趣。 在這種情況下， 巨石使用超大字體(抱歉，無法幫助自己)和某種樂高風格的公牛動作模型的存在使頁面無法使用，直到您滾動過去為止。

什么有效 (What works)

• On brand. The design team left no page unturned, so to speak. Kudos to them for extending the brand all the way.

  論品牌 。 可以這么說，設計團隊不遺余力。 他們一路擴大品牌聲名遠揚。

• Clear message. If you’re not sure what happened after looking at this viewport-wide and viewport-tall error message, not sure we can help you.

  清除消息 。 如果您不確定在查看此視口范圍和視口高度錯誤消息后發生了什么，則不確定我們能為您提供幫助。

什么不起作用 (What doesn’t work)

• There’s nothing to see/do here. I mean, there is, if you scroll. And even when you do, there are no helpful instructions or interesting words to help you along after your annoying dead end.

  這里沒有什么可看/做的。 我的意思是，有， 如果您滾動。 即使您這樣做了，在煩人的死胡同之后，也沒有任何有用的說明或有趣的詞來幫助您。

＃8福布斯 (#8 Forbes)

Dear Forbes,

親愛的福布斯 ：

You can do better.

你可以做得更好。

什么有效 (What works)

• Helpful next step. At the very least, this banner/page-y thing does help you along by providing a search box.

  下一步很有幫助 。 至少，此橫幅/頁上的內容確實可以通過提供搜索框來幫助您。

• It tells you what happened. The page isn’t there. Or is it?

  它告訴你發生了什么事 。 該頁面不存在。 還是？

什么不起作用 (What doesn’t work)

• A dismiss-able banner? I’m confused by the UX of this. Why is the Forbes team using an alert-style banner that you can dismiss? Or is the ‘X’ meant to dismiss the GIANT ad that came up just seconds after hitting the 404?
  可否解雇的橫幅？ 我對此感到迷惑。 為什么《福布斯》團隊會使用可以關閉的警報式橫幅？ 還是“ X”是要取消在點擊404幾秒鐘后出現的GIANT廣告？
• Big miss in terms of steering people to content. A magazine that doesn’t help people into some other excellent content? Surely there are some other pages that the visitor could see instead. Isn’t a magazine’s primary goal to distract and derail?
  在引導人們滿足方面的重大失誤。 一本沒有幫助人們改寫其他出色內容的雜志嗎？ 當然，訪問者可以看到其他一些頁面。 雜志的主要目標不是分散注意力嗎？

Tut-tut, Forbes. Tut-tut.

ut，福布斯。 嘖嘖嘖。

＃9 DashThis (#9 DashThis)

Are you not entertained?2

您不開心嗎？2

Who doesn’t love a great LOTR meme-turned-404 page? Everyone gets it, right?

誰不喜歡精美的LOTR meme-turned-404頁面？ 大家都知道了吧？

False. Not everyone gets messages like this. What’s worse is that all of the good stuff is below an extra large, clever graphic. If you didn’t know it, you’d think this is all there was to this page.

錯誤的 。 并非所有人都收到這樣的消息。 更糟糕的是，所有的好東西都在一個超大，聰明的圖形之下。 如果您不知道，您會認為這就是本頁的全部內容。

With DashThis boasting 18,000 users from over 122 countries, it behooves them to get it right, not just get it funny.

DashThis擁有來自122個國家/地區的18,000名用戶，它希望他們做到正確，而不僅僅是讓它有趣。

什么有效 (What works)

• Clever. I’ll give them that. It’s certainly clever and a great way to capitalize on a trend.

  機靈 。 我給他們。 當然，這是利用趨勢的明智之舉。

• On brand. It’s beautifully done and there’s no doubt about that. As a visual reporting dashboard tool where looks really matter, that’s a feather in their cap.

  論品牌 。 做得很漂亮，對此毫無疑問。 作為看起來真正重要的可視化報表儀表板工具，這簡直就是一頂羽毛。

什么不起作用 (What doesn’t work)

• It’s obscure. In UX, the last thing you want is for people to go, “huh?” when looking at your design or instructions. Personally, I get what “one does not simply…” alludes to but a lot of people wouldn’t get it. Not only that, they used the subtitle/lead copy to delve further into obscurity, instead of talking about the issue at hand: the 404 error.

  晦澀難懂 。 在UX中，您想要做的最后一件事就是讓人們走，“嗯？” 在查看您的設計或說明時。 就我個人而言，我得到了“一個人不能簡單地……”所暗示的含義，但是很多人卻不明白。 不僅如此，他們還使用字幕/主角副本進一步研究了晦澀之處，而不是談論眼前的問題：404錯誤。

• It’s a dead end — or appears that way. Because the team at DashThis decided to take up so much space with the LOTR-style chart graphic, people are left wondering what to do now that they can’t find what they were looking for. There are some helpful hints BELOW the graphic but they are much more important than the graphic and should be above it.

  這是一個死胡同-或那樣看來 。 由于DashThis的團隊決定使用LOTR樣式的圖表圖形占用大量空間，因此人們一直想知道現在該怎么辦，因為找不到所需的東西。 在圖形下方有一些有用的提示，但它們比圖形重要得多，應該在圖形上方。

• This is a huge miss. Because DashThis reports are links that you give clients, they need to get this right. Frodo’s journey was important, and so is this.

  這真是一個巨大的懷念 。 由于DashThis報告是您為客戶提供的鏈接，因此他們需要正確地執行此操作。 Frodo的旅程很重要，這也很重要。

＃10迪士尼樂園 (#10 Disneyland)

Oh, Disney. How badly you disappoint!

哦，迪斯尼。 你真失望！

Rounding out our list of ten random, custom 404 pages is Disneyland’s own. Sadly, while it is very, very cute, it misses the mark and is my least favorite.

迪斯尼樂園擁有10張隨機的，定制的404頁，這是我們的最佳選擇。 可悲的是，雖然它非常非常可愛，但卻沒有留下痕跡，是我最不喜歡的。

什么有效 (What works)

• Clarity. The page gets points for including a clear message that the page is gone. I mean, someone ate that page, darn it!

  清晰度 。 該頁面獲得了包含該頁面已消失的明確消息的要點。 我的意思是，有人吃了該頁，該死！

• Points to the problem. Kudos to Disney for doing something none of the others did, which is to highlight the fact that the problem is the URL! I want to give them props for having people check the URL. I’m assuming they looked at their 404 data and discovered that typos created most errors, and that’s why they decided to go this route. So many 404 errors are just the result of typos.

  指出問題 。 迪斯尼在其他方面沒有做過任何事情，對此表示敬意，這是要突出事實，即問題出在URL！ 我想給他們提供道具，讓人們檢查URL。 我假設他們查看了自己的404數據，發現錯別字造成了大多數錯誤，這就是為什么他們決定走這條路。 如此多的404錯誤僅僅是錯別字的結果。

什么不起作用 (What doesn’t work)

• They lay the blame elsewhere. That’s right. Either someone ate the page or you got the URL wrong. Regardless, they give you NO other help than that. What if you got the URL right? Now what? No search? No helpful links? And that enormous footer doesn’t count.
  他們把責任推到別處。 那就對了。 有人吃了該頁面，或者您輸入的URL錯誤。 無論如何，他們只會給您其他幫助。 如果您輸入正確的網址怎么辦？ 怎么辦？ 沒有搜尋？ 沒有有用的鏈接？ 而且那巨大的頁腳不算在內。

Nice try, Mickey!

很好，米奇！

— —

— —

And that completes the list of ten. If you’ve got or have seen excellent custom 404s, drop the links in the comments so we can all check them out.

這樣就完成了十個列表。 如果您已經或曾經見過出色的自定義404，請在評論中刪除鏈接，以便我們所有人都可以將它們檢出。

1 According to Alexa

1 符合Alexa

2 Do you know that movie without looking it up?

2您不看電影就知道那部電影嗎？