新产品

404 的传说:你访问的页面不存在


关于“404错误”的起源,互联网上一直流传着一个传说。

在欧洲核研究组织的404号房间内,存放着互联网第一台服务器,万维网的发明者 Berners-Lee 就在这里办公。如果你要访问网页,必须向这个房间提交申请,如果找不到这个网页就会提示你“404not found ”。

当人们让 Berners-Lee 就 “404错误”发表意见时, Berners-Lee 以这是无关紧要的琐事为由拒绝置评,让这段传说更加扑朔迷离。

而开创了超文本结构的另一位互联网发明者 Robert Cailliau,在最近接受《连线》杂志采访时再次否认了这则传说的真实性,并解释了 “404错误”的真正来源:

“404错误”就是程序员为了让用户在网络连接错误时,可以知道自己错在哪而设置的。

404的传说:你访问的页面不存在

(你对这个页面也许不陌生)

这样的说法让“404错误”的传奇色彩荡然无存,可能会让很多人失望吧。

不过自从互联网诞生以来,设计师们为了让你不会因为错误访问而对网站失望,在404页面上花了不少功夫,而404页面的变化也是互联网交互形式发展的一个剪影。

下面爱范儿(微信号:ifanr)带你来看看中外网站那些有趣的404页面。

搜索微信公众号爱范儿(微信号:ifanr),后台回复“404”,获取文中提到的,以及更多有意思的“404页面”

国外篇

Facebook

404的传说:你访问的页面不存在

看起来,Facebook 的404页面似乎不怎么走心,这个设计来源于自家的“点赞”图标。

Google

Google 在不同节日的 Logo 设计一直别出心裁,而它的404页面也不例外。

404的传说:你访问的页面不存在

你最熟悉的,可能就是这幅手绘风格的机器人。

但更有趣的是 Google Chrome 的404页面,这是一个操控恐龙躲避障碍物的小游戏。

404的传说:你访问的页面不存在

这个页面由 Google 设计师 Sebastien Gabriel 设计, Chrome 浏览器中众多经典的404页面 icon 都出自他手。

404的传说:你访问的页面不存在

吃豆人

404的传说:你访问的页面不存在

同样是把404页面做成小游戏,这家公司选择了经典了的街机游戏《吃豆人》( Pacman) 。

皮克斯

404的传说:你访问的页面不存在

皮克斯的404页面采用了《头脑特工队》中的“忧忧”在哭泣的画面,并配上“噢……别哭。”(Awww…Don’t Cry.)的文字。

IMDB

404的传说:你访问的页面不存在

影评网站 IMDB 则把不同电影中的经典台词用在了自己的404页面上。

彭博社

404的传说:你访问的页面不存在

Bloomberg 的404页面一段无厘头的动画,一个西装男拍散一部屏幕显示404的电脑,然后自己原地粉碎……

Airbnb

404的传说:你访问的页面不存在

网页找不到的心情,和冰淇淋球掉了有点像?

MiKandi

404的传说:你访问的页面不存在

MiKandi 是世界上第一个 Android 成人应用商店,它的404页面是一个金发裸体女郎在说“自己的衣服不见了”。

最忧郁的404页面

404的传说:你访问的页面不存在

这是伊利诺伊州香槟分校计算机机械协会网站的404页面,页面中会陆续打下一段段文字,告诉你对于它找不到页面十分沮丧,甚至想“爬进垃圾桶分解自己”。

404的传说:你访问的页面不存在

这一大段话都丧得不行,口吻跟《银河系漫游指南》那个换上抑郁症的机器人 Marvin 很像。

给“404not found ”加点特效

404的传说:你访问的页面不存在

404的传说:你访问的页面不存在

下一站,404

404的传说:你访问的页面不存在

这个404页面是个地铁站台,每隔一段时间就有一班地铁靠站,画面可以随着鼠标移动,戴上耳机听更有感觉。

让鼠标动起来

404的传说:你访问的页面不存在

404页面也是一个很好的用户交互界面,这个页面让幽灵的眼睛跟着鼠标动。

404的传说:你访问的页面不存在

同样是让眼睛跟着鼠标动,这个页面对密集恐惧症患者就很不友好。

由你来设计

404的传说:你访问的页面不存在

(网友作品)

这个404页面就是一个布满空白像素点画布,你可以根据自己喜好在上面随意涂鸦。

