文章目录[隐藏]

• 了解404错误
• 创建一个有吸引力的自定义404页面。
• 为什么这么重要？
• 参与定制404页面的基本要素。
• 1.友好的错误消息
• 2.搜索栏
• 3.其他有用的链接
• 4.联系信息
• 5.类似于你的网站
• 44页创意示例
• 摘要

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页示例:

说我们通常所说的

2.搜索栏

你的搜索栏只会给访问者提供一个选项，让他们继续浏览你的网站(找到他们要找的东西)，而不会离开他们。它必须放在一个容易看到的地方，并添加一条鼓励他们使用它的信息。

带有搜索框的404页面示例:

MailChimp

3.其他有用的链接

难道你不希望访问者在404页登陆后离开你的网站吗？将它们指向网站中的其他位置。你的主页、相关页面、作品集、热门/最近的帖子和档案是帮助他们再次吸引你的网站的良好开端。

以简洁的方式添加这些链接，这样你就可以使用一些有用的链接。

包含有用链接的404页示例:

五福

4.联系信息

此外，访问者可以通过在404页面上添加联系链接来与您取得联系。他们可以通过这里的断链提交报告，这对你很有帮助，因为你可以知道问题并采取行动。

这也可以帮助他们表达他们的担忧和抱怨。在某种程度上，这可能是他们从不愉快的经历中释放情绪的一个出口。

带有联系人/报告选项的404页示例:

视力

5.类似于你的网站

对于大多数用户来说，默认的404消息是普遍的，丑陋的，令人不安的。仅此一点就足以为您的站点创建一个自定义错误页面。

但是，在这样做的时候，请确保它的设计看起来仍然是网站的一部分。这将减轻他们的困惑和沮丧。

它应该包含网站相同的颜色主题、徽标和主导航，让他们感觉自己仍然在页面上，而不是被扔进404 void的白色世界。

一个404页的例子类似于它的网站:

非正常艺术

44页创意示例

现在您已经掌握了404自定义页面，是时候展示一些具有惊人美学设计的创意示例了。享受每个例子中用到的元素。

Universe.com

宇宙是事件的社会市场。它的404页设计有各种颜色的气球作为背景。这使得错误页面不那么令人畏惧，也更容易处理。它使用简单的消息，并提供到其支持中心和主页的链接。而且，它的logo还在顶部中央。

Agens

Agens的设计显示，一名宇航员在太空中丢失了“404”标志空。它仍然保留其标题栏，其中包含其标志和其他导航链接。它还为访问者提供了检查其他项目的选项。

Fortysevenmedia.com

这里的47家媒体向我们展示了一个简单的设计也可以让404页面不那么具有威胁性。《404》中的版面设计与其网站的标准设计相似——充满橘色、糜烂的劣质纹理让它看起来像是网站的一部分。它还保留了它的导航栏，并包括指向其产品组合、页面和博客的链接。

404

在这里，您将获得一个包含各种背景动画的404模板包。它包含一条友好的、道歉的消息，后面是一些选项，供您使用搜索框返回主页。

Fork-cms.com

Fork就是一个很好的例子，让错误页面类似于网站设计。它通过使用网站的配色方案、背景图片和吉祥物来充分利用其品牌。

Us.blizzard.com

暴雪幽默地展示了一个破碎的屏幕来比喻破碎的链接。虽然导航条看起来有故障，但还是可以正常使用的。

动物动画

这个高级的模板包是用纯CSS内置的，所以加载速度非常快。它包括两种动物(狗和猫头鹰)，具有独特有趣的悬停动画。

摘要

在一个有大量内容的站点中，几乎不可能避免链接断开或丢失。但这并不意味着我们对此无能为力。

检查我们上面分享的元素和例子，帮助你的访问者在遇到404页时避免走进死胡同。通过为他们提供令人愉悦的美学设计和其他选择，帮助他们找到自己需要的东西，从而扭转局面。

如果你想学习或者提高设计，可以来AAA教育。

相关建议:

Vi手册中的常用尺寸标准

四步掌握B端系统的图标设计

UI设计师的工作内容有哪些？

如何在UI设计中运用布局设计？

你听说过孟菲斯配色吗？可能听说过？