为什么别人家的 404 错误页面总是那么好看?

By | 2019年12月5日

编者案:我们在阅读网页的时分,总会时不时地遇到 404 毛病页面。为何会呈现 404 毛病页面?404 毛病页面究竟是甚么?这篇翻译自由线平台 Justinmind 的题为 Tips for better 404 error pages — with examples 的文章,向你引见了 404 毛病页面的相干背景。同时,作者还向你引见了 7 种炫酷10足的 404 毛病页面设计办法。

当你满怀热血地翻开阅读器,在某篇文章中看到1个十分感兴味的超链接,然后你特别想浏览这篇文章。当你点击这个链接后,后果显示 404 页面没法拜访,你一定有过这类阅历。遇到这类状况,会直接让你感到不快,并直接招致你的用户体验大打折扣。

但是,你从这个 404 页面上取得了甚么信息?这些信息有用吗?它们会让你不再忧伤吗?

你可以把 404 页面当作1个着陆页(landing page),虽然它能够是可以人人厌弃的着陆页。然后,你可以试想,假设这个毛病页面还可以参加其它元素,会有甚么不1样的体验?假如1个 404 页面设计得十分好的话,它会发生一模一样的效果,会让用户体验到你的品牌存在感。反之,可以说你就错过了1个品牌宣扬时机。

这篇文章中,我将向你复杂引见 404 毛病页面的相干背景,并引荐1些在设计方面标新立异的 404 页面。

甚么是 404 毛病页面?

首先,你能够会问,为何要叫做 404 毛病页面?其实,这个成绩的答案有点奥秘,这就要说到互联网开展史的最开端,在差不多 1990 年的时分。虽然有1种传奇说法称,之所以叫 404 毛病页面,是由于万维网创造者 Tim Berners-Lee 的办公室房间号就是 404。而假如你想拜访网页,就必需向这个房间提出请求,假如找不到这个网页,就会提示你「404 not found」。

实践上,404 毛病页面是客户端(即阅读器)的毛病,由于我们会经过阅读器理解你想要的资源(即你点击跳转进入的 URL 链接),而这个资源是不存在的,或许是没法找到的。如今你明白 404 毛病页面了吧。

不过值得留意的是,404 毛病通常都不是你招致的。你从其它站点复制粘贴的链接,谁也没法保证这个链接的真实性和无效性,而你对此也心有余而力不足。你能够需求关注的是,遇到这类 404 毛病页面时,你会怎样做。

关于 404 毛病页面的不同看法

大体上,有 2 种 404 毛病页面的设计方式。

1种是繁复素款。这类根本上没有甚么内容的设计方式可以十分直观地转达出相干信息:这个页面呈现了毛病,除给你1个前往到主页的链接,根本上就没有其它过剩的元素了。谷歌的 404 毛病页面就是这类典型设计。

但是,我其实不认同这类设计方式。在我看来,404 毛病页面至多应当告知用户,即使用户没有失掉其想要的内容,也其实不会有太大的影响。一切的毛病页面,至多不应当让用户的内心感到不快,并且经过1些风趣的元素转移用户的留意力。因而,404 毛病页面值得用心投资,从而设计出让用户觉得别具一格、浮光掠影的毛病页面。总之,你要记住的是,404 毛病页面其实也是1种着陆页。

404 毛病页面应当包括哪些元素?

不同品牌,可以适用不同的 404 毛病页面元素。根本上,我建议包括以下 7 种内容:

毛病信息

你需求让用户在第1工夫晓得没法找到他们正在拜访的这个页面。

品牌 Logo

供认本人的毛病,即使有时分这个毛病其实不是你招致的。值得留意的是,最好在 404 毛病页面的中心地位确保用户能看到你的品牌 Logo。

品牌定位

同时,确保 404 毛病页面和你的品牌定位相婚配。

1丝抚慰

1丝抚慰,虽然其实不算甚么,但在 404 毛病页面这类状况下,总是会遭到用户喜爱的。只不过,你不能太夸大。

链接至相干内容

在 404 毛病页面上,你可以添加 3 至 4 个能够会让用户感兴味的链接。不管如何也不要选择让用户直接走掉,即使是在 404 毛病页面上。

行动呼唤

还记得前文说过,要把 404 毛病页面当作着陆页来设计吧。所以,无妨参加1些着陆页设计逻辑:在页面添加1些「下载」、「注册」乃至「搜索框」等元素,让用户在蒙受「波折」同时可以有更好的选择。