404的传说:你访问的页面不存在

(图: Reddit Place 界面)

这有点像今年愚人节 Reddit 发起的一个活动,让全球网友在一块空白的巨大画布着色。

总有一张动图能表达你的心情

404的传说:你访问的页面不存在

404的传说:你访问的页面不存在

每次打开都有不同的动图,看着都疼。

404的传说:你访问的页面不存在

404的传说:你访问的页面不存在

同样是不断变换的动图,风格更加多变。

货不对板的 “404网页”

404的传说:你访问的页面不存在

这家网站叫“404page found”,主要为了给那些已经从服务器中删档的旧网页存档,让用户可以浏览那些消失在互联网历史的网页。

404的传说:你访问的页面不存在

(一个麦当劳最想屏蔽的网站)

在这里可以找到1993年到2009年间的不同网站的历史版本,是个小型的互联网历史博物馆。

国内篇

在中国,“404”是个舶来品。在中国的互联网语境, “404错误”有了更多含义,它可以是网页不存在,可以是内容不符合法规,也可以是发布者主动删除了内容。正如《连线》杂志那篇文章所说:

“404错误”提醒着人们,网络技术,由人类创造,受人类控制,并非完全可靠。

下面来看看国内互联网的公司的各种“404页面”。

腾讯、百度和网易的 “404页面”都是失踪儿童信息,这些404页面可以让用户在的404页面中嵌入一段简单的代码,通过这个页面传播失踪儿童信息,体现了一家企业对公益事业的态度。

404的传说:你访问的页面不存在

404的传说:你访问的页面不存在

404的传说:你访问的页面不存在

404的传说:你访问的页面不存在

淘宝的404页面提醒着用户,淘宝是姓马的,马云的马。

404的传说:你访问的页面不存在

京东用了自家的“京东狗”。

404的传说:你访问的页面不存在

网易严选走了性冷淡风。

404的传说:你访问的页面不存在

新浪和新浪微博放在一起,对待404页面 ,感觉还是新浪微博的产品经理更上心。

404的传说:你访问的页面不存在

404的传说:你访问的页面不存在

知乎的404页面可以说很符合知乎的调性了。

404的传说:你访问的页面不存在

A 站的404页面有着浓烈的二次元风格,前段时间 A 站无法访问的几天相信很多人都看过略带忧伤的 AC 娘。

404的传说:你访问的页面不存在

论二次元,B 站家的22娘与33娘也毫不逊色,还在404页面新增了漫画小剧场。

404的传说:你访问的页面不存在

404的传说:你访问的页面不存在

腾讯视频跟 IMDB 类似,用了不同电影中的电影台词,还配上了剧照。

404的传说:你访问的页面不存在

优酷则抖了个机灵。

404的传说:你访问的页面不存在

爱奇艺顺手给你推荐一个视频。

404的传说:你访问的页面不存在

一看就知道是外卖平台的 “404页面”,这是饿了么的。

404的传说:你访问的页面不存在

美团的风格则和 AB 站有点像。

404的传说:你访问的页面不存在

大麦网的“404页面”大概很容易能触到粉丝的泪点。

404的传说:你访问的页面不存在

404的传说:你访问的页面不存在

404的传说:你访问的页面不存在

“404页面”是互联网中的一个错误,被称为“互联网的最后一页”。它的存在除了提醒人们访问的页面不存在,也悄悄成为了各个企业品牌宣传的广告位。

虽然超文本结构发明者 Robert Cailliau 认为对于“404页面”的创意毫无必要,但那些创意十足的“404页面”确实成了互联网中有趣的一角。

404的传说:你访问的页面不存在

对于产品经理和设计师来说,“404页面”也是 UI 设计中不可忽略的一部分,Google 设计师 Sebastien Gabriel 曾表示:

设计错误提示 icon 是一件有意思的事情,你希望用户最好永远不要看到它们,而一旦他们看到了,你就要避免他们产生更多扫兴的感觉。

至于该如何设计“404页面”,负责腾讯产品视觉和交互设计的 CDC 团队认为体验良好的 “404页面”应该遵循以下几个原则:

提供简明的问题描述,用轻松的话语消除访客的挫败感,使得访客转到某个地方而不是后退。

提供合理的解决方案,辅助访客完成访问目标。

提供个性化的友好界面,提升访问体验。

话虽如此,但愿你的互联网历程中不会遇到太多的404。