部分网页无法显示该页面(您浏览的页面无法显示)(1)

自从网络冲浪成为当代人类工作、交往与娱乐中必不可少的一部分,「404 页面」便与之如影随形。404是一种HTTP状态码,是最常见的互联网错误之一:「404 页面」的出现提醒用户请求的页面不存在或无法找到(not found)。

在中国独特的互联网语境下,作为舶来品的「404 错误」拥有着多重含义。一方面,404带有“消失、崩溃”的含义,代指失踪的人或事物,随后作为网络用语被玩儿成了梗;另一方面,404与“该内容已删除”“此内容因违规无法查看”联系在一起,其社会性含义及其引发的公众情绪共振不言而喻,早已成为大家彼此之间心照不宣的共同记忆。

部分网页无法显示该页面(您浏览的页面无法显示)(2)

有关「404 页面」的由来有多种说法,但似乎均没有切实的依据。就「404 错误」的起源,曾经流传着这样一个故事:欧核研究中心(CERN)有个404号房间,那里存放着互联网第一台服务器,也是万维网发明者 Tim Berners-Lee 的办公室,但人们总是无法在这里找到 Berners-Lee ……尽管在后来,开创了超文本结构的另一位互联网发明者 Robert Cailliau 彻底否认了这个浪漫传说的真实性,并且在他看来这不过是无足轻重的琐事。

部分网页无法显示该页面(您浏览的页面无法显示)(3)

部分网页无法显示该页面(您浏览的页面无法显示)(4)

上:Tim Berners-Lee

©️CERN

下:Robert Cailliau

©️Wikipedia

亦有说法称,这一代码实则由 Tim Berners-Lee 在1992年定义。基于文件传输协议中使用的代码,其中以“4”开头的代码在本质上代表着错误。HTTP 404 的第一个“4”实际上表示客户端错误,例如拼写错误的URL链接或被移除的页面;“0”表示一般的句法错误,例如拼写错误;最后一个“4”则表示“40-”错误族中的特定错误,其中包括“400: Bad Request”和“403: Forbidden”。然而,无论如何,「404 错误」早已成为主流文化的一部分,创意十足的「404 页面」也占据着互联网中有趣的一角。

部分网页无法显示该页面(您浏览的页面无法显示)(5)

对产品经理和设计师们来说,既然无法避免,不如干脆将错误转化为机遇——把「404 页面」包装成品牌宣传最别致的广告位。
优秀的「404 页面」不仅需要提供简明的问题描述与一个清晰合理的解决方案来帮助访问者完成访问目标,更能以创造性的文字、图像语言或游戏般的互动体验,在消除访问者的挫折感与扫兴感觉的同时,增加他们对公司的品牌特征和业务属性的敏感度和好感度。在此,我们精选了5种创意角度和22个优秀的「404 页面」设计,一窥设计师们如何将错误页面转化为创意的起点。

部分网页无法显示该页面(您浏览的页面无法显示)(6)

部分网页无法显示该页面(您浏览的页面无法显示)(7)

A24:玩趣风格的延续

从电影到周边,从 logo 到海报,美国独立电影制作公司 A24 的独特品味和玩趣风格令人印象深刻。刷新 A24 的「404 页面」,来自不同电影情节的gif轮番上演:垂头丧气的少女、瘫倒在地的病人、冲破玻璃门的少年……遭遇错误页面的沮丧心情,A24 是懂的。

部分网页无法显示该页面(您浏览的页面无法显示)(8)

部分网页无法显示该页面(您浏览的页面无法显示)(9)

页面中的片段分别来自A24公司于2017年发行的喜剧片《伯德小姐》(Lady Bird)与奇幻惊悚片《圣鹿之死》(The Killing of a Sacred Deer)。 ©️A24

Pixar:Awww…别哭

《头脑特工队》在皮克斯动画工作室近年来的电影中算是反馈一般的一部,但运用在皮克斯网站的「404 页面」却堪称完美。情绪小人忧忧(Sadness)哭丧着脸,一旁写着“Awww…别哭。只是一个404错误!你要找的东西可能在长期记忆中放错了位置。”伤心的人物形象牵动访问者的心弦,可爱又点题的文字又引人会心一笑。

部分网页无法显示该页面(您浏览的页面无法显示)(10)

©️PIXAR

LEGO:一切还是棒棒哒!

乐高的「404 页面」与皮克斯的有异曲同工之妙。屏幕前的我们或许因为找不到心仪已久的乐高套装而像那个乐高小人般惊慌失措,但我们也能得到乐高标志性的安慰:“ Sorry,没找到你要的网页!不过别担心,一切还是棒棒哒!”

部分网页无法显示该页面(您浏览的页面无法显示)(11)

©️LEGO

Airbnb:掉在地上的冰淇淋球

虽然不像电影公司那样可以从库存中轻松找到生动的人物和画面,但 Airbnb 以一个可爱的小动画发挥着同样的功效:度假中的女孩因冰淇淋球掉到地上而转喜为忧,原本简单的页面顿时增加了幽默和亮点。此外,Airbnb 的「404 页面」不只有“回到主页”的按键,而是包括多个链接,以这一实用的设计细节,贴心地将访问者导向不同的功能页面。

