来自真实网站的 40 个巧妙的 404 错误页面

运行一个成功的网站意味着对页面损坏或性能下降等错误保持警惕。 但是，有时有些问题是您无法避免的，404 错误就是其中之一。

当用户请求您网站上不存在的页面时会发生 404，从而引发 404 错误页面，提示用户返回正确的位置。 无论您投入多少资源来确保您的网站永远不会出现故障……用户总有可能最终来到这里。

这很不方便，但却是生活中的事实。 当访问者登陆一个不存在的页面时，他们的反应可能从“从容应对”到“完全失去理智”。

虽然您对后者无能为力，但您可以通过发送创意错误 404 消息来减轻痛苦。 这可以创造奇迹，让您的网站访问者在其他令人沮丧的情况下微笑。

为了让您的网站设计源源不断，这篇文章将展示一些我们最喜欢的网站错误页面。 希望您能从一些想法中汲取灵感，打造您自己的 404 消息。

什么是 404 错误？

404 错误是标准的 HTTP 错误消息代码，表示在服务器上找不到您尝试访问的网站。 这是一个客户端错误，这意味着网页已被删除或移动，并且 URL 没有相应地更改，或者该人只是输入了错误的 URL。

在大多数情况下，您可以配置您的服务器以创建自定义的 404 错误页面。 （如果您是 HubSpot 客户，请单击此处了解如何在 HubSpot 中自定义您的 404 页面。）

一些定制的 404 错误页面包括主图、诙谐描述、站点地图、搜索表单或基本联系信息。

最佳 404 网页示例

多年来，网站已经找到了不同的方法来通知访问者 404 错误并将他们引导回正确的位置，有些是简单的，有些是创造性的，有些是有趣的。 让我们从一些有创意的 404 页面开始，然后看看一些有趣的例子，这些例子肯定会让遇到它们的人感到高兴。

找不到页面：创意 404 错误页面

1. 爆米花

虽然 404 页面很容易从网站中脱颖而出，但 Pipcorn 的错误页面与网站的其他品牌完全一致。 有一个漂亮的动画背景，一个友好的文本提示，引导访问者搜索网站（配有一个巧妙的双关语），还有一块爆米花用作“404”中的“0”。

2. Spotify

音乐流媒体巨头 Spotify 已经用一个巧妙的 404 页面覆盖了它的基础。 凭借 Kanye West 的专辑“808s and Heartbreak”的俏皮双关语和创纪录的动画，该网站短暂地娱乐，然后将访问者带回他们来自的页面。

3.和蔼可亲

缓解 404 页面压力的一种简单方法是快速添加“哎呀！” 信息——当你引导用户回到正确的地方时，它可以帮助你的网站感觉更有风度。 就 Genially 的网站而言，该页面还包括一​​个漂亮的插图和一些有趣的副本。

4.土坯

如您所料，Adobe 的 404 错误页面既实用又美观。 它列出了访问者可能想要的流行链接以及一些很酷的数字艺术作品，作为损坏或丢失页面的视觉隐喻。 老实说，网站应该更频繁地使用视觉隐喻。

5. 高乐氏

Clorox 清洁产品的 404 页面在三张轻松愉快的照片之间旋转，以向访问者发出他们犯了错误的信号。 在帮助迷失的用户的同时，巧妙地使用品牌来增加短暂的愉悦时刻。

6.杜马集体

其他时候，您可能不需要诙谐的宣传——只需告诉访问者该地址没有页面，然后让他们继续前进。 娱乐咨询机构 Duma Collective 的错误页面就是这样做的，尽管它还辅以背景图片，以增加一些小技巧。

7. 冷气屋

说到天赋，自我保健品牌 Chillhouse 已经付出了额外的努力，以改变其游客的风格。 404 页面被适当地标记，甚至在访问者返回主页之前，他们甚至会通过一些静止图像进行一段短暂的旅程。

8.有点

如果您输入了错误的 Bitly 链接，您将被带到 Bitly 的 404 页面。 我们假设这种情况发生得相当多，这就是 404 页面直截了当的原因。 它解释了可能出了什么问题，并提示用户访问 Bitly 主页（如果这是他们所追求的）。

9.宜家

宜家的 404 页面同样是极简主义的，但仍然设法在其中潜入一些智能品牌。 这个例子表明你的错误页面不需要详细说明来理解这一点，但注入一些乐趣也没有错。

10. 莫西设计公司

