网站设计中的404页面设计发布者：本站     时间：2019-11-13 10:11:04

当你试图访问一个不存在的网页时，会弹出一个404页面。如果你做了一个网站设计，那么你也你需要一个404页面。传统上，他们是一个巨大的挫折来源，但最好的404页面被网站设计师变成了品牌的优势。

我们越来越多地看到定制的404页面，这些页面使用机智、聪明的用户体验或漂亮的设计来减轻发现自己在错误位置的痛苦。无论是一些深思熟虑的CSS动画，还是一个很酷的视差滚动效果，或者只是一些比你的平均水平更聪明的拷贝，有很多方法可以活跃你的404错误页面，正如这些例子所证明的。

最好的404页面可以成为网站设计本身的迷你大使，它甚至可以在Twitter或相关博客上分享，作为该网站致力于客户服务或独特设计风格的一个例子。我们在这里展示的404错误页面已经实现了所有这些功能，所以看看吧，希望对网站设计师的你受到启发，跳出自己的思维定式，更大胆创意的完成你的网站设计项目。

01.年度流行色

图片：年度色彩

这个网站设计致力于与潘通年度色彩有关的一切，它的一切都设计得很漂亮，包括它的404页面。网站进入了一个令人印象深刻的数量的深度，与相关的色彩系统的部分，建议调色板，并在使用的阴影的例子。与此同时，404页面采用了一种智能但简单的方法。网站上有一条简短的说明信息，还有一块潘通（PANTONE）404色块的样本，这是一种非常合适的灰棕色，以配合用户在网站上的心情。

02.上野

图片：上野

上野是一家提供全方位服务的机构，拥有非常出色的404页面。你在上面所看到的并没有抓住它的全部努力：热狗是动画的，所以它在一个超现实的风景中无限循环运行，并且有几个搞笑的解释信息要探索，它是疯狂的和完全独特的—访问这里的错误页面。

03.安卓

图片：安卓

Android通过其游戏化的404页面将迷失变成了一种有趣的体验，小小的工作机器人会吐出甜甜圈、果冻豆和棉花糖，用户旋转齿轮将它们导向正确的管子。运动简单，可爱和品牌设计，这款游戏是上瘾的糖果正在分类，点击这里查看。

04.Gymbox

Gym Box是一家致力于提供“伦敦最独特、最多样化的课程”的健身公司。这种说法的局限可能是出现在其404页面上的那种80年代的健身奇观。短裤，露脐装和骨盆插入-你还想从错误页面得到什么？

05.松弛

图片：松弛

可以毫不夸张地说，Slack 2019年的标识更新引起了广泛的恐慌，而其超级甜蜜的404页面肯定也有不少讨厌它的人。如果在Slack上出了错，你就会被指引到一个神奇的地方，那里有茂密的树叶、山脉和彩虹，蝴蝶、鸡和小猪在那里自由自在地漫步。随着鼠标移动，场景也会水平滚动（在这里试试）。

06.泥精制的

Puree Maison是一家专注于传播策略的创意公司，其特色网站设计上满是令人愉快的动画（建议你多点击看看）。特别喜欢这个超现实的404页面，它以某种方式完美地捕捉到了撞上数字墙的痛苦。

07.皮克斯

图片：皮克斯

有些人就是把事情看得太重，皮克斯的404页面以2015年大受欢迎的《头脑特工队》（Inside Out）中的悲伤为特色，它简单、直接，而且很有效。如果它代表了你对404错误的反应，那么也许你需要重新审视一下你的生活。

08.马特奥Vandelli

你不需要成为一个主要的品牌投入一点努力在你的404页面，我们喜欢这个来自平面设计师Matteo Vandelli的互动例子。他利用他的设计作品集中的错误页面作为另一个展示他的创造力和设计悟性的机会。当访问者浏览404页面时，它会像水一样泛起涟漪。其效果令人着迷。

09.二十世纪福克斯

