如何为您的用户创建出色的 404 页面
已发表: 2021-11-04到达 404 页面并不是一种愉快的体验。 但是您可以采取一些措施来确保这不是用户对您网站的最终体验。
要设计一个出色的 404 页面，您需要知道哪些元素对用户最有用，并且可以帮助您的页面脱颖而出。
下面列出了6 个功能，可帮助您充分利用 404 页面。
什么是 404 代码？
404 是找不到页面时出现的 HTTP 状态代码之一。
404属于4xx组，表示是客户端错误。 更具体地说，这意味着客户端到达了您的服务器，但服务器没有找到请求的文件。
404 代码的出现可能有多种原因，例如：
- 页面被删除，
- 用户在输入 URL 时打错了字，
- 指向该页面的链接不正确。
无论 404 代码的原因是什么，用户都将无法访问该页面，因为它根本无法找到。
用户将看到的页面而不是丢失的页面在您的控制中。 您的选择包括：
- 标准 404 页面，或
- 自定义 404 页面。
一个标准的、未自定义的 404 页面可能包含一段简单的白色背景文本，上面写着“未找到”。 您的服务器会自动生成此页面。
另一方面，您可以选择自定义您的 404 页面——将其设计为适合您网站的其余部分并选择您想要包含的元素。
为什么要构建自定义 404 页面
精心设计的自定义 404 页面对用户和您的业务都有好处。
当用户进入标准的 404 页面时，他们只知道出了点问题，页面没有找到。 他们不知道发生了什么，也不知道接下来应该做什么。
因此，您的客户可能会在未满足其需求的情况下退出您的网站。 这远非理想。 用户对他们的搜索不满意，您失去了他们的业务。
使用自定义 404 页面，您可以将默认的无用页面更改为对用户和您的业务都有用的页面。
自定义 404 页面允许您：
- 帮助用户找到他们正在寻找的信息，
- 鼓励用户浏览您的页面，
- 展示您品牌的声音和创造力。
此外， Google 建议创建自定义 404 页面。
如果您有权访问服务器的配置文件，则可以通过自定义这些错误页面使它们对用户有用。 一个好的自定义404页面可以帮助人们找到他们正在寻找的信息，还可以提供其他有用的内容来鼓励人们进一步探索您的网站。来源：谷歌
引用清楚地表明，谷歌认为自定义 404 页面对用户有帮助，并鼓励网站所有者自定义他们的 404 页面。
如何构建出色的自定义 404 页面
即使您完全自定义了 404 页面，也要确保服务器仍然返回 404 HTTP 状态代码。 设置 200 代码是一种不好的做法，当页面实际上不存在时，表明响应成功。
在决定在 404 页面上包含哪些内容时，基本要素之一是一条消息，明确指出这是一个错误页面。 以友好和直接的方式通知用户出现问题。
但这仅仅是开始。 以下是您可以添加到自定义 404 页面以使其更有用的主要功能：
- 一个搜索栏，
- 您网站上可用的资源列表，
- 一个 CTA 按钮，
- 链接到您的热门内容，
- 与您的品牌保持一致的设计。
一个好的 404 页面的关键是它对用户的有用性。 您不需要包含上面列表中的所有元素 - 只需包含可以帮助您的用户在您的网站上找到自己的方式的元素。
清除错误信息
一个好的 404 页面应该始终包含一个明确的信息，表明它是一个错误页面。 无论您选择哪种设计，您都应该始终让用户知道出现问题并且找不到页面。
宜家在这方面做得很好。 它们提供了一个清晰的信息，包括 404 代码和一个简短的解释，使用户易于理解。
搜索栏
搜索栏允许寻找特定内容的用户再试一次，并在您的网站上搜索他们正在寻找的内容。
带有搜索栏的 404 页面的一个很好的例子是Moz.com：
因此，如果您在 Moz.com 上寻找特定内容但没有找到，您可以在 404 页面上再次查看。
资源清单
如果用户最终进入了 404 页面，但没有想在搜索栏中输入特定的内容，您可以提供可以在您的网站上找到的资源列表。
Backcountry有一个自定义 404 页面，其设计简单，适合网站和基本页面列表。
此页面不仅对用户有帮助，而且还允许 Backcountry 展示其内容并鼓励人们浏览该网站。
包含资源列表的 404 页面的另一个示例是Tripadvisor。 带有一点幽默感和四个简单的按钮，Tripadvisor 提供了一个简单的选项来浏览用户可能最感兴趣的部分。
号召性用语按钮
通过包含 CTA 按钮，您可以向用户展示他们可以采取的下一步行动。
CTA 按钮最简单的用法是将用户引导至您的主页。 一种为用户提供指导的简单而有效的方法。
以下是Netflix 的 404 页面示例，其中包含指向其主页的 CTA 按钮。
另一种解决方案是包含一个“联系我们”CTA 按钮。 例如，如果用户提出了一个特定问题并且 404 页面无法获得答案，他们可能希望与您联系以询问详细信息。
用户也可以使用“联系我们”选项向您报告错误。
Kinsta包括“主页”和“联系我们”按钮。 用户可以浏览网站或与公司取得联系。 因此，它为想要浏览网站或找到特定问题答案的人提供了解决方案。
CTA 按钮应该可以帮助您的用户，但也适合您的业务目标。 例如，您可以包括留下电子邮件和订阅时事通讯的选项。
9gag使用其 404 页面来鼓励人们下载其应用程序。 添加背景 gif 非常适合 9gag 风格。
顶级内容的链接
您的热门内容最有可能让用户保持参与。 它使您有机会在用户离开您的 404 页面之前抓住他们的注意力。
指向您最受欢迎的内容的链接对电子商务网站特别有益，因为您可以在一个页面上推广您最畅销的产品，否则这有点死胡同。
Urban Outfitters 的网站上展示了一个展示热门内容的 404 页面的绝佳示例。 它有一个“最受欢迎”部分，可以立即购买这些物品。
品牌标识
通过自定义您的 404 页面并将其与您的网站设计保持一致，您可以表明您真正关心客户通过您的网站的整个旅程。
404 页面可以显示您品牌的基调和个性。 符合网站风格的创意设计可以让人们微笑，甚至可能鼓励他们与朋友分享页面。
皮克斯在 404 页面上使用了它的知名角色之一。 尽管该页面没有提供广泛的导航功能，但图形和温馨的信息与品牌风格完美契合。
除了“带我回家”按钮外， Canva还包含一个小谜题供用户欣赏。 它的创造力和独特性在其他页面中脱颖而出。 这是标准 404 页面的有趣替代品。
包起来
不要让您的用户独自使用标准的 404 页面。
永远不应该让用户不知道发生了什么以及他们接下来应该做什么。
相反，努力在您的网站上创造良好的体验。 这包括错误页面。