# 9 张图告诉你，原来网页 404 也能这么好玩 \| 灵感早读 - 作者：APPSO - 发布时间：2017-07-11 19:17 - 原文：https://www.ifanr.com/app/867741 ![](https://s3.ifanr.com/wp-content/uploads/2017/07/102863010-legoimage.1910x1000.jpg) > A 君导读：每个人上网都遇到失效 404 网页，但你是否知道 404 网页也能很好玩？AppSo（微信公众号 AppSo）今天分享的这篇文章，来自著名游戏化应用 Walkr、[记账城市](http://www.ifanr.com/app/831764)团队 fourdesire，让他们告诉你，有趣的 404 页面长啥样。 我们在网路上浏览时，一般都是利用网址来找寻你需要的网页。而每次当你输入的网址错误、或是原本的网址更改了，就会出现「HTTP 404」找不到网页的画面。 一般我们看到的画面会是类似这样的状况： ![](https://s3.ifanr.com/wp-content/uploads/2017/07/020.jpeg) 看起来很眼熟对吧？有时候光是看到这个画面就会想叹叹气呢。由于 404 可以说是最常见的一种 HTTP 状态码，因此许多网站都会特地为这个 404 的画面做设计。 让浏览者即使从错误的链接来访你的网站，也不会有「链接是坏的，可能这个网站不存在了」或是「网站可能消失了，不再经营了」的感觉而直接关闭网页、无形中失去了原本可能来拜访的浏览者。 而**一个诙谐有趣的 404 画面不仅能让浏览者知道自己来对了地方，要是够有趣的话，还会让人会心一笑呢！** 让我们来看看各大公司网站为我们这些可能迷路的旅人准备的小惊喜吧： Google 的 404 网页，相信有不少人看过了，简单的手绘插画让人觉得轻松又可爱： ![](https://s3.ifanr.com/wp-content/uploads/2017/07/130709-0001.jpeg) Dribbble 的 404 网页，「dribble」 在篮球中是指运球的意思（Dribbble 的 Logo 本身就是一颗洋红色的篮球！），而在 dribbble 上的 404 网页就是一个 Air Ball 啰。 ![](https://s3.ifanr.com/wp-content/uploads/2017/07/130709-0002.jpeg) GitHub 的 404 网页相当精致，相信星战迷一定对这个场景不陌生，记得点进去移动你的滑鼠看看网页的互动效果。 ![](https://s3.ifanr.com/wp-content/uploads/2017/07/130709-0003.jpeg) Dropbox 由于具有文件分享的功能，所以它的 404 同样一定也很多人看过：是个衍生自 Dropbox Logo 的视觉错视立体方块图 ![](https://s3.ifanr.com/wp-content/uploads/2017/07/130709-0004.jpeg) 脸书 Facebook 虽然是世界网站流量排名第一的网站，但它的 404 其实不是这么常见，而自然脸书的 404 也是从按「赞」设计延伸出来的。 ![](https://s3.ifanr.com/wp-content/uploads/2017/07/130709-0006.jpeg) Lego 网站的 404 画面做得相当活泼有趣 ![](https://s3.ifanr.com/wp-content/uploads/2017/07/130709-0005.jpeg) 这是一个谐音梗，坏掉的链接有时候我们称之为死亡的链接 「Dead Link」，而 Link 又刚刚好是任天堂著名游戏的主角姓名…… ![](https://s3.ifanr.com/wp-content/uploads/2017/07/224735-DeadLink-Header.jpg) 一样是老游戏，红白机上的小蜜蜂画面搭配着 「Play again」，将浏览者带回网站的主要页面。 ![](https://s3.ifanr.com/wp-content/uploads/2017/07/130709-0007.jpeg) 老游戏的梗常常被拿出来恶搞：还记得到处都找不到正牌公主的马里奥吗？ ![](https://s3.ifanr.com/wp-content/uploads/2017/07/cool-404-errors-mario.jpg) 彩色 Bar 跟蓝色当机画面让大家可以回味以往的美好时光？ ![](https://s3.ifanr.com/wp-content/uploads/2017/07/20070821122521598.gif) ![](https://s3.ifanr.com/wp-content/uploads/2017/07/galiacho.gif) 自定义的 HTTP 404 虽然平常在网页上看不到、很容易被设计师忽略，但如果你只是让用户看到那个浏览器预设的 404 画面时，往往大家会直接关闭网页离开呢。 **相对的要是可以针对 404 页面做适当的设计，即使浏览者来错了入口，也可以提升浏览者对你的好印象，进而顺利引导浏览者回到你的网站中。**记得为你的客人们准备一些小小的惊喜吧！ 参考文献：Wiki HTTP 404 图片来源： Andrew Stawarz, CC Licensed 文章授权转自「fourdesire」，作者 Decill Chang，原文链接：[404 頁面：為網路上的旅人準備的小驚喜](http://blog.fourdesire.com/2014/12/11/404-ye-mian-wei-wang-lu-shang-de-lu-ren-zhun-bei-de-xiao-jing-xi/) ![AppSo qrcode signature](https://s3.ifanr.com/wp-content/uploads/2016/09/AppSo-qrcode-signature.jpg)