找不到你想要的电影？福克斯电影的网站有一个很好的方式来激励你时，你得到一个错误的URL；它的404页面会弹出一部邪典电影的剧照，配上精练的字幕和一些你可能想看的其他电影。我们已经看过《剪刀手爱德华》、《书呆子的复仇》和《大人物拿破仑》等电影的片段。具有讽刺意味的是，在撰写本文时，可单击的文本会导致另一个设计不太好的404页面。

10.云服务器

云服务器是在美国、欧洲和亚太地区运行的云服务器和云托管服务。虽然灵活的云服务器很有用，但它们并不是很有趣，我们猜测这就是为什么该公司在其半开玩笑的404错误页面中添加了一些幽默元素的原因。我们想知道要过多久这个看起来很有帮助的初级开发者才会被竞争对手挖走。

11.BluePath

另一个在404错误页面上使用幽默的网站设计是亚特兰大数据战略咨询公司BluePath，这一页显示了一张亚特兰大的地图，在页面的另一边有一个小点，表示访问者“完全不在地图上”。在一个极其脆弱的链接中，该地图还包括数据驱动的信息，显示该地区的犯罪报告。“为什么？因为你还没雇我们是犯罪！”这些古怪的数据分析师。

12.奇迹

漫威将404错误页面建立在《宇宙观察者》的基础上，从而保持了品牌的稳固。也许因为Uatu长得不怎么样（抱歉），漫威决定迎合比我们肤浅的游客，在黑寡妇的背景下只增加他的眼睛。额外的酷点，使眼睛跟随访问者的光标在屏幕上。

13.Kualo

网络托管公司Kualo已经运营了15年，在互联网时代是永恒的，它的404页面通过向访问者提供Kualo主题的太空入侵者游戏让人回想起了过去，但它不是完美的。首先，切断舰队外围以减缓入侵者下降速度的关键策略行不通。但它很有趣，如果你设法获得超过1000分，它可以为你的托管协议赢得折扣。

这篇文章也启发了美国害虫控制公司Pointe pest - control，在它的404错误页面中加入了自己的害虫入侵者游戏，包括不同的飞行和爬行的虫子。

正如Pointe网站的克洛伊•佐林格（Chloe Zollinger）所言：“对于网站用户来说，访问404错误页面最令人沮丧。”我们明白网页上的用户体验有多重要。为了改善访问者的体验，我们的团队致力于在我们的404页面上创建一个互动游戏。”

14.Waaark

NSFW；先戴上耳机

法国工作室Waaark的404页面看起来很不错，但听起来更好——尽管可能不是在工作的时候。受《银河系和传送门》（Hitchhiker’s Guide to the Galaxy and Portal）作者斯蒂芬·霍金（Stephen Hawking）的启发，它使用了一个名为meSpeak的JavaScript文本语音转换工具，让你听一场言辞激烈的机器人长篇大论。插上耳机，看一看。

15.史蒂夫•兰伯特

纽约艺术家史蒂夫·兰伯特将此描述为“互联网上最尴尬的404未找到页面”，你知道，他可能是对的。它的特点是一个折磨人的一块相机，只是继续下去。我们不相信你在看完他的视频时，身体的任何部分都没有绷紧。

16.维多利亚Spicer

图片：维多利亚Spicer

维多利亚·斯派塞是伦敦的布景设计师和道具设计师，正如你所预料的那样，她的作品集站点充满了美丽的照片，她的404错误页面也不例外。它展示了她顽皮的一面，同时还保持着东西看起来光彩照人。

17.Figma

即使我们在这里有一个Illustrator CC的副本，可以在任何时候使用锚点和Bezier曲线，我们仍然被Figma的404页面所吸引。超大的404文本将以向量的形式呈现，您可以根据您的核心内容进行重新设计。

18.Airbnb

这张来自Airbnb的404页面上有一个简单但令人愉快的动画，一个不幸的女孩把冰淇淋掉在了地板上。Airbnb的声誉建立在它的风度和友好上，这个404页面完美地符合它的品牌形象。

