自定义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 sites¹ should have a useful 404 page, and Whitehouse.gov did not disappoint.

拥有31,000多个推荐站点¹的网站应该有一个有用的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?²

您不开心吗？²

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，请在评论中删除链接，以便我们所有人都可以将它们检出。

¹ According to Alexa

¹ 符合Alexa

² Do you know that movie without looking it up?

²您不看电影就知道那部电影吗？