部分网页无法显示该页面(您浏览的页面无法显示)(12)

©️airbnb

部分网页无法显示该页面(您浏览的页面无法显示)(13)

KonMari:网站也做断舍离

日本空间规划师、“整理女王”近藤麻理惠(Marie Kondo)的“KonMari”整理法,教人们只保留那些能够激发欢乐(spark joy)的东西,并对要丢弃的东西表达感谢。她的网站也经历了断舍离,“我们一直在整理——且我们怀着感激的心情放下了这一页”,从房间整理到人生整理,麻理惠的治愈与解忧哲学已延续到了「404 页面」中。

部分网页无法显示该页面(您浏览的页面无法显示)(14)

©️KonMari

不过,据日媒报道,近藤麻理惠近期在采访中表示,自从生完三胎后她开始有些“摆烂”——她的生活发生了巨大变化,外部整理已经让位于生活事务。“我的家很乱,但对我来说,我在人生的这个阶段度过时间的方式是正确的。”

Spotify:404与心碎

旋转的黑胶唱片传出心碎的音乐,这首曲子正是叫做《404》…… Spotify 的「404 页面」以粉色背景和简洁的插画营造出怀旧之感,人们仿佛经不住眼见伤怀,忘记了原本在找寻的信息,而是想起了那些在心碎时循环播放的曲目。

部分网页无法显示该页面(您浏览的页面无法显示)(15)

部分网页无法显示该页面(您浏览的页面无法显示)(16)

©️Sportify

NASA:迷失宇宙

NASA 一直是文案界的高手——不过还有什么比日月星辰更富有诗意的呢?NASA 的「404 页面」以一片紫色的星系为背景,“你要找的星体已经消失在事件视界之外,”浪漫之余还带着一丝可爱的书呆子气。

部分网页无法显示该页面(您浏览的页面无法显示)(17)

©️NASA

部分网页无法显示该页面(您浏览的页面无法显示)(18)

Pantone:作为颜色的404

有没有想过“404”会是什么颜色?Pantone 年度流行色网页(Color of the Year)的「404 页面」给出了标准答案。

部分网页无法显示该页面(您浏览的页面无法显示)(19)

©️PANTONE

The New Yorker:诙谐一刻

《纽约客》的「404 页面」延续着杂志一贯的个性,一幅典型的纽约客风格插画,幽默、讽刺而不乏深意,毫不费力地将用户的崩溃感受转化为诙谐一刻。

部分网页无法显示该页面(您浏览的页面无法显示)(20)

“重新计算……重新计算……” ©️The New Yorker

Interview Magazine:

安迪说什么,便是什么

美国杂志 Interview Magazine 的「404 页面」同样也是酷酷的——“杂志创始人 Andy Warhol 说未找到页面,但别让这影响你的心情,不妨去首页看看。”此刻的访问者应该也会情不自禁地跟着安迪说的去做吧。

部分网页无法显示该页面(您浏览的页面无法显示)(21)

©️Interview Magazine

Wizarding World:

魔法世界的黑暗角落

在由《哈利·波特》小说系列作者J·K·罗琳创立的品牌“Wizarding World”(魔法世界,全称“J·K·罗琳的魔法世界”)官网上,「404 页面」则与故事中的经典一幕联系在了一起:哈利·波特第一次使用飞路粉去对角巷,结果太紧张没有念清楚地名,被送到了危险的黑魔法商店翻倒巷。看到这个画面的我们,仿佛也和站在壁炉里的哈利一样,在魔法世界网迷了路。

部分网页无法显示该页面(您浏览的页面无法显示)(22)

©️Wizarding World

美术馆官网的404:

不容错过的美育机会

对博物馆而言,真正有效的公共教育,是不放过任何一个传播艺术的机会,「404 页面」的设计自然也不例外。卢浮宫和奥赛博物馆以迷宫和沙漠图景呼应找不到目标信息的迷失感;蓬皮杜中心幽默地选择了艺术家 Jean-Michel Alberola 的壁画,作品中的“TOUT VA BIEN”似乎在安慰用户一切都会好起来;MoMA和大英博物馆则以不同时代的作品表达了惊讶——Edward Ruscha的《OOF》是人们会发出的感叹声,伦勃朗自画像中的表情是不是也像极了电脑屏幕前的你?

部分网页无法显示该页面(您浏览的页面无法显示)(23)

图中为卢浮宫馆藏的埃及托勒密王朝迷宫祭桌。©️LOUVRE

部分网页无法显示该页面(您浏览的页面无法显示)(24)

部分网页无法显示该页面(您浏览的页面无法显示)(25)

Gustave Guillaumet《撒哈拉沙漠》

(Le Sahara,1867),布面油画,卢浮宫馆藏

©️Musée d'Orsay

部分网页无法显示该页面(您浏览的页面无法显示)(26)

Jean-Michel Alberola《Marcel向你问好》(Vous avez le bonjour de Marcel,2002),画面中的“TOUT VA BIEN”意为“一切都好”。

©️Center Pompidou

部分网页无法显示该页面(您浏览的页面无法显示)(27)

“Oof!”——“唉哟!” ©️MoMA

部分网页无法显示该页面(您浏览的页面无法显示)(28)

部分网页无法显示该页面(您浏览的页面无法显示)(29)