19.热导生产

Hot Dot Productions在其令人印象深刻的404页面中加入了“设计与技术相遇之处”（where design meets technology）的口号。404页面上有三个由数百个小圆点组成的数字，这些小圆点会随着访问者鼠标的移动而改变方向或分散。你可以自己在这里尝试一下。

20.乐高

在我们眼中，乐高不会做错任何事（你读过我们关于乐高如何将自己重塑为超级品牌的文章吗？）我们喜欢这个可爱的404页面，它用一些吓人的乐高数字和一个无术语的解释使事情变得简单。

21.GitHub

你会期望从一个致力于代码版本控制的网站上看到一些技术奇迹，当你移动鼠标的时候，404页面通过一个简单的模仿《星球大战》的效果来吸引不同类型的极客。GitHub还有一个不错的500页，可以在服务器崩溃时使用。

22.CSS忍者

网站设计世界喜欢忍者，通常是自封的工作头衔的一部分。CSS Ninjas的404页面顺应了这一潮流（我们猜，它的名字也是如此），它的特点是简洁、有风格的插图，反映了网站的总体设计思路。

23.MailChimp

2018年秋，超时尚的电子邮件通讯服务MailChimp进行了网站设计改版，其404页面也进行了更新。新外观的错误页面上的功能是围绕MailChimp的新品牌中心的不合时宜的，天真的插图。说真的，说“我迷路了”，有什么比一头脑袋埋在洞里的驴子更合适呢？

24.Volta鞋类

图片：沃尔特

Volta是一家位于米兰的鞋店，它的网站包含了很多很酷的UI设计，我们喜欢它不仅仅是一个标准的404页面。高质量，专注的产品摄影与一个古怪的触摸-一个微型大理石雕像，点头到旗舰店的意大利家-帮助提升这个错误的页面。

25.布雷特·维克多

计算机科学家Bret Victor的404页面，当然是受到Rene Magritte的标志性画作《图像的背叛》的启发，向观众提出了一些富有挑战性的哲学问题。如果这不是一页，那它是什么？什么是“页面”？它是一种可以真正说存在的东西吗？这个明显没有页面的“this”指的是什么？有什么是真的吗？让你觉得不是吗？

26.IMDb

另一个很棒的基于电影的404错误页面可以在IMDb网站上找到，这个全面的电影事实数据库在其404页面上添加了一些著名电影的经典台词，并对其进行了巧妙的编辑，以适应其新的用途。看看你得到了什么。

27.bit.ly

图片：Bitly的

404页面的链接缩短服务位，ly的特色是一条可爱的河豚鱼在互动的海洋中上下翻腾。搁浅的鱼会对你的鼠标移动做出反应，而云朵和海鸥中微妙的动画细节有助于营造一种平静的情绪。

28.DropBox

DropBox取代了多年来装饰其404页面的埃舍尔式的“不可能的盒子”，取而代之的是一幅同样古怪的插画。我们喜欢把所有出错的事情都抽象地表现出来——轮子掉了。这是一个漂亮的、简单的手绘插图，它很好地传达了信息，并提供了大量有用的导航链接，为顶级用户提供了体验。

29.eHarmony

当你在寻找爱情的时候，你最不想听到的就是：你找不到它。在线婚恋网站eHarmony的404页面显示，虽然你所访问的页面无法访问，但海里还有大约50万条鱼。

30.星巴克

星巴克充分利用其主要产品来说明其404信息，在这个例子中，丢失咖啡杯的“泄密”标志被用来讲述这个故事，还有一些无术语的拷贝来帮助用户找到他们想要的。

31.暴雪娱乐公司

视频游戏开发商暴雪对其404页面采取了独创的方式，在它，工作的网站设计似乎已经成为破碎：标题导航下降，有一个破碎的屏幕效果。没有太多有用的链接，相反，暴雪选择了一个严肃的错误信息：“这个页面不存在或其他一些可怕的错误已经发生”。