404页是网站的一个死胡同。进入这个错误页面可能会给读者带来不好的用户体验。这可能会导致他们不满意地回到你的主页,或者访问其他竞争对手的网站,或者更糟的是,完全避开你的网站。
毫无疑问,这些情况是应该避免的,但却发生在更好的网站上。
所以我们会通过404页(是什么,为什么会这样),如何处理,最后给你看漂亮的例子,让你对一个有效的404页的样子心中有数。
理解404错误首先,从我们的指南开始,我们先来了解一下404页,它会在什么时候出现。
是什么?
用技术术语来说,404错误消息表示客户端可以与服务器通信,但服务器找不到请求的内容。
换句话说,网站无法找到访问者正在搜索的内容。
什么时候会发生?
在下列情况下可能会出现错误404:
页面已从网站上删除。页面已转移到新URL,而没有重定向旧的URL。URL已重命名。访客输入了错误的URL。由于维护或服务器升级,暂时无法访问该页面或文件。这些只是404消息的众多原因中的一部分。
当用户登录404页面时,很有可能会立即离开你的网站。这会增加你网站的跳出率,影响你的搜索排名,更不用说会失去潜在的固定访客。网页设计的技巧和例子404 https://www.aaa-cg.com.cn/? wkc
创建有吸引力的自定义404页面。作为设计师,这是你更好的地方。你可以减少访问者糟糕的用户体验,帮助他们到达他们想去的地方。
但是在探索自定义404页面有效的原因之前,我们应该首先讨论为什么我们首先需要它。
为什么这么重要?1.它可以帮助不开心的游客。在所有原因中,这是最重要的。
当然,当你打开一个网站链接时,你会经历一些有趣的事情,然后繁荣,有一个404错误信息告诉你,它不再可用。
还记得这种感觉吗?这是你的访问者在你的网站上体验时的感受。这就是为什么有一个自定义的404页面很重要,它可以帮助他们到达他们想去的地方,否则他们很快就会离开你的网站。
2.这是一个展示你网站个性的机会。想象一下,你的访问者将被带到一个只包含这张图片的页面。不仅表现出无聊的设计,而且肯定会让他们感到困惑、失望或者明显的恼火。
您可以通过拥有自己的自定义404页面来避免或至少缓解这种情况。它会告诉你网站所有内容的线索。
我们创建自定义404页面的主要目的是防止访问者离开您的网站,或者至少减轻他们的麻烦和不太好的体验。
参与定制404页面的基本元素。1.友好的错误消息你不希望访问者看到一页的术语,这些术语很难理解。这会让他们感到困惑,甚至恐慌,他们会立刻去浏览器的“后退”按钮。
相反,我们应该传达人类的信息,比如“哦,哦”和“喜欢”。甚至可以为了一句“对不起”之类的道歉来表达不好的体验。
带有简单信息的404页示例:
RPZ
2.搜索栏你的搜索栏只会给访问者提供一个选项,让他们在不离开的情况下继续浏览你的网站(找到他们要找的东西)。它必须放在一个容易看到的地方,并有鼓励他们使用的信息。
带有搜索框的404页面示例:
MailChimp
3.其他有用的链接难道你不希望访问者在404页登陆后离开你的网站吗?将它们指向网站中的其他位置。你的主页,关于页面,作品集,热门/最近的帖子和档案是帮助他们重新吸引你的网站的良好开端。
以简洁的方式添加这些链接,以便可以使用一些有用的链接。
带有有用链接的404页面示例:
五福
4.联系信息此外,通过在404页添加联系链接,访问者可以与您取得联系。他们可以通过这里的断链提交报告,这对你很有帮助,因为你可以知道问题并采取措施。
这也可以帮助他们表达他们的担忧和抱怨。在某种程度上,这可能是他们从不愉快的经历中释放情绪的一个出口。
带有联系人/报告选项的404页示例:
愿景
5.类似于你的网站对于大多数用户来说,默认的404消息是普通的,丑陋的,令人不安的。仅此一点就足以为您的站点创建一个自定义错误页面。
但是,在这样做的时候,要确保它的设计看起来仍然是网站的一部分。这将减轻他们的困惑和沮丧。
它应该包含相同的颜色主题、徽标和网站的主导航,让他们感觉自己仍然在页面上,而不是被扔进404 void的白色世界。
类似其网站的404页示例:
DeviantArt[/s2/]
44页创意范例现在您已经掌握了404自定义页面,是时候展示一些具有惊人美学设计的创意示例了。并了解每个示例中使用了哪些元素。
Universe.com
它是宇宙事件的社会市场。它的404页设计有各种颜色的气球背景图案。这使得错误页面不那么吓人,更容易处理。它使用简单的消息,并提供到其支持中心和主页的链接。而且,它的logo还在顶部中央。
Agens
Agens的设计显示,一名宇航员在Tai 空丢失了“404”标志。它仍然保留其标题栏,其中包含其标志和其他导航链接。它还让游客可以选择检查他们的其他项目。
Fortysevenmedi ***
这里的47家媒体向我们展示了一个简单的设计也可以让404页面不那么具有威胁性。《404》中的版面设计与其网站的标准设计相似——充满橘色、咄咄逼人的劣质质感让它看起来像是网站的一部分。它还保留了它的导航条,并包括到它的产品组合的链接,关于网页和博客。
404
在这里,您将获得一个包含各种背景动画的404模板包。它包含一条友好的、道歉的消息,后面是一些选项,供您使用搜索框返回主页。
Fork-cms.com
Fork就是一个很好的例子, *** 类似网站设计的错误页面。它通过使用网站的配色方案、背景图片和吉祥物来充分利用其品牌。
Us.blizzard.com
暴雪幽默地展示了一个破碎的屏幕来比喻破碎的链接。虽然导航条看起来有故障,但还是可以正常使用的。
动画动物
这个高级模板包是纯CSS内置的,所以加载速度非常快。它包括2种动物(狗和猫头鹰),具有独特而有趣的悬停动画。
摘要在一个有大量内容的网站中,几乎不可能避免断开或丢失链接。但这并不意味着我们对此无能为力。
检查我们上面分享的元素和例子,帮助你的访问者在遇到404页面时避免走进死胡同。通过为他们提供令人愉悦的美学设计和其他选择,帮助他们找到自己需要的东西,从而扭转局面。
如果你想学习或者提高设计,可以来AAA教育。
相关建议:
Vi手册中的通用尺寸标准
掌握B端系统图标设计的四个步骤
UI设计师的工作内容是什么?
如何在UI设计中运用布局设计?
你听说过孟菲斯配色吗?可能听说过?