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

古城微笑少年丶 2022-12-08 06:18 262阅读 0赞

![format_png][]

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

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

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

## Github ##

![format_png 1][] 地址：https://github.com/404

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

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

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

## CSS-Trick ##

![format_png 2][] 地址：https://css-tricks.com/thispagedoesntexist，这 url 也是很个性

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

## Klaus ##

![format_png 3][] 地址：https://klaus.dk/404/

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

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

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

## Roman Braiser ##

![format_png 4][] 地址：https://www.romainbrasier.fr/404 （需自搭梯子）

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

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

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

## Airbnb ##

![format_png 5][] 地址：https://www.airbnb.cn/404

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

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

## Figma ##

![format_png 6][] 地址：https://www.figma.com/404/

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

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

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

## IMDB（互联网电影数据库） ##

![format_png 7][] 地址：https://www.imdb.com/404

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

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

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

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

## Smashing Magazine ##

![format_png 8][] 地址：https://www.smashingmagazine.com/404

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

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

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

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

## Marvel（漫威） ##

![format_png 10][] 地址：https://www.marvel.com/404

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

## Pixar（皮克斯） ##

![format_png 11][] 地址：https://www.pixar.com/404

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

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

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

![format_png 12][] 地址：https://www.20thcenturystudios.com/404

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

## Hakim El Hattab ##

![format_png 13][] 地址：https://hakim.se/404

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

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

## Blizzard（暴雪公司） ##

![format_png 14][] 地址：https://www.blizzard.com/zh-tw/404

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

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

## Disney（迪士尼） ##

![format_png 15][] 地址：https://www.disney.com/404

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

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

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

![format_png 16][]

## Dave Barton ##

![format_png 17][] 地址：http://www.limpfish.com/404

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

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

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

## Embrace Pet Insurance ##

![format_png 18][] https://www.embracepetinsurance.com/404

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

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

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

## 小结 ##

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

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

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

### 学习交流 ###

*  关注公众号【前端宇宙】,每日获取好文推荐
 *  添加微信,入群交流

![format_png 19][]

“在看和转发”就是最大的支持

[format_png]: /images/20221123/6847d8b860b5481c8d28bf8a34e042e8.png
[format_png 1]: /images/20221123/8946c9e466a745eead597975d483aa0e.png
[format_png 2]: /images/20221123/843453a6a76e418d890092e7b6c4b543.png
[format_png 3]: /images/20221123/b8fb207441724b268b59ea36d46e4511.png
[format_png 4]: /images/20221123/920ca4524fab447594706bd48b204075.png
[format_png 5]: /images/20221123/aec9ece56597404b817a7f525cfa37b5.png
[format_png 6]: /images/20221123/176492921ac14745a2bc8387e18dc433.png
[format_png 7]: /images/20221123/66f1d3d59e754b96b39c483347b8667e.png
[format_png 8]: /images/20221123/5b14ff4e26f646ac9ef391c0e9aeeca7.png
[format_png 9]: /images/20221123/566cfc176a2f4f9eaea552acb77f9154.png
[format_png 10]: /images/20221123/26c722cf223348eab45cc93e2f1476a6.png
[format_png 11]: /images/20221123/952d121383ed4c00b792486ec741c455.png
[format_png 12]: /images/20221123/b5c53204508e4c1385ef673ffc03363c.png
[format_png 13]: /images/20221123/5ba01a6b92ad4d1c8e2242c36978d0c7.png
[format_png 14]: /images/20221123/33df9fcf83e245f486141520abab38dd.png
[format_png 15]: /images/20221123/f054db1183d74b01910b3035c5b2ee5b.png
[format_png 16]: /images/20221123/38603f04653e441d8dd4d88b2e10a865.png
[format_png 17]: /images/20221123/f91efd25f0e846ebb47b4d193c663983.png
[format_png 18]: /images/20221123/3d74715d8a324e78a6342659eeb38206.png
[format_png 19]: /images/20221123/7e91b049625240e4b0896ff0f4633637.png