简而不减

谁都不情愿翻开 404 毛病页面,却像点开了1部在线小说的觉得。另外,404 毛病页面也不应当像百度搜索的后果页面。你基本不需求那末多的文字。

7 种炫酷10足的 404 毛病页面设计

许多品牌 404 毛病页面的设计作风,都是中规中矩的,而且大少数没有1点创意。我们一定希望能看到哪怕有1丝不同的毛病页面。以下,我总结了大约 7 种受用户喜爱的 404 毛病页面设计。

高概念、具有视觉冲击的 404 毛病页面:Huemor

总部在纽约的网站设计公司 Huemor 的 404 毛病页面,背景是1张带有上个世纪 50 年代科幻大片的图片。背景图上的火箭人正在全力冲向外太空。

「啊!看起来仿佛曾经抵达了宇宙的止境。赶忙回来吧,英勇的探究者!」

播放视频内容的 404 毛病页面:Nectafy

专注内容运营的网站 Nectafy 的 404 毛病页面就十分风趣。当你进入 404 毛病页面后,这个网站会经过1段文字提示通知你毛病信息,同时向你引荐了1个视频。

这个视频是1个原创的 MV 短片。经过改写 U2 乐队的1首歌,填入新的歌词,而歌词粗心根本上就是通知你,你如今翻开了毛病页面,不要忧伤,你可以经过这个 404 页面上的搜索框和其它链接跳转查找你感兴味的内容。

这类 404 毛病页面十分有创意,而且这个想出这个创意的人把他的家人都请来演这部 MV,自弹自唱这首原创歌曲。

让人考虑的 404 毛病页面:Medium

著名的在线写作浏览平台 Medium 的 404 毛病页面设计十分繁复,进入这个页面就有1个硕大的黑体「404」字样映入视线。除这个次要信息外,还有1个显眼的搜索框,3 篇关于页面毛病的文章链接。这类设计也十分有想法!

设计心爱的 404 毛病页面:Github

软件项目托管平台 Github 的 404 毛病页面就十分成心思,参加了动画元素,设计十分心爱。同时,当你用鼠标将箭头放置在卡通人物上方时,还能看到1种视差效果。另外,Github 的 500 毛病页面也值得1看!

交互型 404 毛病页面:Canva

在线立体设计软件 Canva 就应用其设计方面的优势,向用户展现了1个基于交互的 404 毛病页面。除1句毛病信息提示和1个跳转至主页的链接,剩下的只要1副打乱的拼图。找不到你想跳转的页面,无妨花1点工夫玩1下拼图游戏也行。

技术宅型 404 毛病页面:Klaus

网页开发效劳商 Klaus 的 404 毛病页面,完全是 404 毛病页面中的「另类」。你在页面中根本上找不到 404 毛病页面的根本元素 —— 没有品牌 Logo,没有行动呼唤按钮,乃至都没有加入这个页面的按钮。

你好似也明白他们在转达出的信息:根本元素规则都是留给笨蛋的。

Klaus 公司的 404 毛病页面十分风趣。全部界面作风是 Commodore 64(Commodore 公司 1982 年推出的电脑型号)的载入界面。界面内容正在加载1个顺序,而这个顺序正在搜索你想跳转的链接。在完成搜索没有婚配后果后,页面就列出了磁盘目录,并找到两个文件名辨别为 FOO 和 BAR 的文件。明白了吗?

GIF 动画的 404 毛病页面:Kickpush

Gif 动画再复杂不过了,你能够之前都看到过这个动画。总部位于伦敦的产品设计任务室 Kickpush 在其 404 毛病页面上也很好地结合了本人的优势。

简复杂单的几个字,让你第1工夫晓得了毛病信息。同时,背景还有1个十分着名的 Gif 动画 —— 经典黑色幽默立功电影《低俗小说》其中的配角文森特・维嘉(Vincent Vega)迷路的 Gif 动画。老实说,这个 Gif 动画真的十分应景。

404 毛病页面,实际上是1个向用户展现本身创意的时机。虽然出了1个成绩,但是从另外一个角度来讲,其它方面都没有成绩。把毛病页面当作着陆页来设计,说不定还可以帮你推行品牌,并且进步转化率。

发表评论

电子邮件地址不会被公开。 必填项已用*标注