当然，“炸毁互联网”可能有点夸张，但它告诉访问者，Moxie Design Co. 不会因为像这样的小失误而把自己看得太重。 此外，搜索栏方便地放置在底部，以便在您的途中发送您。

11. 麦基萨克和麦基萨克

啊，经典的“我们丢失了页面”的把戏。 同样，这是一种在不疏远观众的情况下呈现 404 的简单方法。 如果您是像 McKissack & McKissack 这样管理许多客户互动的机构，那么清晰简洁的副本对于您网站的所有页面（包括错误页面）都是必不可少的。

12. CSS 技巧

曾经撕掉网站的包装以查看下面的内容吗？ 这就是 CSS Tricks 在他们的 404 错误页面中所追求的概念。 这既诙谐又让人想起网站的全部内容：巧妙地使用页面样式。

13. 好老游戏

对于其他网站，您打开前端的包装，就会发现……只是巨大的空间。 此页面巧妙地引用了 Good Old Games 的原生视频游戏客户端 GOG Galaxy。 值得庆幸的是，有一个小视频游戏角色可以为访问者提供一个报告错误的地方，如果他们愿意的话。

14. 帆布

对于一些不同的东西，请查看 Canva 的 404 页面。 它不仅包括一条错误消息，还包括一个漂亮的拼图，游客可以玩一些简短的娱乐。 让您的访客放松几分钟并没有什么坏处，对吧？

15. 创新科技

与 Canva 的方法类似，Innotech 在其 404 页面上提供了类似 Pong 的游戏，以提供一些简短的娱乐。 您可能会记得这样的网站。 此外，有趣的绕行补充了一个真正令人印象深刻的网站——说真的，当你玩完后，前往主页并全部了解。

16.无数

视频代理公司 Myriad 选择了一种古怪的品牌 404 页面设计，它模仿了旧磁带和电视上出现的经典 SMPTE 彩条。 这是对旧技术的有趣回归，同时代表了不存在网页的更现代问题。

17. 康马里

Marie Kondo 以其流行的清洁和整理方法以及品牌而闻名，她为她网站的 404 页面带来了类似的感觉。 该副本简短而幽默地让人联想到她的整理理念——粉丝们会认出的一个小而有名的细节。

18. 品牌人群

此错误页面上的插图不仅详细且引人入胜 - 副本也很聪明。 我们喜欢对 Semisonic 歌曲“Closing Time”的引用：“你可以点击其他任何地方，但不能点击这里。”

19. 热点制作

Hot Dot 的错误页面忠实于它的标语，“新技术和设计的交集”。 该页面由数百个小点组成，这些小点会根据您移动光标的位置改变方向。 它令人着迷，并且很好地展示了该机构的设计能力。

20. 橙色外套

如果你要给出一个错误信息，为什么不在你帮助他们的时候招待用户几秒钟呢？ 在友好的问候之后，OrangeCoat 提供了一个流程图，实际上可以帮助用户找出他们首先到达错误页面的原因。

21. 欧文和史密斯

这个 404 页面不仅仅是将用户重定向回活动页面。 相反，Ervin & Smith 的 404 页面邀请您向下滚动并了解为什么需要数字营销机构，以及为什么特别选择 Ervin & Smith，并附有联系表格。 该机构忠实于其使命，表明任何页面都可以成为转换机会。

22. 天云工作室

… 或者，您的 404 可能只是一个浪费时间的地方，正如在 DayCloud Studios 的网站上可以看到的那样。 在屏幕上移动光标会显示一条 404 消息，该消息由从猫眼射出的激光照亮。 因为为什么不呢？

23. 顶空

另一个网站实例巧妙地将其品牌信息整合到 404 页面中——引导式冥想应用 Headspace 努力让用户平静下来，鼓励我们深呼吸，然后返回主站点。

24. 怀尔德伍德面包店

迄今为止，一些网站在其页面中集成了巧妙的品牌副本，而其他网站则在其页面上托管了成熟的在线游戏。 但是，向正确的方向短暂推回并没有错。 Wildwood Bakery 精致的网站让事情变得简短而甜蜜（字面意思）。

找不到页面：有趣的 404 错误页面

25. 精巧

设计机构 Astuteo 的 404 页面完美平衡了优雅的视觉效果、幽默感和乐于助人。 最小的布局为用户提供了他们需要的信息以及另一个有趣的视觉隐喻，一艘沉没的货船和一个逃跑的人物。

