国外那些富有创意的 404 页面

最近在搜集前端相关文章时，无意看到了几篇关于国内外 404 页面的收集，觉得很多网站的 404 页面 特别富有创意。

所以趁着周末还有些空余的时间，去梳理了一份富有创意的 国外网站 404 页面。

周五啦，各位前端大侠们不要太过于沉迷于技术，一起放松一下吧~

Github

作为程序员，当前得先拿 Github 网站来镇楼喽~

GitHub 以 “星球大战” 为主题的 404 错误页面相当酷（实话实说，直到此刻我才知道 Github 的主题是星球大战，愧对社区?），一个细节是，当你鼠标活动时，它会对你的鼠标活动作出响应 —— 这种特效技术称为 视差卷轴特效（parallax scrolling）

对 视差卷轴特效 感兴趣的读者快关注 “前端号” 来催更~~

CSS-Trick

CSS Trick 网站也是我们前端人员经常逛的网站，它的 404 页面也别具个性，放了一张 CSS 相关的截图，既自然又贴合主题。

Klaus

来自丹麦的名为 Klaus 的开发人员在 404 错误页面的设计中充满着计算机程序员的情怀，满满的复古风。

克劳斯（Klaus）的 404 页面带我们回到了计算机技术的早期时代。页面中会展现古老的计算机 Shell 界面，然后字符一个一个打印出来~~ （对哦，不是纯静态页面）

画面中展现的是 Commodore 64 计算机界面，它是 1982 年 1 月由 Commodore International 推出的 8 位家用计算机。它被 《吉尼斯世界纪录》列为有史以来销量最高的单计算机模型（1500万台）。

Roman Braiser

本来想干活，结果因为网页打不开玩了 1 个小时游戏？

法国里尔的一名开发人员 Roman Braiser 在404页面中添加了一个拯救小旅鼠的小游戏。

不幸进入该页面的用户，可以点击页面里的链接按钮，进入“为小旅鼠提供降落伞”的游戏中，直到最后一只小旅鼠落地游戏结束，会跳出一个感谢页面。当然，用户也可以不玩游戏直接回到主页。

Airbnb

我们熟知的 Airbnb，它的 404 页面也采用了动图，随着页面的加载，本来面带笑容的小女孩的冰激凌掉了...笑容逐渐消失...

可为啥莫名老想一遍遍地看？！可能幸灾乐祸才能缓解你的郁闷

Figma

估计这张 404 页面是设计师的最爱，嗯，你猜的没错，页面拖拽圆点可以改变形状。

Figma 是一个基于 web 端的在线设计平台，可以想象这家网站的网页设计师得多热爱她们的工作...

从前端角度来说，这些点就是贝塞尔曲线的控制点啦，页面实现也是 canvas 画布 —— 建议官方添加一个功能，在拖动时实时给出这些贝塞尔参数呗，这样我们前端也可以愉快的玩耍了

IMDB（互联网电影数据库）

IMDB的 404 页面很应景，展示了许多著名电影的经典台词，通过一些特定台词引导用户切回其他页面。

用咱们熟知的影视剧来做示例的话，就相当于：

曾经有一份真挚的爱情放在我面前， 我没有珍惜， 等我失去的时候我才后悔莫及...

于是你不但没生气，还妥妥地被安利了一把星爷的《大话西游》。

Smashing Magazine

简单介绍一下这个 “Smashing Magazine” 网站，它是专业的网页设计师和开发人员的在线杂志网站（受众主要是两个相爱相杀的职位 —— 设计师和前端），站内对前端开发者来说也有不少的干货。

上面看到截图是最新的，可能觉得平平淡淡，之前这个网站的 404 页面可能会有创意一些，也更加 “理工男审美“ 一些：

• 页面 404 文章的格式与他们的标准文章相同
• 同时还融合了幽默，称 “Smashing Magazine's Server” 为作者，“Right Now” 为出版时间，文章内容则是 “我们找不到您的页面！（404错误）”

个人认为还是觉得旧版有创意，新版更偏向美观

Marvel（漫威）

相信读者很多都是漫威迷，如果你第一次打开漫威的 404 页面看到只是一把 “雷神之锤”，那么请不要担心，漫威公司有的是钱，它不会吝啬在 404 上多放一些角色，你所要做的只需要刷新当前 404 页面即可~

Pixar（皮克斯）

举世闻名的皮克斯（Pixar）在 404 页上放置的这个角色名为忧忧（Sadness） —— 它来自 2015 年上映的《头脑特工队（Inside Out）》，这部电影豆瓣评分高达 8.7 分，没看过的读者可以去找来看看哦，的确是一部很受启发的电影。

在这个 404 页面上还附带一段可爱的文案，貌似这段文案就是在动画电影情节中出现的。（如果有读者知道具体出处可以留言告知~）

20th Century Fox（20世纪福克斯公司）

20世纪福克斯公司的 404 页面上放置的是该公司出品的经典视频短片。每次刷新看到是不一样的短片（我打开看到是 《爱德华·剪刀手》（Edward Scissorhands）电影片段），每个视频的配有相关的文本片段，都不同哦~ 它不仅触发了精彩的电影记忆，而且点击后会跳转到该影片介绍页面。

Hakim El Hattab

这张页面比较猎奇，一进入页面那些那么多眼睛 ? 盯着你，还一眨一眨的，略微密恐。不仅如此，当您移动光标时，眼球实际上跟随您...

还是赶紧点击页面上的连接前往主页吧。

Blizzard（暴雪公司）

暴雪娱乐公司（Blizzard Entertainment）的 404 页面用游戏场景来提醒用户点击下方按钮回主页，非常符合游戏公司的特征。

这张页面的前端为了减少交互，直接放了一个 video 标签...em...颇有本小编风范，能少做的绝不多码一个字

Disney（迪士尼）

同属于大厂，迪士尼大厂解决 404 页面用的也是动画电影角色，也是直接放了一个 video 标签。

大厂的解决方案从来都是这么简单高效么？！！

不禁让老夫想起了自己编程的处事风格，果然高手过招从来不多费口舌：

Dave Barton

这个 404 页面来自于 David Barton （一位艺术家）的个人网站。

该网站的 404 页面也很文艺委婉，用旧报纸背景客观叙述每个 404 页面想要的内容：真正的 HTML 内容。

哎嘛，同样是 404 页面，为何就你的那么具有艺术感呢？！

Embrace Pet Insurance

”我们的网页被狗吃了...“

emm...这家宠物保险公司这个心机耍的可以，我们就算访问到 404 页面，看到这么萌的宠物狗，老夫的少女心都花了，还怎么可能会生气啊

好了，暂时就整理这么多了~

小结

许多品牌和企业都忽略了 404 错误页面的重要性，一个视觉上吸引人的，用户友好的404错误页面向客户展示了您对他们的关心，并且有兴趣将其保留在您的网站上。

如果恰好你自己搭建博客或者网站，那么就可以借鉴或参考这些别具一格的 404 页面，让你的网站更具个性风格。

如果觉得本文还不错，点个“在看”呗~~