如何制作优秀的404错误页面？

· 404错误

· 找不到页面

· 在此服务器上找不到请求的 URL

谈到 404 页面的整体设计，有两种选择：普通 404 页面或自定义 404 页面。 普通页面只是将以上信息抛出，不涉及设计内容。 另一方面，自定义页面需要您设计并提供选项。 要进行设计，您必须首先获得对主服务器的访问权限。 （我们不会深入探讨这一点，但您可以通过 A List Apart 了解它。）

一个好的 404 错误页面应该告诉用户在不小心输入时下一步该怎么做。 它应该提供有用的信息，帮助访问者在不离开您的网的情况下找到他们需要的东西。 （如果页面本身设计精美就更好了。）

基本所需资料

为了完全有效，404 错误页面本质上应该是简单的。 它应该解释用户遇到了一个错误（很明显），以及可以使用哪些选项离开该页面。

而且很多专业术语不应该出现在404页面上。 （否则不会把用户吓跑。） 事实上，即使是标题“404 Error”也不应该出现在页面上404错误页面，因为很多用户不知道它是什么意思。 你应该做的是显示更有意义的信息，比如“找不到页面”。

此外，还有一些重要信息是404页面必不可少的。 总而言之，设计的关键是让用户在页面出错时继续点击浏览，而不是关闭页面。

· 突出的标题或文本向用户解释当前页面出现的原因。 看到您打开的网页不是您所期望的，这很烦人。 一定要让用户知道他们在错误的页面上，但他们登陆的网是好的。

· 搜索。 在 404 错误页面上提供与网其余部分相同（并在同一位置）的搜索功能。 这允许用户自己找到他们想要访问的页面。

· 链接到主页和点地图。 此设计元素可以包括与网其余部分协调的标题或页脚。

· 其他简化信息。 建议去除复杂的导航功能。 如果用户登陆错误页面，您只需提供一些指向正确位置的选项。 如果选项太多，会给用户带来更多的头痛或困惑。

· 添加显眼的操作提示。 告诉用户下一步要做什么。

使 404 页面有用

在考虑 404 页面时，设计过程的一个重要部分是它的目的。 包括使页面既美观又实用的功能。

Google 的网管理员工具提供了一系列有用的建议，帮助您了解在您的自定义 404 页面中包含哪些信息。 这些建议包括：

· 明确告知用户无法找到他们要查找的页面。 语言应该是友好和吸引人的。

· 404 错误页面应该与点其余部分的外观相匹配。

· 考虑在其中包含指向热门文章或帖子的链接。

· 为用户提供报告不良链接的渠道。

让网络服务器在收到对缺失页面的请求时返回实际的 404 HTTP 状态代码，这样它就不会出现在搜索结果中。

· 使用 Enhance 404 工具在自定义 404 页面中嵌入搜索框。

· 使用地址更改工具通知谷歌网操作。

除了上述之外，还有一个给设计师的提示：发挥创意。 在技​​术允许的范围内，404 页面不一定很无聊。

设计一个有目的的 404 页面

在考虑 404 错误页面的设计时，您应该首先考虑它与网其余部分的直接联系。 您的整体网设计的氛围和基调是什么？ 404页面怎么匹配呢。

一个好的错误页面应该与它所在的网无缝协作。 如果您的网具有明亮幽默的基调，那么您的 404 页面也应该如此。 此外，颜色和图形的使用也应与网保持一致。 但是在设计的过程中，一定要注意不要把错误的页面归咎于用户。 （这种情况比你想象的更频繁。）

错误页面的设计应该是整体设计方案的一个组成部分。

· 保持设计的一致性。 使用与网其余部分相同的颜色、字体和图形样式。

· 保持品牌标识。 使用相同的徽标、标题和页脚处理方式将有助于用户识别您的网。

· 保持视觉上的简单。 对于错误页面，少即是多。

· 不要让用户滚动鼠标。 设计应限于一个屏幕。

· 不要使用太多噱头。 虽然保持与整个网和品牌相同的基调和感觉是个好主意，但过多的内容会让用户忘记他们要找的东西。

·道歉。 当用户登陆错误页面时，你道歉绝对没问题。

· 如果您的网需要登录，可以添加登录功能。 （是否是用户需要登录导致的错误？）

· 要有创意，或者要好玩。 不要忘记先测试页面。 确保所有用户都能理解您的设计。

· 如果你使用短语“404 error”，你应该添加一行文字告诉用户它的意思，或者他们接下来应该做什么。

12个优秀例子

当你遇到一个好的 404 错误页面时，会有一种特别的感觉。 它减轻了坏链接的烦恼。 下面的 12 页一定会让您流连忘返。

越轨艺术

演出大师

i文件夹链接

乐高

跛行鱼

马格特

美泰

时尚布料

美国国家公共电台

史蒂夫·兰伯特

标题派

托比

终于

要使错误设计的页面变得有趣和富有创意，这很难404错误页面，但并非不可能。 设计一个好的 404 页面需要您将简单性、实用性和设计才能结合起来。

关于 404 错误页面的设计，我还遗漏了什么吗？ 您曾经创建过很棒的 404 页面吗？请给我们留言

投稿邮箱：29015977368@qq.com（一经录用，将发送51RGB教程）

想认识志同道合的朋友一起学习web

加入我们的学习Q群190166743

学习资源丰富，周一至周四免费直播公开课

限 时 特 惠： 本每日持续更新海量各大内部创业教程，一年会员只需98元，全资源免费下载 
优惠码（不再需要）： xnbaoku