26. 乐高

LEGO 的 404 错误页面上只需要几个字——角色的表情让一切变得清晰。 此外，乐高电影专营权的粉丝将享受副本中的有趣参考。

27. 马格特

在这条有趣的错误消息中，Magnt 取笑了这样一个事实：是的，他们可能已经破坏了某些东西——或者，你就是不能打字。 视觉效果是一种快速说明其观点的快捷方式。

28.图标查找器

IconFinder 的错误页面简单但令人愉快。 该公司的吉祥物穿着长袍，看上去很疲惫，这是对迷路的游客的一种亲切的点头。 不过不用担心，因为该网站在下面列出了一些要访问的链接。

29. 甜蜜的梦

显然，睡眠辅助公司 Sweet Dreams 的团队根据网站的 404 页面，拿走了太多的产品。 这个页面不仅幽默——它还与网站的其他前端美学和消息很好地融合在一起，给人一种凝聚力的感觉。

30. GitHub

“这些不是你要找的机器人”这句话是指欧比旺·克诺比在《星球大战 IV》中对冲锋队的绝地思维技巧，它已成为一个众所周知的短语，用来告诉某人他们在追求错误行动的过程。 GitHub 在他们的 404 错误消息中播放了这条著名的线路。

31. 巴塔哥尼亚

Patagonia 的定制 404 页面完美地捕捉了该品牌的氛围，并配有飞盘旋转器的回旋镖视频、结合“404”和“aloha”的巧妙双关语，以及指向其产品页面的链接。 这是一种友好而有趣的方式来迎接走错地方的游客。

32. 云西格玛

看看：Cloud Sigma 让我们参与了一些幕后行动。 他们的 404 错误页面伪装成“初级开发者的主页”——那个初级开发者，嗯，是一只猫。

33. AMC 剧院

您以前可能去过 AMC 电影院，但希望您从未见过他们网站的 404 页面。 该网站在将您送回正确的地方之前使用了一种快速、有趣且相关的单线。

34.布鲁诺

创意机构擅长制作酷炫的 404 页面并非巧合。 这是布鲁诺创意公司的另一部作品，它播放了 2000 年的热门喜剧经典老兄，我的车在哪里？ 不，它与公司或网站无关，但它肯定会得到笑声。

35.美国国家公共电台

起初，NPR 的错误页面似乎没什么特别的。 但请继续阅读，您会看到他们如何巧妙地链接到他们关于迷失的人、地方和事物的一些伟大故事，例如关于 Amelia Earhart 的一篇文章和一篇关于 Waldo 的文章。 这可能只会让丢失的用户感到不那么孤单。

36. 中等

Medium 对 NPR 的 404 页面采取了类似的做法，推荐有关迷路和丢东西的文章。 如果您有时间，请查看这些文章——它们非常适合阅读。

37. HomeStarRunner

HomeStarRunner.com 是 Fl​​ash 动画卡通系列的发源地，多年来出现了一系列有趣的 404 错误页面。 最新的卡通系列人物出现在一个场景中，这些角色可能直接来自他们的某一集。 如果您在加载页面时打开声音，您会听到他们的角色 Strong Bad（以大声喊叫而闻名）说：“404'd！”

38. 暴雪娱乐

这是一个简单的想法，最终看起来很漂亮：暴雪娱乐的 404 页面上有一个在实际暴风雪中迷失的动画角色和一些魔兽世界粉丝会欣赏的幽默。

39.你好大创意

快速浏览一下营销和社交媒体专家 Hello Big Idea 的网站将告诉您需要了解的有关其大胆而生硬的文案风格的信息。 当然，它的 404 错误页面也不例外。

40. HubSpot

它也发生在我们身上！ 这是我们用来告诉网站访问者存在一些网站问题的消息。 我们的目标是通过尽可能可爱、善解人意和乐于助人来忠于 HubSpot 的品牌声音。

将 404 错误页面变成愉快的时刻

没有人想登陆 404 页面——他们很烦人而且出乎意料。 但是，您无法真正避免它们，因此为您的网站设置一个 404 页面总是一个好主意。

而且，从用户体验的角度来看，您的 404 页面应该是一个小减速带，而不是一堵砖墙。 正确的设计可能是挫败反弹和可能的转换之间的区别，那么为什么不让它变得有趣呢？

编者注：这篇文章最初发表于 2015 年 12 月，为了全面性而进行了更新。