超级有趣的七个 404 错误页面设计

简介:

曾几何时,当你输入错误链接时,很多网站都会显示幽默的图片或短语来提醒你该网页不存在,但这样的日子已经一去不复返了。在一个新的互联网时代,GIF 就是新的文字,而视频就是新的图片,在这种情况下,打油诗和段子根本无法从浩如烟海的 404 页面中脱颖而出。不过 TC 吃惊地发现,大部分网站仍然没有将 GIF 或者动图这种重要的互联网表现形式充分利用起来。为了激发各位网页设计师的灵感,TC 从网上找到了七个最有意思的动态 404 错误页面,下面就与大家一起分享。

Giphy

image

自从我们通过 Giphy 来给文章寻找所有的 GIF 动图以后,我们就认为让 Giphy 网站成为我们畅游互联网世界的第一步,完全是明智之举。

但老实说,我们一开始对 Giphy 的表现很失望,后来才发现 Giphy 不断显示不同的 404 错误页面,而且每一个都会带给人不同的炫酷体验。所以,尽管 Giphy 的几个 404 错误页面被赋予一点儿动态的元素,但我们还希望 Giphy 能向我们呈现更多以 404 错误页面为主题的动图狂想曲。Giphy,开始你的游戏吧!

Bitly

image

我们认为 Bitly 可能已经看到其 404 错误页面有大量的访问量,因为该公司始终专注于为内容提供短小的链接,虽然这种做法有时让人摸不着头脑。尽管我们不确定 Bitly 的 404 错误页面究竟发生了什么,但至少这种设计是很可爱的。作为一种福利,当你点击鼠标时,会出现一些波浪。

Marvel App

image

Marvel 的 404 错误页面同样很有趣,看上去就像机器人与自动售货机的混合体。值得一提的是,Marvel 是一家原型软件开发商,而不是那家知名的漫画书出版商。

彭博社

image

大家一定要挺住,因为 彭博社网站 的 404 错误页面动图太雷人了。页面加载时,一开始出现的是常见的 404 错误页面动画,接着 404 慢慢变小,出现了一个 CRT 显示器和机箱,电脑旁边的人很快把整个电脑砸毁,接着这个人自己也被桌子切成两半。我们想要说的是,我们的确不清楚这个动图想要传达什么意思,尽管如此,还是挺有意思的。

Airbnb
image

Airbnb 的 404 错误页面动图一开始看上去也很正常,但后来女孩手里拿着的冰淇淋蛋卷突然掉到了地上。这个动图的设计倒也没什么突破性,只是由于它是动图,所以才登上了我们的名单。

GitHub

image

GitHub 以“星球大战”为主题的 404 错误页面相当酷,尤其是它会对你的鼠标活动作出回应。3D 元素同样是点睛之笔。

Uber

image

最后是 Uber!当我看到这个打车应用巨头的网站上也有快乐元素时,还是非常惊讶的。在页面载入时,车库门突然打开,里面许多东西露了出来——你去年在 Uber 车上丢失的那台 iPhone 可能就在其中。

文章转载自 开源中国社区[http://www.oschina.net]

相关文章
|
XML Java 数据库连接
jsp访问原理和跳转流程
jsp访问原理和跳转流程
113 0
|
4月前
|
搜索推荐 PHP UED
PHP中的异常处理与自定义错误页面
【8月更文挑战第33天】在PHP开发中,优雅地处理异常和错误是提升应用稳定性和用户体验的关键。本文将引导你理解PHP的异常处理机制,并教你如何创建自定义错误页面,以增强你的应用对错误的响应能力。从基本的错误类型到深入的异常捕获,再到实现个性化的用户提示,我们将一步步构建一个更加健壮的PHP应用。
43 4
|
7月前
404错误页面源码,简单实用的html错误页面模板
小编精心准备一款404错误页面源码,简单实用的html错误页面模板,简单大气的页面布局,可以使用到不同的网站中,相信大家一定会喜欢的
84 2
404错误页面源码,简单实用的html错误页面模板
|
8月前
错误或拦截页面的html代码
错误或拦截页面的html代码
66 0
错误或拦截页面的html代码
|
前端开发
fastadmin框架怎么重定向至后台模块
fastadmin框架默认打开指向的是前端index模块部分的页面,有时我们需要切换至后台非常复杂,这时就需要进行一下重定向。
271 0
|
XML 前端开发 Java
前端|静态到动态的实现—JSP技术
前端|静态到动态的实现—JSP技术
199 0
在错误页面中使用JSTL标签
在错误页面中使用JSTL标签
44 0
|
运维 前端开发 安全
简约而不简单的通用错误页面
线上某个项目由于后端 controller 层代码异常, 没有执行到渲染页面模版, 造成前端 Web 页面展示出来是一个空白的页面,俗称白屏。