404错误页面应该包含哪些元素?
不同品牌,可以适用不同的404错误页面元素。基本上,我建议包括以下7种内容:
错误信息
你需要让用户在第一时间知道无法找到他们正在访问的这个页面。
品牌Logo
承认自己的错误,即便有时候这个错误并不是你导致的。值得注意的是,最好在404错误页面的核心位置确保用户能看到你的品牌Logo。
品牌定位
同时,确保404错误页面和你的品牌定位相匹配。
一丝安慰
一丝安慰,虽然并不算什么,但在404错误页面这种情况下,总是会受到用户青睐的。只不过,你不能太夸张。
链接至相关内容
在404错误页面上,你可以添加3至4个可能会让用户感兴趣的链接。无论如何也不要选择让用户直接走掉,即便是在404错误页面上。
行为召唤
还记得前文说过,要把404错误页面当作着陆页来设计吧。所以,不妨加入一些着陆页设计逻辑:在页面添加一些“下载”、“注册”甚至“搜索框”等元素,让用户在遭受“挫折”同时可以有更好的选择。
简而不减
谁都不愿意打开404错误页面,却像点开了一部在线小说的感觉。此外,404错误页面也不应该像百度搜索的结果页面。你根本不需要那么多的文字。
7种炫酷十足的404错误页面设计
许多品牌404错误页面的设计风格,都是中规中矩的,而且大多数没有一点创意。我们肯定希望能看到哪怕有一丝不同的错误页面。以下,我总结了大概7种受用户青睐的404错误页面设计。
高概念、具有视觉冲击的404错误页面:Huemor
总部在纽约的网站设计公司Huemor的404错误页面,背景是一张带有上个世纪50年代科幻大片的图片。背景图上的火箭人正在全力冲向外太空。
“啊!看起来好像已经到达了宇宙的尽头。赶紧回来吧,勇敢的探索者!”
播放视频内容的404错误页面:Nectafy
专注内容运营的网站Nectafy的404错误页面就非常有趣。当你进入404错误页面后,这个网站会通过一段文字提示告诉你错误信息,同时向你推荐了一个视频。
这个视频是一个原创的MV短片。通过改写U2乐队的一首歌,填入新的歌词,而歌词大意基本上就是告诉你,你现在打开了错误页面,不要难过,你可以通过这个404页面上的搜索框和其它链接跳转查找你感兴趣的内容。
这种404错误页面非常有创意,而且这个想出这个创意的人把他的家人都请来演这部MV,自弹自唱这首原创歌曲。
让人思考的404错误页面:Medium
著名的在线写作阅读平台Medium的404错误页面设计非常简约,进入这个页面就有一个硕大的黑体“404”字样映入眼帘。除了这个主要信息外,还有一个显眼的搜索框,3篇关于页面错误的文章链接。这种设计也非常有想法!
设计可爱的404错误页面:Github
软件项目托管平台Github的404错误页面就非常有意思,加入了动画元素,设计非常可爱。同时,当你用鼠标将箭头放置在卡通人物上方时,还能看到一种视差效果。此外,Github的500错误页面也值得一看!
交互型404错误页面:Canva
在线平面设计软件Canva就利用其设计方面的优势,向用户展示了一个基于交互的404错误页面。除了一句错误信息提示和一个跳转至主页的链接,剩下的只有一副打乱的拼图。找不到你想跳转的页面,不妨花一点时间玩一下拼图游戏也行。
技术宅型404错误页面:Klaus
网页开发服务商Klaus的404错误页面,完全是404错误页面中的“另类”。你在页面中基本上找不到404错误页面的基本元素——没有品牌Logo,没有行为召唤按钮,甚至都没有退出这个页面的按钮。
你好似也明白他们在传达出的信息:基本元素规则都是留给笨蛋的。
Klaus公司的404错误页面非常有趣。整个界面风格是Commodore
64(Commodore公司1982年推出的电脑型号)的载入界面。界面内容正在加载一个程序,而这个程序正在搜索你想跳转的链接。在完成搜索没有匹配结果后,页面就列出了磁盘目录,并找到两个文件名分别为FOO和BAR的文件。明白了吗?
GIF动画的404错误页面:Kickpush
Gif动画再简单不过了,你可能之前都看到过这个动画。总部位于伦敦的产品设计工作室Kickpush在其404错误页面上也很好地结合了自己的优势。
简简单单的几个字,让你第一时间知道了错误信息。同时,背景还有一个非常有名的Gif动画——经典黑色幽默犯罪电影《低俗小说》其中的主角文森特·维嘉(Vincent Vega)迷路的Gif动画。老实说,这个Gif动画真的非常应景。