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

共 3520字,需浏览 8分钟

 ·

2020-09-20 01:23


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

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

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

Github

地址:https://github.com/404

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

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

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

CSS-Trick

地址:https://css-tricks.com/thispagedoesntexist,这 url 也是很个性

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

Klaus

地址:https://klaus.dk/404/

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

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

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

Roman Braiser

地址:https://www.romainbrasier.fr/404 (需自搭梯子)

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

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

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

Airbnb

地址:https://www.airbnb.cn/404

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

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

Figma

地址:https://www.figma.com/404/

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

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

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

IMDB(互联网电影数据库)

地址:https://www.imdb.com/404

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

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

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

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

Smashing Magazine

地址:https://www.smashingmagazine.com/404

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

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

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

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

Marvel(漫威)

地址:https://www.marvel.com/404

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

Pixar(皮克斯)

地址:https://www.pixar.com/404

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

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

20th Century Fox(20世纪福克斯公司)

地址:https://www.20thcenturystudios.com/404

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

Hakim El Hattab

地址:https://hakim.se/404

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

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

Blizzard(暴雪公司)

地址:https://www.blizzard.com/zh-tw/404

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

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

Disney(迪士尼)

地址:https://www.disney.com/404

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

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

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

Dave Barton

地址:http://www.limpfish.com/404

这个 404 页面来自于 David Barton (一位艺术家)的个人网站

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

哎嘛,同样是 404 页面,为何就你的那么具有艺术感呢?!

Embrace Pet Insurance

https://www.embracepetinsurance.com/404

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

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


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

小结

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

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

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

学习交流

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

“在看和转发”就是最大的支持
浏览 139
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报